/* ==========================================================================
   KOBIL — Industry Media Services — Section: Hero (Aug 2026 redesign)
   Figma: D-Industries/Media Services → hero, node 5882:47409 (desktop),
   5882:47950 (mobile, 393x732).
   Full-bleed gradient background and a bespoke "Explore" card (3 rows of
   circular publication logo + label, divided by hairlines) layered over
   the photo. Same architecture as css/industries/financial-services/hero.css.

   Note on the photo: Figma wraps it in a 3-level nested transform
   (outer overflow-clip window -> an offset positioning box -> an inner
   box with rotate(-171.02deg) + scaleY(-1) + a %-based crop computed
   against THAT rotated space). Reproducing that exact matrix isn't
   reliable in plain CSS and the net visual result is just a normal,
   un-tilted crop (confirmed against the Figma screenshot — no visible
   skew) — so this uses a plain object-fit:cover + object-position crop
   tuned to match the same framing instead of the literal transform stack.
   ========================================================================== */

.sec-media-services-hero {
  position: relative;
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  margin-top: calc(-1 * var(--w100));
  isolation: isolate;
  overflow: hidden;
  min-height: var(--w754);
  background-color: #ffffff;
  background-image: url("/assets/industries/media-services/hero/hero-bg-new.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

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

.sec-media-services-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
  max-width: var(--w623);
}

.sec-media-services-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-media-services-hero__eyebrow-dot {
  display: inline-block;
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: var(--navy);
}

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

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

.sec-media-services-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w64);
  line-height: 1.2;
  color: var(--navy);
}

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

.sec-media-services-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-media-services-hero__cta:hover {
  background: var(--navy-20);
}

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

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

/* ---- Photo — Figma 5882:47468: left:calc(50%+382.52px) w/
   -translate-x-1/2, bottom:~0, 463x552 -> left 871px (60.49%), width
   32.15%, height 73.21%. See file header re: the simplified crop. ---- */

.sec-media-services-hero__media {
  position: absolute;
  z-index: 5;
  left: 60.49%;
  bottom: 0;
  width: var(--w463);
  height: var(--w552);
  overflow: hidden;
}

/* Figma 5882:47469. Frame is 463x552; the photo box is 105.25% of it on both
   axes, centred at 49.51%/52.60%.

   Transform/crop were derived by MEASURING against Figma's own render of this
   node, not by copying its transform string. Figma's `scaleY(-1)
   rotate(-171.02deg)` is a reflection (determinant -1) that algebraically
   equals `rotate(-8.98deg) scaleX(-1)`, but applying that to our exported
   asset tilts the subject the wrong way — our asset is not in Figma's raw
   orientation. Fitting a line to the jacket's shoulder edge in both images
   gives Figma +42.06deg; mirror-only lands at +36.10deg, so +8deg of visual
   rotation is needed (mirror first, then rotate => the value IS the visual
   tilt). At that angle the shoulder matches to within 1deg.

   object-position 46% (not the 34.75% the raw numbers imply) is likewise
   measured: it puts the left-edge clipping at 7 rows, exactly matching
   Figma, so his forearm/elbow is no longer sliced off. */
.sec-media-services-hero__photo {
  position: absolute;
  /* 47% not the 49.51% the raw numbers imply: at 49.51% the frame's right edge
     sliced 21 rows off his arm (Figma clips 0 there). Shifting the box left
     lands both edges on Figma's own numbers -- 7 clipped rows bottom-left,
     0 on the right. */
  left: 47%;
  top: 52.6%;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: translate(-50%, -50%) rotate(8deg) scaleX(-1);
  object-fit: cover;
  object-position: 36%;
}

/* ---- Bespoke "Explore" card — Figma 5882:47424: center-anchored at
   calc(50%+154.19px)/calc(50%+78.83px), explicit 252px wide, height by
   content. ---- */

.sec-media-services-hero__card {
  position: absolute;
  z-index: 4;
  left: 60.71%;
  top: 60.45%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--w12);
  width: var(--w252);
  padding: var(--w24);
  background: var(--white);
  border-radius: var(--w16);
  box-shadow: 0 5px 16px rgba(17, 36, 74, 0.12);
}

.sec-media-services-hero__ms-title {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: var(--w12);
  font-weight: 600;
  line-height: var(--w20);
  color: #232935;
}

.sec-media-services-hero__ms-row {
  display: flex;
  align-items: center;
  gap: var(--w12);
  width: 100%;
}

.sec-media-services-hero__ms-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w53);
  height: var(--w53);
  border: 0.853px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--w14);
  overflow: hidden;
}

.sec-media-services-hero__ms-logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.sec-media-services-hero__ms-logo--lists img {
  width: var(--w25);
  height: var(--w20);
}

