/* ==========================================================================
   Nymölla Skog – sections
   Section-specific layout and styling. Filled in step by step.
   ========================================================================== */

/* ---- 01 Header ---- */

.ns-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 2; /* above the hero (z-index 1) so it stays clickable/visible over the photo */
  padding-top: clamp(13px, 9.54px + 0.962vw, 28px);
}

.ns-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Guarantees a minimum gap between the logo and the actions even when
     space-between would otherwise let a wide button (e.g. the mobile-only
     "Mätningsbestämmelser" pill once "Kontakta oss" is hidden) crowd it. */
  gap: 16px;
}

.ns-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 5.85px + 0.897vw, 16px);
}

.ns-header__logo {
  display: inline-flex;
}

.ns-header__logo img {
  width: clamp(159px, 132.98px + 6.026vw, 304px);
  height: auto;
}

/* ---- 01 Hero ---- */

.ns-hero {
  position: relative;
  z-index: 1; /* stacking context so the overlapping photo paints above the intro section */
  background: var(--color-hero-bg);
}

.ns-hero__media {
  position: absolute;
  inset: 0;
  max-width: var(--hero-media-max);
  margin-inline: auto;
  overflow: hidden;
}

.ns-hero__media picture,
.ns-hero__media img,
.ns-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ns-hero__media video {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.ns-hero__media video.is-ready {
  opacity: 1;
}

.ns-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

/* 1px lines just outside the centred 1920px media, only visible on wider screens */
@media (min-width: 1921px) {
  .ns-hero__media {
    box-shadow: -1px 0 0 var(--ns-edge-line), 1px 0 0 var(--ns-edge-line);
  }
}

.ns-hero__inner {
  position: relative;
  /* display: flow-root establishes a new block formatting context so the
     photo's negative margin-bottom actually shrinks THIS box (letting the
     photo visually overlap the intro section below, per the design) instead
     of "collapsing through" a plain block container and escaping past
     .ns-hero entirely — which was silently making .ns-hero (and its dark
     background, painted above .ns-intro via z-index) extend the photo's
     full height and cover up the overlap completely below 1024px, even
     though the two elements' own numbers (via getBoundingClientRect)
     looked correct. Grid (the ≥1024px layout below) doesn't have this
     margin-collapsing behaviour at all, which is why the overlap already
     worked correctly on desktop. */
  display: flow-root;
  padding-block: 0;
}

.ns-hero__content {
  position: relative;
  z-index: 1;
  padding-top: 124px;
  color: var(--color-on-dark);
}

.ns-hero__content h1 {
  color: var(--color-on-dark);
}

@media (max-width: 767.98px) {
  .ns-hero__content h1 br {
    display: inline;
  }
}

@media (min-width: 768px) {
  .ns-hero__content h1 br {
    display: none;
  }
}

.ns-hero__lead {
  max-width: 720px;
  margin-top: clamp(17px, 14.92px + 0.577vw, 26px);
  color: var(--color-on-dark);
  font-size: var(--fs-hero-lead);
  line-height: var(--lh-hero-lead);
}

.ns-hero__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(24px, 19.38px + 2.564vw, 41px);
}

.ns-hero__photo {
  margin-top: 70px;
  margin-bottom: -117px;
  z-index: 1;
}

.ns-hero__photo picture,
.ns-hero__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 974;
  object-fit: cover;
  border-radius: var(--radius-hero-photo-mobile);
  box-shadow: var(--shadow-hero-photo-mobile);
}

@media (min-width: 768px) {
  .ns-hero__buttons {
    flex-direction: row;
    gap: 19px;
  }
}

