/* =========================================================
   CASE STUDY CLOSING TAG

   The project badge (title, TNM code, project/category/year)
   relocated from the hero to the end of the image sequence,
   after the pull quote, where it reads as the closing frame.

   This is the SAME component: same markup, same embed styles,
   same script, same CMS source spans. Only the wrapper class
   and the ground behind it are new.

   The hero copy used .case-study-hero-badge, which the Webflow
   bundle sets to position:absolute / inset:0 / z-index:9000 /
   overflow:hidden so it could overlay the hero video. The
   relocated copy is renamed .tnm-tag__badge so none of that
   positioning follows it into the gallery grid.

   Type and colour need no declaration here: .cc-badge inside
   the block already sets "Roboto Mono" and --color--white.
   ========================================================= */

/* The gallery is a 6-column grid of 3:2 tiles. A tile is far too
   small for this composition (the title alone sets at ~6vw), so
   the tag takes a full row as the sequence's final frame. */

.tnm-tag-item {
  grid-column: 1 / -1;
}

.tnm-tag-wrapper {
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color--red, #cb2828);
  color: var(--color--white, #fff);
}

.tnm-tag__badge {
  /* Release the hero overlay geometry. */
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  width: 100%;
}

/* Height stays natural. Forcing a definite height would stretch the
   layout's bottom grid row, spreading the PROJECT/CATEGORY/YEAR rows
   and making syncLowerIconHeight() scale the hexagon marks up to match,
   which dwarfs the composition. The hero centred the badge at content
   height; so does this. */

/* ---------------------------------------------------------
   MOBILE: keep the metadata inside the frame

   The component pins the detail rows to one line
   (white-space: nowrap) and sizes them for shorter CMS values:
   clamp(0.70rem, 2.7vw, 0.98rem) under 767px, and
   clamp(0.64rem, 2.85vw, 0.84rem) under 479px.

   "BRAND PARTNERSHIP CAMPAIGN" is the longest value in the set
   (Archer Roose + Princess) and at 375px it rendered 180px wide
   into a 160px column, overrunning the panel edge by 8px and
   clipping to "...CAMPAIG".

   Stepping the detail type down fixes it twice over: the value
   gets narrower AND the max-content label column ("CATEGORY:")
   shrinks with it, handing the value column the difference.

   Sized at 2.2vw, not 2.45: at 2.45 Good Spirits'
   "DESTINATION STORYTELLING" landed with exactly 0px of margin at
   375px, which is no margin at all once a font fallback shifts
   metrics.

   The title needs nothing -- the component's own
   fitMobileProjectTitle() already scales it to fit.
   --------------------------------------------------------- */

@media (max-width: 767px) {
  .tnm-tag__badge .tnm-meta__label,
  .tnm-tag__badge .tnm-meta__value {
    /* Floor must stay below 2.45vw at 320px (7.84px) or the clamp stops
       shrinking and clips again -- that is exactly what 0.5rem did. */
    font-size: clamp(0.45rem, 2.2vw, 0.9rem);
  }
}