/* ============================================================
   NICHE NANNIES — Hero Slider v4
   CSS-driven responsive layout. JS reads these variables at
   runtime and animates tiles to CSS-computed positions.
   All breakpoint logic lives here.
   ============================================================ */

:root {
  /* Tile dimensions — fluid via clamp(), JS reads these at runtime */
  --tile-w:           clamp(112px, 14vw, 230px);
  --tile-h:           clamp(168px, 21vw, 345px);
  --tile-gap:         clamp(10px, 1.6vw, 36px);
  --tile-edge-right:  clamp(20px, 3vw, 60px);
  --tile-edge-bottom: clamp(60px, 9vh, 130px);
  --tile-radius:      10px;

  /* Slider tokens */
  --nn-bg:           #1E2726;
  --nn-bg-dark:      #1E3837;
  --nn-text:         #FAFBF8;
  --nn-accent:       #B8956A;
  --nn-accent-dark:  #997A4F;
  --nn-secondary:    var(--secondary-color, #8FAFA8);
  --nn-secondary-dk: var(--secondary-dark, #6B8B85);

  /* Easings */
  --nn-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Navbar offset — used to push details panel clear of fixed nav */
  --nn-navbar-h:        72px;
  --nn-navbar-h-mobile: 88px;
}

/* Tablet — give the 769–1024px band its own tile size. The root 14vw
   shrinks tiles too far on iPad-class widths (~115px at 820px); 19vw keeps
   them readable. The min (150px) matches the phone tile cap at the 768px
   boundary so there's no size inversion. 2:3 ratio preserved throughout
   (height = 1.5 × width at min, fluid and max). */
@media (max-width: 1024px) {
  :root {
    --tile-w:           clamp(150px, 19vw, 220px);
    --tile-h:           clamp(225px, 28.5vw, 330px);
    --tile-edge-right:  clamp(20px, 2.6vw, 32px);
    --tile-edge-bottom: clamp(56px, 10vh, 110px);
  }
}

/* Phone — JS still drives count down to 3, tiles get a touch smaller */
@media (max-width: 768px) {
  :root {
    --tile-w:           clamp(100px, 22vw, 150px);
    --tile-h:           clamp(150px, 33vw, 225px);
    --tile-gap:         10px;
    --tile-edge-right:  16px;
    --tile-edge-bottom: 100px;   /* room for mobile CTA row */
    --tile-radius:      8px;
  }
}

@media (max-width: 480px) {
  :root {
    --tile-w:           clamp(96px, 27vw, 132px);
    --tile-h:           clamp(144px, 40vw, 198px);
    --tile-edge-right:  14px;
    --tile-edge-bottom: 96px;
  }
}

/* Landscape phones — tiles much shorter, lifted up */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --tile-h:           clamp(110px, 50vh, 170px);
    --tile-w:           clamp(73px, 33vh, 113px);   /* preserve 2:3 ratio */
    --tile-edge-bottom: 64px;
  }
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.nn-hero {
  position: relative;
  width: 100%;
  /* Stable mobile height — svh never resizes with browser chrome */
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  min-height: 560px;
  /* Neutralise the global `section { padding: 5rem 0 }` rule so the
     hero box is exactly one viewport and nothing scrolls into it. */
  padding: 0;
  overflow: hidden;
  /* Allow native vertical page scrolling (and pinch-zoom) to begin
     immediately on the hero; only horizontal gestures are left to the
     swipe handler. Without this, touch handling can swallow scroll. */
  touch-action: pan-y pinch-zoom;
  background: var(--nn-bg);
  /* Slide-0 placeholder so the first paint is never blank */
  background-image: url('../images/newslider/jpeg/montessori_play_color.jpg');
  background-size: cover;
  background-position: center 40%;
  color: var(--nn-text);
}

/* Vignettes — top scrim for legibility on image-heavy slides */
.nn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 22%, rgba(0,0,0,0) 45%),
    linear-gradient(90deg,  rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 20%, rgba(0,0,0,0) 60%);
}
/* Bottom scrim — lighter, separated so we can adjust mobile independently */
.nn-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 51;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 30%);
}

