/* ==========================================================================
   KOBIL — Industries: hero (shared across the Aug 2026 net-new industry
   pages: Telecom & CSP, Gaming & Esports, Logistics, E-commerce & Delivery)
   Figma: D-Industries/<industry> → hero, e.g. node 6160:82019
   ========================================================================== */

.sec-new-industry-hero {
  /* `.page` (the `<main>` wrapper) caps at --page-max (1440px, matching
     Figma's own hero-frame width exactly) but ALSO applies --page-pad
     (40px) side padding — Figma's hero has zero margin inside its 1440
     frame, so the fix is to cancel just the padding, not break out past
     --page-max altogether: every section on the site is meant to top out
     at 1440px, this one included, just without the usual 40px inset. */
  position: relative;
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  /* Pulls the hero up underneath the floating sticky header (20px top
     padding + 80px pill = 100px at this width) so the header renders ON
     TOP of the hero's own background — matching Figma, where nav/desktop
     sits at y:30 *inside* the 754px-tall hero frame, not above it leaving
     a gap. The header's own height changes at its two breakpoints (92px
     ≤1280, 68px ≤768 — smaller top padding, and a 60px not 80px pill on
     phone), so this negative margin has matching overrides below; without
     them it overshoots the shorter mobile header and a strip of the
     hero's background peeks out above the pill instead of behind it. */
  margin-top: calc(-1 * var(--w100));
  isolation: isolate;
  overflow: hidden;
  min-height: var(--w754);
  /* The "background" layer (node 6191:87491 for Telecom, and its per-page
     equivalents) is a blurred, rotated/skewed stack of masked SVG blobs —
     not reproducible as a flat CSS gradient without visibly drifting from
     Figma (confirmed over several rounds: the blob shapes are diagonal
     bands, not simple radial falloffs, and each industry uses a DIFFERENT
     accent palette — Telecom blue/cyan, Gaming indigo/violet, Logistics
     teal/amber/bright-cyan, E-commerce teal/amber/red). Fixed for good by
     exporting the flattened composition straight out of Figma as a PNG
     (get_screenshot on the isolated background node, at its native
     1440x754) and using that as the section's background image — pixel-
     exact by construction, one static asset per page set via --hero-bg
     on the section root. Background-color is a plain white fallback. */
  background-color: #ffffff;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sec-new-industry-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--page-max);
  min-height: var(--w754);
  margin: 0 auto;
  padding: 0 var(--w91);
}

.sec-new-industry-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
  /* 528px matches Gaming/Logistics/E-commerce's "left container" — Telecom's
     is narrower (465px, shorter headline) and overrides this via inline
     style, which is what makes its H1 wrap "Stop SIM Swap / Before It
     Starts" at the same two-line break Figma has. */
  max-width: var(--content-max-width, var(--w528));
}

.sec-new-industry-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 600;
  line-height: var(--w18);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--navy);
}

.sec-new-industry-hero__eyebrow-dot {
  display: inline-block;
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: var(--navy);
}

.sec-new-industry-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--w40);
}

.sec-new-industry-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
}

.sec-new-industry-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w64);
  line-height: 1.3;
  color: var(--navy);
}

.sec-new-industry-hero__desc {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

.sec-new-industry-hero__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--w8);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  background: var(--white);
  border-radius: var(--w32);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--navy);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}

.sec-new-industry-hero__cta:hover {
  background: var(--navy-20);
}

.sec-new-industry-hero__cta img {
  width: var(--w18);
  height: var(--w18);
  transition: transform var(--dur) var(--ease);
}

.sec-new-industry-hero__cta:hover img {
  transform: translateX(3px);
}

