/* Strážnice dětské skupiny — iteration 1
   Direction: modern, paper-warm, scroll-rewarding, video-bg-ready.
   No external CDN. Mobile-first (360 → 720 → 1100). */

:root {
  /* TYPOGRAPHY — system stacks with full Czech glyph coverage */
  --font-display: Constantia, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-numeric: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* Paper-warm base — neutral across both nurseries */
  --paper: #F7F0DD;
  --paper-strong: #FBF6E8;
  --paper-deep: #EFE5C9;
  --ink: #221E18;
  --muted: #342D24;
  --rule: rgba(34, 30, 24, 0.14);
  --rule-strong: rgba(34, 30, 24, 0.32);

  /* Shared honey accent — warmth carrier */
  --honey: #D4892C;
  --honey-soft: #ECC273;

  /* Per-nursery accents (defaults set per body class) */
  --rybicka-deep: #155874;
  --rybicka-mid: #3F8AAB;
  --rybicka-soft: #A9D2E2;
  --rybicka-wash: #DAE9EE;

  --barvinek-deep: #4D3F7E;
  --barvinek-mid: #7868A8;
  --barvinek-soft: #C9BEDF;
  --barvinek-wash: #E2DBED;

  --accent: var(--rybicka-deep);
  --accent-mid: var(--rybicka-mid);
  --accent-soft: var(--rybicka-soft);
  --accent-wash: var(--rybicka-wash);

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.5rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 9rem;

  /* Fluid type */
  --t-eyebrow: 0.78rem;
  --t-sm: 0.92rem;
  --t-base: 1.0625rem;
  --t-lg: clamp(1.12rem, 0.75vw + 0.98rem, 1.32rem);
  --t-xl: clamp(1.38rem, 1.15vw + 1rem, 1.82rem);
  --t-2xl: clamp(1.9rem, 2vw + 1rem, 2.65rem);
  --t-3xl: clamp(2.45rem, 3.6vw + 1rem, 4.25rem);
  --t-display: clamp(2.9rem, 6.4vw + 0.55rem, 5.55rem);

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 28px;
  --r-xl: 42px;

  --shadow-card: 0 2px 0 rgba(34, 30, 24, 0.04), 0 24px 60px -28px rgba(34, 30, 24, 0.18);
  --shadow-stamp: 4px 4px 0 var(--accent);

  --transition: 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-slow: 600ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Paper grain via subtle radial gradients */
  --grain:
    radial-gradient(circle at 12% 18%, rgba(212, 137, 44, 0.04) 0, transparent 38%),
    radial-gradient(circle at 88% 76%, rgba(77, 63, 126, 0.03) 0, transparent 48%);
}

body.barvinek {
  --accent: var(--barvinek-deep);
  --accent-mid: var(--barvinek-mid);
  --accent-soft: var(--barvinek-soft);
  --accent-wash: var(--barvinek-wash);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
    --transition-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== Reset ========== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(63, 138, 171, 0.24), transparent 34rem),
    radial-gradient(circle at 86% 22%, rgba(212, 137, 44, 0.18), transparent 28rem),
    linear-gradient(180deg, #eef5ee 0%, var(--paper) 38%, #f1e4c3 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.has-quick-actions {
  padding-bottom: 72px;
}
body.legal-page {
  background:
    linear-gradient(180deg, #fbf6e8 0%, #f7f0dd 44%, #efe5c9 100%);
  background-attachment: fixed;
}
body.legal-page::before {
  opacity: 0.26;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.26), transparent 34%, rgba(255, 255, 255, 0.18) 58%, transparent 74%),
    repeating-linear-gradient(90deg, rgba(21, 88, 116, 0.035) 0 1px, transparent 1px 42px);
  opacity: 0.8;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; transition: color var(--transition); }
a:hover, a:focus-visible { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin: 0 0 var(--s-3);
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-2xl); letter-spacing: -0.012em; line-height: 1.1; }
h3 { font-size: var(--t-xl); }
p {
  max-width: 64ch;
  margin: 0 0 var(--s-3);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 800;
  margin-bottom: var(--s-2);
  transition: transform var(--transition), color var(--transition), background var(--transition);
}

/* ========== Layout primitives ========== */

