/* ==========================================================================
   Homepage — interaction layer for the Elementor-native template
   (figma-templates/redesign/build-homepage.mjs; Figma 1:1066 desktop, 11:978 mobile).

   Layout, typography, colours, spacing and per-device sizes are Elementor settings —
   edit them in Elementor. This file only adds what Elementor can't express: hover /
   active states, carousels, the FAQ filters, hotspots, the film scrim and
   chapter progress, two mobile re-orderings, the [norweh_home_product] card markup and
   the Instagram plugin restyle. Loaded on the redesigned homepage only (body.nw-home);
   shared pieces (FAQ accordion, desktop-only line breaks) are in components.css.
   Behaviour: js/app.js "Homepage redesign". Breakpoints match staging's Elementor ones
   (tablet ≤1024, mobile ≤767).
   ========================================================================== */

/* ---- Row sizing ----------------------------------------------------------- */
/* Elementor gives every container --width:100% (and doesn't carry tablet widths down to
   phones), so items in a row would each be as wide as the row. Two classes beat that
   default; a width set in Elementor (element rule, three classes) still wins. */
.e-con.nw-arrows,
.e-con.nw-gpill,
.e-con.nw-review__chip,
.e-con.nw-why__badge { --width: auto; }
/* Columns that fill the row's remaining space and wrap their text inside it. */
.e-con.nw-why__copy,
.e-con.nw-chapter,
.e-con.nw-stat,
.e-con.nw-faq__main { --width: auto; flex-shrink: 1; min-width: 0; }
.e-con.nw-trust__rule { --width: 1px; }
.nw-home .e-con.nw-review__chip > .e-con { --width: 20px; }
/* Badge and chip stay on one line (Elementor wraps rows on phones by default). */
.e-con.nw-why__badge,
.e-con.nw-review__chip { --flex-wrap: nowrap; }
.nw-home .e-con.nw-why__badge > .e-con { --width: auto; flex: 0 1 auto; min-width: 0; }
@media (max-width: 767px) {
  .e-con.nw-stat { --width: 50%; }
  /* 2×2 stats: a divider only between the two columns, with room before the number. */
  .nw-home .e-con.nw-stat:nth-child(odd) { border-left-color: transparent; }
  .nw-home .e-con.nw-stat:nth-child(even) { padding-left: 16px; }
}