/* ---- Photo — a fixed-proportion panel anchored to the hero's bottom
   edge, NOT bleeding past the frame's right edge (checked against Figma's
   design-context math for Telecom 6163:83383 — left:721.5/1440, width:
   550/1440, height:547/754 — and Gaming 6197:89125 — left:730/1440,
   width:532/1440, height:582/754). Position/size and the photo's own crop (object-position)
   both vary slightly per photo, so both are exposed as custom properties
   with sane defaults and overridden per page via an inline style on the
   section root where the exact Figma numbers are known. ---- */

.sec-new-industry-hero__media {
  position: absolute;
  z-index: 3;
  left: var(--media-left, 50.4%);
  bottom: 0;
  width: var(--media-max-width, var(--w545));
  height: var(--media-max-height, var(--w565));
  overflow: hidden;
}

.sec-new-industry-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, 50% 25%);
  /* Telecom's source photo is mirrored in Figma (the div wraps it in
     scaleY(-1) + rotate(180deg), which cancels out to a net horizontal
     flip, not an identity transform) — reproduced here as scaleX(-1),
     enabled per page via --photo-flip since the other three photos are
     used as-is. */
  transform: scaleX(var(--photo-flip, 1));
}

/* ---- Floating "verified" notification card ---- */

.sec-new-industry-hero__card {
  position: absolute;
  z-index: 2;
  top: var(--card-top, 46.3%);
  left: var(--card-left, 46.5%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--w280);
  padding: var(--w24);
  background: var(--white);
  border-radius: var(--w16);
  box-shadow: 0 5px 8px rgba(17, 36, 74, 0.12);
}

.sec-new-industry-hero__card-status {
  display: flex;
  align-items: center;
  gap: var(--w8);
  width: 100%;
  padding: var(--w11) var(--w13);
  background: var(--navy-30);
  border: 1px solid var(--blue);
  border-radius: var(--w8);
}

.sec-new-industry-hero__card-dot {
  flex: 0 0 auto;
  width: var(--w8);
  height: var(--w8);
  border-radius: 50%;
  background: var(--green);
}

/* Gaming/Logistics/E-commerce use a blue shield-check in the chip instead
   of the green dot (Figma 6197:89129); Telecom keeps the dot. */
.sec-new-industry-hero__card-shield {
  flex: 0 0 auto;
  width: var(--w21);
  height: var(--w21);
}

/* Line breaks that only one of the two Figma frames has (Gaming breaks
   after "Real Players." on desktop, after "Fair Play." on the phone). */
.ind-br-m {
  display: none;
}

@media (max-width: 768px) {
  .ind-br-m {
    display: inline;
  }

  .ind-br-d {
    display: none;
  }
}


.sec-new-industry-hero__card-status-label {
  font-family: var(--font-ui);
  font-size: var(--w13);
  font-weight: 600;
  line-height: 19.5px;
  color: var(--blue);
}

.sec-new-industry-hero__card-step {
  padding-top: var(--w16);
  font-family: var(--font-ui);
  font-size: var(--w13);
  font-weight: 400;
  line-height: 19.5px;
  color: var(--navy);
}

.sec-new-industry-hero__card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--w8);
  width: 100%;
  padding-top: var(--w12);
}

.sec-new-industry-hero__card-btn {
  padding: var(--w8);
  border-radius: var(--w8);
  font-family: var(--font-ui);
  font-size: var(--w13);
  font-weight: 600;
  line-height: 19.5px;
  text-align: center;
}

.sec-new-industry-hero__card-btn--secondary {
  background: var(--navy-30);
  color: var(--navy);
  box-shadow: 0 1px 1px rgba(5, 26, 48, 0.04);
}