.container {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--s-3);
}
.container--narrow { max-width: 48rem; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ink);
  color: var(--paper-strong);
  padding: var(--s-2) var(--s-3);
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus { top: 0; }

/* ========== Tiny utilities ========== */

.muted { color: var(--ink); }
.center { text-align: center; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }

/* "flow" — vertical rhythm. Direct children get top-margin between siblings.
   Lifted from Every Layout by Heydon Pickering. */
.flow > * + * { margin-top: var(--s-3); }

/* ========== Reveal-on-scroll utility ========== */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-revealed { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-revealed { transform: translateX(0); }

/* ========== Header ========== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 240, 221, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), padding var(--transition);
  padding: var(--s-3) 0;
}
.site-header.is-shrunk {
  background: rgba(251, 246, 232, 0.92);
  border-bottom-color: var(--rule);
  padding: var(--s-2) 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--ink);
  border-radius: 36% 64% 54% 46%;
  background: var(--accent-wash);
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-stamp);
}
.brand:hover .brand-mark { transform: rotate(-3deg); }
.brand-mark svg { width: 32px; height: 32px; }
.legal-mark {
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--paper-strong);
  color: var(--ink);
  box-shadow: none;
}
.brand:hover .legal-mark { transform: none; }

.barvinek .brand-mark { border-radius: 64% 36% 46% 54%; }

.brand-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand-name__primary {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand-name__sub {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  border: 1.5px solid var(--ink);
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
}
.nav-toggle__line {
  display: inline-block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  position: relative;
}
.nav-toggle__line::before, .nav-toggle__line::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle__line::before { top: -6px; }
.nav-toggle__line::after { top: 6px; }

.nav {
  display: none;
  width: 100%;
  flex-direction: column;
}
.nav.is-open { display: flex; }
.nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 500;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
.nav a:last-child { border-bottom: 0; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] {
  color: var(--accent);
}

.sister-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--muted);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  border: 1px solid var(--rule);
  transition: border-color var(--transition), color var(--transition);
}
.sister-link:hover, .sister-link:focus-visible {
  color: var(--ink);
  border-color: var(--rule-strong);
}
.sister-link::after { content: "→"; }

.quick-action-bar {
  position: fixed;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  padding: var(--s-2);
  background: rgba(251, 246, 232, 0.94);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: 0 18px 48px -24px rgba(34, 30, 24, 0.46);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.quick-action-bar a {
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 800;
  text-decoration: none;
}
.quick-action-bar a:first-child {
  background: var(--accent);
  color: var(--paper-strong);
}

@media (min-width: 1040px) {
  body.has-quick-actions { padding-bottom: 0; }
  .quick-action-bar { display: none; }
  .nav-toggle { display: none; }
  .nav {
    display: flex !important;
    flex-direction: row;
    width: auto;
    gap: var(--s-5);
  }
  .nav a {
    border: 0;
    padding: var(--s-2) 0;
    min-height: 0;
    font-size: var(--t-sm);
    font-weight: 600;
  }
}

/* ========== Hero (with video-bg slot) ========== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(5rem, 8vw, 7rem);
  min-height: clamp(620px, 86svh, 840px);
  display: flex;
  align-items: center;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
  width: 100%;
}
.hero-grid--solo {
  grid-template-columns: 1fr;
}
.hero-copy--center {
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
}
.hero-copy h1 {
  font-size: var(--t-display);
  margin-bottom: var(--s-3);
  max-width: 100%;
}
.hero-copy {
  position: relative;
}
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -2.5rem auto auto -2.25rem;
  z-index: -1;
  width: min(38vw, 22rem);
  aspect-ratio: 1;
  border-radius: 42% 58% 52% 48%;
  background: rgba(255, 255, 255, 0.22);
  filter: blur(2px);
}
.hero-copy h1 .accent {
  color: var(--accent);
  font-style: italic;
  display: inline-block;
}
.hero-copy .lead {
  font-size: var(--t-lg);
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  max-width: 32ch;
  margin-bottom: var(--s-4);
}
.hero-copy .summary {
  max-width: 44ch;
  color: var(--ink);
  margin-bottom: var(--s-4);
  font-size: 1.04rem;
  font-weight: 650;
  text-shadow: 0 1px 18px rgba(251, 246, 232, 0.95);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.hero-actions--center {
  justify-content: center;
}

@media (max-width: 1039px) {
  .hero {
    min-height: auto;
    padding: var(--s-6) 0 var(--s-5);
  }
  .hero-copy h1 {
    font-size: clamp(2.35rem, 8vw, 3.6rem);
    letter-spacing: -0.026em;
  }
  .hero-copy .summary {
    max-width: 38ch;
  }
  .hero-card {
    max-width: 34rem;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  min-height: 52px;
  transition: transform 160ms ease, box-shadow 160ms ease, background var(--transition);
  box-shadow: var(--shadow-stamp);
}
.btn:hover, .btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--accent);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 transparent;
}
.btn-primary {
  background: var(--accent);
  color: var(--paper-strong);
  border-color: var(--accent);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-primary:hover, .btn-primary:focus-visible {
  box-shadow: 6px 6px 0 var(--ink);
}

.hero-card {
  background: rgba(251, 246, 232, 0.72);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: var(--r-xl);
  padding: clamp(1.35rem, 2.3vw, 2rem);
  transform: none;
  box-shadow: 0 30px 80px -42px rgba(34, 30, 24, 0.46);
  display: grid;
  gap: var(--s-3);
}
.barvinek .hero-card { transform: none; }

.hero-card__title {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-2);
}
.glance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin: 0;
}

@media (max-width: 430px) {
  .hero {
    min-height: auto;
    padding: var(--s-6) 0 var(--s-5);
  }

  .hero-copy h1 {
    font-size: clamp(2.25rem, 10.6vw, 2.85rem);
    letter-spacing: -0.026em;
  }

  .hero-copy h1 .accent {
    display: inline;
  }
}
.glance-grid > div {
  border-bottom: 1px dashed var(--rule);
  padding-bottom: var(--s-3);
}
.glance-grid > div:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.glance-grid dt {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 700;
}
.glance-grid dd {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 0.85vw + 0.95rem, 1.28rem);
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: var(--t-sm);
  font-weight: 700;
}
.status-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

@media (min-width: 1040px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.85fr);
    gap: var(--s-6);
  }
  .hero-grid--solo {
    grid-template-columns: 1fr;
  }
}

/* ========== Sections ========== */

.section {
  padding: var(--s-6) 0;
  position: relative;
}
.section--quiet {
  background: rgba(251, 246, 232, 0.30);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.section--accent {
  background: var(--accent-wash);
}

.section__head {
  margin-bottom: var(--s-4);
  max-width: 44rem;
}
.section__head--centred { margin-left: auto; margin-right: auto; text-align: center; }
.section__head p:not(.eyebrow) {
  margin-left: auto;
  margin-right: auto;
  color: var(--ink);
  font-weight: 560;
}
[data-reveal].is-revealed .eyebrow {
  animation: section-label-pop 900ms cubic-bezier(0.2, 0.9, 0.25, 1.28) 180ms both;
}
@keyframes section-label-pop {
  0% {
    opacity: 0;
    transform: scale(0.72) translateY(12px);
  }
  62% {
    opacity: 1;
    transform: scale(1.28) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ========== Parent decision layer ========== */

.decision-section {
  z-index: 2;
  margin-top: 0;
  padding-top: var(--s-5);
}
.decision-section .section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  max-width: 62rem;
  text-align: center;
}
.decision-section .section__head .eyebrow {
  justify-self: center;
}
.decision-section .section__head h2 {
  max-width: 12ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.decision-section .section__head p:not(.eyebrow) {
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}
.decision-grid,
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.decision-card,
.trust-card {
  background: rgba(251, 246, 232, 0.74);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2vw, 1.7rem);
  box-shadow: var(--shadow-card);
}
.decision-card {
  min-height: 100%;
}
.decision-card--primary {
  background:
    radial-gradient(circle at top right, rgba(236, 194, 115, 0.54), transparent 48%),
    linear-gradient(145deg, rgba(251, 246, 232, 0.78), rgba(218, 233, 238, 0.72));
  border-color: rgba(255, 255, 255, 0.58);
  min-height: 16rem;
}
.decision-card--fact {
  display: flex;
  min-height: 10rem;
  flex-direction: column;
  justify-content: space-between;
}
.decision-card__label,
.trust-card__number {
  display: inline-flex;
  margin-bottom: var(--s-3);
  color: var(--accent);
  font-family: var(--font-numeric);
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.decision-card strong {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw + 0.9rem, 2.1rem);
  line-height: 1.05;
}
.decision-card p,
.trust-card p {
  color: var(--muted);
  margin-bottom: 0;
}
.text-link {
  display: inline-flex;
  margin-top: var(--s-2);
  font-weight: 900;
  text-decoration-thickness: 2px;
}

.trust-section {
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0%, rgba(251, 246, 232, 0.20) 38%, rgba(251, 246, 232, 0.34) 100%);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.trust-section .section__head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.trust-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
}
.trust-card h3 {
  font-size: clamp(1.24rem, 1vw + 1rem, 1.55rem);
}
.trust-card--feature h3 {
  font-size: var(--t-xl);
}
.trust-card::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -48px;
  width: 132px;
  height: 132px;
  border: 22px solid color-mix(in srgb, var(--accent-soft) 42%, transparent);
  border-radius: 44% 56% 52% 48%;
}
.trust-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

@media (min-width: 720px) {
  .decision-section .section__head {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    align-items: end;
  }
  .decision-section .section__head .eyebrow {
    grid-column: 1 / -1;
  }
  .decision-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .decision-card--primary {
    grid-column: span 2;
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1180px) {
  .decision-grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.8fr));
  }
  .decision-card--primary {
    grid-column: span 1;
  }
  .trust-grid {
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 0.9fr));
  }
  .trust-card--feature {
    grid-row: span 2;
  }
}