/* ---- Carousels (products, reviews) ------------------------------------- */
.nw-home .nw-track {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.nw-home .nw-track::-webkit-scrollbar { display: none; }
/* Figma: the track bleeds past the 1280 column to the viewport's right edge. Percentages
   here resolve against the centred column, so (100vw - 100%) / 2 is its right gutter. */
.nw-home .e-con.nw-track {
  width: calc(100% + (100vw - 100%) / 2);
  max-width: none;
  padding-right: calc((100vw - 100%) / 2);
}
.nw-home .nw-track > .e-con,
.nw-home .nw-track > .elementor-element { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .nw-home .nw-track { scroll-behavior: auto; } }
/* [norweh_home_product] renders nothing for a slug missing on this site — drop the slot. */
.nw-home .nw-track--products > .elementor-element:not(:has(.nw-pcard)) { display: none; }
.nw-home .nw-arrow .elementor-button-icon svg { width: 20px; height: 20px; }
.nw-home .nw-arrow.is-disabled .elementor-button { opacity: 0.45; pointer-events: none; }

/* Slider dots (built by js/app.js under each track; phones only). */
.nw-home .nw-dots { display: none; }
@media (max-width: 767px) {
  .nw-home .nw-dots { display: flex; gap: 6px; }
  .nw-home .nw-insta .nw-dots { padding-top: 32px; }
  .nw-home .nw-dots button {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: var(--nw-line-strong);
    cursor: pointer;
    transition: width 0.25s var(--nw-ease), background-color 0.25s var(--nw-ease);
  }
  .nw-home .nw-dots button[aria-current="true"] { width: 22px; background: var(--nw-navy-600); }
}

/* ---- Product card ([norweh_home_product], inc/custom-shortcode.php) ------ */
.nw-pcard { display: flex; flex-direction: column; gap: 20px; color: var(--nw-ink); text-decoration: none; }
.nw-pcard:hover, .nw-pcard:focus-visible { color: var(--nw-ink); }
.nw-pcard__media { position: relative; display: block; height: 380px; border-radius: 16px; overflow: hidden; isolation: isolate; transition: box-shadow 0.3s var(--nw-ease); }
.nw-home .nw-pcard__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 0.3s var(--nw-ease); }
.nw-pcard__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 52, 107, 0) 45%, rgba(15, 52, 107, 0.7) 100%); opacity: 0; transition: opacity 0.3s var(--nw-ease); }
.nw-pcard__chip { position: absolute; top: 16px; left: 16px; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.9); color: var(--nw-burgundy); font: 600 12px/1.4 var(--nw-font-body); }
.nw-pcard__actions { position: absolute; right: 16px; bottom: 13px; left: 16px; display: flex; gap: 8px; opacity: 0; transform: translateY(20px); transition: opacity 0.3s var(--nw-ease), transform 0.3s var(--nw-ease); }
.nw-pill { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 99px; font: 500 14px/1.5 var(--nw-font-body); }
.nw-pill--navy { background: var(--nw-navy); color: var(--nw-white); }
.nw-ico-after--arrow::after { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: url(../images/icons/arrow-right.svg) center / contain no-repeat; mask: url(../images/icons/arrow-right.svg) center / contain no-repeat; }
.nw-pcard:hover .nw-pcard__media, .nw-pcard:focus-visible .nw-pcard__media { box-shadow: 0 24px 40px -8px rgba(10, 26, 46, 0.22); }
.nw-home .nw-pcard:hover .nw-pcard__img, .nw-home .nw-pcard:focus-visible .nw-pcard__img { transform: scale(1.1); }
.nw-pcard:hover .nw-pcard__scrim, .nw-pcard:focus-visible .nw-pcard__scrim,
.nw-pcard:hover .nw-pcard__actions, .nw-pcard:focus-visible .nw-pcard__actions { opacity: 1; }
.nw-pcard:hover .nw-pcard__actions, .nw-pcard:focus-visible .nw-pcard__actions { transform: none; }
.nw-pcard__meta { display: flex; flex-direction: column; gap: 12px; }
.nw-pcard__name { font: 600 20px/1.3 var(--nw-font-display); }
.nw-pcard__price { display: flex; align-items: baseline; gap: 12px; font: 500 16px/1.6 var(--nw-font-body); }
.nw-pcard__price del { color: var(--nw-muted); font-size: 14px; font-weight: 400; }
@media (max-width: 767px) {
  .nw-pcard { gap: 18px; }
  .nw-pcard__media { height: 342px; }
  .nw-pcard__name { font-size: 18px; }
  .nw-pcard__price { font-size: 14.4px; }
  .nw-pcard__price del { font-size: 12.6px; }
  /* Figma mobile cards have no hover overlay — the whole card is the link. */
  .nw-pcard__actions, .nw-pcard__scrim { display: none; }
  .nw-home .nw-pcard:hover .nw-pcard__img { transform: none; }
}

/* ---- Why Norweh: row hover, float photos, image pager ------------------ */
.nw-home .nw-why { position: relative; }
.nw-home .nw-why__media { position: relative; }
.nw-home .nw-why__row { transition: opacity 0.28s var(--nw-ease); }
.nw-home .nw-why__rows.has-active .nw-why__row:not(.is-active) { opacity: 0.35; }
.nw-home .nw-why__floats { position: absolute; inset: 0; pointer-events: none; }
.nw-home .nw-why-float {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.28s var(--nw-ease), transform 0.28s var(--nw-ease);
}
.nw-home .nw-why-float img { box-shadow: 0 28px 48px -10px rgba(10, 26, 46, 0.28); }
.nw-home .nw-why-float.is-active { opacity: 1; transform: translateX(-24px); }
.nw-home .nw-pager { position: absolute; top: 24px; right: 24px; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 99px; background: var(--nw-navy); }
.nw-home .nw-pager i { display: block; width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.5); opacity: 0.5; transition: width 0.28s var(--nw-ease), opacity 0.28s var(--nw-ease); }
.nw-home .nw-pager i.is-active { width: 22px; background: var(--nw-white); opacity: 1; }
@media (max-width: 1024px) {
  .nw-home .nw-pager { display: none; }
  .nw-home .nw-why__rows.has-active .nw-why__row:not(.is-active) { opacity: 1; }
}