@media (min-width: 1024px) {
  .ns-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
    align-items: start;
  }

  .ns-hero__content {
    /* Fluid from 1024px instead of the flat 1920px value (371px): the lead's
       720px max-width doesn't kick in until the column itself is that wide
       (well above 1024px), so at 1024–~1500px it wraps onto extra lines and
       the content column ends up taller than the photo column with the same
       fixed padding-top — at 1024px the buttons landed flush against the
       hero's bottom edge with no breathing room. Converges to exactly 371px
       at 1920px (unchanged from the verified step-2 checkpoint). */
    padding-top: clamp(110px, -188.3px + 29.13vw, 371px);
  }

  .ns-hero__photo {
    margin-top: 143px;
    margin-bottom: -127px;
  }

  .ns-hero__photo picture,
  .ns-hero__photo img {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hero-photo);
  }
}

/* ---- 02 Intro (Välkommen till...) ---- */

.ns-intro {
  position: relative;
  background: var(--color-intro-bg);
  /* Padding-top clears the overlapping hero photo (117–127px) plus the exact
     gap to the heading ink (desktop: photo bottom 1117 → heading ink 1200 = 83px;
     mobile: 969 → 1029 = 60px), minus the ~10px/6px box-to-ink offset for the
     70px/40px heading — i.e. measured straight from the PSD section top (990/852)
     to the heading's CSS box top (1190/1023). See PROGRESS.md step 3. */
  padding-top: clamp(171px, 164.31px + 1.859vw, 200px);
  /* PM follow-up (28 Sep 2026): the team photo (.ns-intro__photo) sits
     flush with the section's own bottom edge in the design underlay —
     no whitespace below it, unlike every other section here. */
  padding-bottom: 0;
}

.ns-intro__inner h2 {
  /* Gap from the heading's box bottom to the columns' box top, derived the same
     way (mobile 17px, desktop 26px) from the PSD text-layer bounds. */
  margin-bottom: clamp(17px, 14.92px + 0.577vw, 26px);
}

@media (max-width: 1023.98px) {
  .ns-intro__inner h2 br {
    display: none;
  }
}

.ns-intro__columns {
  display: flex;
  flex-direction: column;
  gap: var(--lh-body);
}

.ns-intro__column {
  display: flex;
  flex-direction: column;
  gap: var(--lh-body);
}

.ns-intro__column p {
  text-wrap: pretty;
}

.ns-intro__bold {
  text-wrap: balance;
}

.ns-intro__bold strong {
  color: var(--color-text-strong);
  font-weight: var(--fw-semibold);
}

@media (min-width: 1024px) {
  .ns-intro__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
    align-items: start;
  }
}

/* Full-bleed team photo (PM, 28 Sep 2026): edge-to-edge like the hero
   media, capped/centred at the same 1920px design width. A plain block
   sibling of .ns-intro__inner (not nested in the .ns-container) works
   here because .ns-intro itself has no side padding of its own. */
.ns-intro__photo {
  /* PM follow-up (28 Sep 2026): measured directly off Landningssida-VER2.jpg
     (text ink bottom → photo top) instead of the too-tight guess before —
     ≈93px at the 360px mobile reference, ≈147px at the 1920px desktop one. */
  margin-top: clamp(84px, 71px + 3.59vw, 140px);
  max-width: var(--hero-media-max);
  margin-inline: auto;
}

@media (max-width: 767.98px) {
  /* Second follow-up: lowered a bit further on mobile only, to match
     .ns-map's own mobile padding-top (60px) exactly. */
  .ns-intro__photo {
    margin-top: 60px;
  }
}

.ns-intro__photo picture,
.ns-intro__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.ns-intro__photo img {
  /* Mobile/tablet crop ("beskäras något i sidled"): a mildly wider-than-
     square 9:5 frame that trims some of the background trees on both
     sides but keeps the whole group in frame — a taller/narrower crop
     (as briefly tried here before) pushed past the group's own span in
     the source photo (~x420–1150 of 1920) and cut people off, per your
     follow-up. No exact PSD value; derived to fit safely inside that span. */
  aspect-ratio: 9 / 5;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .ns-intro__photo img {
    aspect-ratio: 1920 / 681;
  }
}

/* ---- 03 Map + contact (Hitta din lokala kontakt) ---- */