/* ========== Pullquote (philosophy) — large, scrolly ========== */

.pull {
  text-align: center;
  max-width: min(44rem, 92vw);
  margin: 0 auto;
  position: relative;
}
.pull__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-2xl);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.pull__decor {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin: var(--s-5) auto 0;
  color: var(--accent);
}
.pull__decor svg {
  width: 32px;
  height: 32px;
  opacity: 0.5;
  transition: opacity var(--transition), transform var(--transition);
}
.pull__decor svg:hover { opacity: 1; transform: scale(1.1); }

/* The fish-school decoration around the philosophy quote */
.fish-school {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--s-3);
  transform: translateY(-50%);
  opacity: 0.2;
  z-index: -1;
}
.fish-school svg {
  width: 48px;
  height: 24px;
  color: var(--accent);
}
.fish-school svg:nth-child(odd) { animation: drift 9s ease-in-out infinite; }
.fish-school svg:nth-child(even) { animation: drift 11s ease-in-out infinite reverse; transform: scaleX(-1); }
@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

/* ========== Náš den panel — activity icons ========== */

.day-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 720px) { .day-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .day-grid { grid-template-columns: repeat(6, 1fr); } }

.day-card {
  background: rgba(251, 246, 232, 0.62);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-3);
  text-align: center;
  transition: transform var(--transition), border-color var(--transition);
}
.day-card:hover {
  transform: translateY(-4px) rotate(-1.5deg);
  border-color: var(--accent);
}
.day-card svg {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--s-2);
  color: var(--accent);
}
.day-card__label {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.day-card__time {
  font-family: var(--font-numeric);
  font-size: var(--t-sm);
  color: var(--muted);
  margin: 0;
}

/* ========== Pricing ========== */

.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
@media (min-width: 720px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}

.price-card {
  background: rgba(251, 246, 232, 0.62);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-4);
  transition: box-shadow var(--transition);
}
.price-card:hover { box-shadow: var(--shadow-card); }
.price-card dt {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.price-card dd {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  color: var(--ink);
  margin: 0;
  line-height: 1;
}
.price-card dd small {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 4px;
}
.price-note {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--muted);
  text-align: center;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.tier-title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  text-align: center;
  color: var(--accent);
  margin: var(--s-5) 0 var(--s-3);
}
.tier-title:first-child { margin-top: 0; }