/* ---- Reviews ------------------------------------------------------------ */
.nw-home .nw-review__chip { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---- Story band: film scrim, play button, chapter progress, stat units --- */
.nw-home .nw-player { position: relative; }
.nw-home .nw-player .elementor-custom-embed-image-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 52, 107, 0.35) 0%, rgba(15, 52, 107, 0.05) 35%, rgba(15, 52, 107, 0.25) 62%, rgba(15, 52, 107, 0.92) 100%);
  pointer-events: none;
}
/* Figma play control: white core inside a frosted ring. */
.nw-home .nw-player .elementor-custom-embed-play {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: var(--nw-white);
  box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.12), 0 12px 32px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, calc(-50% - 30px));
}
.nw-home .nw-player .elementor-custom-embed-play svg { filter: none; }
.nw-home .nw-player__label,
.nw-home .nw-player__chip,
.nw-home .nw-chapters--overlay { z-index: 1; pointer-events: none; }
.nw-home .nw-player__chip .elementor-button { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nw-home .nw-player.is-playing .nw-player__label,
.nw-home .nw-player.is-playing .nw-player__chip,
.nw-home .nw-player.is-playing .elementor-custom-embed-image-overlay::after { display: none; }
.nw-home .elementor-element.nw-chapters--overlay { right: 39px; width: auto; }

/* End-anchored offsets. The template copy imported before 2026-11-04 wrote them to the key
   Elementor only reads for start-anchored elements, so the hero pennant sat flush with the
   screen edge (Figma: under the header's Book button) and the chapter list on the film's
   bottom edge. The regenerated template carries the same values; this matches it until the
   homepage is re-imported.
   Wider than 1440 the pennant follows the 1280px content box (the header and hero copy stay
   in it, so at 2560 a screen-edge pennant sat ~640px out on its own) — keep this line after
   the re-import too: Elementor's offset control can't express the max(). */
body.nw-home:not(.rtl) .elementor .e-con.nw-hero .e-con.nw-ribbon { right: max(78px, calc((100% - 1280px) / 2 - 2px)); }
body.nw-home:not(.rtl) .elementor .e-con.nw-chapters--overlay { bottom: 39px; }
@media (max-width: 1200px) { body.nw-home:not(.rtl) .elementor .e-con.nw-hero .e-con.nw-ribbon { right: 48px; } }
@media (max-width: 1024px) { body.nw-home:not(.rtl) .elementor .e-con.nw-hero .e-con.nw-ribbon { right: 32px; } }
@media (max-width: 767px) { body.nw-home:not(.rtl) .elementor .e-con.nw-hero .e-con.nw-ribbon { right: 16px; } }
/* The pennant's short rule sat at the left of its row (Elementor's divider aligns left by
   default); centred like the text above and below it. Also in the regenerated template. */
body.nw-home .nw-ribbon__rule .elementor-divider-separator { margin-inline: auto; }
/* Tablet's 2 × 2 stats: "800+" starts the second row, so its desktop divider sat alone at
   the left edge; only the line between the two columns stays. Also in the regenerated template. */
@media (min-width: 768px) and (max-width: 1024px) {
  body.nw-home .elementor .e-con.nw-stats > .e-con.nw-stat:nth-child(odd) { border-left-width: 0; }
}
/* Phones, also in the regenerated template: Figma's 2 × 2 stats grid has no dividers, and
   "Years of craftsmanship" sits 14px from "10+" (the desktop pull-in left it touching). */
@media (max-width: 767px) {
  body.nw-home .elementor .e-con.nw-stats > .e-con.nw-stat { border-left-width: 0; }
  /* 8px right margin (was 16) keeps the 96px label ~90px wide inside, so "craftsmanship"
     (81px) fits on one line; the label never splits a word mid-way. */
  body.nw-home .elementor .e-con.nw-trust > .elementor-widget-text-editor > .elementor-widget-container { margin-left: -2px; margin-right: 8px; }
  body.nw-home .e-con.nw-trust .elementor-widget-text-editor p { overflow-wrap: normal; word-break: normal; }
}
/* Under 375px the row (326px) doesn't fit: without the divider it fits again at 360, and at
   320 the awards badge drops under the text without a divider dangling at the line end. */
@media (max-width: 374px) {
  body.nw-home .elementor .e-con.nw-trust > .e-con.nw-trust__rule { display: none; }
}
/* Hero "Shop now", also in the regenerated template: Figma's 170px pill with centred text
   (it hugged its label at 116px), with a 1px outline in its own navy so it matches the
   outlined "Speak to an expert" height. */
body.nw-home .elementor .nw-hero__shop .elementor-button { width: 100%; border: 1px solid var(--nw-navy); }
body.nw-home .elementor .nw-hero__shop .elementor-button:hover,
body.nw-home .elementor .nw-hero__shop .elementor-button:focus-visible { border-color: var(--nw-navy-600); }
.nw-home .nw-chapter__bar { width: var(--progress, 0%); }
.nw-home .nw-chapter.is-active .nw-chapter__label p,
.nw-home .nw-chapter.is-active .nw-chapter__label .elementor-heading-title { color: var(--nw-white); }
.nw-home .nw-stat__unit { color: var(--nw-line-strong); font-size: 0.44em; font-weight: 300; letter-spacing: -0.02em; }
@media (max-width: 767px) {
  .nw-home .nw-player .elementor-custom-embed-play { width: 44px; height: 44px; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.25); transform: translate(-50%, calc(-50% - 12px)); }
  .nw-home .nw-stat__unit { font-size: 0.55em; }
}

