/* =============================================================================
   page.css — the standalone SEO landing pages (/tvorba-webovych-stranek, /cenik, …)

   These pages share style.css with the homepage so buttons, type and colour are
   identical, and add only what long-form content needs. They deliberately drop the
   homepage's video sky, WebGL shader and chat widget: a visitor arriving cold from a
   search result is one back-button from gone, and Core Web Vitals are a ranking input.
   Everything below is static CSS — no image request, no script, paints on first frame.
   Scoped to body.page so nothing here can leak onto the homepage.
   ============================================================================= */

/* The background is the homepage's own .sky-bg (style.css): two cross-fading cloud clips
   under a scrim, with a static gradient built into the same element for the moments before
   the video arrives, for reduced-motion, and for a machine the frame-pacing watchdog has
   demoted. Nothing is overridden here — one background layer, one code path, identical to
   the homepage. The clips are fetched after load+idle by the loader in build-pages.mjs. */
body.page {
  background: #7aa3c8;   /* matches the first stop of .sky-bg, so there is no flash */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* .sky-bg is position:fixed at z-index 0, so the page's own content has to be lifted
   above it — on the homepage the sections do that themselves. */
body.page .page-main,
body.page .footer { position: relative; z-index: 1; }

/* The footer needs its OWN plate, not the shared one.
   Every other surface on these pages carries a dark fill (nav, header, sheets, CTA); the
   footer was the exception because on the homepage it gets one from
   [data-theme="sky"][data-glass="on"] .footer — and `data-glass` is set by js/sky.js.
   Here sky.js is deliberately skipped for prefers-reduced-motion, Save-Data/2G and any
   browser the frame-pacing watchdog already demoted (ddPerfLow), so for those visitors the
   footer stayed fully transparent: measured 1.53:1 white-on-pale-sky. That hides the GDPR
   link, and below 560px .footer-sitemap is the ONLY way to reach the sibling pages.
   Unconditional, so it holds whether or not sky.js ever runs. */
body.page .footer {
  /* Same recipe as .sheet. The first attempt used the nav's lighter rgba(8,24,44,.52),
     which composited to only 4.28:1 over the pale bottom of the sky gradient — under the
     4.5:1 AA needs for 12px footer text. This measures 5.13:1 against that same worst case. */
  background: rgba(12, 32, 54, 0.62);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body.page .page-main { flex: 1 0 auto; }

/* --- nav ------------------------------------------------------------------
   style.css hides .nav-links below 860px and swaps in a burger, but the burger is
   driven by js/main.js which these pages do not load. Rather than ship a script for
   five links, the row stays visible and scrolls sideways on a phone. */
/* On the homepage .nav is position:fixed and js/main.js toggles .scrolled to fade its glass
   backing in past 12px. These pages load no main.js, so that backing would never appear and
   the links would sit on bare moving cloud for the entire scroll. Sticky keeps the nav in
   flow (no overlap maths against a fixed bar) and the backing is simply always on — unlike
   the homepage there is no tall hero for it to be transparent over. Recipe is the sky
   theme's own .nav.scrolled from style.css, not a new one. */
body.page .page-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 24, 44, 0.42);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

@media (max-width: 860px) {
  body.page .page-nav-links {
    display: flex;
    gap: 1.15rem;
    margin: 0 0 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: 58vw;
    padding-bottom: 2px;
  }
  body.page .page-nav-links::-webkit-scrollbar { display: none; }
  body.page .page-nav-links a { white-space: nowrap; font-size: 0.84rem; }
}

@media (max-width: 560px) {
  body.page .page-nav-links { display: none; }   /* below this the CTA needs the room */
  body.page .nav-inner { gap: 1rem; }
  /* At 320px the full wordmark (202px) plus the CTA (88px) does not fit the 257px nav.
     The homepage survives that only because its non-flex body clips the overflow; these
     pages use a flex body, where the overflow escapes to the document and produces a real
     sideways scroll. Shortening the mark to "DANS." makes it genuinely fit instead of
     hiding the symptom. */
  body.page .logo-thin { display: none; }
}

.page-nav-links a[aria-current="page"] { color: #fff; }
.page-nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* --- conversion components borrowed from the homepage ---------------------
   These reuse the homepage's own classes (.assurance-chip, .faq, .pricing,
   .price-card) so the landing pages stop reading as "text on a background".
   Only the bits that need a different backdrop here are restated. */

.page-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}

