/* ===========================================================================
   Responsive layer for the Domov design export (index.html).

   The export from the design tool carries its layout in INLINE styles and ships
   no media queries, so at phone widths the hero and the chapter sections stayed
   two-column and the prose collapsed into a ~150px ribbon. That is why the first
   attempt at publishing the export was reverted (2026-09-15).

   Every rule here needs `!important`: it is overriding an inline `style`
   attribute, which otherwise always wins. Nothing above 900px is touched — the
   desktop rendering stays byte-for-byte the design.
   =========================================================================== */

/* NOTE (2026-09-15): an attribute selector matches the style attribute as the
   BROWSER serializes it — "border-radius: 999px", with a space after the colon,
   not the colon-tight form written in the export's HTML. Four rules below were
   written in the tight form and matched zero elements. Match on the VALUE only
   ("440px", "52px"), which is whitespace-insensitive and survives both forms. */

/* ── tablet and below: stack every two-column grid ── */
@media (max-width: 900px) {
  /* Scoped to the SECTION-level grids (hero, chapter splits, book row). The
     step rows are grids too, but theirs is "number | text" and must stay
     side-by-side — hence `section` / `section > div`, not a bare attribute
     selector. */
  section[style*="grid-template-columns"],
  section > div[style*="grid-template-columns"],
  section > div > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  /* section padding: the export's clamp() floors are desktop-sized */
  section[style*="padding"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* the hero image is a portrait crop — cap it so the fold still shows copy */
  figure[style*="aspect-ratio"] {
    aspect-ratio: 4 / 3 !important;
    max-height: 46vh !important;
  }

  /* the book spread sits above the 3D book once stacked */
  figure[style*="440px"] {
    max-width: none !important;
  }
}

/* ── phones ── */
@media (max-width: 700px) {
  /* nav text links give way to the CTA button (same rule the previous
     hand-built landing used); the wordmark + CTA stay. */
  .sp-site-nav {
    display: none !important;
  }

  header {
    gap: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* display type: the export's clamp() minimums are still desktop-scale */
  h1[style*="font-size"] {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
  }
  h2[style*="font-size"] {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem) !important;
  }

  /* the drop cap eats a third of a narrow column at 3.4em */
  span[style*="3.4em"] {
    font-size: 2.6em !important;
  }

  /* band rhythm: 96–144px between bands is a lot of empty phone screen */
  section[style*="padding"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* step numbers (52px serif) and their text need less gutter */
  span[style*="52px"] {
    font-size: 40px !important;
    min-width: 30px !important;
  }

  /* the 3D book is 240px wide plus a 46px glow halo — fits, but center it */
  [style*="perspective"] {
    padding: 8px 0 !important;
  }

  /* quote marquee: 20px italic serif scrolling at 60s reads as too fast/large */
  .sp-marq span {
    font-size: 17px !important;
  }
  .sp-marq {
    gap: 48px !important;
  }
}

/* ── very narrow (≤380px) ── */
@media (max-width: 380px) {
  section[style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  ul[style*="16px 48px"] {
    gap: 12px 24px !important;
  }
}

/* ===========================================================================
   Motion layer: smooth in-page navigation + soft hover states.

   Same !important rule as above — the export carries its colors and borders in
   inline `style` attributes, so a hover rule without it is dead on arrival.
   `transition` itself is never set inline, so those declarations need no flag.
   =========================================================================== */

html {
  scroll-behavior: smooth;
  /* the header is sticky; without this the anchor target lands under it */
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

/* header links (Kako deluje / Knjiga / Prijava) */
/* `nav.` is load-bearing: `a[href^="#"]` below has the same specificity and
   comes later, and `transition` is replaced wholesale, not merged. */
nav.sp-site-nav a {
  transition: background-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
              color 220ms ease,
              border-color 260ms ease,
              transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
nav.sp-site-nav a:hover {
  background: rgba(185, 143, 136, 0.16) !important;
  color: #3B2F2A !important;
  transform: translateY(-1px);
}
nav.sp-site-nav a:active { transform: translateY(0); }
nav.sp-site-nav a:focus-visible { outline: 2px solid #8E6B64; outline-offset: 2px; }

/* the pill CTA, in the header and in the page body */
a[style*="999px"] {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 220ms ease;
}
a[style*="999px"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(42, 32, 24, 0.18) !important;
  filter: brightness(1.04);
}
a[style*="999px"]:active { transform: translateY(0); }

/* quiet in-page anchors ("Poglejte, kako deluje ↓") reveal their underline */
a[href^="#"] {
  transition: color 220ms ease, border-color 260ms ease;
}
a[href^="#"]:hover { border-bottom-color: #6B5951 !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  nav.sp-site-nav a,
  a[style*="999px"],
  a[href^="#"] { transition-duration: 1ms !important; }
  nav.sp-site-nav a:hover,
  a[style*="999px"]:hover { transform: none; }
}

/* Language picker (generated by scripts/build_locales.py): CSS-only dropdown,
   no JS — the design-system runtime would not run it anyway. */
.sp-lang .sp-lang-menu { display: none; }
.sp-lang:hover .sp-lang-menu, .sp-lang:focus-within .sp-lang-menu { display: block; }
.sp-lang .sp-lang-menu a:hover { background: #F1E4D6; }
.sp-lang:hover .sp-lang-trigger, .sp-lang:focus-within .sp-lang-trigger { background: #E8D5C8; }