/* ---- Precision: hotspot panel ------------------------------------------- */
/* Spots are placed as % of the Figma 700×740 panel, so the photo keeps that ratio. */
.nw-home .nw-precision__panel { position: relative; aspect-ratio: 700 / 740; }
/* The photo is clipped to the panel's 24px corners (Figma 1:1401); the panel's own radius
   doesn't clip its absolutely positioned children. */
.nw-home .nw-precision__img { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; }
.nw-home .nw-precision__img .elementor-widget-container,
.nw-home .nw-precision__img img { width: 100%; height: 100%; }
.nw-home .nw-spot { z-index: 2; margin: -22px 0 0 -22px; }
.nw-home .nw-spot .elementor-button {
  position: relative;
  width: 44px;
  height: 44px;
  box-shadow: 0 6px 16px rgba(5, 20, 41, 0.25);
  transition: background-color 0.24s var(--nw-ease), box-shadow 0.24s var(--nw-ease);
}
.nw-home .nw-spot .elementor-button-icon svg { width: 18px; height: 18px; }
.nw-home .nw-spot .elementor-button::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 99px;
  background: rgba(125, 7, 31, 0.35);
  opacity: 0;
}
.nw-home .nw-spot.is-active .elementor-button { background: var(--nw-burgundy); color: var(--nw-white); fill: var(--nw-white); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 16px rgba(5, 20, 41, 0.25); }
.nw-home .nw-spot.is-active .elementor-button::before { opacity: 1; animation: nw-pulse 1.8s var(--nw-ease) infinite; }
@keyframes nw-pulse { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nw-home .nw-spot.is-active .elementor-button::before { animation: none; } }
.nw-home .nw-precision__card { position: absolute; top: 53.24%; left: 21px; z-index: 3; }
.nw-home .nw-precision__detail { display: none; }
.nw-home .nw-precision__detail.is-active { display: flex; }
.nw-home .nw-precision__item { cursor: pointer; }
.nw-home .nw-precision__num p,
.nw-home .nw-precision__label .elementor-heading-title { transition: color 0.24s var(--nw-ease); }
.nw-home .nw-precision__item.is-active .nw-precision__num p { color: var(--nw-burgundy); }
.nw-home .nw-precision__item.is-active .nw-precision__label .elementor-heading-title { color: var(--nw-ink); }
.nw-home .nw-precision__item:focus-visible { outline: 2px solid var(--nw-navy); outline-offset: 2px; }
@media (max-width: 767px) {
  /* Figma mobile order: title → photo → card → list → button. The copy column
     dissolves so its parts can be ordered around the photo panel. */
  .nw-home .nw-precision__copy { display: contents; }
  .nw-home .nw-precision__copy > :nth-child(-n + 3) { order: 1; }
  .nw-home .nw-precision__copy > .elementor-element.nw-eyebrow,
  .nw-home .nw-precision__copy > .elementor-element.nw-h1 { margin-bottom: -8px; }
  /* Photo and card stack in a one-column grid. The spots share the photo's grid cell
     (explicit end lines: an "auto" end would stretch an absolutely positioned item to
     the grid's edge), so their % offsets resolve against the photo (Figma 11:1229)
     rather than photo + card, which pushed them down and hid spot 04 under the card. */
  .nw-home .nw-precision__panel { order: 2; display: grid; grid-template-columns: 100%; row-gap: 28px; aspect-ratio: auto; overflow: visible; }
  .nw-home .nw-precision__img { position: relative; inset: auto; aspect-ratio: 700 / 740; border-radius: 12px; overflow: hidden; }
  .nw-home .nw-precision__copy > .nw-precision__list { order: 3; }
  .nw-home .nw-precision__copy > .nw-btn-row { order: 4; }
  .nw-home .nw-precision__card { position: static; }
  .nw-home .nw-spot { margin: -22px 0 0 -22px; grid-area: 1 / 1 / 2 / 2; }
}

