/* ==========================================================================
   Boost Růst — global stylesheet
   Palette + type + the "offset outline" sticker treatment from the Figma.
   ========================================================================== */

:root {
  --cream:        #fff7f0;
  --cream-lite:   #fffaf4;
  --tan:          #f0e3d4;   /* calendar side panels */
  --tan-line:     #e2d1bd;
  --ink:          #1f1f1f;
  --ink-soft:     #2a2320;   /* outlines / dark text */
  --text:         #2a2320;
  --muted:        #7a6a5c;
  --orange:       #ee8c46;
  --orange-dark:  #e07a34;
  --sage:         #c4ccb4;
  --line:         #e7d9ca;

  --tile-yellow:  #ffdf7a;
  --tile-pink:    #ffb1a9;
  --tile-teal:    #9fe6d4;
  --tile-green:   #bde8a4;
  --tile-blue:    #a6ccf5;
  --tile-purple:  #e6b6ef;

  --serif-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --serif-body:    "Source Serif 4", "Iowan Old Style", Georgia, serif;

  --maxw: 1180px;
  --radius: 26px;
  --radius-lg: 34px;
  --offset: 6px;             /* sticker offset */
  --bw: 0.8px;               /* outline thickness */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; overflow-x: clip; }
body { margin: 0; font-family: var(--serif-body); color: var(--text); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif-display); color: var(--ink-soft); font-weight: 800; line-height: 1.08; margin: 0; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }

/* ---------- Buttons : outline ON TOP + colour fill that slides in on hover -- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--serif-body); font-weight: 700; font-size: .95rem;
  /* one line, always: a label that breaks in half reads as a broken button.
     Where a button can't fit beside its neighbour it wraps to its own row
     instead (see .cc-foot), keeping the same left/right padding everywhere. */
  white-space: nowrap;
  padding: .74em 1.75em; border-radius: 999px; cursor: pointer;
  color: var(--ink-soft); background: transparent; border: 0;
  --fill: var(--orange);
}
.btn::before {                                           /* colour fill (behind) */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--fill); z-index: -1;
  transform: translate(var(--offset), var(--offset));    /* peeks bottom-right */
  transition: transform .22s ease;
}
.btn::after {                                            /* outline, always on top */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: var(--bw) solid var(--ink-soft); z-index: 3; pointer-events: none;
}
.btn:hover::before { transform: translate(0, 0); }       /* slides in to fill */
.btn-primary { --fill: var(--orange); }
.btn-sage    { --fill: var(--sage); }
.btn-white   { --fill: #fff; }
.btn-sm { padding: .55em 1.5em; font-size: .85rem; }

.eyebrow { text-transform: uppercase; letter-spacing: .3em; font-size: .74rem; font-weight: 600; color: var(--muted); font-family: var(--serif-body); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--cream); }
.site-header.scrolled { box-shadow: 0 1px 0 var(--line); }
.nav { display: flex; align-items: center; gap: 1.7rem; padding-block: 20px; }
.brand { font-family: var(--serif-display); font-weight: 800; font-size: 1.7rem; color: var(--ink-soft); letter-spacing: -.01em; }
.nav-links { display: flex; align-items: center; gap: 1.7rem; margin-left: auto; }
.nav-links a, .nav-drop-btn { font-family: var(--serif-body); font-size: .98rem; color: var(--ink-soft); transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--orange); }
.nav-right { display: flex; align-items: center; gap: 1.3rem; }
.nav-divider { width: 1px; height: 30px; background: var(--tan-line); }
/* Circular "sticker" button — same offset-border/shadow language as
   .carousel-arrow elsewhere on the site, so the hamburger reads as part of
   the design system instead of a bare generic icon. */
.nav-toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: none;
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  border: 1.3px solid var(--ink-soft); background: var(--cream-lite);
  box-shadow: 0 10px 22px -12px rgba(45,26,14,.4);
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.nav-toggle:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(45,26,14,.45); }
.nav-toggle:active { transform: translateY(0) scale(.95); }
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink-soft); }

/* ---- "Sekce" mega-dropdown : offer sections reachable straight from the nav,
   mirroring the homepage #sekce tiles (colour + icon) so it reads as the same
   set rather than a separate menu. -------------------------------------- */
.nav-item { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: .4em; background: none; border: 0; padding: 0; cursor: pointer; }
.drop-caret { width: 13px; height: 13px; transition: transform .2s ease; }
.nav-item.open .nav-drop-btn { color: var(--orange); }
.nav-item.open .drop-caret { transform: rotate(180deg); }
/* Outer wrapper reaches from the button down past the panel (padding-top is
   the visual gap) so the mouse never crosses "dead" space that belongs to
   neither the button nor the panel when travelling between the two — that
   gap is what causes hover dropdowns to flicker shut. It's pointer-events:
   none while closed so it doesn't sit invisibly on top of page content. */
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  width: 452px; padding-top: 22px;
  transform: translateX(-50%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, visibility 0s linear .22s;
}
.nav-dropdown-panel {
  position: relative; background: var(--cream-lite); border: 1.3px solid var(--ink-soft);
  border-radius: 20px; box-shadow: 0 28px 54px -22px rgba(45,26,14,.4);
  padding: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  transform: translateY(8px);
  transition: transform .18s ease;
}
.nav-dropdown-panel::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px;
  background: var(--cream-lite); border-left: 1.3px solid var(--ink-soft); border-top: 1.3px solid var(--ink-soft);
  transform: translateX(-50%) rotate(45deg);
}
.nav-item:hover .nav-dropdown, .nav-item.open .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .15s ease;
}
.nav-item:hover .nav-dropdown-panel, .nav-item.open .nav-dropdown-panel { transform: translateY(0); }
.nav-drop-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; transition: background .15s ease; }
.nav-drop-item:hover { background: var(--cream); }
.ndi-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; border: var(--bw) solid var(--ink-soft); }
.ndi-icon svg { width: 19px; height: 19px; color: var(--ink-soft); }
.ndi-label { font-size: .9rem; color: var(--ink-soft); font-weight: 600; line-height: 1.2; }
.ndi-yellow { background: var(--tile-yellow); }
.ndi-pink   { background: var(--tile-pink); }
.ndi-teal   { background: var(--tile-teal); }
.ndi-green  { background: var(--tile-green); }
.ndi-blue   { background: var(--tile-blue); }
.ndi-purple { background: var(--tile-purple); }

/* ==========================================================================
   Scribble background motif (tinted via mask)
   ========================================================================== */
.scribble {
  position: absolute; pointer-events: none; z-index: 0;
  -webkit-mask: url(../img/scribble.svg) no-repeat center / contain;
          mask: url(../img/scribble.svg) no-repeat center / contain;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; text-align: center; padding-block: 76px 68px; }
.hero .container { position: relative; z-index: 2; max-width: 800px; }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); margin: 1.1rem 0 1.4rem; letter-spacing: -.01em; }
.hero .lead { font-size: 1.08rem; color: var(--muted); max-width: 660px; margin-inline: auto; }
.hero-actions { display: flex; gap: 1.1rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.hero .scribble { top: 60px; width: 300px; height: 620px; background: #ddc9b0; opacity: .8; }
.hero .scribble.left  { left: -70px; }
.hero .scribble.right { right: -70px; transform: scaleX(-1); }

/* ==========================================================================
   Section tiles : solid colour card + outline offset up-left
   ========================================================================== */
.tiles { padding-block: 58px 44px; }
.tiles .container { max-width: 1320px; }
.tiles-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.tile {
  position: relative; isolation: isolate; background: transparent;
  border-radius: 22px; padding: 26px 24px 28px; min-height: 224px;
  display: flex; flex-direction: column; gap: 14px;
  --fill: var(--tile-yellow);
}
.tile::after {                                    /* colour fill (behind), full at rest */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--fill); z-index: -1;
  transition: transform .22s ease;
}
.tile::before {                                   /* outline ON TOP, offset up-left */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: var(--bw) solid var(--ink-soft);
  transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -1));
  z-index: 3; pointer-events: none;
}
.tile > * { position: relative; z-index: 1; }
.tile:hover::after { transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -1)); }  /* only the colour moves — tile stays in place */
.tile-icon { width: 42px; height: 42px; color: var(--ink-soft); stroke-width: 1.4; }
.tile h3 { font-size: 1.14rem; line-height: 1.14; }
.tile p { font-size: .82rem; color: rgba(42,35,32,.66); margin: 0; line-height: 1.44; }
.tile.yellow { --fill: var(--tile-yellow); }
.tile.pink   { --fill: var(--tile-pink); }
.tile.teal   { --fill: var(--tile-teal); }
.tile.green  { --fill: var(--tile-green); }
.tile.blue   { --fill: var(--tile-blue); }
.tile.purple { --fill: var(--tile-purple); }

/* Woven / braided divider */
.braid { display: block; width: 100%; height: 52px; }

/* ==========================================================================
   Section heading row
   ========================================================================== */
.section { padding-block: 100px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 46px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(2.1rem, 4.4vw, 3rem); }
.section-head .sub { color: var(--muted); max-width: 460px; margin: .7rem 0 0; font-size: 1rem; }
.section-head .head-text { max-width: 560px; }

/* ==========================================================================
   Calendar block — straddles into the dark section
   ========================================================================== */
.cal-wrap { position: relative; z-index: 3; margin-bottom: -257px; }   /* half the card height → centred on the dark edge */
.cal-section { padding-bottom: 0 !important; }
.cal-card {
  background: var(--tan); border-radius: var(--radius-lg); overflow: hidden;
  display: grid; grid-template-columns: 260px 1fr 320px; height: 548px;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.04);
}
/* Grid tracks default to minmax(auto,1fr) — without min-width:0 on the items below, nested
   content (the 7-column day grid especially) refuses to shrink below its natural width and
   blows the whole card out sideways once .cal-card collapses to a single mobile column. */
.cal-side, .cal-main, .cal-agenda { min-width: 0; }
.cal-grid { min-width: 0; }
.cal-side { padding: 34px 30px; }
.cal-side h4, .cal-agenda .head h4 { font-family: var(--serif-display); font-size: 1.15rem; margin-bottom: 22px; }
.cal-legend { display: flex; flex-direction: column; gap: 6px; }
.cal-legend li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-left: -12px; border-radius: 12px; font-size: .98rem; color: var(--text); transition: opacity .15s, color .15s, background .15s; outline: none; }
.cal-legend li.clickable { cursor: pointer; }
.cal-legend li.clickable:hover { background: rgba(0,0,0,.035); }
.cal-legend li.sel { background: rgba(0,0,0,.05); font-weight: 600; }
.cal-legend li.off { opacity: .4; }
.cal-legend li.off .dot { background: #bcae9d !important; }
.cal-legend li:focus-visible { box-shadow: 0 0 0 2px var(--orange); }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.5); transition: background .15s; }

.cal-main { padding: 30px 34px; background: var(--cream-lite); border-inline: 1px solid var(--tan-line); }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.cal-toolbar .month { font-family: var(--serif-display); font-size: 1.25rem; font-weight: 700; }
.cal-nav { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink-soft); background: transparent; cursor: pointer; display: grid; place-items: center; transition: .15s; color: var(--ink-soft); }
.cal-nav:hover { background: var(--ink-soft); color: var(--cream); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; text-align: center; }
.cal-grid .dow { font-size: .92rem; color: var(--ink-soft); font-weight: 600; padding-bottom: 12px; }
.cal-day { position: relative; height: 52px; display: grid; place-content: center; border-radius: 14px; font-size: 1rem; cursor: pointer; border: 1.2px solid transparent; }
.cal-day.muted { color: #c7b7a6; cursor: default; }
.cal-day.event { border-color: var(--tan-line); }
.cal-day.event:hover { border-color: var(--ink-soft); }
.cal-day.selected { background: var(--tile-pink); border-color: transparent; font-weight: 700; }
.cal-day .dots { display: flex; gap: 3px; justify-content: center; margin-top: 3px; }
/* The category colours are the site's pastels, which on cream need an outline
   to stay legible at dot size — same hairline the .ev-kicker dot already uses. */
.cal-day .dots i { width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(42,35,32,.4); }

.cal-agenda { padding: 34px 30px 0; display: flex; flex-direction: column; min-height: 0; position: relative; }
.cal-agenda .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; flex: none; }
.cal-agenda .count { font-size: .86rem; color: var(--muted); white-space: nowrap; }
.cal-agenda::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(transparent, var(--tan)); pointer-events: none; z-index: 2; }
.agenda-list { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 34px 4px; margin: -4px -4px 0 -4px; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.2) transparent; }
.agenda-list::-webkit-scrollbar { width: 6px; }
.agenda-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }
.agenda-empty { font-size: .92rem; color: var(--muted); margin: 6px 0 0; }
/* "Načíst další" — both calendars draw one page of dates and append the rest
   on demand, so the button sits at the end of whatever list it belongs to. */