@media (max-width: 768px) {
  .nn-hero::before {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.48) 28%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0) 75%);
  }
  .nn-hero::after {
    background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0) 100%);
  }
}

/* ============================================================
   CARDS
   Active card = inset:0 (full hero), driven by GSAP setting
   width:'100%' height:'100%'. Tiles get pixel width/height from
   the --tile-w / --tile-h vars via JS at runtime.
   ============================================================ */

.nn-cards-host {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Chromium/Android needs every touched layer to route vertical pans to
   page scroll. Without this the overflow:hidden cards trap the gesture
   (iOS Safari chains regardless; Chrome does not). Horizontal swipes
   are still read by the passive JS swipe handler. */
.nn-cards-host,
.nn-card {
  touch-action: pan-y pinch-zoom;
}

.nn-card {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--nn-bg-dark);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;                                    /* clip the link overlay */
  box-shadow:
    0 18px 36px -10px rgba(0,0,0,0.65),
    0 4px 12px rgba(0,0,0,0.4);
  backface-visibility: hidden;
  will-change: transform;
  z-index: 1;
  transition: box-shadow 0.3s var(--nn-ease);
}

/* Thumbnail tile — ringed on hover */
.nn-card:not(.is-active-card):hover {
  box-shadow:
    0 0 0 2px var(--nn-accent),
    0 20px 40px -8px rgba(0,0,0,0.7);
  z-index: 50;
}

/* Active-tile ring (the one queued next in single mode) */
.nn-card.is-active-tile {
  box-shadow:
    0 0 0 2px var(--nn-accent),
    0 20px 40px -8px rgba(0,0,0,0.7);
}

/* The full-screen active card — no shadow, no rounding (GSAP sets borderRadius:0) */
.nn-card.is-active-card {
  box-shadow: none;
}

/* Card label overlay — the clickable title/place on each tile.
   Visible by default on every viewport so the tiles read as real,
   tappable links rather than bare pictures. */
.nn-card-link {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 14px 14px 16px;
  display: block;
  text-decoration: none;
  color: rgba(255,255,255,0.95);
  z-index: 60;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.25s var(--nn-ease), background 0.25s var(--nn-ease);
  background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.20) 55%, rgba(0,0,0,0) 100%);
}
/* Desktop: deepen the scrim on hover so the focused tile pops */
@media (hover: hover) {
  .nn-card:not(.is-active-card):hover .nn-card-link {
    background: linear-gradient(0deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0) 100%);
  }
}
/* The active full-screen card NEVER shows its own label. The details
   panel (top-left) already owns the place + title + CTAs, so showing
   the card's own bottom-left label would duplicate the title. Hiding
   it on every viewport removes that anomaly and frees the href from
   being triggered on the foreground slide. */
.nn-card.is-active-card .nn-card-link {
  display: none;
}

.nn-card-place {
  display: block;
  font-family: var(--font-accent, 'Montserrat', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nn-accent);
  margin-bottom: 4px;
}
.nn-card-title {
  display: block;
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.1;
}

/* Phones: tiles are small, so trim label padding + type to keep
   the visible link text from clipping against the tile edges. */
@media (max-width: 768px) {
  .nn-card-link { padding: 9px 10px 11px; }
  .nn-card-place { font-size: 8.5px; letter-spacing: 0.8px; margin-bottom: 2px; }
  .nn-card-title { font-size: 12px; line-height: 1.08; }
}
@media (max-width: 480px) {
  .nn-card-link { padding: 7px 8px 9px; }
  .nn-card-place { font-size: 8px; }
  .nn-card-title { font-size: 11px; }
}

/* ============================================================
   KEN BURNS — desktop only, compositor thread
   ============================================================ */