/* ========== Photo gallery ========== */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery > .photo:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.6) 0%, transparent 25%),
    linear-gradient(135deg, var(--accent-soft) 0%, var(--honey-soft) 100%);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition);
}
.photo:hover { transform: rotate(-1deg) scale(1.02); }
.photo[data-desc]::after {
  content: attr(data-desc);
  position: absolute;
  inset: auto var(--s-2) var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: rgba(34, 30, 24, 0.8);
  color: var(--paper-strong);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-style: italic;
  letter-spacing: 0.02em;
  max-width: calc(100% - var(--s-4));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== Invitation block ========== */

.invite {
  background: linear-gradient(160deg, rgba(251, 246, 232, 0.62) 0%, color-mix(in srgb, var(--accent-wash) 62%, transparent) 100%);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.invite::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 60%);
  opacity: 0.5;
}
.invite__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-2xl);
  line-height: 1.15;
  color: var(--accent);
  margin: 0 0 var(--s-3);
  position: relative;
}
.invite__lead {
  color: var(--muted);
  margin-bottom: var(--s-4);
  position: relative;
}

/* ========== Form ========== */

.form-shell {
  background: rgba(251, 246, 232, 0.62);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4);
}
@media (min-width: 720px) { .form-shell { padding: var(--s-6); } }