.load-more { align-self: center; flex: none; }
.agenda-list .load-more { margin: 2px 0 4px; padding: .55em 1.5em; font-size: .85rem; }

/* cleaner event card — uniform size */
.event-card { background: #fff; border: var(--bw) solid var(--line); border-radius: 18px; padding: 16px 20px; height: 150px; flex: none; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 14px 28px -22px rgba(45,26,14,.5); overflow: hidden; }
.event-card .event-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.event-card .event-cat { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.event-card .event-cat .dot { width: 9px; height: 9px; box-shadow: 0 0 0 1px rgba(42,35,32,.4); margin-top: 2px; flex: none; }
.event-card .event-day { font-size: .78rem; color: var(--muted); white-space: nowrap; }
/* The card is a fixed height, so its two text rows must never be squeezed by
   the flexbox: the title clamps at two lines and the meta stays on one, with
   an ellipsis, instead of both shrinking into each other. */
.event-card h5 { font-family: var(--serif-display); font-size: 1rem; line-height: 1.18; margin: 5px 0 1px; flex: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-card .event-meta { font-size: .82rem; color: var(--muted); flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-card .event-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.event-card .event-spots { font-size: .76rem; font-weight: 700; }
.event-card .event-spots.few { color: var(--orange-dark); }
.event-card .event-spots.some { color: #4f9a54; }
.event-card .event-spots.many { color: var(--muted); }
.event-card .event-spots.soldout { color: #b4433a; }
.event-card .event-link { font-size: .8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.event-card .event-link:hover { color: var(--orange-dark); }

/* ==========================================================================
   Full calendar page (pages/kalendar.html) — category chips, a horizontally
   scrolling date strip, and full-detail event tiles (see .event-tile below,
   built on the .course-card look from the offer pages). Distinct from the
   compact .cal-card widget above, which the homepage still uses as-is.
   ========================================================================== */
.cal-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.cal-toolbar-controls { display: flex; align-items: center; gap: 10px; flex: none; }

/* ---- "Filtrovat" toggle : category chips + occupancy/location segments stay
   collapsed behind this button so the page reads clean by default. Height is
   fixed to match .cal-nav (the prev/next arrows sit right next to it). ----- */
.cal-filter-wrap { position: relative; }
.cal-filter-toggle { display: inline-flex; align-items: center; gap: .55em; height: 40px; font-family: var(--serif-body); font-size: .95rem; font-weight: 600; color: var(--ink-soft); background: transparent; border: 1.3px solid var(--ink-soft); border-radius: 999px; padding: 0 1.2em; cursor: pointer; transition: background .15s ease; }
.cal-filter-toggle svg { width: 17px; height: 17px; flex: none; }
.cal-filter-toggle:hover { background: var(--accent-tint); }
.cal-filter-wrap.open .cal-filter-toggle { background: var(--accent); }
.cal-filter-toggle .drop-caret { width: 13px; height: 13px; margin-left: -2px; transition: transform .2s ease; }
.cal-filter-wrap.open .cal-filter-toggle .drop-caret { transform: rotate(180deg); }
.filter-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--orange); color: #fff; font-size: .72rem; font-weight: 800; }
.filter-count[hidden] { display: none; }

/* position:absolute (relative to .cal-filter-wrap) with left/top set by JS
   (positionPopover in main.js) — pinned flush to the toggle's right edge,
   clamped so it can't run off the left edge of narrow viewports, and moves
   along with the toggle as the page scrolls. */
.cal-filter-panel {
  /* top/right are real defaults, not just a placeholder: without them, an
     absolutely positioned element with no offsets falls back to the
     browser's "static position" algorithm — which, before JS ever sets
     .style.top/left (positionPopover runs only on open), let this laid out
     hundreds of px past the toggle button. Being invisible (opacity/
     visibility below) didn't stop it from still counting toward the page's
     scrollable overflow, dragging the whole layout sideways on load. */
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 45;
  width: min(92vw, 640px); background: var(--cream-lite); border: 1.3px solid var(--ink-soft);
  border-radius: 22px; box-shadow: 0 28px 54px -22px rgba(45,26,14,.4); padding: 22px 24px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.cal-filter-wrap.open .cal-filter-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}
.cal-filter-panel .cal-filter-label { display: block; margin-bottom: 10px; }
.cal-filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cat-chip { display: inline-flex; align-items: center; gap: .55em; font-family: var(--serif-body); font-size: .9rem; font-weight: 600; color: var(--ink-soft); background: var(--cream); border: 1.3px solid var(--tan-line); border-radius: 999px; padding: .6em 1.2em; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cat-chip .dot { width: 9px; height: 9px; border-radius: 50%; border: var(--bw) solid var(--ink-soft); flex: none; }
.cat-chip:hover { border-color: var(--ink-soft); }
.cat-chip.active { background: var(--accent-tint); border-color: var(--ink-soft); }

/* ---- occupancy / location : single-select segmented filters, secondary to
   the category chips above. Label always sits above its row (not inline
   beside it) so it reads the same as the "Kategorie" label above, instead
   of only stacking once flex-wrap happens to kick in at narrow widths. ---- */
.cal-filter-row { display: flex; flex-wrap: wrap; gap: 24px; }
.cal-filter-group { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cal-filter-label { font-size: .82rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1.3px solid var(--tan-line); border-radius: 999px; background: var(--cream); }
.seg-btn { border: 0; background: none; padding: .5em 1.05em; border-radius: 999px; font-family: var(--serif-body); font-size: .85rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.seg-btn:hover { color: var(--ink-soft); }
.seg-btn.active { background: var(--accent); color: var(--ink-soft); }

/* ---- month/year dropdown : click the date to jump straight to any month,
   instead of only stepping one at a time with the arrows. ------------------ */
.cal-month-nav { position: relative; }
.cal-month-trigger { display: inline-flex; align-items: center; gap: .5em; background: none; border: 0; padding: 0; cursor: pointer; }
.cal-month-trigger .cal-month-label { font-family: var(--serif-display); font-weight: 800; font-size: 1.32rem; color: var(--ink-soft); }
.cal-month-trigger .drop-caret { width: 15px; height: 15px; color: var(--ink-soft); transition: transform .2s ease; }
.cal-month-nav.open .cal-month-trigger .drop-caret { transform: rotate(180deg); }
/* position:absolute (relative to .cal-month-nav) with left/top set by JS
   (positionPopover in main.js), which pins this to the trigger's left edge
   and clamps it to stay on-screen — same approach as .cal-filter-panel above
   (pinned to the right edge), and moves with the trigger as the page scrolls. */
.cal-month-dropdown {
  /* top/left are real defaults — see .cal-filter-panel above for why. */
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 45;
  width: 296px; max-width: 90vw; background: var(--cream-lite); border: 1.3px solid var(--ink-soft);
  border-radius: 20px; box-shadow: 0 28px 54px -22px rgba(45,26,14,.4); padding: 18px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.cal-month-nav.open .cal-month-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}
.cal-month-dropdown-year { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-month-dropdown-year .cal-year-label { font-family: var(--serif-display); font-weight: 800; font-size: 1.1rem; color: var(--ink-soft); }
.cal-month-dropdown-year .cal-nav { width: 32px; height: 32px; }
.cal-month-dropdown-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cal-month-opt { border: 1.3px solid var(--tan-line); background: var(--cream); border-radius: 12px; padding: .65em .4em; font-family: var(--serif-body); font-size: .86rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cal-month-opt:hover { border-color: var(--ink-soft); }
.cal-month-opt.active { background: var(--accent); border-color: var(--ink-soft); }

.cal-strip-nav { display: flex; gap: 10px; flex: none; }
.cal-strip-nav .cal-nav { width: 40px; height: 40px; }

.cal-datebar { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scroll-padding-inline: max(28px, calc((100% - 1180px) / 2 + 28px)); padding: 4px max(28px, calc((100% - 1180px) / 2 + 28px)) 14px; margin: 0 0 34px; scrollbar-width: none; }
.cal-datebar::-webkit-scrollbar { display: none; }
.date-chip { scroll-snap-align: start; flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px 12px; border-radius: 18px; border: 1.3px solid var(--tan-line); background: var(--cream-lite); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.date-chip:hover { border-color: var(--ink-soft); }
.date-chip .dow { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.date-chip .num { font-family: var(--serif-display); font-weight: 800; font-size: 1.28rem; color: var(--ink-soft); line-height: 1; }
.date-chip .dots { display: flex; gap: 3px; height: 6px; align-items: center; }
.date-chip .dots i { width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(42,35,32,.4); }
.date-chip.today { border-color: var(--orange); }
.date-chip.today .num { color: var(--orange-dark); }
.date-chip.selected { background: var(--accent); border-color: var(--ink-soft); }

.cal-events-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cal-events-head h4 { font-family: var(--serif-display); font-size: 1.15rem; }
.cal-events-head .count { font-size: .88rem; color: var(--muted); white-space: nowrap; }
.cal-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.cal-events-grid .agenda-empty { grid-column: 1 / -1; }
.cal-events-grid + .load-more { display: flex; margin: 36px auto 0; }

/* The tile's badge carries the PRICE now (availability moved to the meter
   below the meta rows), so it stays visually neutral — a coloured pill would
   compete with the category icon beside it for no reason. "Vstup zdarma"
   keeps the green .free treatment, because free genuinely is a selling point. */
.event-tile .cc-badge.price { background: var(--cream); border-color: var(--tan-line); font-family: var(--serif-display); font-size: .82rem; letter-spacing: 0; text-transform: none; }
.tile-cap { margin-bottom: 22px; }
.tile-cap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.tile-cap-head b { font-family: var(--serif-display); font-size: .92rem; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.cc-foot.solo { justify-content: flex-end; }

@media (max-width: 640px) {
  /* Date stays left, filter + arrows stay grouped right, always on one row —
     sizes tighten up here so all three keep fitting on narrow phones. */
  .cal-toolbar-row { gap: 8px; }
  .cal-toolbar-controls { gap: 6px; }
  .cal-month-trigger .cal-month-label { font-size: 1.05rem; }
  .cal-month-trigger .drop-caret { width: 13px; height: 13px; }
  .cal-filter-toggle { font-size: 0; padding: 0; width: 40px; justify-content: center; gap: 0; }
  .cal-filter-toggle svg:first-child { width: 18px; height: 18px; }
  .cal-filter-toggle .drop-caret { display: none; }
  .filter-count { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; font-size: .62rem; }
  .cal-strip-nav { gap: 6px; }
  .cal-strip-nav .cal-nav { width: 36px; height: 36px; }

  .cal-filterbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -6px 20px; padding: 0 6px 4px; }
  .cal-filterbar::-webkit-scrollbar { display: none; }
  .cat-chip { flex: none; }
  .cal-filter-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cal-events-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Dark belief section
   ========================================================================== */
.dark { background: var(--ink); color: var(--cream); position: relative; overflow: hidden; }
.curve-top, .curve-bottom { position: absolute; left: 0; width: 100%; height: 26px; z-index: 1; display: block; }
.curve-top { top: 0; }
.curve-bottom { bottom: 0; }
.dark.pulled { padding-top: 320px; }
.dark .container { position: relative; z-index: 2; display: grid; grid-template-columns: 240px 470px; justify-content: center; gap: 70px; align-items: center; padding-block: 70px 210px; }
.dark h2 { color: var(--cream); font-size: clamp(2.1rem, 4.2vw, 3rem); margin-bottom: 26px; }
.dark p { color: rgba(255,247,240,.75); line-height: 1.75; margin-bottom: 34px; }
.dark .btn::after { border-color: var(--cream); }
.arch { background: #fff; border-radius: 170px 170px 20px 20px; padding: 44px 34px; display: grid; place-items: center; aspect-ratio: 3/4.5; }
.arch svg { width: 100%; color: var(--ink); }
.dark .scribble { top: 40px; width: 300px; height: 720px; background: #3a3a3a; opacity: .8; }
.dark .scribble.left  { left: -60px; }
.dark .scribble.right { right: -60px; transform: scaleX(-1); }

/* ==========================================================================
   Novinky cards — thin outline, cream body
   ========================================================================== */
/* contained to the section: first card at left, scrolls until the last card's
   right edge meets the container (= "Všechny novinky" button) right edge */
/* full-bleed to the viewport: first card aligns to the heading, cards run off
   the screen edges (not clipped mid-page), last card stops at the button */
.news-row { display: grid; grid-auto-flow: column; grid-auto-columns: 332px; gap: 26px; overflow-x: auto; overflow-y: hidden; padding: 14px max(28px, calc((100% - 1180px) / 2 + 28px)) 20px; scroll-behavior: smooth; scrollbar-width: none; }
.news-row::-webkit-scrollbar { display: none; }
.news-card { background: var(--cream); border: var(--bw) solid var(--ink-soft); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; transition: transform .18s ease; }
.news-card:hover { transform: translateY(-6px); }
.news-thumb { position: relative; display: block; border-radius: 15px; overflow: hidden; aspect-ratio: 5/4; }
.news-thumb img, .news-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.news-tag { position: absolute; top: 14px; left: 14px; background: var(--tile-pink); color: var(--ink-soft); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px; border-radius: 999px; }
.news-tag.art { background: var(--tile-green); }
.news-tag.ped { background: var(--tile-blue); }
.news-tag.pub { background: var(--tile-yellow); }
.news-body { padding: 18px 8px 6px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.news-body h3 { font-size: 1.14rem; line-height: 1.2; }
.news-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: auto; }
.news-foot p { font-size: .84rem; color: var(--muted); margin: 0; flex: 1; }
.news-foot .arrow { flex: none; width: 30px; height: 30px; }
.news-nav { display: flex; gap: 16px; margin-top: 30px; }
.news-arrow { width: 54px; height: 54px; border-radius: 50%; border: 1.3px solid var(--ink-soft); background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, opacity .15s; }
.news-arrow svg { width: 22px; height: 22px; }
.news-arrow:hover { background: var(--ink-soft); color: var(--cream); }
.news-arrow:disabled { opacity: .3; cursor: default; }
.news-arrow:disabled:hover { background: transparent; color: var(--ink-soft); }

/* floating parallax — drift applied via --parY by main.js */
.floating { transform: translate3d(0, var(--parY, 0px), 0); transition: transform .5s cubic-bezier(.22,.61,.36,1); }

/* ==========================================================================
   Newsletter band
   ========================================================================== */
.newsletter { background: var(--orange); margin-top: 180px; padding: 90px 0 80px; position: relative; }
.newsletter-card { position: relative; z-index: 2; margin-top: -239px; overflow: hidden; background: var(--cream); border: 1px solid rgba(45,26,14,.13); border-radius: var(--radius-lg); padding: 54px 60px; display: grid; grid-template-columns: 1.65fr 1fr; gap: 48px; box-shadow: 0 26px 54px -26px rgba(45,26,14,.32), 0 4px 14px -6px rgba(45,26,14,.12); }
.newsletter-waves { position: absolute; inset: 0; z-index: 0; color: #ecac74; opacity: .5; }
.nl-form { display: contents; }
.nl-col { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; min-height: 190px; }
.newsletter-card h2 { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.04; }
.newsletter-card p { color: var(--text); margin: 0; font-size: 1rem; line-height: 1.5; }
.nl-input { width: 100%; border: var(--bw) solid var(--ink-soft); background: #fff; border-radius: 999px; padding: 1.05em 1.6em; font-family: var(--serif-body); font-size: 1rem; color: var(--text); }
.nl-input:focus { outline: 2px solid var(--orange); }
.nl-btn { align-self: flex-start; width: min(290px, 100%); font-size: 1rem; padding-block: 1.05em; }

/* ==========================================================================
   Footer — dark text on orange
   ========================================================================== */
.site-footer { background: var(--orange); color: var(--ink-soft); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; padding-block: 70px 46px; }
.site-footer .brand { color: var(--ink-soft); font-size: 2rem; }
.footer-about { font-size: .95rem; color: rgba(42,35,32,.82); max-width: 260px; margin-top: 14px; }
.footer-col h4 { color: var(--ink-soft); font-family: var(--serif-display); font-weight: 800; font-size: 1.15rem; margin-bottom: 18px; }
.footer-col a { display: block; padding: 8px 0; font-size: .98rem; color: rgba(42,35,32,.9); }
.footer-col a:hover { color: var(--ink-soft); text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(42,35,32,.22); padding-block: 24px; display: flex; justify-content: space-between; font-size: .86rem; color: rgba(42,35,32,.85); flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   SUBPAGES — elevated system (same design language as the landing page)
   Each page sets --accent / --accent-tint on <body>; components pick them up.
   ========================================================================== */
:root { --accent: var(--tile-yellow); --accent-tint: #fff3d6; }

/* ---- chip (sticker-outline pill used for eyebrows / labels) ---- */
.chip { display: inline-flex; align-items: center; gap: .5em; background: var(--accent-tint); border: var(--bw) solid var(--ink-soft); border-radius: 999px; padding: .5em 1.15em; font-family: var(--serif-body); font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); }
.chip .ic { width: 15px; height: 15px; }

/* ---- plain "go back" text link (event detail page) ---- */
.back-link { display: flex; align-items: center; gap: .4em; width: fit-content; margin-bottom: 22px; font-size: .9rem; font-weight: 600; color: var(--muted); }
.back-link svg { width: 15px; height: 15px; }
.back-link:hover { color: var(--ink-soft); }

/* Event detail page has its own section further down (search "EVENT DETAIL"). */

/* ---- page hero ---- */
.page-hero { position: relative; overflow: hidden; text-align: center; padding-block: 80px 72px; }
.page-hero .container { position: relative; z-index: 2; max-width: 820px; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); letter-spacing: -.01em; margin: 1.3rem 0 1.3rem; }
.page-hero .lead { color: var(--muted); max-width: 640px; margin-inline: auto; font-size: 1.1rem; }
.page-hero .hero-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2.3rem; flex-wrap: wrap; }
.page-hero .scribble { top: -30px; width: 260px; height: 520px; background: #e4d2bb; opacity: .55; z-index: 0; }
.page-hero .scribble.left  { left: -96px; }
.page-hero .scribble.right { right: -96px; transform: scaleX(-1); }

/* ---- page hero : media variant (image alongside the copy — used where a picture earns its place).
   NOTE: deliberately named "media", not "split" — .split is already a generic class used
   elsewhere (o-nas/blog) for image+text rows; reusing that name on <section class="page-hero">
   made the hero itself pick up .split's `display:grid;grid-template-columns:1fr 1fr`, turning
   the section into an unwanted 2-column grid where .container only filled one half-width cell
   instead of centering. Keep this class distinct from .split to avoid that collision. */
.page-hero.media .container { max-width: 1180px; }

/* ---- page hero : tinted variant — the hero band continues down to wrap the
   calendar toolbar/date-strip too (see pages/kalendar.html), instead of the
   hero being a plain block with a separate tinted section further down. */
.tinted-hero { background: color-mix(in srgb, var(--accent) 30%, var(--cream)); overflow: visible; }
/* Section itself must stay overflow:visible (the date strip and filter/month
   popovers need to bleed past its box), so it can't clip the decorative
   .scribble bleed the way .page-hero's default overflow:hidden normally
   does — that let the scribbles' negative left/right offsets push past the
   viewport edge and create real horizontal page overflow. Clip just this
   decor layer instead, scoped to the section's own box. */
.tinted-hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* z-index above .cal-events-grid's (2, below) — .page-hero .container above
   already opens its own stacking context at z-index:2, which would otherwise
   trap the filter/month popovers (z-index:45) inside it, capping them at the
   same level as the events grid and letting the later-in-DOM grid paint over
   them since z-index ties fall back to DOM order. */
.tinted-hero .cal-hero-controls.container { max-width: var(--maxw); text-align: left; margin-top: 56px; z-index: 3; }
/* margin-block only (not the margin shorthand) — margin-inline stays auto
   from the base .container rule, so this stays centered like the events
   grid below it instead of pinning flush-left. */
.tinted-hero .cal-events-wrap.container { max-width: var(--maxw); text-align: left; margin-block: 40px 150px; }
/* Pulls the grid up from its normal position (directly below the tinted
   band, in the plain section right after it — see pages/kalendar.html) so
   its first row straddles the band's bottom curve — same idea as the
   .tinted-card overlap elsewhere, just pulled up from below instead of
   spilling down from above, since this grid runs many rows deep and nesting
   the whole thing inside the tinted section would drag the entire band down
   with it. -186px ≈ half a card's height (see .event-tile), so the curve
   runs through the middle of the first row. Needs z-index above
   .curve-bottom's (1), since a positive z-index always paints above
   auto/static content regardless of DOM order. */
.tinted-hero + .pt0 .cal-events-grid { margin-top: -186px; position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; text-align: left; }
.hero-grid h1 { font-size: clamp(2rem, 2.9vw, 2.45rem); }
.hero-grid .hero-copy .lead { margin-inline: 0; }
.hero-grid .hero-actions { justify-content: flex-start; }
.hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3.3; border: var(--bw) solid var(--ink-soft); box-shadow: 0 30px 60px -30px rgba(45,26,14,.35); }
.hero-media svg { width: 100%; height: 100%; display: block; }

/* ---- section rhythm helpers ---- */
/* .tight's own top stays small (it visually hugs the tinted-card straddle right above it —
   that gap is governed by the padding-top override on THIS section, not by this class), but
   the bottom now matches the site's one standard inter-section gap (132px, same as plain
   .section) so the rhythm reads as consistent instead of "tight" one one side and huge the
   other — unifying with .section is the whole point of this class no longer having a
   special-cased bottom value. */
.section.tight { padding-block: 32px 132px; }
.section.pt0 { padding-top: 0; }
/* For a section that already ends in its own trailing air — the team carousel's
   scroller padding plus its arrow/dot row — where a full 100px on top of that
   read as a gap between sections rather than as the page's rhythm. */
.section.pb-short { padding-bottom: 56px; }
.section-intro { text-align: center; max-width: 640px; margin: 0 auto 58px; }
/* Short accent rule above every section heading — the same flourish the event
   detail page uses on its .ev-block h2, so the subpages speak that language
   too and each section opens with the page's own colour instead of plain text. */
.section-intro h2::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--accent); margin: 0 auto 18px; }
.section-intro h2 { font-size: clamp(1.9rem, 3.8vw, 2.6rem); margin-bottom: .8rem; }
.section-intro p { color: var(--muted); font-size: 1.04rem; margin: 0; }
/* ---- section header : the LEFT-ALIGNED alternative to .section-intro ----
   Every subpage used to open every single section with the same centred
   heading + centred lead, which is what made the pages read as one template
   repeated six times. This variant sets the heading against the left edge with
   the lead (and often a link) sitting opposite it on a shared baseline, so a
   page can alternate between the two rhythms instead of centring everything. */
/* No rule under the row: the heading already opens with its own accent dash
   (h2::before) and every section sits in its own generous padding, so a hairline
   across the page was a third divider doing the same job twice. The space the
   rule and its padding used to occupy stays — losing the line shouldn't mean the
   heading crowds the content under it. */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: end; column-gap: 60px; margin-bottom: 58px; }
.section-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.6rem); }
.section-head h2::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--accent); margin-bottom: 18px; }
.section-head p { color: var(--muted); font-size: 1.04rem; margin: 0; }
.section-head .sh-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
/* A "view all" button dropped straight into the grid is a grid item, and a
   stretched grid item is a button as wide as the column. Size it to its label
   and park it at the right edge, opposite the heading. */
.section-head > .btn { justify-self: end; align-self: end; }

.lead-block { max-width: 720px; }
.lead-block .eyebrow { display: block; margin-bottom: 1rem; }
.lead-block h2 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); margin-bottom: 1rem; }

/* ---- tinted curved band : page-accent colour, same shallow-bezier curve as the landing's dark section ---- */
.tinted { position: relative; overflow: visible; background: color-mix(in srgb, var(--accent) 30%, var(--cream)); padding-block: 100px 0; }
/* padding-bottom is 0 by default because most .tinted sections end in content
   (.tinted-card / .tinted-spill / .card-grid) that spills into the section
   below via negative margin and supplies its own bottom breathing room.
   For a .tinted section whose content stays fully inside it (no spill),
   use this modifier to get real padding under the content instead of it
   butting straight up against the curve. */
.tinted.pad-bottom { padding-bottom: 120px; }
/* Deliberately NOT giving .tinted an explicit z-index: position:relative + a numeric z-index
   (even 0) creates a new stacking context, which would trap .tinted-card's z-index:3 inside it —
   the card could then never out-rank .tinted's sibling section below (see next rule), because
   comparisons would stop at .tinted's own boundary instead of reaching the shared parent context.
   Leaving z-index:auto here keeps .tinted-card competing directly against that sibling. */
.tinted .container { position: relative; z-index: 2; }
.tinted .section-intro p { color: rgba(42,35,32,.66); }
/* The section after .tinted gets pulled up (by the card's negative margin) so it overlaps the
   lower half of .tinted. Two things are required for that overlap to actually be visible as a
   colour change, matching how the homepage's .dark section works against the calendar card:
   1) an explicit opaque background — without one the section is transparent and .tinted's own
      background (painted earlier in the box, unaffected by the margin) simply shows through;
   2) higher stacking than .tinted (itself `position:relative` for its curve svgs, which alone
      would otherwise paint above a later static sibling regardless of DOM order). */
.tinted + section { position: relative; z-index: 1; background: var(--cream); }

/* card straddling the band's bottom edge into the section below — same technique as the
   homepage calendar/dark straddle: negative margin pulls the next section up beneath it,
   z-index keeps the card on top, the following section adds compensating top padding.
   Margins are set to roughly half the card's own height, so the colour/cream boundary
   crosses the card at its vertical centre (same proportion as the homepage calendar). */
.tinted-card { position: relative; z-index: 3; background: var(--cream); border-radius: var(--radius-lg); border: var(--bw) solid var(--ink-soft); padding: 48px 52px; box-shadow: 0 46px 84px -34px rgba(45,26,14,.4); margin-bottom: -122px; }
.tinted-card.sm { padding: 38px 44px; margin-bottom: -76px; }
.tinted-spill { position: relative; z-index: 3; margin-bottom: -122px; }
.tinted-spill.lg { margin-bottom: -212px; }

/* Offer cards straddling the band's bottom edge, same technique as .tinted-card above:
   the card row gets pulled up by roughly half its own height so the colour/cream
   boundary crosses the cards at their vertical centre, and needs to out-rank the
   (plain) section below — which the generic ".tinted + section" rule already grants.
   .offer-carousel wraps just the cards (the carousel arrows inside it are always
   position:absolute, so they never join normal flow) — it stays the *only* in-flow
   descendant after .card-grid, which is what lets this negative margin collapse
   all the way through to .tinted's own box instead of stopping at a sibling like
   .offer-more (moved into the following section for exactly that reason: a plain
   flow sibling here would swallow the negative margin instead of passing it up). */
.tinted .card-grid { margin-bottom: -216px; }
.tinted .course-card { position: relative; z-index: 3; }


/* ---- pills ---- */
.tag-label { display: block; text-align: center; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--muted); margin-bottom: 16px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; }
.pill { background: var(--accent-tint); border: var(--bw) solid var(--ink-soft); border-radius: 999px; padding: .55em 1.25em; font-size: .92rem; color: var(--ink-soft); transition: background .15s, transform .15s; }
.pill:hover { background: var(--accent); transform: translateY(-2px); }
.pill.solid { background: var(--accent); }

/* ---- course / offer cards (sticker outline, accent icon chip) ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.offer-more { display: flex; justify-content: center; margin-bottom: 44px; }

/* ---- subtle line+dot divider — a quiet beat between the "see everything" link
   and whatever chip/heading opens the next block, so the two don't just run
   together with nothing but whitespace between them. ---- */
.offer-sep { width: 72px; height: 1px; background: var(--line); margin: 0 auto 44px; position: relative; }
.offer-sep::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: var(--bw) solid var(--ink-soft); transform: translate(-50%, -50%); }

/* ---- offer carousel arrows : always position:absolute, so on desktop (where the
   3-card grid never overflows) they add zero flow-height and the straddle margin
   above collapses through exactly as if they didn't exist. Hidden until mobile
   turns .card-grid into a scroller, where they're needed to drive it. ---- */
.offer-carousel { position: relative; }
.carousel-arrow { display: none; }

/* ---- offer cards → single-row grid or full carousel, never an awkward 2-then-1
   wrap: the explicit 3-column grid only applies above the width 3 cards actually
   need (3×320px + 2×28px gaps ≈ 1016px content, ~1072px viewport incl. container
   padding) — below that this query swaps straight to the horizontal scroller, so
   there's no middle ground where auto-fill would wrap a 3rd card onto its own
   row. Cards stay inside the container's normal 28px padding (no edge bleed) so
   they line up with the rest of the page instead of touching the viewport edge.
   grid-auto-columns is a single value, so every column gets the exact same
   track width — cards can't end up uneven widths. Extra top padding + killing
   the parallax drift stop the card's offset outline and scroll drift from
   being clipped by overflow-x:auto, which also computes overflow-y to auto
   and was cutting the rounded top corners off. The ±10px margin/padding pair
   cancels out (0 net shift — cards still line up with the page's 28px edge)
   but gives the card's offset-outline sticker effect (translated -6px/-6px,
   see .course-card::before) just enough room so overflow-x:auto's clipping
   doesn't slice it off the first and last card. */
@media (max-width: 1080px) {
  .card-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline: 16px; margin-inline: -16px; padding: 12px 16px 0; scrollbar-width: none; }
  .card-grid::-webkit-scrollbar { display: none; }
  .course-card { scroll-snap-align: start; }
  .card-grid .course-card.floating { transform: none; }

  /* arrows sit as a centred pair *below* the row, never overlaid on the cards —
     still position:absolute so they add zero flow-height and never disturb the
     straddle margin above (see .tinted .card-grid / the comment on it). */
  .carousel-nav { display: flex; align-items: center; gap: 16px; justify-content: center; position: absolute; top: 100%; left: 0; right: 0; margin-top: 20px; z-index: 4; }
  .carousel-arrow { display: grid; place-items: center; position: static; width: 40px; height: 40px; border-radius: 50%; border: 1.3px solid var(--ink-soft); background: var(--cream-lite); color: var(--ink-soft); box-shadow: 0 10px 24px -10px rgba(45,26,14,.4); cursor: pointer; flex: none; }
  .carousel-arrow svg { width: 18px; height: 18px; }
  .carousel-arrow:disabled { opacity: .3; pointer-events: none; }

  /* progress dots between the two arrows — one per card, current slide filled
     in the page's own accent colour so it reads at a glance without needing
     to count cards. */
  .carousel-dots { display: flex; align-items: center; gap: 8px; }
  .carousel-dots .dot { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 1.3px solid var(--ink-soft); background: var(--cream-lite); cursor: pointer; transition: background .15s, width .15s, height .15s; }
  .carousel-dots .dot.active { width: 9px; height: 9px; background: var(--accent); }

  /* .offer-more is the first thing in the section after the carousel; giving
     it its own margin-top (rather than bumping each page's differing
     padding-top override) adds clearance for the arrow/dot row overlaid
     just above it, without touching the desktop straddle math at all. */
  .offer-more { margin-top: 56px; }
}

.course-card { position: relative; isolation: isolate; background: var(--cream); border-radius: 22px; padding: 28px 30px 30px; display: flex; flex-direction: column; }
.course-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--bw) solid var(--ink-soft); transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -1)); z-index: 2; pointer-events: none; }
.course-card > * { position: relative; z-index: 1; }
.cc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.cc-icon { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-tint); border: var(--bw) solid var(--ink-soft); display: grid; place-items: center; flex: none; }
.cc-icon svg { width: 27px; height: 27px; color: var(--ink-soft); stroke-width: 1.5; }
.cc-badge { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .5em 1em; border-radius: 999px; background: var(--accent); color: var(--ink-soft); border: var(--bw) solid var(--ink-soft); white-space: nowrap; }
.cc-badge.few  { background: #ffd9c2; }
.cc-badge.free { background: var(--tile-green); }
.course-card h3 { font-size: 1.32rem; line-height: 1.14; margin-bottom: 9px; }
.course-card .desc { font-size: .97rem; color: var(--muted); margin: 0 0 22px; line-height: 1.5; }
.cc-meta { display: flex; flex-direction: column; margin-bottom: 24px; }
.cc-meta li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.cc-meta li:last-child { border-bottom: 1px solid var(--line); }
.cc-meta li span { color: var(--muted); }
.cc-meta li b { color: var(--ink-soft); font-weight: 700; text-align: right; }
.cc-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-top: auto; }
.cc-price { font-family: var(--serif-display); font-size: 1.5rem; font-weight: 800; color: var(--ink-soft); line-height: 1; }
.cc-price small { font-family: var(--serif-body); font-size: .78rem; font-weight: 400; color: var(--muted); display: block; margin-top: 3px; }
.cc-foot form { margin: 0; }

