/* ============================================================
   /work — category label beside each thumbnail
   Pairs with work-thumb-labels.js
   ============================================================ */

/* The category now lives on the rail, not stacked above the title -
   but only where the rail is the vertical column that has room for
   labels. Below that the labels are hidden (see the bottom of this
   file), so the original heading has to stay or the category would
   disappear entirely. */
@media screen and (min-width: 992px) {
  .hero-content .heading.works.transparent {
    display: none;
  }
}

/* The rail is a 70px column pinned to the right edge, so the label
   has to hang off the left of each thumbnail rather than sit inside
   it or push the rail wider. */
.thumbnail-image-wrapper {
  position: relative;
}

.thumbnail-rail {
  /* Tune the label size here. Scales with the viewport between the
     two bounds; the slider's own headings are 104px, so these stay
     clearly subordinate to the project title. */
  --category-label-size: clamp(23px, 2.2vw, 40px);
}

.thumb-category-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 14px);
  transform: translateY(-50%);

  white-space: nowrap;

  /* Die Grotesk D - the same face as the project titles, the VIEW
     link and the original category heading. Matching its treatment
     (bold, capitalized, normal tracking) rather than the mono used
     for small technical labels. */
  font-family: var(--font-family--primary-font), "Die Grotesk D", Arial, sans-serif;
  font-size: var(--category-label-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: normal;
  text-transform: capitalize;
  color: var(--color--white, #fff);

  /* No text-shadow by request - the previous tight halo read as an
     outline around the type. Legibility now rests on size and
     opacity alone.

     Trade-off to know about: over the brightest slides (the Alaska
     glacier frame) white type on light sky is genuinely low
     contrast. If that proves too faint, the options are a single
     soft drop shadow with no halo, or lifting the opacity further -
     not the outline coming back. */
  text-shadow: none;

  /* --- hover reveal ------------------------------------------------
     Clipped to nothing by default and wiped open left-to-right on
     hover. clip-path rather than width or transform: the text stays
     at its final position and typographic size the whole time, so
     nothing reflows or scales - only how much of it is painted.

     The current slide's label is exempt: it names what is on screen
     and has to be readable without pointing at anything. */
  clip-path: inset(0 100% 0 0);
  opacity: 0.82;
  transition:
    clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;

  pointer-events: none;
}

[data-hero-thumb].is-current .thumb-category-label,
[data-hero-thumb]:hover .thumb-category-label,
.thumb-more-work:hover .thumb-category-label,
.thumb-more-work:focus-visible .thumb-category-label {
  clip-path: inset(0 0 0 0);
}

[data-hero-thumb]:hover .thumb-category-label,
.thumb-more-work:hover .thumb-category-label,
.thumb-more-work:focus-visible .thumb-category-label {
  opacity: 1;
}

/* Touch has no hover, so a hover-gated label would simply never
   appear. Show all of them outright there. */
@media (hover: none), (pointer: coarse) {
  .thumb-category-label {
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .thumb-category-label {
    transition: opacity 0.3s ease;
    clip-path: inset(0 0 0 0);
  }
}

.thumbnail-image-wrapper.is-current .thumb-category-label {
  opacity: 1;
}

/* Narrow layouts move the rail to a horizontal strip along the
   bottom, where a label hanging off the left would collide with
   the neighbouring thumbnail. */
@media screen and (max-width: 991px) {
  .thumb-category-label {
    display: none;
  }
}

/* ------------------------------------------------------------
   Sixth rail entry: More Work

   Mirrors the CMS thumbnails (it reuses .thumbnail-image-wrapper
   and .thumbnail-image) but is a link rather than a slide, so it
   needs the interactive affordances the others don't have.
   ------------------------------------------------------------ */
.thumb-more-work {
  display: block;
  cursor: pointer;
  /* The rail's own thumbnails are opaque; hint that this one is
     a destination rather than another slide. */
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.thumb-more-work:hover,
.thumb-more-work:focus-visible {
  opacity: 1;
}

.thumb-more-work .thumb-category-label {
  /* Never dimmed by the is-current rule - it is always a link. */
  opacity: 0.85;
  pointer-events: none;
}

.thumb-more-work:hover .thumb-category-label,
.thumb-more-work:focus-visible .thumb-category-label {
  opacity: 1;
}

.thumb-more-work:focus-visible {
  outline: 2px solid var(--color--white, #fff);
  outline-offset: 3px;
}

/* Below 992px the rail is a horizontal strip and the category labels
   are hidden - but this entry is the only route to the More Work
   section, and the slider swallows swipes the same way it swallows
   the wheel, so dropping it would strand narrow-screen visitors.
   Keep it, and keep its label: centred underneath rather than hanging
   off the left, where it would collide with the next thumbnail. */
@media screen and (max-width: 991px) {
  .thumb-more-work .thumb-category-label {
    display: block;
    /* The strip sits at the bottom of the viewport, so the label goes
       above the thumbnail - below it would be cropped by the edge. */
    top: auto;
    bottom: calc(100% + 5px);
    /* Right-align to the thumbnail rather than centring on it. This entry is
       the last in the strip, hard against the right edge, so a centred label
       hung off-screen: 42px at 320px wide and still 7px at 390px. */
    left: auto;
    right: 0;
    transform: none;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.2;
  }
}

/* ------------------------------------------------------------
   /work hero — next-slide arrow

   The arrow is a raster image (Arrow.avif, 479x376 natural) that
   Webflow renders at 70px wide, which reads small on a large
   display.

   The catch: the arrow lives *inside* .thumbnail-rail, which is a
   70px-wide column, and .hero-arrow carries max-width:100% - so it
   is clamped to the rail's width no matter what width you set. The
   max-width has to be released as well.

   It is absolutely positioned against the rail's right edge, so it
   grows leftward and stays in the bottom-right corner.

   Only above 991px; below that Webflow already hides the arrow.
   Tune --hero-arrow-width to resize.
   ------------------------------------------------------------ */
@media screen and (min-width: 992px) {
  .hero-arrow {
    --hero-arrow-width: clamp(100px, 9vw, 170px);

    max-width: none;
    width: var(--hero-arrow-width);
    height: auto;
  }

  .hero-arrow .arrow-wrapper,
  .hero-arrow .arrow-wrapper img {
    width: 100%;
    max-width: none;
    height: auto;
  }
}

/* ------------------------------------------------------------
   Narrow screens: make room for the sixth rail entry

   The rail's inner list is a nowrap flex row of 55px thumbnails
   with 16px gaps. Five of those need 330px; six need 410px. The
   rail centres the list, so on a 390px phone the 410px row hung
   10px off BOTH edges -- the first thumbnail clipped on the left
   and More Work clipped on the right. At 320px it was 45px each
   side. That overflow is caused by the sixth entry, so it is this
   file's job to fix.

   Scale the thumbnails and the gap with the viewport so all six
   always fit: at 390px that is 6x48.75 + 5x8.6 = 335px, and at
   320px 6x40 + 5x7 = 275px. Both cap back at the design's 55px
   and 16px by the time there is room for them.
   ------------------------------------------------------------ */
@media screen and (max-width: 991px) {
  .thumbnail-rail .thumbnail-collection-wrapper,
  .thumbnail-rail .collection-list-4 {
    max-width: 100%;
  }

  .thumbnail-rail .collection-list-4 {
    column-gap: clamp(6px, 2.2vw, 16px);
  }

  .thumbnail-rail .collection-list-4 > .w-dyn-item,
  .thumbnail-rail .thumbnail-image {
    width: clamp(38px, 12.5vw, 55px);
  }

  /* Height must track width, NOT auto. The thumbnails are squares filled by
     object-fit: cover; height:auto let the source aspect through instead
     (390x244 sources collapsed to 49x31) while the More Work entry kept its
     own 55px, so the row came out ragged. */
  .thumbnail-rail .thumbnail-image {
    height: clamp(38px, 12.5vw, 55px);
    object-fit: cover;
  }
}