/* ========== Disclosure wrapper (collapsed e-přihláška) ==========
   Not everyone visiting needs to apply. Hide the long form behind
   a CTA button using native <details>/<summary>. */
.form-disclosure {
  margin-top: var(--s-4);
}
.form-disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  width: fit-content;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: var(--paper-strong);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-base);
  letter-spacing: 0.01em;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform var(--transition), box-shadow var(--transition);
}
.form-disclosure > summary::-webkit-details-marker { display: none; }
.form-disclosure > summary::after {
  content: "+";
  font-size: 1.4em;
  font-weight: 300;
  line-height: 1;
  transition: transform var(--transition);
}
.form-disclosure[open] > summary::after { content: "−"; }
.form-disclosure > summary:hover,
.form-disclosure > summary:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
  outline: none;
}
.form-disclosure[open] > summary { margin-bottom: var(--s-4); }
.form-disclosure[open] > .form-shell {
  animation: glass-reveal 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes glass-reveal {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
.field {
  display: block;
  margin-bottom: var(--s-3);
}
.field__label {
  display: block;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: var(--s-1);
}
.field__input, .field__select, .field__textarea {
  width: 100%;
  padding: var(--s-3);
  background: var(--paper);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--ink);
  min-height: 52px;
  transition: border-color var(--transition);
}
.field__textarea { min-height: 7rem; resize: vertical; }
.field__input:focus, .field__select:focus, .field__textarea:focus {
  border-color: var(--accent);
}
.next-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}
.next-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  background: rgba(251, 246, 232, 0.62);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.next-steps span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper-strong);
  font-family: var(--font-numeric);
  font-weight: 900;
}
.next-steps strong {
  display: block;
  grid-column: 2;
  margin-bottom: 0.2rem;
}
.next-steps p {
  grid-column: 2;
  color: var(--muted);
  margin: 0;
}
.form-actions {
  margin-top: var(--s-4);
  text-align: center;
}
.form-status {
  min-height: 1.5rem;
  margin: var(--s-3) 0 0;
  color: var(--accent);
  font-weight: 800;
  text-align: center;
}
.contact-card {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 720px) {
  .next-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========== Slovácko-pattern divider ========== */

.folk-band {
  height: 64px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 64' fill='%23221E18' opacity='0.08'><g><path d='M40 8 C30 8, 24 18, 28 28 C20 24, 14 32, 18 40 C12 38, 8 44, 12 50 C8 50, 6 56, 12 58 L12 60 L68 60 L68 58 C74 56, 72 50, 68 50 C72 44, 66 38, 60 40 C64 32, 58 24, 50 28 C54 18, 48 8, 40 8 Z M40 14 C46 14, 50 22, 44 28 L40 26 L36 28 C30 22, 34 14, 40 14 Z'/><circle cx='10' cy='12' r='2'/><circle cx='70' cy='14' r='2'/><circle cx='8' cy='32' r='1.5'/><circle cx='72' cy='34' r='1.5'/></g></svg>");
  background-repeat: repeat-x;
  background-size: 80px 64px;
  background-position: center;
  opacity: 0.6;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ========== Podpora a partneři — logo strip ========== */

.partners {
  background: rgba(251, 246, 232, 0.30);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  padding: var(--s-6) 0;
}
.partners__head {
  text-align: center;
  margin-bottom: var(--s-5);
}
.partners__title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  margin: 0 0 var(--s-2);
}
.partners__lead {
  color: var(--muted);
  font-size: var(--t-sm);
  max-width: 50ch;
  margin: 0 auto;
}

.logo-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
@media (min-width: 720px) { .logo-strip { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .logo-strip { grid-template-columns: repeat(8, 1fr); } }

.logo {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background: rgba(247, 240, 221, 0.45);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--r-md);
  padding: var(--s-3);
  font-family: var(--font-numeric);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
.logo:hover, .logo:focus-visible {
  color: var(--ink);
  border-color: var(--rule-strong);
}

/* ========== OPZ block ========== */

.opz {
  background: rgba(247, 240, 221, 0.62);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: center;
}
.opz-logo {
  display: grid;
  place-items: center;
  width: 120px;
  height: 80px;
  background: rgba(251, 246, 232, 0.55);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 2px dashed var(--rule-strong);
  border-radius: var(--r-md);
  font-family: var(--font-numeric);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}
.opz__text {
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
.opz__project {
  font-family: var(--font-numeric);
  font-size: var(--t-eyebrow);
  color: var(--ink);
  margin: var(--s-2) 0 0;
}

@media (max-width: 600px) {
  .opz {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .opz-logo { margin: 0 auto; }
}

/* ========== Footer ========== */

.site-footer {
  background: var(--ink);
  color: var(--paper-strong);
  padding: var(--s-6) 0 var(--s-4);
  margin-top: 0;
}
.site-footer a { color: var(--paper-strong); }
.site-footer a:hover { color: var(--accent-soft); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
.footer-col strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  margin-bottom: var(--s-2);
  color: var(--paper-strong);
}
.footer-col {
  font-size: var(--t-sm);
  color: rgba(247, 240, 221, 0.78);
  line-height: 1.7;
}
.footer-bottom,
.bottom-bar {
  border-top: 1px solid rgba(247, 240, 221, 0.16);
  padding-top: var(--s-3);
  font-size: var(--t-eyebrow);
  text-align: center;
  color: rgba(247, 240, 221, 0.62);
  letter-spacing: 0.06em;
}
.bottom-bar a { color: rgba(247, 240, 221, 0.78); }

/* ========== Scroll-scrub canvas background ==========
   Apple-style scroll-scrub: 192 pre-rendered WebP frames drawn to a
   fixed full-viewport canvas. Sits between body atmospheric layer and
   page content; content sections paint on top via DOM order. */

.video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* CSS-level fallback: show a still middle-frame as background while the
     JS canvas warms up. Particularly important on cellular mobile where
     the first frame fetch may take seconds — without this, the page looks
     blank until JS catches up. Body class picks the right nursery. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.rybicka .video-bg {
  background-image: url("frames/rybicka-mobile/frame_0048.webp");
}
body.barvinek .video-bg {
  background-image: url("frames/barvinek-mobile/frame_0048.webp");
}
@media (min-width: 721px) {
  body.rybicka .video-bg {
    background-image: url("frames/rybicka/frame_0096.webp");
  }
  body.barvinek .video-bg {
    background-image: url("frames/barvinek/frame_0096.webp");
  }
}

.video-bg__canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}
.video-bg__canvas--ready { opacity: 1; }

/* Static cream-wash overlay — subtle unification across video frames so
   text in cards remains readable regardless of frame brightness. */
.video-bg__overlay {
  position: absolute;
  inset: 0;
  background: rgba(247, 240, 221, 0.46);
  pointer-events: none;
}

/* Dynamic overlay — JS updates the gradient as user scrolls deeper.
   Hero (0-20%) keeps the canvas vivid; content sections fade toward
   cream wash so dark text reads cleanly. */
.video-bg__overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 30%,
    rgba(247, 240, 221, 0.42) 60%,
    rgba(247, 240, 221, 0.72) 100%);
  pointer-events: none;
}

/* Top-of-page scroll progress indicator. */
.video-bg__progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--honey));
  z-index: 100;
  opacity: 0;
  transition: width 0.1s linear, opacity 0.3s ease;
  box-shadow: 0 0 8px rgba(212, 137, 44, 0.4);
}