/* ---- section spread : the "why us" + "how it works" pair ----
   Both blocks run the full width, stacked, with a big beat between them. They
   are told apart by MATERIAL, not by layout: colour-block stickers above, type
   on bare cream below. The wrapper keeps .tinted-card only for that class's
   negative bottom margin — the spacing contract with the next section's
   padding-top, which is set per page — with all of its chrome stripped. */
.tinted-card.feature-panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(76px, 8vw, 112px); }

/* ---- feature grid : a hand-laid row of pastel stickers ----
   These blocks ("Proč u nás", "Co si užijete", "Naše hodnoty") used to be the
   quietest thing on their page — icon, bold line, grey paragraph, three times
   over, in the page's one accent colour. The landing page already had the
   answer: its category tiles, each a different pastel with the offset outline,
   are the most-liked thing on the site. So the reasons become that — real
   cards, one colour each (set per page via --tile), sitting at slightly
   different angles like stickers someone placed by hand, straightening under
   the cursor. It is the one place on a subpage where the whole palette shows
   up instead of a single tint. */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 22px; }
.feature {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--tile, var(--accent-tint));
  border-radius: 26px; padding: 30px 28px 32px;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 18px 34px -26px rgba(45,26,14,.4);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
/* the site's sticker signature: outline offset up-left, never on the fill */
.feature::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--bw) solid var(--ink-soft); transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -1)); z-index: 2; pointer-events: none; }
.feature > * { position: relative; z-index: 1; }
.feature:nth-child(3n+1) { --tilt: -1.4deg; }
.feature:nth-child(3n+2) { --tilt:  .9deg; }
.feature:nth-child(3n)   { --tilt: -.6deg; }
.feature:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 34px 56px -30px rgba(45,26,14,.45); }
/* punched out of the tile rather than tinted on top of it */
.feature .f-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--cream-lite); border: var(--bw) solid var(--ink-soft); margin-bottom: 20px; }
.feature .f-icon svg { width: 26px; height: 26px; color: var(--ink-soft); stroke-width: 1.5; }
.feature h3 { font-size: 1.24rem; letter-spacing: -.005em; margin-bottom: 9px; }
.feature p { color: rgba(42,35,32,.74); font-size: .96rem; margin: 0; line-height: 1.6; }
.feature.num .f-icon { font-family: var(--serif-display); font-weight: 800; font-size: 1.5rem; color: var(--ink-soft); }

