/* ==========================================================================
   INDUSTRIES — titanium rotating mosaic
   ========================================================================== */

#industries {
  padding-bottom: 56px;
}

/* Eyebrow/title/lede used to sit outside .industry-composition, above the
   box — now they're the first thing inside it (see index.html), so the
   heading and the mosaic read as one continuous framed section instead of
   free-floating text over a separate box underneath. */
.industry-composition__head {
  text-align: center;
  margin-bottom: 40px;
}

.industry-composition {
  position: relative;
  /* No own max-width — fills the same box every other section on the page
     uses (.section__inner, max-width:1520px), instead of a narrower
     one-off 1180px frame. */
  --industry-gap: 12px;
  --industry-frame-pad: 28px;
  /* Wide cards are exactly 16:9 and the feature card is exactly 9:16 (see
     aspect-ratio on .industry-card--wide / .industry-feature below) — this
     is the feature-column width, as a % of the composition's own width,
     that makes the feature's aspect-ratio-driven height land on the same
     total height as 3 stacked 16:9 wide cards + their gaps, so neither
     column has to stretch/crop to match the other. Solved algebraically
     from: Wf*16/9 = 3*((W-Wf-2*gap)/2 * 9/16) + 2*gap. */
  --industry-feature-w: 32.2%;
  padding: var(--industry-frame-pad);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .02) 1px, transparent 1px),
    radial-gradient(110% 115% at 0% 0%, rgba(230, 238, 244, .075), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01) 38%, rgba(0, 0, 0, .18)),
    #070808;
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto,
    auto;
  border: 1px solid rgba(225, 231, 236, .2);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  overflow: hidden;
}

.industry-composition::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 21px;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .07) 34%, transparent 56%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 14px);
  opacity: .34;
  pointer-events: none;
}

.industry-mosaic {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--industry-feature-w) minmax(0, 1fr);
  align-items: start;
  gap: var(--industry-gap);
}

.industry-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--industry-gap);
  min-width: 0;
}

.industry-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(110% 130% at 15% 0%, rgba(255, 255, 255, .12), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
  border: 1px solid rgba(225, 231, 236, .12);
  isolation: isolate;
  min-width: 0;
}

.industry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5, 6, 7, 0) 0%, rgba(5, 6, 7, .2) 34%, rgba(5, 6, 7, .88) 100%),
    radial-gradient(90% 80% at 18% 82%, rgba(0, 0, 0, .35), transparent 58%);
  pointer-events: none;
}

.industry-card:hover {
  border-color: rgba(246, 249, 252, .34);
}

.industry-feature {
  display: block;
  aspect-ratio: 9 / 16;
  min-height: 0;
  border-color: rgba(234, 239, 244, .2);
}

.industry-feature__eyebrow {
  margin: 0;
}

/* Scoped with the parent class (2 classes) — a bare `.industry-feature__panel`
   loses to cards.css's shared `.dh-card--media > :not(img):not(picture):not(video)
   { position: relative; z-index: 2 }` (1 class + 3 :not() type-args beats 1
   class), which silently knocked this back into normal flow. In-flow, it
   became the first visible box in the card (the image is absolute, out of
   flow), so it rendered as a solid block stacked above the photo instead of
   overlaying its bottom edge — the "extra layer" with text pinned to the
   top. Also dropped its own background gradient: the shared `.industry-card
   ::before` scrim already darkens every card's bottom edge for legibility,
   so a second panel-only gradient on top of it was redundant and read as
   its own separate dark slab rather than text sitting on the photo. */
.industry-feature .industry-feature__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 5;
  display: block;
  padding: 24px;
  background: none;
}

.industry-card--wide,
.industry-card--cta {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.industry-card .industry-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  transform: scale(1.04);
  opacity: .92;
  filter: grayscale(1) saturate(.04) contrast(1.12) brightness(.68);
  transition:
    transform 760ms cubic-bezier(.2, .9, .2, 1),
    filter 1100ms cubic-bezier(.22, 1, .36, 1),
    opacity 260ms ease;
}

/* The source photo is already nearly the same aspect ratio as this 9/16
   card, so at the base transform:scale(1.04) there's barely any overflow
   to pan across — object-position alone can only nudge the crop a few
   pixels. Scaling up further first gives real room to shift the framing
   left without cropping the chef/plate/guest out of frame. */
.industry-feature .industry-card__img {
  object-position: 28% center;
  transform: scale(1.18);
}

.industry-card--wide .industry-card__img {
  transform: scale(1.01);
}

.industry-feature > .industry-feature__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industry-feature__panel .industry-card__eyebrow {
  margin-bottom: 10px;
}

.industry-feature__panel .industry-card__title {
  margin-bottom: 8px;
}