@keyframes nn-kb-a {
  from { transform: scale(1.000) translate3d(0,      0,    0); }
  to   { transform: scale(1.045) translate3d(-0.8%, -0.4%, 0); }
}
@keyframes nn-kb-b {
  from { transform: scale(1.000) translate3d(0,      0,    0); }
  to   { transform: scale(1.045) translate3d( 0.6%,  0.4%, 0); }
}
.nn-card.nn-kb-a { animation: nn-kb-a 14s ease-out forwards; }
.nn-card.nn-kb-b { animation: nn-kb-b 14s ease-out forwards; }

@media (max-width: 768px) {
  .nn-card.nn-kb-a, .nn-card.nn-kb-b { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nn-card.nn-kb-a, .nn-card.nn-kb-b { animation: none !important; }
}

/* ============================================================
   DETAILS — single panel, content swapped in place
   ============================================================ */

.nn-details {
  position: absolute;
  top: clamp(140px, 18vh, 240px);
  /* +10px keeps the slide text clear of the previous (left) arrow */
  left: calc(clamp(20px, 4vw, 60px) + 10px);
  right: auto;
  z-index: 600;
  max-width: min(560px, 50vw);
  color: #fff;
  text-shadow:
    0 2px 10px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.7);
}

.nn-place {
  position: relative;
  display: block;
  font-family: var(--font-accent, 'Montserrat', sans-serif);
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 600;
  letter-spacing: 1.4px;
  padding-top: 14px;
  margin-bottom: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
}
.nn-place::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: var(--nn-accent);
}

.nn-title-1,
.nn-title-2 {
  display: block;
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-weight: 700;
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.5px;
  color: #fff;
}

.nn-desc {
  margin-top: 18px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255,255,255,0.96);
  max-width: 540px;
}

.nn-cta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.nn-cta-btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  border: 1.5px solid rgba(255,255,255,0.70);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-accent, 'Montserrat', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s var(--nn-ease);
}
.nn-cta-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: #fff;
  transform: translateY(-2px);
  color: #fff;
}
.nn-cta-btn:first-child {
  background: var(--nn-secondary);
  border-color: var(--nn-secondary);
}
.nn-cta-btn:first-child:hover {
  background: var(--nn-secondary-dk);
  border-color: var(--nn-secondary-dk);
}

/* ── DETAILS: tablet & phone ─────────────────────────────── */
@media (max-width: 1024px) {
  .nn-details {
    top: calc(var(--nn-navbar-h) + 60px);
    left: 42px;   /* 32px + 10px clearance from the prev arrow */
    max-width: min(60vw, 480px);
  }
}

@media (max-width: 768px) {
  .nn-details {
    top: calc(var(--nn-navbar-h-mobile) + 20px);
    left: 18px;
    right: 18px;
    bottom: 0;            /* stretch to hero bottom so the CTA row can anchor there */
    max-width: none;
    /* The stretched panel must not intercept taps meant for tiles /
       arrows — only its interactive children stay clickable. */
    pointer-events: none;
  }
  .nn-place, .nn-title-1, .nn-title-2, .nn-desc { pointer-events: none; }
  .nn-cta, .nn-cta-btn { pointer-events: auto; }
  .nn-title-1, .nn-title-2 {
    font-size: clamp(30px, 8.4vw, 44px);
    line-height: 1.05;
  }
  .nn-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.45;
  }
  .nn-cta {
    /* Mobile CTAs anchored to bottom, above the tile zone */
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 24px;
    margin-top: 0;
    justify-content: center;
    align-items: stretch;        /* every button matches the tallest one */
    gap: 8px;
    z-index: 650;
    flex-wrap: nowrap;
  }
  .nn-cta-btn {
    /* Equal columns so 2 or 3 buttons always share the row evenly.
       Long labels (e.g. "Maternity Nurses") wrap to a second line
       rather than overflowing; align-items:stretch keeps all three
       the same height so it reads as intentional. */
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 40px;
    padding: 5px 8px;
    font-size: 10px;
    letter-spacing: 0.5px;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .nn-details {
    top: calc(var(--nn-navbar-h-mobile) + 14px);
    left: 14px;
    right: 14px;
  }
  .nn-title-1, .nn-title-2 {
    font-size: clamp(26px, 8vw, 36px);
  }
  .nn-desc {
    font-size: 12px;
    -webkit-line-clamp: 2;
    margin-top: 8px;
  }
  .nn-cta { left: 12px; right: 12px; bottom: 22px; gap: 7px; }
  .nn-cta-btn { min-height: 38px; padding: 5px 6px; font-size: 9.5px; letter-spacing: 0.4px; }
}