/* ---- stats ----
   Left-aligned and ruled apart rather than four centred blocks floating in a
   card — the numbers line up on a common left edge, which is what makes a
   figure row scan as data instead of decoration. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 0; text-align: left; }
.stat { position: relative; padding-inline: clamp(18px, 2.4vw, 34px); }
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 16%, var(--line) 84%, transparent); }
.stat b { font-family: var(--serif-display); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; color: var(--ink-soft); display: block; line-height: 1; }
.stat span { color: var(--muted); font-size: .95rem; display: block; margin-top: 10px; }

/* ---- steps : the numbers ARE the design ----
   Every earlier attempt here decorated the sequence — discs, cards, dashed
   threads, a timeline — and every one of them fought the row it sat in. The
   quiet version wins: a rule across the top of each step and the number set
   huge in the display serif underneath it, in the page's colour. Nothing to
   align, nothing to connect, and it reads as a schedule at a glance. It also
   plays deliberately against the colour-block tiles above it: type on cream
   after mass and colour, so the two halves of the section never blur together
   on a phone. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 40px); row-gap: 44px; }
.step { position: relative; padding-top: 18px; border-top: 1.5px solid var(--ink-soft); }
.step .n {
  display: block; font-family: var(--serif-display); font-weight: 800;
  font-size: clamp(2.5rem, 4.6vw, 3.5rem); line-height: .9; letter-spacing: -.02em;
  /* a touch of ink mixed in: the raw pastel is charming on a filled tile but
     too faint to carry 3.5rem of thin serif on bare cream */
  color: color-mix(in srgb, var(--accent) 78%, var(--ink-soft)); margin-bottom: 16px;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
  transform-origin: left bottom;
}
.step:hover .n { transform: scale(1.06); }
.step h3 { font-size: 1.12rem; margin-bottom: 7px; }
.step p { color: var(--muted); font-size: .94rem; margin: 0; line-height: 1.6; }