/* Make sure all top-level content paints above the canvas.
   Page sections use DOM order; the canvas is the very first child of <body>. */
.site-header,
main,
.quick-action-bar,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Body must not paint an opaque layer over the canvas. The existing
   linear/radial gradients still show as fallback when frames are missing
   (they paint at body's own bg level, behind the fixed canvas). */
body { background-attachment: fixed; }

/* Glass-card variant — for cards that benefit from showing canvas
   through a backdrop blur. Existing .hero-card already does this;
   here we standardise the variables so other components can opt in. */
.glass {
  background: rgba(251, 246, 232, 0.62);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(34, 30, 24, 0.12);
}

/* ========== Flower vine — Barvínek philosophy decoration ========== */

.flower-vine {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--s-3);
  transform: translateY(-50%);
  opacity: 0.22;
  z-index: -1;
}
.flower-vine svg {
  width: 38px;
  height: 38px;
  color: var(--accent);
}
.flower-vine svg:nth-child(odd) { animation: bloom-drift 9s ease-in-out infinite; }
.flower-vine svg:nth-child(even) {
  animation: bloom-drift 11s ease-in-out infinite reverse;
  transform-origin: center;
}
@keyframes bloom-drift {
  0%, 100% { transform: scale(0.95); opacity: 0.18; }
  50% { transform: scale(1.1); opacity: 0.32; }
}