.industry-feature__panel .industry-card__copy {
  margin-top: 0;
}

.industry-card.is-loaded .industry-card__img {
  opacity: 1;
  filter: grayscale(0) saturate(.82) contrast(1.08) brightness(.78);
}

.industry-card:hover .industry-card__img {
  transform: scale(1.055);
}

.industry-feature:hover .industry-card__img {
  transform: scale(1.075);
}

/* opacity:.2 here used to drop the image nearly transparent mid-swap,
   exposing .industry-card's own placeholder background/scrim underneath —
   a flash of bare box where the photo should be, on every card, every
   rotation. Keeping opacity high and only dipping the filter reads as a
   photographic flicker instead, and the image itself never disappears. */
.industry-card.is-switching .industry-card__img {
  opacity: .88;
  filter: grayscale(1) saturate(.02) contrast(1.12) brightness(.58);
}

.industry-card .industry-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
}

.industry-card__eyebrow,
.industry-card__title,
.industry-card__copy,
.industry-card__meta,
.industry-card__link {
  transition: opacity 240ms ease, transform 360ms cubic-bezier(.2, .9, .2, 1);
}

.industry-card.is-switching .industry-card__eyebrow,
.industry-card.is-switching .industry-card__title,
.industry-card.is-switching .industry-card__copy,
.industry-card.is-switching .industry-card__meta,
.industry-card.is-switching .industry-card__link {
  opacity: 0;
  transform: translateY(8px);
}

.industry-card__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(232, 236, 240, .74);
  margin-bottom: 9px;
}

.industry-card__title {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  line-height: 1;
  letter-spacing: 0;
  color: #f4f6f8;
  margin: 0;
  text-wrap: balance;
}

.industry-feature .industry-card__title {
  font-size: 2.15rem;
}

.industry-card__copy {
  margin: 8px 0 0;
  max-width: 32ch;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: rgba(225, 230, 235, .78);
}

.industry-card__meta {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(232, 236, 240, .84);
}

.industry-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 11px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(235, 240, 244, .62);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: rgba(248, 250, 252, .94);
  text-decoration: none;
}

.industry-card__link:hover {
  color: #fff;
  border-color: #fff;
}

.industry-card--wide .industry-card__copy {
  max-width: 30ch;
  font-size: 11px;
  margin-top: 7px;
}

.industry-card--wide .industry-card__link {
  margin-top: 8px;
}

.industry-card--cta {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, .38), transparent 23%),
    linear-gradient(135deg, rgba(229, 234, 238, .28), rgba(130, 140, 148, .16) 38%, rgba(16, 18, 20, .94) 100%),
    #0b0d0f;
  border-color: rgba(235, 240, 244, .22);
}

.industry-card--cta::before {
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 255, 255, .18), transparent 22%),
    linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .64));
}

.industry-card__cta {
  position: relative;
  z-index: 5;
  height: 100%;
  min-height: 0;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #eef2f5;
}

.industry-card__cta-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  font-size: 22px;
  line-height: 1;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(8, 10, 12, .48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 12px 26px rgba(0, 0, 0, .34);
}

.industry-card__cta-title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  line-height: 1.02;
  letter-spacing: 0;
  color: #fff;
}

.industry-card__cta-copy {
  margin: 10px 0 0;
  max-width: 27ch;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.45;
  color: rgba(235, 240, 244, .76);
}

.industry-card__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 14px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(239, 243, 247, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.industry-card__cta-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .48);
}

/* Every card sizes itself purely from its own aspect-ratio (9:16 feature,
   16:9 wide/cta) now, so no breakpoint below needs to hand-set a height —
   only the column/row arrangement and text sizing change. */
@media (max-width: 1180px) {
  .industry-composition {
    --industry-feature-w: 100%;
  }

  .industry-mosaic {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .industry-composition {
    --industry-gap: 12px;
    padding: 12px;
    border-radius: 24px;
  }

  .industry-composition::before {
    border-radius: 23px;
  }

  .industry-card-grid {
    grid-template-columns: 1fr;
  }

  /* Single column below this width, so nothing else needs the CTA card's
     height to match a neighboring row anymore — free it from the 16:9 cap
     it shares with the photo cards. At 16:9 its own content (icon, title,
     copy, button) was taller than the box, and .industry-card__cta's
     justify-content:center on an overflow:hidden card clipped icon and
     button off both the top and bottom edges equally. */
  .industry-card--cta {
    aspect-ratio: auto;
    min-height: 260px;
  }

  .industry-feature .industry-card__title {
    font-size: 2.25rem;
  }

  .industry-card__title,
  .industry-card__cta-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 520px) {
  .industry-feature__panel,
  .industry-card .industry-card__overlay,
  .industry-card__cta {
    padding: 20px;
  }
}