/* ---- split (image/panel + text) ----
   Was two equal columns sitting politely side by side with a gap between them.
   Now the picture takes the wider share and the copy sits in its own card that
   OVERLAPS it — the layout the whole site is built on (things crossing each
   other's edges) applied to the image rows, instead of a plain 50/50. */
.split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; }
.split-media { position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5/4; border: var(--bw) solid var(--ink-soft); box-shadow: 0 40px 74px -40px rgba(45,26,14,.45); }
.split-media svg { width: 100%; height: 100%; object-fit: cover; }
.split-body { position: relative; z-index: 2; background: var(--cream-lite); border-radius: var(--radius); padding: 46px 44px; margin-left: -78px; box-shadow: 0 40px 74px -44px rgba(45,26,14,.4); }
.split-body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--bw) solid var(--ink-soft); transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -1)); z-index: 2; pointer-events: none; }
.split-body > * { position: relative; z-index: 1; }
/* mirrored row — picture on the right, card reaching back over it */
.split.rev .split-media { order: 2; }
.split.rev .split-body { margin-left: 0; margin-right: -78px; }
/* a quiet accent slab peeking out from behind the picture, so the composition
   sits on something instead of floating on flat cream */
.split { position: relative; }
.split::before { content: ""; position: absolute; z-index: 0; left: -22px; top: -22px; width: 210px; height: 210px; border-radius: var(--radius); background: var(--accent-tint); }
.split.rev::before { left: auto; right: -22px; }

/* ---- FAQ ----
   Two columns instead of one centred stack: the heading, the "didn't find it?"
   line and a way to actually ask stay parked on the left (sticky, so they
   follow you through a long list), the questions run down the right.
   Each question is its own outlined card instead of a row in a ruled list, and
   the OPEN one gets picked up off the page — accent tint, darker outline, a
   drop shadow — so the answer you're reading is unmistakably the active one.
   The marker is a chip that rotates 45° (+ → ×) rather than swapping glyphs. */
.faq-layout { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); column-gap: 64px; align-items: start; }
.faq-head { position: relative; }
.faq-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); margin-bottom: .9rem; }
.faq-head h2::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--accent); margin-bottom: 18px; }
.faq-head p { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0 0 24px; }
.faq { display: grid; gap: 14px; }
.faq details { border: var(--bw) solid var(--tan-line); border-radius: 20px; background: var(--cream-lite); transition: background .22s ease, border-color .22s ease, box-shadow .22s ease; }
.faq details:hover { border-color: var(--ink-soft); }
.faq details[open] { background: var(--accent-tint); border-color: var(--ink-soft); box-shadow: 0 26px 46px -32px rgba(45,26,14,.55); }
.faq summary { cursor: pointer; list-style: none; padding: 19px 22px; font-family: var(--serif-display); font-weight: 700; font-size: 1.12rem; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cream); border: var(--bw) solid var(--ink-soft); font-family: var(--serif-body); font-weight: 400; font-size: 1.35rem; line-height: 1; color: var(--ink-soft); transition: transform .25s ease, background .22s ease; }
.faq summary:hover::after { background: var(--accent-tint); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--accent); }
.faq details p { color: var(--muted); font-size: 1rem; margin: 0; padding: 0 22px 22px; max-width: 660px; line-height: 1.65; }
/* Height animation where it's supported (::details-content + interpolate-size);
   everywhere else this is ignored and the panel just snaps open as before. */
@supports selector(details::details-content) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---- team ----
   One card shape at every width: the portrait sits beside the name, the bio runs
   full width underneath. A 370px desktop column and a phone-wide carousel slide
   are then the same object at two sizes, instead of two layouts to keep in
   agreement — the earlier big-portrait-on-top version only worked on desktop and
   left a hole beside a small portrait on mobile.
   Each card is washed in that person's own colour and wears the site's sticker
   signature (tinted fill + outline offset up-left, exactly like .feature and
   .course-card), so the people read as part of the same family of cards as the
   rest of the site — and the colour-coding the category chips used to carry is
   now the card itself. */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; }
.member {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  column-gap: 18px; align-items: center; align-content: start; text-align: left;
  background: color-mix(in srgb, var(--tone, var(--accent)) 20%, var(--cream-lite));
  border-radius: 24px; padding: 26px 28px 28px;
  box-shadow: 0 22px 40px -30px rgba(45,26,14,.45);
  transition: box-shadow .28s ease;
}
.member::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--bw) solid var(--ink-soft); transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -1)); z-index: 2; pointer-events: none; }
.member > * { position: relative; z-index: 1; }
/* Shadow only, no lift on hover: .floating owns transform (the parallax drift),
   and a transform here would cancel it mid-scroll.
   Behind a hover query on purpose: on a touch screen there's no un-hover, so
   tapping or swiping a card left it stuck with the deeper shadow — which reaches
   ~33px below the card instead of ~12px and was what the carousel's clip edge
   was cutting off. A device that can't hover doesn't need the state at all. */
@media (hover: hover) {
  .member:hover { box-shadow: 0 34px 58px -30px rgba(45,26,14,.5); }
}
/* Every second card drops a step so two rows of three don't read as a staff
   table; the parallax drift does the rest. */
.member:nth-child(even) { margin-top: 26px; }
/* Punched out of the card rather than tinted on top of it — same trick as
   .feature .f-icon, and it keeps the portrait readable against the wash. */
.member .avatar { grid-row: span 2; aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: var(--bw) solid var(--ink-soft); background: var(--cream-lite); }
.member .avatar svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.member h3 { font-size: 1.14rem; margin: 0; align-self: end; }
.member > span { color: rgba(42,35,32,.72); font-size: .9rem; align-self: start; margin-top: 4px; }
.m-bio { grid-column: 1 / -1; color: rgba(42,35,32,.74); font-size: .93rem; line-height: 1.62; margin: 18px 0 0; }
/* The team carousel borrows the offer carousel's arrows/dots, but its row only
   becomes a scroller at ≤640px — so the nav stays hidden until then, otherwise
   the 1080px rule that reveals offer arrows would show a dead pair here. */
.team-carousel .carousel-nav { display: none; }

/* ---- team roster (o-nas) ----
   The portraits are the navigation and the bio is the page: a row of faces
   above one wide card. Sizing is deliberate — the faces are big enough to read
   as people (not avatars in a byline) and the detail card is the same sticker
   family as .member, so the section still belongs to the rest of the site.
   `--tone` is set per face by JS and re-set on the panel each time the
   selection changes, which is what makes the wash follow the person. */
.team-roster { display: grid; row-gap: 30px; }
.roster-faces {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.roster-face {
  display: grid; row-gap: 10px; justify-items: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; color: var(--ink-soft);
  /* Only the photo animates; moving the whole button would shift the caption
     under it and make the row jitter as the pointer crosses it. */
}
.roster-face .rf-photo {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 22px; overflow: hidden;
  border: var(--bw) solid var(--ink-soft);
  background: color-mix(in srgb, var(--tone) 30%, var(--cream-lite));
  /* Unselected faces sit back a step — desaturated and slightly smaller — so
     the row reads as "one of these is open" without an extra badge or arrow. */
  filter: saturate(.62); opacity: .78;
  transform: scale(.94);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), filter .3s ease, opacity .3s ease, box-shadow .3s ease;
}
.roster-face .rf-photo svg { display: block; width: 100%; height: 100%; }
.roster-face .rf-text { display: grid; row-gap: 3px; text-align: center; }
.roster-face .rf-name { font-size: .88rem; font-weight: 600; color: var(--ink-soft); transition: color .25s ease; }
.roster-face .rf-role { font-size: .75rem; color: rgba(42,35,32,.65); line-height: 1.3; }
@media (hover: hover) {
  .roster-face:hover .rf-photo { filter: saturate(.9); opacity: 1; transform: scale(.99); }
}
.roster-face[aria-selected="true"] .rf-photo {
  filter: none; opacity: 1; transform: scale(1);
  box-shadow: 0 16px 30px -18px rgba(45,26,14,.55);
}
.roster-face[aria-selected="true"] .rf-name { color: var(--ink-soft); font-weight: 700; }
.roster-face:focus-visible { outline: none; }
.roster-face:focus-visible .rf-photo { outline: 2px solid var(--orange); outline-offset: 3px; }

.roster-detail {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 168px minmax(0, 1fr); column-gap: 30px; align-items: center;
  background: color-mix(in srgb, var(--tone, var(--accent)) 20%, var(--cream-lite));
  border-radius: var(--radius); padding: 34px 38px;
  box-shadow: 0 22px 40px -30px rgba(45,26,14,.45);
  transition: background .35s ease;
}
.roster-detail:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
/* The site's sticker signature, same as .member / .feature. */
.roster-detail::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: var(--bw) solid var(--ink-soft);
  transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -1));
  z-index: 2; pointer-events: none;
}
.roster-detail > * { position: relative; z-index: 1; }
.rd-photo { aspect-ratio: 1; border-radius: 20px; overflow: hidden; border: var(--bw) solid var(--ink-soft); background: var(--cream-lite); }
.rd-photo svg { display: block; width: 100%; height: 100%; }
.rd-text h3 { font-size: 1.5rem; margin: 0; }
.rd-role { display: block; margin-top: 6px; color: rgba(42,35,32,.72); font-size: .95rem; }
.rd-text p { margin: 16px 0 0; color: rgba(42,35,32,.78); font-size: 1rem; line-height: 1.68; }
/* Entry animation replayed on every switch (JS toggles .is-in). The portrait
   column sets the card's floor, so switching between a three- and a five-line
   bio moves the page below by a line rather than by a whole card. */
.roster-detail .rd-photo, .roster-detail .rd-text { opacity: 0; transform: translateY(8px); }
.roster-detail.is-in .rd-photo, .roster-detail.is-in .rd-text {
  opacity: 1; transform: none;
  transition: opacity .34s ease, transform .34s cubic-bezier(.2,.8,.3,1);
}
.roster-detail.is-in .rd-text { transition-delay: .05s; }
@media (prefers-reduced-motion: reduce) {
  .roster-face .rf-photo, .roster-detail, .roster-detail .rd-photo, .roster-detail .rd-text { transition: none; transform: none; }
}

/* ---- gallery ----
   A mosaic, not a contact sheet: the opening frame takes a 2×2 block and one
   later frame goes wide, so the grid has a focal point and the eye has
   somewhere to start. Every tile fills its cell, whatever shape it lands in. */
/* Row heights come from the square tiles themselves (aspect-ratio), so the
   2×2 opener and the 2×1 wide frame land on the same grid without any fixed
   row height to keep in sync with the container width. */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gallery svg, .gallery img { border-radius: 18px; object-fit: cover; width: 100%; height: 100%; aspect-ratio: 1; border: var(--bw) solid var(--ink-soft); }
.gallery > :first-child { grid-column: span 2; grid-row: span 2; }
.gallery > :nth-child(6) { grid-column: span 2; aspect-ratio: 2 / 1; }

