/* ==========================================================================
   News hero — Figma 799:47 ("Welcome to Notes from the Booth"), frame 1829x656.
   DESKTOP (>=601px) reproduces the Figma layout exactly: every element sits at
   its Figma x/y scaled by --npx (which maps the 1829 frame onto the viewport),
   and the section is a fixed 656-tall band with overflow:hidden so the mic and
   vinyl boxes — which extend BELOW y=656 — are clipped by the bottom edge like
   Figma (mic ~19px off, vinyl ~55px off). NEITHER image is rotated: the mic's
   angle and the vinyl's tilt are baked into the PNGs. MOBILE (<=600px) keeps the
   stacked portrait arrangement (menu centred, the two images bottom-anchored).
   ========================================================================== */

/* ---- shared (all breakpoints) ---- */
.nw-hero {
  position: relative;
  background: #244D1C;
  color: #fff;
  overflow: hidden;
}
.nw-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.0;
}
.nw-hero__title span { display: block; }
.nw-hero__title strong { display: block; font-weight: 700; }

.nw-hero__nav {
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font-sans); font-weight: 500;
}
.nw-hero__nav li {
  display: flex; align-items: center; justify-content: center;
  gap: calc(12 * var(--npx)); margin-bottom: calc(7 * var(--npx));
  white-space: nowrap;
}
.nw-hero__nav li::before {
  content: ""; flex: 0 0 auto;
  width: calc(24.682 * var(--npx)); height: calc(24.682 * var(--npx));
  background: url(../../../assets/img/news/music-note.png) center / contain no-repeat;
}
.nw-hero__nav a { color: #fff; text-decoration: none; transition: opacity .15s ease; }
.nw-hero__nav a:hover, .nw-hero__nav a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* ---- DESKTOP: exact Figma absolute layout, bottom-clipped ---- */
@media (min-width: 601px) {
  .nw-hero { height: calc(656 * var(--npx)); }

  .nw-hero__title {
    position: absolute; left: 50%; top: calc(144 * var(--npx)); transform: translateX(-50%);
    text-align: center; white-space: nowrap;
    font-size: calc(86.65 * var(--npx));   /* Figma title = Domaine Display Narrow 86.65 */
  }

  /* .nw-hero__cols is the centred 1829-wide positioning frame */
  .nw-hero__cols {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: calc(1829 * var(--npx)); height: 100%;
  }
  /* menu — centred, at its Figma vertical position (y=356.99) */
  .nw-hero__col--menu {
    position: absolute; left: 50%; top: calc(356.99 * var(--npx)); transform: translateX(-50%);
  }
  .nw-hero__nav { font-size: calc(20.982 * var(--npx)); }   /* Figma menu = Be Vietnam Pro 20.982 */

  /* mic + vinyl — Figma-exact crop boxes; the section's bottom edge clips them */
  .nw-hero__col--mic { position: absolute; overflow: hidden; }
  .nw-hero__col--mic {
    left: calc(528.65 * var(--npx)); top: calc(236.89 * var(--npx));
    width: calc(328.38 * var(--npx)); height: calc(437.84 * var(--npx));
  }
  /* Vinyl (Figma image 405). Figma's layout code:
       outer box  left 925.96, top 309, 442.811 x 402.26, flex-centred
         └ rotated element  233.857 x 376.204, rotate 56.62deg
             └ img crop  136.38% x 126.17% at (-36.37%, -26.17%)
     The outer box's LEFT edge (925.96) sits at the menu's centre, so the record
     sits right beside the menu; the section's bottom edge clips the wrist. */
  .nw-hero__col--vinyl {
    position: absolute;
    left: calc(925.96 * var(--npx)); top: calc(309 * var(--npx));
    width: calc(442.811 * var(--npx)); height: calc(402.26 * var(--npx));
    display: flex; align-items: center; justify-content: center;
  }
  .nw-hero__vinyl-rot {
    flex: 0 0 auto; position: relative; overflow: hidden;
    width: calc(233.857 * var(--npx)); height: calc(376.204 * var(--npx));
    transform: rotate(56.62deg);
  }
  .nw-hero__mic { width: 100%; height: 100%; object-fit: cover; display: block; }
  .nw-hero__vinyl {
    /* Figma image fill within the element: 136.38% x 126.17%, offset
       (-36.37%, -26.17%) — uniform scale (aspect preserved), no distortion. */
    position: absolute; left: -36.37%; top: -26.17%;
    width: 136.38%; height: 126.17%; max-width: none; display: block;
  }
}

/* ---- MOBILE: menu centred, the two images bottom-anchored (portrait) ---- */
@media (max-width: 600px) {
  .nw-hero {
    padding: 40px 16px 0;
    /* How tall the ARTWORK is. It also fixes the section's bottom edge: the art
       runs from the centre of the "About us" line down to that edge, so the two
       must agree (see the --cols padding below). Dynamic: scales with the
       viewport so the artwork — and its distance from the centred menu text —
       stays a constant proportion on any phone. */
    --nw-art-h: clamp(96px, 34vw, 190px);
  }
  .nw-hero__title { font-size: 40px; margin-bottom: 26px; line-height: 1.05; text-align: center; }

  /* the list keeps the centre column; the images are positioned, not flowed.
     The padding drops the section's bottom edge to (first-line centre + art height),
     which is where the images' feet land. */
  .nw-hero__cols { display: block; padding-bottom: 68px; }
  .nw-hero__col--menu { display: block; }

  /* Both PNGs carry transparent margins, so the box has to be bigger than the
     art and offset to make the ART (not the box) sit flush with the section's
     bottom edge:
       mic   — 40.7% empty above, 0% below  -> box = art / 0.593
       vinyl — 22.4% above, 8.2% below      -> box = art / 0.694, pushed down 8.2% */
  .nw-hero__col--mic,
  .nw-hero__col--vinyl {
    position: absolute; margin: 0; padding: 0;
    display: block; width: auto;
  }
  .nw-hero__col--mic {
    left: 0; bottom: 0;
    height: calc(var(--nw-art-h) / 0.593);
  }
  .nw-hero__col--vinyl {
    right: 0;
    bottom: calc(var(--nw-art-h) * -0.082 / 0.694);
    height: calc(var(--nw-art-h) / 0.694);
  }

  /* the desktop rotation wrapper must not exist on mobile: display:contents
     dissolves its box so .nw-hero__vinyl (height:100%) sizes off the col again. */
  .nw-hero__vinyl-rot { display: contents; }

  .nw-hero__nav { font-size: 19px; }
  .nw-hero__nav li { gap: 8px; margin-bottom: 10px; }
  .nw-hero__nav li::before { width: 18px; height: 18px; }

  /* height-driven now (bottom-anchored), so width follows the artwork */
  .nw-hero__mic,
  .nw-hero__vinyl {
    width: auto; max-width: none; height: 100%;
    object-fit: contain; display: block;
    transform: none;
  }
}