body.page .assurance-chip {
  background: rgba(12, 32, 54, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* FAQ + pricing sit INSIDE a .sheet on these pages, so their homepage borders
   (tuned for a dark section background) need toning to the sheet's own surface. */
body.page .sheet .faq { border-top-color: rgba(255, 255, 255, 0.24); margin-top: 0; }
body.page .sheet .faq details { border-bottom-color: rgba(255, 255, 255, 0.16); }
body.page .sheet .faq summary { color: #fff; }
body.page .sheet .faq p { color: rgba(255, 255, 255, 0.95); }

body.page .pricing { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
body.page .price-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  padding: 1.6rem 1.4rem;
}
body.page .price-card h3 { margin-top: 0; }

.page-cta-direct { font-size: 0.95rem; margin: 0 auto 0.2rem; }
.page-cta-direct a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* --- page head ------------------------------------------------------------ */
.page-main { padding: 2.4rem 0 4rem; }

.crumbs {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1rem;
}
.crumbs a { color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: #fff; }

/* The header gets a sheet for the same reason the homepage's hero does: over a moving
   cloud a bright frame drops un-sheeted white text to roughly 2.9:1, and the lead here is
   body-size, not display-size. On a sheet it measures ~6:1 regardless of which frame is
   on screen. The clouds stay visible in the gutters around it. */
.page-head {
  max-width: 46rem;
  margin-bottom: 2.6rem;
  background: rgba(12, 32, 54, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.1rem;
  padding: clamp(1.4rem, 3.4vw, 2.2rem);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1rem;
  color: #fff;
  text-shadow: 0 2px 22px rgba(8, 28, 48, 0.34);
}

.page-lead {
  font-size: clamp(1.05rem, 2.2vw, 1.24rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  text-shadow: 0 1px 14px rgba(8, 28, 48, 0.3);
}

/* --- content sheets -------------------------------------------------------
   Long-form copy over a photographic sky is unreadable without a backing sheet;
   this is the same liquid-glass idea as the homepage, minus the blur cost. */
/* DARK glass, not the homepage's light glass. The homepage can use white-on-white-glass
   because its sky sits under a dark scrim (rgba(10,30,52,.46) in style.css). These pages
   have no video and therefore no scrim, so a light sheet over a light sky puts white text
   at roughly 3:1 — unreadable in daylight on a phone. This is the same navy the perf
   watchdog already falls back to (rgba(12,32,54,.62) in style.css) when it kills blur,
   i.e. a treatment this codebase has already proven readable. Measured against the
   lightest point of the gradient below, white text lands near 6:1. */
.sheet {
  background: rgba(12, 32, 54, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.1rem;
  padding: clamp(1.4rem, 3.4vw, 2.4rem);
  margin-bottom: 1.5rem;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

.sheet > :first-child { margin-top: 0; }
.sheet > :last-child { margin-bottom: 0; }

.sheet h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: #fff;
}

.sheet h3 {
  font-family: var(--font-display);
  font-size: 1.06rem;
  margin: 1.6rem 0 0.5rem;
  color: #fff;
}

.sheet p,
.sheet li {
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.72;
  font-size: 1.01rem;
}

.sheet p { margin: 0 0 1rem; }
.sheet ul, .sheet ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.sheet li { margin-bottom: 0.45rem; }
.sheet strong { color: #fff; font-weight: 600; }

.sheet a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sheet a:hover { color: var(--sky-hi); }

/* two-column feature grid inside a sheet */
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem 1.8rem;
}
.sheet-grid h3 { margin-top: 0; }

/* --- price rows (the /cenik page) ---------------------------------------- */
.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.price-row:first-of-type { border-top: 0; }
.price-row h3 { margin: 0; flex: 1 1 14rem; font-size: 1.1rem; }
.price-row .amount {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.price-row .amount small { font-size: 0.7em; font-weight: 500; opacity: 0.82; margin-right: 0.25rem; }
.price-row p { flex: 1 1 100%; margin: 0.3rem 0 0; font-size: 0.95rem; opacity: 0.94; }

/* --- closing CTA ---------------------------------------------------------- */
.page-cta {
  background: rgba(12, 32, 54, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1.1rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  margin-top: 2.6rem;
  text-align: center;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}
.page-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  margin: 0 0 0.7rem;
  color: #fff;
}
.page-cta p { color: rgba(255, 255, 255, 0.95); margin: 0 auto 1.4rem; max-width: 34rem; line-height: 1.65; }
.page-cta-row { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.page-cta-note { font-size: 0.9rem; margin: 1.2rem auto 0; opacity: 0.9; }
.page-cta-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* --- reduced motion / print ---------------------------------------------- */
@media print {
  .page-sky, .grain, .page-nav { display: none; }
  .sheet, .page-cta { background: none; border: 0; backdrop-filter: none; padding: 0; }
  .page-title, .sheet h2, .sheet h3, .sheet p, .sheet li { color: #000; text-shadow: none; }
}