/* ---- prose ---- */
.prose { max-width: 720px; margin-inline: auto; }
.prose h2 { margin-top: 2.4rem; font-size: 1.9rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text); font-size: 1.06rem; }
.prose .drop::first-letter { font-family: var(--serif-display); font-size: 3.2rem; font-weight: 800; float: left; line-height: .82; padding: 6px 12px 0 0; color: var(--orange-dark); }

/* ---- dark CTA band (contained, rounded — the landing's dark aesthetic) ---- */
.cta-card { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); border-radius: var(--radius-lg); padding: 80px 44px; text-align: center; box-shadow: 0 40px 80px -40px rgba(0,0,0,.5); }
.cta-card > .container-narrow { position: relative; z-index: 2; max-width: 620px; margin-inline: auto; }
.cta-card .eyebrow { color: rgba(255,247,240,.6); }
.cta-card h2 { color: var(--cream); font-size: clamp(1.9rem, 3.8vw, 2.7rem); margin: .9rem 0 1rem; }
.cta-card p { color: rgba(255,247,240,.75); font-size: 1.06rem; margin: 0 auto 32px; max-width: 500px; line-height: 1.6; }
.cta-card .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-card .btn::after { border-color: var(--cream); }
/* A fully transparent fill left this button with nothing but text + a thin
   border floating on the dark card — invisible as a "button" next to its
   solid-fill siblings. A faint frosted-glass fill keeps it reading as
   secondary/ghost while still standing out from the card behind it. */
.cta-card .btn-ghost { color: var(--cream); }
.cta-card .btn-ghost::before { background: rgba(255,255,255,.1); }
.cta-card .btn-ghost:hover::before { background: rgba(255,255,255,.2); }
.cta-card .scribble { top: -60px; width: 260px; height: 460px; background: #333; opacity: .7; z-index: 0; }
.cta-card .scribble.left  { left: -80px; }
.cta-card .scribble.right { right: -80px; transform: scaleX(-1); }

/* ---- contact ---- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.panel { position: relative; isolation: isolate; background: var(--cream); border-radius: var(--radius); padding: 38px 40px; }
.panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--bw) solid var(--ink-soft); transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -1)); z-index: 2; pointer-events: none; }
.panel > * { position: relative; z-index: 1; }
.panel h2 { font-size: 1.5rem; margin-bottom: 22px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field textarea { border: 1.4px solid var(--ink-soft); border-radius: 14px; padding: .85em 1.1em; font-family: var(--serif-body); background: #fff; font-size: .98rem; color: var(--text); }
.field input:focus, .field textarea:focus { outline: 2px solid var(--orange); }
.info-list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 0; }
.info-list .i-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-tint); border: var(--bw) solid var(--ink-soft); display: grid; place-items: center; flex: none; }
.info-list .i-icon svg { width: 20px; height: 20px; color: var(--ink-soft); }
.info-list b { display: block; font-family: var(--serif-display); font-size: 1.02rem; margin-bottom: 2px; color: var(--ink-soft); }
.info-list .i-text { font-size: .96rem; color: var(--muted); }
.info-list .i-text a { color: var(--orange-dark); }
.form-note { margin-top: 12px; font-size: .95rem; color: var(--orange-dark); font-weight: 700; }

@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .stat:nth-child(3) { padding-left: 0; }
  .stat:nth-child(2) { padding-right: 0; }
  .stat:nth-child(3)::before { display: none; }

  /* Overlap needs two columns to overlap in — stacked, the card just sits
     under the picture with a normal gap. */
  .split { grid-template-columns: minmax(0, 1fr); }
  .split.rev .split-media { order: 0; }
  .split-body, .split.rev .split-body { margin: -46px 22px 0; padding: 34px 30px; }
  .split::before { display: none; }

  .faq-layout { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .section-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; align-items: start; }
  .section-head > .btn { justify-self: start; }   /* one column: back under the heading, left */
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three faces per row from here down: six across a tablet width shrinks each
     portrait past the point where it reads as a person. */
  .roster-faces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .roster-detail { grid-template-columns: 132px minmax(0, 1fr); column-gap: 24px; padding: 30px 30px; }
  .section-head { margin-bottom: 44px; }
  .contact-grid { grid-template-columns: 1fr; }
  .page-hero .scribble { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; text-align: center; }
  .hero-grid .hero-copy .lead { margin-inline: auto; }
  .hero-grid .hero-actions { justify-content: center; }
  .hero-media { order: -1; max-width: 460px; margin-inline: auto; }
  .tinted { padding-top: 90px; }
  .tinted.pad-bottom { padding-bottom: 90px; }
  .tinted-card { padding: 40px 40px; margin-bottom: -84px; }
  .tinted-card.sm { margin-bottom: -60px; }
  .event-after-tinted { padding-top: 142px; }
  .tinted-spill { margin-bottom: -84px; }
  .tinted-spill.lg { margin-bottom: -150px; }
  .section { padding-block: 104px; }
  .section.tight { padding-block: 28px 104px; }
}
@media (max-width: 640px) {
  /* One tile per row; the tilt goes away because a stack of angled cards on a
     narrow screen reads as broken rather than hand-placed. */
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .feature { --tilt: 0deg !important; padding: 26px 24px 28px; }

  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .step .n { margin-bottom: 10px; }

  /* Mosaic collapses to two columns; the opener keeps its 2×2 emphasis, the
     wide frame goes back to a normal square so the rows stay filled. */
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gallery > :nth-child(6) { grid-column: auto; aspect-ratio: 1; }
  .stats { row-gap: 28px; }
  /* Roster on a phone: the whole team still fits in two rows of three above the
     fold, and the open bio drops the big portrait — the selected face right
     above it is already the picture, and a second copy ate half the card. */
  .roster-faces { gap: 12px; }
  .roster-face .rf-photo { border-radius: 18px; }
  .roster-face .rf-name { font-size: .82rem; }
  .roster-detail { grid-template-columns: minmax(0, 1fr); padding: 26px 24px 28px; }
  .roster-detail .rd-photo { display: none; }
  .rd-text h3 { font-size: 1.3rem; }
  .rd-text p { font-size: .95rem; }

  /* One card per row at this width, whichever team section it is. */
  .team-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .member { padding: 24px 24px 26px; column-gap: 16px; grid-template-columns: 78px minmax(0, 1fr); }
  .member:nth-child(even) { margin-top: 0; }   /* a half-step offset in a single column reads as a mistake, not rhythm */

  /* ---- carousel variant : only where the markup opts in with .team-carousel ----
     Six stacked cards on the *homepage* were a screen and a half of scrolling in
     the middle of the page, so that row becomes a horizontal scroller (same
     mechanics as the offer carousels: scroll-snap plus the arrow/dot nav under it)
     and the section costs one card's height. o-nas deliberately does NOT opt in —
     there the team is the point of the page, so all six stay laid out one under
     the other, and they keep their parallax drift because there's no scroller to
     clip it.
     One slide is a *full* container width, not the 84% the offer cards use — a
     half-visible neighbour at the screen edge reads as a broken layout rather than
     as "there's more", which the dots already say. That's also why the gap is
     wider than the scroller's own padding *plus* --offset: any smaller and either
     the next card or its offset outline lands inside the viewport and shows the
     very sliver this is avoiding.
     The ±28px margin/padding pair cancels out, so cards still line up with the
     page's own 28px inset, and the bleed gives the card's offset outline and
     shadow room not to be sliced by overflow-x:auto — which computes overflow-y
     to auto and so clips vertically too. The bottom does the same thing with a
     ±(72/-34) pair: the padding buys clip room for the shadow, the negative
     margin gives back the space so the nav doesn't drift away from the cards.
     Don't shrink the padding to "what the shadow measures" — the deeper hover
     shadow reaches ~33px, and this is the edge users notice first. */
  .team-carousel .team-grid {
    grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: 100%; gap: 38px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline: 28px;
    margin-inline: -28px; padding: 10px 28px 72px; margin-bottom: -34px;
    scrollbar-width: none;
  }
  .team-carousel .team-grid::-webkit-scrollbar { display: none; }
  .team-carousel .member { scroll-snap-align: start; }
  /* Drifting a card inside an overflow-x scroller pushes it across the clip
     edge and shaves its corners — same reason .card-grid kills it (§10/§11). */
  .team-carousel .member.floating { transform: none; }
  /* In flow here, unlike the offer nav's position:absolute: the team row is the
     last thing in its section, so overlaying the nav meant reserving 74px of dead
     space under it — which, stacked on two section paddings, opened a canyon
     between the team and the section below. The scroller's own bottom padding
     covers most of the gap, so the nav only adds a little. */
  .team-carousel .carousel-nav { display: flex; position: static; margin-top: 4px; }
  .m-bio { font-size: .92rem; margin-top: 15px; }
  .split-body, .split.rev .split-body { margin: -34px 14px 0; padding: 28px 24px; }
  .cta-card { padding: 56px 26px; }
  .panel { padding: 30px 24px; }
  .section { padding-block: 80px; }
  .section.tight { padding-block: 24px 80px; }
  .section.pb-short { padding-bottom: 28px; }
  .tinted { padding-top: 68px; }
  .tinted.pad-bottom { padding-bottom: 68px; }
  .tinted-card { padding: 32px 26px; margin-bottom: -64px; }
  .tinted-card.sm { margin-bottom: -44px; }
  .event-after-tinted { padding-top: 122px; }
  .tinted-spill { margin-bottom: -64px; }
  .tinted-spill.lg { margin-bottom: -110px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .tiles-grid { grid-template-columns: repeat(3, 1fr); }
  .cal-card { grid-template-columns: 1fr; height: auto; }
  .cal-main { border-inline: 0; border-block: 1px solid var(--tan-line); }
  .cal-legend { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
  .cal-legend::-webkit-scrollbar { display: none; }
  .cal-legend li { flex: none; white-space: nowrap; margin-left: 0; border: 1px solid var(--tan-line); }
  .agenda-list { max-height: 420px; overflow-y: auto; }
  .dark .container { grid-template-columns: 1fr; gap: 44px; }
  .arch { max-width: 300px; margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero .scribble, .dark .scribble { display: none; }
}
@media (max-width: 720px) {
  /* The basket takes over the auto margin that used to push the hamburger to
     the right edge, so it lands just left of it; empty, it collapses to nothing
     and pulls the .nav gap shut so the hamburger keeps its place. */
  .nav-toggle { display: flex; margin-left: 0; }
  .nav .nav-cart-mobile {
    display: grid; margin-left: auto; z-index: 201; flex: none;
    width: 46px; height: 46px;
    border: 1.3px solid var(--ink-soft); background: var(--cream-lite);
    box-shadow: 0 10px 22px -12px rgba(45,26,14,.4);
  }
  .nav .nav-cart-mobile.is-empty { margin-left: auto; margin-right: -1.7rem; border-width: 0; box-shadow: none; }
  .nav-cart-mobile .nav-cart-count { top: -3px; right: -3px; }
  .tiles-grid { grid-template-columns: repeat(2, 1fr); }
  .newsletter-card { grid-template-columns: 1fr; padding: 34px 26px; }
  .footer-grid { grid-template-columns: 1fr; }

  /* ---- calendar : compact mobile treatment (was unbounded, sprawled 2000px+) ---- */
  .cal-side { padding: 20px 0 4px 20px; }
  .cal-side h4 { margin-bottom: 12px; font-size: 1.02rem; padding-right: 20px; }
  .cal-legend li { padding: 7px 12px; font-size: .84rem; }
  .cal-legend { padding-right: 20px; }
  .cal-main { padding: 20px; }
  .cal-toolbar { margin-bottom: 14px; }
  .cal-nav { width: 36px; height: 36px; }
  .cal-grid { gap: 4px 3px; }
  .cal-day { height: 38px; font-size: .88rem; border-radius: 10px; }
  .cal-day .dots { margin-top: 1px; }
  .cal-agenda { padding: 20px 20px 0; }
  .cal-agenda .head { margin-bottom: 10px; }
  .agenda-list { max-height: 340px; overflow-y: auto; }
  .event-card { height: 128px; padding: 13px 16px; }
}

/* ==========================================================================
   Mobile menu — fullscreen overlay
   ========================================================================== */
.mobile-menu { display: none; }
@media (max-width: 720px) {
  .nav-links, .nav-right { display: none; }
  .nav-toggle { position: relative; z-index: 201; }
  /* Body gets pinned with position:fixed while the menu is open (see main.js)
     so touch-scroll can't leak through to the page behind the overlay — but
     that takes body out of normal flow, so this sticky header would have
     nothing left to "stick" within and'd render at its static offset
     (scrolled off-screen). Switch it to fixed too while open so it stays put. */
  .site-header.open { position: fixed; top: 0; left: 0; right: 0; }
  .nav-toggle span { transition: transform .25s ease, opacity .2s ease; }
  .site-header.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mobile-menu {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2.2rem;
    position: fixed; inset: 0; z-index: 200; overflow-y: auto;
    background: var(--cream);
    padding: 118px 24px 48px;
    opacity: 0; visibility: hidden; transform: translateY(-14px);
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
  }
  .site-header.open .mobile-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .28s ease, transform .28s ease;
  }
  .mobile-menu .scribble { position: fixed; top: 20%; width: 260px; height: 520px; background: #e4d2bb; opacity: .5; z-index: 0; }
  .mobile-menu .scribble.left { left: -100px; }
  .mobile-menu .scribble.right { right: -100px; transform: scaleX(-1); }
  .mobile-menu-links { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin: auto 0; }
  .mobile-menu-links a { font-family: var(--serif-display); font-weight: 800; font-size: 1.9rem; color: var(--ink-soft); letter-spacing: -.01em; }
  .mobile-menu-links a.active { color: var(--orange); }
  .mobile-menu-cta { position: relative; z-index: 1; font-size: 1.05rem; padding: .9em 2.3em; }

  /* ---- "Sekce" accordion : same six offer sections, tap to expand in place -- */
  .mm-item { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .mm-drop-btn { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--serif-display); font-weight: 800; font-size: 1.9rem; color: var(--ink-soft); letter-spacing: -.01em; }
  .mm-item .drop-caret { width: 19px; height: 19px; transition: transform .25s ease; }
  .mm-item.open .mm-drop-btn { color: var(--orange); }
  .mm-item.open .drop-caret { transform: rotate(180deg); }
  .mm-sublist {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    width: min(84vw, 400px); overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height .32s ease, opacity .22s ease, margin-top .32s ease;
  }
  .mm-item.open .mm-sublist { max-height: 480px; opacity: 1; margin-top: 1.1rem; }
  .mm-sub-link { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border-radius: 16px; background: var(--cream-lite); border: 1.3px solid var(--tan-line); text-align: center; }
  .mm-sub-link .ndi-icon { width: 42px; height: 42px; }
  .mm-sub-link .ndi-label { font-family: var(--serif-body); font-weight: 600; font-size: .82rem; line-height: 1.3; }
}

/* ==========================================================================
   EVENT DETAIL PAGE (pages/akce-detail.html)
   Deliberately NOT the subpage skeleton (hero → tinted band with a straddling
   card → dark CTA). A detail page answers one question — "do I want to go to
   this?" — so it gets its own shape:

     .ev-hero   deep tinted "poster" header (accent at 40%, vs. 30% for the
                subpage .tinted bands) that opens the page instead of sitting
                second, with the standard curve carving its bottom edge;
     .ev-rail   a ticket card in the right rail, pulled UP so it straddles that
                curve (same trick as kalendar's .cal-events-grid margin-top),
                then STICKY so the facts + CTA follow you down the article;
     .ev-more   a much paler echo of the same accent (16%) so the page reads as
                two tones of one colour rather than the one repeated band every
                other subpage has.
   ========================================================================== */

/* Shared 2-column skeleton — used by both the hero and the body so the article
   column and the rail line up across the section boundary. */
/* No align-items:start — the rail must STRETCH to the article's height, or
   the sticky ticket has zero travel and never actually sticks. */
.ev-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; column-gap: 64px; }

/* ---- poster header ---- */
.ev-hero { position: relative; background: color-mix(in srgb, var(--accent) 40%, var(--cream)); padding-block: 54px 200px; }
/* Section itself stays overflow:visible for the curve; the bleeding scribbles
   get clipped by their own layer so they can't create page-wide overflow. */
.ev-hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ev-hero .scribble { top: -40px; width: 300px; height: 620px; background: #fff; opacity: .34; }
.ev-hero .scribble.left  { left: -110px; }
.ev-hero .scribble.right { right: -110px; transform: scaleX(-1); }
.ev-hero .container { position: relative; z-index: 2; }
.ev-head .back-link { color: rgba(42,35,32,.62); }
.ev-kicker { display: inline-flex; align-items: center; gap: .6em; background: rgba(255,255,255,.75); border: var(--bw) solid var(--ink-soft); border-radius: 999px; padding: .5em 1.15em; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); }
.ev-kicker i { display: block; width: 9px; height: 9px; border-radius: 50%; border: var(--bw) solid rgba(42,35,32,.45); }
.ev-head h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); letter-spacing: -.015em; margin: 1.15rem 0 1.05rem; }
.ev-lead { font-size: 1.1rem; line-height: 1.6; color: rgba(42,35,32,.72); max-width: 54ch; margin: 0 0 2rem; }
.ev-quick { display: flex; flex-wrap: wrap; gap: 10px; }
.ev-quick li { display: flex; align-items: center; gap: .55em; background: rgba(255,255,255,.6); border: 1px solid rgba(42,35,32,.14); border-radius: 999px; padding: .5em 1.05em; font-size: .93rem; font-weight: 600; color: var(--ink-soft); }
.ev-quick svg { width: 16px; height: 16px; color: rgba(42,35,32,.5); }