/* ========== Compact hero (sub-pages) ========== */

.hero--compact {
  min-height: clamp(320px, 52svh, 480px);
  padding: var(--s-6) 0 var(--s-5);
  align-items: center;
}
.hero--compact .hero-grid { grid-template-columns: 1fr; }
.hero--compact h1 { font-size: var(--t-3xl); }
.hero--compact .lead { font-size: var(--t-lg); }

/* ========== Long-form prose / legal pages ========== */

.legal-page .site-header {
  background: rgba(251, 246, 232, 0.96);
  border-bottom-color: var(--rule);
}
.legal-page .site-footer {
  margin-top: var(--s-6);
}
.legal-hero {
  min-height: auto;
  padding: var(--s-6) 0 var(--s-5);
  background:
    linear-gradient(180deg, rgba(251, 246, 232, 0.96), rgba(247, 240, 221, 0.76));
  border-bottom: 1px solid var(--rule);
}
.legal-hero .hero-copy::before {
  display: none;
}
.legal-hero [data-reveal] {
  opacity: 1;
  transform: none;
}
.legal-hero h1 {
  max-width: 14ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--ink);
}
.legal-hero h1 .accent { color: var(--accent); }
.legal-hero .lead {
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--muted);
}
.legal {
  max-width: 48rem;
  margin: 0 auto;
  font-size: var(--t-base);
  line-height: 1.72;
  color: var(--ink);
}
.legal h2 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
}
.legal h3 {
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
  font-size: var(--t-lg);
  color: var(--accent);
}
.legal p {
  margin-bottom: var(--s-3);
}
.legal ul,
.legal ol {
  margin: 0 0 var(--s-3) 0;
  padding-left: var(--s-4);
}
.legal li {
  margin-bottom: var(--s-2);
}
.legal strong {
  color: var(--accent);
}
.legal a {
  color: var(--accent);
  font-weight: 500;
}
.legal__meta {
  font-size: var(--t-sm);
  color: var(--muted);
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  background: var(--paper-strong);
  border-radius: var(--r-md);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-card);
}
.legal-toc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: var(--s-3);
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.legal-toc a {
  display: block;
  padding: 0.55rem 0.7rem;
  background: var(--paper-strong);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 700;
}
@media (min-width: 720px) {
  .legal-toc {
    grid-template-columns: repeat(2, 1fr);
  }
}
.legal__contact {
  padding: var(--s-4);
  background: var(--paper-strong);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  text-align: center;
}
.legal hr {
  border: 0;
  border-top: 1px dashed var(--rule);
  margin: var(--s-5) 0;
}