.sec-new-industry-hero__card-btn--primary {
  background: var(--btn-blue);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Phone (≤768px) — Figma has a dedicated 393px-wide mobile frame for each
   of the 4 heroes (e.g. Telecom 6160:82464), pixel-matched below exactly
   like the desktop numbers above: its own background image, a card that
   stays visible (just smaller/repositioned) instead of hidden, and —
   important reversal from desktop — the photo sits ABOVE the card in
   z-order (Figma renders "image" after the card in every one of the 4
   frames), so it partially overlaps/covers the card's edge on purpose. */

@media (max-width: 768px) {
  .sec-new-industry-hero {
    min-height: var(--m732);
    padding: 0;
    background-image: var(--hero-bg-mobile, var(--hero-bg));
    /* All the --m-* position numbers below are literal px on Figma's
       393px-wide phone canvas. Above 393px viewport width there'd
       otherwise be a growing patch of plain background to the right of
       that canvas (photo/card staying flush to the *canvas's* old edges,
       not the real, wider viewport's) — this offsets that whole canvas
       to sit centered in whatever the real viewport width is. */
    --phone-canvas-left: calc((100% - var(--m393)) / 2);
    /* Header is exactly 68px tall at this breakpoint (8px top padding +
       60px pill — verified with a real headless-browser measurement, not
       assumed), so this pulls the hero up by precisely that much: its
       background then sits behind the header's transparent 8px top
       padding and the pill itself, none of which have their own opaque
       background, so the hero's gradient reads straight through — no
       plain-white strip where the header sits, and (since the offset is
       now exact, not a guess) no colorful overshoot above the pill either.
       An earlier pass zeroed this out on the theory that Figma's phone
       frames don't show the header overlapping the hero at all — true,
       but the resulting flat white bar behind the nav looked worse than
       the overlap this site's own floating-pill header was built for. */
    margin-top: calc(-1 * var(--m68));
  }

  .sec-new-industry-hero__inner {
    min-height: var(--m732);
    padding: 0;
    display: block;
  }

  .sec-new-industry-hero__content {
    position: absolute;
    left: 50%;
    top: var(--m-text-top, 32%);
    transform: translateX(-50%);
    width: var(--m329);
    max-width: 84%;
    align-items: center;
    text-align: center;
  }

  .sec-new-industry-hero__eyebrow {
    justify-content: center;
    font-size: var(--m11);
    letter-spacing: 1.5px;
  }

  .sec-new-industry-hero__body {
    align-items: center;
    gap: var(--m32);
  }

  .sec-new-industry-hero__text {
    align-items: center;
    gap: var(--m12);
  }

  .sec-new-industry-hero__title {
    font-size: var(--m34);
    line-height: 1.2;
    text-align: center;
  }

  .sec-new-industry-hero__desc {
    text-align: center;
  }

  .sec-new-industry-hero__cta {
    align-self: center;
    height: var(--m40);
    padding: var(--m4) var(--m12) var(--m4) var(--m16);
    font-size: var(--m14);
  }

  /* Photo — absolute, per-page position/size/crop, and ON TOP of the card
     (z-index raised above the card's, opposite of desktop). */
  .sec-new-industry-hero__media {
    z-index: 3;
    left: calc(var(--phone-canvas-left) + var(--m-media-left, 0px));
    bottom: var(--m-media-bottom, auto);
    top: var(--m-media-top, auto);
    transform: var(--m-media-transform, none);
    width: var(--m-media-width, var(--m280));
    max-width: none;
    height: var(--m-media-height, var(--m300));
    max-height: none;
    border-radius: 0;
  }

  .sec-new-industry-hero__photo {
    object-position: var(--m-photo-position, var(--photo-position, 50% 25%));
    transform: scaleX(var(--m-photo-flip, var(--photo-flip, 1)));
  }

  /* Notification card — visible again (not display:none), repositioned
     per page and scaled down from its desktop size around the corner
     Figma anchors it from, so all the inner padding/radius/type scale
     down proportionally without a second set of hand-written values. */
  .sec-new-industry-hero__card {
    display: flex;
    z-index: 2;
    top: var(--m-card-top, auto);
    bottom: var(--m-card-bottom, auto);
    left: calc(var(--phone-canvas-left) + var(--m-card-left, var(--m24)));
    transform: scale(var(--m-card-scale, 0.8));
    transform-origin: var(--m-card-origin, bottom left);
  }
}