.sec-media-services-hero__ms-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sec-media-services-hero__ms-name {
  font-family: "Barlow", var(--font-ui), sans-serif;
  font-weight: 500;
  font-size: var(--w14);
  line-height: var(--w20);
  color: #232935;
  white-space: nowrap;
}

.sec-media-services-hero__ms-tag {
  font-family: "Barlow", var(--font-ui), sans-serif;
  font-weight: 400;
  font-size: var(--w12);
  line-height: var(--w17);
  color: #747b86;
  white-space: nowrap;
}

.sec-media-services-hero__ms-divider {
  align-self: flex-end;
  width: var(--w127);
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .sec-media-services-hero {
    min-height: var(--m732);
    padding: 0;
    background-image: url("/assets/industries/media-services/hero/hero-bg-mobile-new.webp");
    --phone-canvas-left: calc((100% - var(--m393)) / 2);
    margin-top: calc(-1 * var(--m68));
  }

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

  .sec-media-services-hero__content {
    position: absolute;
    left: 50%;
    top: var(--m116);
    transform: translateX(-50%);
    width: var(--m329);
    max-width: 84%;
    align-items: center;
    text-align: center;
  }

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

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

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

  .sec-media-services-hero__title {
    font-size: var(--m36);
    line-height: 1.2;
    text-align: center;
  }

  .sec-media-services-hero__desc {
    text-align: center;
  }

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

  /* Photo — Figma 5882:47981: the 311x275 frame sits flush left at the hero
     bottom, and inside it the photo is a 240.5x273.458 box ROTATED -13.33deg,
     centre-anchored at (70.53, 219.82) — it deliberately overflows the frame
     (the hero's own overflow:hidden clips it). The crop is well left of the
     desktop one: Figma renders the image at w 171.02% with left -20.85%, i.e.
     a window over ~12-71% of the image width => object-position 29.3%.
     (A centred/right crop here cuts the man's left side off.) */
  .sec-media-services-hero__media {
    z-index: 5;
    left: calc(var(--phone-canvas-left) + 0px);
    bottom: 0;
    top: auto;
    width: var(--m311);
    max-width: none;
    height: var(--m275);
    max-height: none;
    border-radius: 0;
    overflow: visible;
  }

  .sec-media-services-hero__photo {
    position: absolute;
    left: var(--m71);
    top: var(--m220);
    width: var(--m240);
    height: var(--m273);
    max-width: none;
    /* Mobile keeps its own treatment — deliberately NOT the desktop rule above.
       Figma's mobile frame (5882:47981) uses a different export of this photo,
       so the desktop mirror/crop does not carry over: applying it here threw the
       composition off. These values are the ones that read correctly at this
       breakpoint; leave them alone when touching the desktop rule. */
    transform: translate(-50%, -50%) rotate(-4.46deg);
    object-fit: cover;
    object-position: 29.3% 50%;
  }

  /* Mobile "Explore" card — Figma's mobile frame has this card's content
     swapped with Healthcare's "consultation" card content (a copy/paste
     slip in the source file — confirmed against the desktop frame, which
     correctly shows Explore/Forbes Events/Forbes Lists/Digital Magazine).
     The outer shell numbers (position, radius, shadow) are genuine — the
     shadow value (0px 3.344px 10.702px) is exactly the desktop card's
     shadow scaled by 0.669, which is also the padding ratio
     (16.053/24px), so that ratio is applied to the *correct* Explore
     content below instead of reproducing the swapped rows. */
  .sec-media-services-hero__card {
    z-index: 2;
    left: calc(var(--phone-canvas-left) + var(--m171));
    top: auto;
    bottom: var(--m50);
    transform: none;
    align-items: flex-end;
    gap: var(--m8);
    width: max-content;
    max-width: var(--m188);
    padding: var(--m16);
    border-radius: var(--m8);
    box-shadow: 0 3.344px 10.702px rgba(17, 36, 74, 0.12);
  }

  .sec-media-services-hero__ms-title {
    font-size: var(--m8);
    line-height: var(--m14);
  }

  .sec-media-services-hero__ms-row {
    gap: var(--m8);
  }

  .sec-media-services-hero__ms-logo {
    width: var(--m35);
    height: var(--m35);
    border-radius: var(--m9);
  }

  .sec-media-services-hero__ms-logo--lists img {
    width: var(--m16);
    height: var(--m14);
  }

  .sec-media-services-hero__ms-name {
    font-size: var(--m9);
    line-height: var(--m14);
  }

  .sec-media-services-hero__ms-tag {
    font-size: var(--m8);
    line-height: var(--m11);
  }

  .sec-media-services-hero__ms-divider {
    width: var(--m85);
  }
}