/* ========== Detail block — used in about pages ========== */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
@media (min-width: 720px) {
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
}
.detail {
  background: rgba(251, 246, 232, 0.62);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.detail__label {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.detail__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  margin: 0 0 var(--s-2);
}
.detail p {
  margin: 0 0 var(--s-2);
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.detail p:last-child { margin-bottom: 0; }

/* ========== Staff / team grid — about pages + barvinek kontakt ========== */

.staff {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
@media (min-width: 600px) { .staff { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .staff { grid-template-columns: repeat(4, 1fr); } }

.staff__person {
  background: rgba(251, 246, 232, 0.62);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.staff__name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--s-1);
  line-height: 1.2;
}
.staff__role {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 var(--s-3);
}
.staff__contact {
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.staff__contact a { color: var(--ink); }

/* ========== Parent landing — Rodinné centrum Strážnice ==========
   Used on index.html (the new root). Both nurseries are presented as
   two large cards; the page itself takes a neutral honey accent so
   neither nursery dominates. No scroll-scrub canvas on this page. */

body.parent {
  --accent: var(--honey);
  --accent-mid: var(--honey-soft);
  --accent-soft: var(--honey-soft);
}

.parent-hero h1 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.parent-hero .lead { max-width: 42ch; margin-left: auto; margin-right: auto; }

.nursery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 820px) {
  .nursery-grid { grid-template-columns: repeat(2, 1fr); }
}

.nursery-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  text-decoration: none;
  color: var(--ink);
  background: rgba(251, 246, 232, 0.62);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
  min-height: 24rem;
}
.nursery-card:hover,
.nursery-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 40px 100px -42px rgba(34, 30, 24, 0.46);
  outline: none;
}

.nursery-card--rybicka { --card-accent: var(--rybicka-deep); }
.nursery-card--barvinek { --card-accent: var(--barvinek-deep); }

.nursery-card__mark {
  display: inline-block;
  width: 64px;
  height: 64px;
  color: var(--card-accent);
}
.nursery-card__mark svg { width: 100%; height: 100%; }

.nursery-card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--card-accent);
  margin: 0;
}
.nursery-card__name {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  color: var(--card-accent);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1;
}
.nursery-card__tagline {
  color: var(--ink);
  margin: 0;
  font-size: var(--t-base);
}

.nursery-card__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
}
.nursery-card__facts dt {
  color: var(--muted);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  align-self: center;
}
.nursery-card__facts dd {
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}

.nursery-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--card-accent);
  font-weight: 700;
  font-size: var(--t-base);
}
.nursery-card__cta::after {
  content: "→";
  transition: transform var(--transition);
  display: inline-block;
}
.nursery-card:hover .nursery-card__cta::after,
.nursery-card:focus-visible .nursery-card__cta::after {
  transform: translateX(6px);
}

/* ========== Parent-up link — appears in headers of nursery/about/legal pages.
   Sits next to the sister-link and gives users a "go up to Rodinné centrum"
   path without hijacking the brand-mark click. */
.parent-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: rgba(251, 246, 232, 0.45);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.parent-link::before { content: "↑"; font-size: 1.1em; line-height: 1; }
.parent-link:hover,
.parent-link:focus-visible {
  color: var(--ink);
  border-color: var(--rule-strong);
  background: rgba(251, 246, 232, 0.78);
  outline: none;
}

/* Honeypot — bots fill it, humans never see it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* E-přihláška inline status — tone is set by JS via data-tone. */
.form-status[data-tone="success"] {
  color: var(--accent);
  font-weight: 700;
}
.form-status[data-tone="error"] {
  color: #b3261e;
  font-weight: 700;
}

/* Drawer separator + cross-page nav items.
   On mobile (drawer open) these put parent + sister within thumb-reach;
   on desktop the same links also exist as pills in the header. */
.nav-sep {
  display: none;
  margin: var(--s-2) 0;
  height: 1px;
  background: var(--rule);
}
.nav-link--cross {
  font-weight: 600;
  color: var(--accent);
}

/* Mobile (≤720px): hide the header pills (they clash with the hamburger row)
   and surface the same links inside the nav drawer instead. Touch targets
   in the drawer grow to ≥48px for thumb-friendliness. */
@media (max-width: 720px) {
  .site-header .parent-link,
  .site-header .sister-link {
    display: none;
  }
  .nav.is-open .nav-sep {
    display: block;
  }
  .nav.is-open a {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: var(--t-base);
  }
  /* Lighter wash on mobile — frames stay more visible (was 0.46) */
  .video-bg__overlay {
    background: rgba(247, 240, 221, 0.22);
  }
}

/* Desktop (>720px): cross-page links inside the drawer would duplicate the
   header pills, so hide them inside the drawer at this breakpoint. */
@media (min-width: 721px) {
  .nav .nav-link--cross,
  .nav .nav-sep {
    display: none;
  }
}