.ns-map {
  /* Section-top to H2 box-top, derived like steps 2-3 from the raw PSD
     layer y-values (desktop 1779->1918, mobile 1720->1780) minus the same
     10px/6px heading box-to-ink offset used for the hero H1/intro H2. */
  padding-top: clamp(60px, 41.77px + 5.064vw, 139px);
  /* Whitespace after the map/card row before the footer's forest tile
     starts painting over it (row bottom -> forest y, psd-spec.md). */
  padding-bottom: clamp(33px, 13.62px + 5.385vw, 117px);
}

.ns-map__inner h2 {
  /* H2 box-bottom to lead box-top (raw y 1971->2016 desktop, 1855->1884 mobile). */
  margin-bottom: clamp(17px, 14.92px + 0.577vw, 26px)
}

.ns-map__lead {
  max-width: 480px;
}

.ns-map__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tag-gap);
  row-gap: var(--tag-row-gap);
  /* Lead box-bottom to tags-row top (raw pixel layer, no ink offset needed). */
  margin-top: clamp(30px, 26.31px + 1.026vw, 46px);
  /* Tags-row bottom to map/card row top. */
  margin-bottom: clamp(33px, 29.08px + 1.09vw, 50px);
}

/* Large phones (~390-480px): with the "Ledning" tag added, the six-pill
   set wrapped onto three rows; slightly smaller type + padding fits two. */
@media (min-width: 390px) and (max-width: 480px) {
  .ns-map__tags .ns-tag {
    padding-inline: 14px;
    font-size: 11px;
  }
}

.ns-map__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ns-map__box {
  background: var(--color-intro-bg);
  border-radius: var(--radius-card-mobile);
  height: 324px;
  overflow: hidden;
  position: relative;
}

.ns-map__gmap {
  /* Derived decision: mutes the live Google base map (brighter/more
     saturated by default) closer to the softer palette in the design
     slices. */
  filter: brightness(0.9) saturate(0.75);
}

.ns-map__box-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--ns-green-dark);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.ns-map__card {
  position: relative;
  display: grid;
  border-radius: var(--radius-card-mobile);
  overflow: hidden;
  min-height: 367px;
}

@media (min-width: 1024px) {
  .ns-map__row {
    flex-direction: row;
    align-items: stretch;
    gap: var(--map-card-gap);
  }

  .ns-map__box {
    flex: 1040 1 0;
    height: auto;
    aspect-ratio: 1040 / 557;
    border-radius: var(--radius-card);
  }

  .ns-map__card {
    flex: 540 1 0;
    border-radius: var(--radius-card);
    /* No min-height override needed here: now that the two panels are
       grid-stacked (components.css) instead of position:absolute, the
       card's own auto height already reflects its real content (the taller
       of the two panels — normally the photo + name/role/divider/phone/
       email). ".ns-map__row"'s align-items: stretch then takes the max of
       that and the map box's pure 1040:557 aspect-ratio height, so the map
       box grows to match whenever the card's content genuinely needs more
       room (as low as ~293px at 1024px isn't enough) — self-correcting at
       every width instead of a hand-picked value, and identical to the
       pure aspect ratio at 1920px, where the card's content already fits. */
    min-height: 0;
  }
}

/* "Ledning" view (PM, 29 Sep 2026): replaces the map + card row with one
   contact card per management contact; same card styling, 3 across from 1024px. */
.ns-map__row[hidden],
.ns-map__management[hidden] {
  display: none;
}

.ns-map__management {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 1024px) {
  .ns-map__management {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--map-card-gap);
  }

  .ns-map__management .ns-map__card {
    border-radius: var(--radius-card);
    min-height: 0;
  }
}

/* ---- 03b Mätningsbestämmelser banner (PM, 28 Sep 2026) ----
   New section, added after the design freeze — no PSD layer to measure,
   so spacing/sizes are derived from the supplied background image and
   the rest of this file's card conventions (--radius-card, container
   padding-block, hero-primary-button reuse). */