/* Category illustration — sits in the hero's right column, above the ticket.
   align-self:start (not the grid's default stretch) or the aspect-ratio box
   gets stretched to the row height and the drawing distorts. */
.ev-art { align-self: start; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); border: var(--bw) solid var(--ink-soft); background: var(--cream-lite); box-shadow: 0 30px 60px -34px rgba(45,26,14,.42); }
.ev-art svg { display: block; width: 100%; height: 100%; }

/* ---- body : article + sticky rail ---- */
/* z-index + own background: the rail is pulled up into the hero above, so this
   section has to paint over it (stacking) — see the stacking-context gotcha. */
.ev-body { position: relative; z-index: 2; background: var(--cream); padding-block: 78px 104px; }
.ev-aside { position: relative; z-index: 3; margin-top: -286px; }
.ev-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }

/* ---- the ticket ---- */
.ev-ticket { overflow: hidden; background: var(--cream-lite); border: var(--bw) solid var(--ink-soft); border-radius: 26px; box-shadow: 0 46px 84px -34px rgba(45,26,14,.42); }
.ev-ticket-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; background: var(--accent); padding: 24px 26px 22px; }
.ev-bigdate { display: flex; align-items: center; gap: 13px; }
.ev-bigdate b { font-family: var(--serif-display); font-weight: 800; font-size: 3.2rem; line-height: .82; color: var(--ink-soft); }
.ev-bigdate span { font-size: .92rem; line-height: 1.25; color: rgba(42,35,32,.78); }
.ev-dow { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: rgba(42,35,32,.62); padding-top: 5px; }
.ev-perf { height: 0; margin: 16px 20px 0; border-top: 1.5px dashed rgba(42,35,32,.3); }
.ev-rows { margin: 0; padding: 10px 26px 4px; }
.ev-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ev-row:last-child { border-bottom: 0; }
.ev-row dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ev-row dd { margin: 0; font-family: var(--serif-display); font-weight: 800; font-size: 1.02rem; text-align: right; color: var(--ink-soft); }
/* Capacity: taken / total as a meter, so "poslední 3 místa" has a scale to
   read against instead of standing alone. */
.ev-cap { padding: 16px 26px 0; }
.ev-cap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ev-cap-head b { font-family: var(--serif-display); font-size: .98rem; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.ev-cap-bar { height: 9px; border-radius: 999px; overflow: hidden; background: rgba(42,35,32,.09); border: var(--bw) solid rgba(42,35,32,.34); }
.ev-cap-bar i { display: block; height: 100%; background: var(--accent); }
.ev-cap-bar.full i { background: #d98a80; }
.ev-cap-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 13px; }
.ev-cap-foot > span:last-child { font-size: .85rem; color: var(--muted); }
.ev-cta { display: flex; margin: 18px 26px 0; }
.ev-note { margin: 13px 26px 24px; font-size: .78rem; line-height: 1.45; color: var(--muted); text-align: center; }
/* spotsLabel's other two states are only styled inside .event-tile elsewhere */
.ev-ticket .cc-badge.some, .ev-more-card .cc-badge.some { background: #dff0e0; }
.ev-ticket .cc-badge.many, .ev-more-card .cc-badge.many { background: var(--cream); border-color: var(--tan-line); }
.ev-ticket .cc-badge.soldout, .ev-more-card .cc-badge.soldout { background: #f3d9d6; }

.ev-mini { background: var(--accent-tint); border: var(--bw) solid var(--ink-soft); border-radius: 22px; padding: 22px 24px; }
.ev-mini h3 { font-size: 1.08rem; margin-bottom: 8px; }
.ev-mini p { font-size: .92rem; line-height: 1.55; color: rgba(42,35,32,.72); margin-bottom: 12px; }
.ev-mini-link { font-weight: 700; font-size: .93rem; color: var(--orange-dark); }
.ev-mini-link:hover { text-decoration: underline; }

/* ---- article column ---- */
.ev-main { max-width: 660px; }
.ev-block { margin-bottom: 52px; }
.ev-block h2 { font-size: 1.62rem; margin-bottom: 1rem; }
/* short accent rule instead of a chip/eyebrow — quieter, and it carries the
   category colour down into the cream half of the page */
.ev-block h2::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--accent); margin-bottom: 15px; }
.ev-main p { color: var(--muted); font-size: 1.02rem; line-height: 1.75; }

.ev-timeline { margin: 0; padding: 0; }
.ev-step { position: relative; display: grid; grid-template-columns: 58px 1fr; column-gap: 34px; padding-bottom: 28px; }
.ev-step::before { content: ""; position: absolute; left: 69px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: var(--bw) solid var(--ink-soft); z-index: 1; }
.ev-step::after  { content: ""; position: absolute; left: 74.5px; top: 17px; bottom: 0; width: 1.4px; background: var(--line); }
.ev-step:last-child { padding-bottom: 0; }
.ev-step:last-child::after { display: none; }
.ev-step-time { font-family: var(--serif-display); font-weight: 800; font-size: 1rem; text-align: right; color: var(--ink-soft); }
.ev-step-time.soft { font-family: var(--serif-body); font-weight: 600; font-size: .88rem; color: var(--muted); }
.ev-step-body h3 { font-size: 1.08rem; margin-bottom: 6px; }
.ev-step-body p { margin: 0; font-size: .97rem; }

.ev-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 26px; }
.ev-checks li { display: flex; align-items: flex-start; gap: .65em; font-size: .98rem; line-height: 1.45; }
.ev-check { flex: none; width: 21px; height: 21px; padding: 3.5px; border-radius: 50%; background: var(--accent-tint); border: var(--bw) solid var(--ink-soft); color: var(--ink-soft); margin-top: 1px; }

.ev-host { display: flex; align-items: flex-start; gap: 20px; background: var(--cream-lite); border: var(--bw) solid var(--ink-soft); border-radius: 22px; padding: 24px 26px; }
.ev-host-avatar { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); border: var(--bw) solid var(--ink-soft); font-family: var(--serif-display); font-weight: 800; font-size: 1.5rem; color: var(--ink-soft); }
.ev-host-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.ev-host h3 { font-size: 1.08rem; margin: 7px 0 2px; }
.ev-host p { margin: 0; font-size: .95rem; color: var(--muted); line-height: 1.6; }
/* A named lecturer gets a real portrait rather than an initial — a square crop
   of the same placeholder drawing the team cards use. */
.ev-host-photo { flex: none; width: 76px; height: 84px; border-radius: 18px; overflow: hidden; border: var(--bw) solid var(--ink-soft); }
.ev-host-photo svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-host p.ev-host-role { font-size: .88rem; color: var(--ink-soft); margin-bottom: 9px; }
.ev-host .ev-mini-link { display: inline-block; margin-top: 12px; }