@media (max-width: 375px) {
  .nn-title-1, .nn-title-2 { font-size: clamp(22px, 7.5vw, 30px); }
  .nn-cta { gap: 6px; }
  .nn-cta-btn { min-height: 36px; padding: 5px 5px; font-size: 9px; letter-spacing: 0.3px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .nn-details { top: calc(var(--nn-navbar-h-mobile) + 4px); }
  .nn-desc { display: none; }
  .nn-cta { bottom: 12px; }
  /* Landscape has the width for one line, so keep buttons compact + single-line */
  .nn-cta-btn { min-height: 0; height: 32px; padding: 4px 10px; font-size: 9px; white-space: nowrap; }
}

/* ============================================================
   ARROWS — desktop flanks; mobile uses same elements smaller
   ============================================================ */

.nn-arrow {
  position: absolute;
  top: 50%;
  z-index: 400;
  width: 42px;
  height: 54px;
  border-radius: 6px;
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s, border-color 0.2s;
  /* Use top + margin (not translateY) so GSAP can own the x transform without conflict */
  margin-top: -27px;
}
.nn-arrow:hover {
  background: rgba(0,0,0,0.6);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.nn-arrow svg { width: 20px; height: 20px; }

.nn-arrow-left  { left:  20px; }
.nn-arrow-right { right: 20px; }

@media (max-width: 768px) {
  .nn-arrow {
    width: 36px;
    height: 44px;
    margin-top: -22px;
    border-radius: 6px;
  }
  .nn-arrow-left  { left:  12px; }
  .nn-arrow-right { right: 12px; }
}

@media (max-width: 480px) {
  .nn-arrow { width: 32px; height: 40px; margin-top: -20px; }
  .nn-arrow-left  { left:  10px; }
  .nn-arrow-right { right: 10px; }
}

/* ============================================================
   TOGGLE BUTTON — paired left of the right arrow
   ============================================================ */

#nn-toggle {
  position: absolute;
  top: 50%;
  right: 74px;
  margin-top: -17px;
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 10px;
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-accent, 'Montserrat', sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
#nn-toggle:hover {
  background: rgba(0,0,0,0.65);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
}
.nn-toggle-icon { display: inline-flex; }
.nn-toggle-icon svg { width: 13px; height: 13px; }

@media (max-width: 768px) {
  #nn-toggle {
    right: 60px;
    margin-top: -19px;
    padding: 8px 12px;
    border-radius: 24px;
  }
  .nn-toggle-icon svg { width: 22px; height: 22px; }
  .nn-toggle-label    { display: none; }
}

@media (max-width: 480px) {
  #nn-toggle {
    right: 52px;
    margin-top: -18px;
    padding: 7px 10px;
  }
  .nn-toggle-icon svg { width: 20px; height: 20px; }
}

/* ============================================================
   INDICATOR — top progress bar
   ============================================================ */ 

.nn-indicator-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 300;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}
#nn-indicator {
  position: absolute;
  inset: 0;
  background: var(--nn-accent);
  transform: translateX(-100%);   /* JS animates this */
  will-change: transform;
}

/* ============================================================
   COVER — wipes away on init
   ============================================================ */

.nn-cover {
  position: absolute;
  inset: 0;
  background-color: var(--nn-bg-dark);
  background-image: url('../images/newslider/jpeg/montessori_play_color.jpg');
  background-size: cover;
  background-position: center 40%;
  z-index: 500;
  will-change: transform;
}