.ns-specs-section {
  padding-bottom: clamp(48px, 40px + 4vw, 96px);
}

.ns-specs {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card-mobile);
  text-align: center;
  color: var(--color-on-dark);
  padding-block: clamp(40px, 32px + 4vw, 88px);
  padding-inline: var(--gutter);
}

.ns-specs__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ns-specs__bg picture,
.ns-specs__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ns-specs__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.ns-specs__inner h2 {
  color: var(--color-on-dark);
  /* PM follow-up (28 Sep 2026): the shared --fs-display (up to 70px) reads
     too large for this smaller banner and overflowed its own padding on
     mobile — a lower ceiling than the section H2s use elsewhere. */
  font-size: clamp(19px, 15.5px + 3vw, 40px);
  line-height: 1.15;
  /* Flex items default to min-width: auto (their content's intrinsic
     width), which stopped this heading from ever wrapping onto a second
     line and clipped it against the card's padding on narrow phones
     instead — the classic flexbox overflow gotcha. */
  min-width: 0;
  max-width: 100%;
}

.ns-specs__lead {
  margin-top: clamp(8px, 6px + 1vw, 16px);
  max-width: 480px;
  color: var(--color-on-dark);
}

.ns-specs__btn {
  margin-top: clamp(24px, 19.38px + 2.564vw, 32px);
}

@media (max-width: 767.98px) {
  /* PM follow-up (28 Sep 2026): reads too large next to the smaller
     mobile card/heading — a smaller footprint than the shared
     --btn-height/--btn-padding-x used elsewhere. */
  .ns-specs__btn {
    height: 44px;
    padding-inline: 22px;
    font-size: 13px;
  }

  /* Second follow-up: still felt too tight against the card's padding,
     and the heading/lead didn't read as a matched pair at that size —
     a flat, smaller mobile size for both instead of the fluid clamp
     above (which only really bites above ~460px viewports). */
  .ns-specs__inner h2 {
    font-size: 22px;
    line-height: 1.25;
  }

  .ns-specs__lead {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (min-width: 1024px) {
  .ns-specs {
    border-radius: var(--radius-card);
  }
}

/* ---- 04 Footer ---- */

.ns-footer {
  position: relative;
  /* Shows through the forest silhouette's tree-top gaps, matching the page
     background the footer sits on top of. */
  background: var(--color-page-bg);
  /* Forest tile: 197px tall at 360 -> 311px at 1920 (prompts/06 spec).
     Solid-bg start: the point inside that tile where the #e9e2cf background
     begins (psd-spec.md "04 Footer": bg starts 16-26px before the tile's
     bottom edge). Both colours are identical (#e9e2cf), so the exact
     overlap only has to land somewhere the silhouette is already solid
     across the full width -- it can't create a visible seam either way. */
  --footer-forest-h: clamp(197px, 170.69px + 7.308vw, 311px);
  --footer-bg-top: clamp(181px, 157px + 6.667vw, 285px);
}

.ns-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  top: var(--footer-bg-top);
  background: var(--color-footer-bg);
}

.ns-footer__forest {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--footer-forest-h);
  background-image: url("../icons/skog.svg");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 100%;
}

.ns-footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Solid-bg-top plus the logo's own offset below it (0px mobile -> 18px
     desktop, psd-spec.md). */
  padding-top: calc(var(--footer-bg-top) + clamp(0px, -4.15px + 1.154vw, 18px));
  /* Icon-row bottom to the page end (48px mobile -> 76px desktop). */
  padding-bottom: clamp(48px, 41.54px + 1.795vw, 76px);
}

.ns-footer__logo {
  width: clamp(226px, 208px + 5vw, 304px);
  height: auto;
}

.ns-footer__address {
  margin-top: clamp(24px, 22.85px + 0.321vw, 29px);
}

.ns-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Centres ~63-64px apart minus the 51px circle diameter (psd-spec.md). */
  gap: 12px;
  margin-top: clamp(33px, 32.77px + 0.064vw, 34px);
}