/* ---- other dates : the pale echo of the accent ---- */
.ev-more { position: relative; background: color-mix(in srgb, var(--accent) 16%, var(--cream)); padding-block: 96px 100px; }
.ev-more .container { position: relative; z-index: 2; }
.ev-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.ev-more-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.ev-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ev-more-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; background: var(--cream); border: var(--bw) solid var(--ink-soft); border-radius: 22px; padding: 22px 24px 24px; transition: transform .18s ease, box-shadow .18s ease; }
.ev-more-card:hover { transform: translateY(-5px); box-shadow: 0 24px 42px -26px rgba(45,26,14,.5); }
.ev-more-date { position: absolute; top: 20px; right: 22px; text-align: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); line-height: 1.15; }
.ev-more-date b { display: block; font-family: var(--serif-display); font-size: 1.55rem; color: var(--ink-soft); }
.ev-more-cat { display: inline-flex; align-items: center; gap: .5em; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ev-more-cat i { display: block; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(42,35,32,.4); }
.ev-more-card h3 { font-size: 1.14rem; line-height: 1.25; padding-right: 60px; }
.ev-more-card p { margin: 0; font-size: .9rem; color: var(--muted); }
.ev-more-card .cc-badge { margin-top: 4px; }

@media (max-width: 1080px) {
  .ev-grid { grid-template-columns: minmax(0, 1fr) 328px; column-gap: 44px; }
  .ev-hero { padding-bottom: 190px; }
}

@media (max-width: 980px) {
  /* Single column — and the rail jumps ABOVE the article (order), so the
     ticket still lands right under the header copy instead of after a screen
     of text. It keeps straddling the curve, just with a smaller pull. */
  .ev-grid { grid-template-columns: minmax(0, 1fr); }
  .ev-hero { padding-block: 44px 160px; }
  /* single column: the illustration and the ticket below it are the same
     card width, so the two read as one stack instead of two odd shapes */
  .ev-art { width: 100%; max-width: 440px; margin: 30px auto 0; aspect-ratio: 16 / 10; }
  .ev-aside { order: -1; margin-top: -184px; }
  .ev-rail { position: static; max-width: 440px; margin-inline: auto; }
  .ev-body { padding-block: 64px 84px; }
  .ev-main { max-width: none; margin-top: 46px; }
  .ev-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-more { padding-block: 82px 86px; }
}

@media (max-width: 640px) {
  .ev-hero { padding-block: 34px 150px; }
  .ev-lead { font-size: 1.02rem; margin-bottom: 1.6rem; }
  .ev-quick li { font-size: .87rem; padding: .45em .9em; }
  .ev-aside { margin-top: -170px; }
  .ev-ticket-top { padding: 20px 22px 18px; }
  .ev-bigdate b { font-size: 2.7rem; }
  .ev-rows { padding: 8px 22px 4px; }
  .ev-cap { padding: 14px 22px 0; }
  .ev-cta { margin: 16px 22px 0; padding-inline: 1.25em; }
  .ev-note { margin: 12px 22px 20px; }
  .ev-block { margin-bottom: 42px; }
  .ev-step { grid-template-columns: 46px 1fr; column-gap: 26px; }
  .ev-step::before { left: 53px; }
  .ev-step::after { left: 58.5px; }
  .ev-checks { grid-template-columns: minmax(0, 1fr); }
  .ev-host { flex-direction: column; gap: 14px; padding: 22px; }
  .ev-more-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   OFFER DETAIL + BASKET
   The offer page reuses the event detail's skeleton (.ev-hero / .ev-grid /
   .ev-rail / .ev-main) — same family, different rail: no date stub and no seat
   meter, because an offer has neither. What it has instead is a price, a
   quantity and a way into the basket.
   ========================================================================== */
.of-buy { padding-bottom: 26px; }
.of-price { display: flex; align-items: baseline; gap: .6em; background: var(--accent); padding: 24px 26px; border-bottom: var(--bw) solid rgba(42,35,32,.16); }
.of-price b { font-family: var(--serif-display); font-weight: 800; font-size: 2.1rem; line-height: 1; color: var(--ink-soft); }
.of-price span { font-size: .9rem; color: rgba(42,35,32,.72); }
.of-qty { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px 4px; }
.of-qty > span { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.of-stepper { display: flex; align-items: center; gap: 4px; border: var(--bw) solid var(--ink-soft); border-radius: 999px; background: var(--cream-lite); padding: 3px; }
.of-stepper button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-family: var(--serif-body); font-size: 1.15rem; line-height: 1; color: var(--ink-soft); transition: background .15s; }
.of-stepper button:hover { background: var(--accent-tint); }
.of-stepper output { min-width: 26px; text-align: center; font-family: var(--serif-display); font-weight: 800; font-size: 1.02rem; color: var(--ink-soft); }

/* dates pulled out of the calendar for offers that also run on fixed weeks —
   camps list whole turnusy, so the row prints a date range and how full the
   week already is rather than a one-word badge */
.of-dates { display: grid; gap: 10px; }
.of-dates a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 210px); align-items: center; gap: 10px 22px; background: var(--cream-lite); border: var(--bw) solid var(--tan-line); border-radius: 18px; padding: 14px 18px; transition: border-color .18s, transform .18s; }
.of-dates a:hover { border-color: var(--ink-soft); transform: translateX(3px); }
.of-date-when { display: grid; gap: 2px; }
.of-dates b { font-family: var(--serif-display); font-size: 1.02rem; color: var(--ink-soft); }
.of-dates .of-date-when > span { font-size: .92rem; color: var(--muted); }

/* the turnus picker: same row as .of-dates, but it selects instead of navigating */
.of-pick { scroll-margin-top: 90px; }   /* the event detail links to it as #terminy */
.of-pick > h2 { scroll-margin-top: 90px; }
.of-pick .of-dates { margin-top: 4px; }
.of-pick-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(150px, 210px); align-items: center; gap: 10px 20px; width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--cream-lite); border: var(--bw) solid var(--tan-line); border-radius: 18px; padding: 14px 18px; transition: border-color .18s, background .18s, transform .18s; }
.of-pick-row:hover:not(:disabled) { border-color: var(--ink-soft); transform: translateX(3px); }
.of-pick-row:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.of-pick-row.is-picked { border-color: var(--ink-soft); background: var(--accent-tint); }
.of-pick-row.is-full { cursor: not-allowed; opacity: .58; }
.of-pick-mark { width: 20px; height: 20px; border-radius: 50%; border: var(--bw) solid var(--ink-soft); background: var(--cream-lite); display: grid; place-items: center; }
.of-pick-row.is-picked .of-pick-mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-soft); }
.of-pick-hint { font-size: .88rem; color: var(--muted); margin-top: 12px; }
.of-pick-hint a { text-decoration: underline; text-underline-offset: 3px; }
/* nudge when someone hits the CTA before choosing a week */
.of-pick.is-flagged .of-dates { animation: pick-nudge .55s ease 2; }
@keyframes pick-nudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-5px); } 70% { transform: translateX(5px); } }
.of-picked dd { color: var(--muted); }
.of-picked.is-set dd { color: var(--ink-soft); }

.of-meter { display: grid; gap: 6px; }
.of-meter-bar { height: 8px; border-radius: 999px; background: var(--cream); border: 1px solid var(--tan-line); overflow: hidden; }
.of-meter-bar i { display: block; height: 100%; background: var(--accent, var(--orange)); border-radius: 999px; transition: width .3s ease; }
.of-meter-note { font-size: .8rem; color: var(--muted); }
.of-meter.few .of-meter-bar i { background: var(--orange); }
.of-meter.few .of-meter-note { color: var(--orange-dark); font-weight: 600; }
.of-meter.soldout .of-meter-bar i { background: var(--tan-line); }

@media (max-width: 560px) {
  .of-dates a { grid-template-columns: 1fr; }
  .of-pick-row { grid-template-columns: auto minmax(0, 1fr); }
  .of-pick-row .of-meter { grid-column: 1 / -1; }
}

/* ---- basket line: which turnus this seat is for ---- */
.cart-date { display: block; font-family: var(--serif-body); font-size: .86rem; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* ---- header basket ---- */
/* The basket only earns its slot in the navbar once something is in it: empty,
   it collapses to zero width (and swallows the flex gap that precedes it) and
   springs back open when the first item lands. */
.nav-cart { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ink-soft); transform: scale(1); opacity: 1; transition: background .15s, width .38s cubic-bezier(.34, 1.56, .64, 1), margin .38s cubic-bezier(.34, 1.56, .64, 1), transform .38s cubic-bezier(.34, 1.56, .64, 1), opacity .22s ease .08s; }
.nav-cart:hover { background: var(--accent-tint); }
.nav-cart svg { width: 21px; height: 21px; }
.nav-cart.is-empty { width: 0; opacity: 0; transform: scale(.4) rotate(-12deg); pointer-events: none; overflow: hidden; transition: width .3s ease, margin .3s ease, transform .3s ease, opacity .16s ease; }
/* the negative margin eats the flex gap the collapsed basket would leave behind */
.nav-right .nav-cart.is-empty { margin-left: -1.3rem; }
.nav-cart-mobile { display: none; }
.nav-cart.no-anim { transition: none; }
.nav-cart-count { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--orange); border: var(--bw) solid var(--ink-soft); color: var(--ink-soft); font-size: .68rem; font-weight: 700; line-height: 16px; text-align: center; }
.nav-cart-count.is-bumped { animation: cart-bump .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .nav-cart, .nav-cart.is-empty { transition: background .15s; }
  .nav-cart-count.is-bumped { animation: none; }
}

/* ---- basket page ---- */
.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.cart-items { display: grid; gap: 14px; }
.cart-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "cat cat cat" "title stepper sum" "unit stepper sum"; align-items: center; gap: 4px 20px; background: var(--cream-lite); border: var(--bw) solid var(--ink-soft); border-radius: 22px; padding: 20px 56px 20px 24px; }
.cart-cat { grid-area: cat; display: inline-flex; align-items: center; gap: .5em; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.cart-cat i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(42,35,32,.4); }
.cart-title { grid-area: title; font-family: var(--serif-display); font-weight: 800; font-size: 1.14rem; color: var(--ink-soft); }
.cart-title:hover { text-decoration: underline; }
.cart-unit { grid-area: unit; font-size: .9rem; color: var(--muted); }
.cart-item .of-stepper { grid-area: stepper; }
.cart-sum { grid-area: sum; font-family: var(--serif-display); font-weight: 800; font-size: 1.24rem; color: var(--ink-soft); text-align: right; min-width: 96px; }
.cart-remove { position: absolute; top: 16px; right: 18px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.cart-remove:hover { background: var(--accent-tint); color: var(--ink-soft); }

.cart-summary { position: sticky; top: 96px; background: var(--accent-tint); border: var(--bw) solid var(--ink-soft); border-radius: var(--radius); padding: 28px 28px 30px; box-shadow: 0 34px 62px -40px rgba(45,26,14,.45); }
.cart-summary h2 { font-size: 1.3rem; margin-bottom: 18px; }
.cart-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(42,35,32,.12); font-size: .95rem; color: var(--muted); }
.cart-row b { font-family: var(--serif-display); font-size: 1rem; color: var(--ink-soft); }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0 20px; }
.cart-total span { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.cart-total b { font-family: var(--serif-display); font-weight: 800; font-size: 1.7rem; color: var(--ink-soft); }
.cart-pay { width: 100%; }
.cart-note { margin: 14px 0 0; font-size: .82rem; line-height: 1.5; color: var(--muted); text-align: center; }
.cart-empty { text-align: center; max-width: 480px; margin-inline: auto; padding: 40px 0 20px; }
.cart-empty h2 { font-size: 1.7rem; margin-bottom: .8rem; }
.cart-empty p { color: var(--muted); margin-bottom: 1.8rem; }

@media (max-width: 980px) {
  .cart-grid { grid-template-columns: minmax(0, 1fr); }
  .cart-summary { position: static; }
}
@media (max-width: 640px) {
  .cart-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cat cat" "title title" "unit unit" "stepper sum"; row-gap: 10px; padding: 18px 48px 18px 20px; }
  .cart-sum { min-width: 0; }
  .of-price b { font-size: 1.8rem; }
}