/* ---- FAQ: category filters (accordion itself: components.css) ----------- */
.nw-home .nw-tab.is-active .elementor-button { border-color: var(--nw-navy-600); background: var(--nw-navy-600); color: var(--nw-white); }
@media (max-width: 767px) {
  /* Figma mobile order: titles → filters/accordion → "Still deciding?" card. */
  .nw-home .nw-faq__aside { display: contents; }
  .nw-home .nw-faq__aside > .nw-sec-head__titles { order: 1; }
  .nw-home .nw-faq__main { order: 2; }
  .nw-home .nw-faq__card { order: 3; }
  .nw-home .nw-tabs { margin-right: -20px; padding-right: 20px; overflow-x: auto; scrollbar-width: none; }
  .nw-home .nw-tab { flex: none; }
}

/* ---- Instagram (Smash Balloon feed restyled to the Figma gallery) -------- */
.nw-home .nw-insta #sb_instagram { padding: 0 !important; }
.nw-home .nw-insta #sb_instagram #sbi_images { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px !important; padding: 0 !important; }
.nw-home .nw-insta #sb_instagram .sbi_item { width: auto !important; margin: 0 !important; padding: 0 !important; }
.nw-home .nw-insta #sb_instagram .sbi_photo_wrap,
.nw-home .nw-insta #sb_instagram .sbi_photo { height: 400px !important; border-radius: 16px; overflow: hidden; }
.nw-home .nw-insta #sb_instagram .sbi_photo img { width: 100%; height: 100%; object-fit: cover; }
.nw-home .nw-insta #sb_instagram .sbi_item:nth-child(n + 6) { display: none !important; }
.nw-home .nw-insta #sb_instagram #sbi_load,
.nw-home .nw-insta #sb_instagram .sb_instagram_header { display: none !important; }
@media (max-width: 1024px) {
  .nw-home .nw-insta #sb_instagram #sbi_images { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nw-home .nw-insta #sb_instagram .sbi_item:nth-child(n + 4) { display: none !important; }
}
@media (max-width: 767px) {
  .nw-home .nw-insta #sb_instagram #sbi_images { display: flex !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .nw-home .nw-insta #sb_instagram .sbi_item { flex: 0 0 260px; scroll-snap-align: start; }
  .nw-home .nw-insta #sb_instagram .sbi_item:nth-child(n + 4) { display: block !important; }
  .nw-home .nw-insta #sb_instagram .sbi_item:nth-child(n + 6) { display: none !important; }
  .nw-home .nw-insta #sb_instagram .sbi_photo_wrap,
  .nw-home .nw-insta #sb_instagram .sbi_photo { height: 340px !important; }
}

/* "Hover" vs "Tap" copy (Precision intro) follows the input type, not the width. */
@media (hover: none) { .nw-home .nw-only-hover { display: none; } }
@media (hover: hover) { .nw-home .nw-only-touch { display: none; } }