/* Lepší kolej – landing page (23. 10. 2026). Vychází ze schváleného návrhu webu (hero varianta B, 8 fotek Brna).
   Čisté CSS, písma self-hosted (SIL OFL 1.1, viz assets/fonts/). */

/* Fredoka CZ: statické řezy 500/600/700 doplněné o kompletní českou (a slovenskou) sadu + typografii, OFL */
@font-face { font-family: "Fredoka"; src: url("../assets/fonts/Fredoka-CZ-500.woff2?v=3") format("woff2"); font-weight: 300 549; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../assets/fonts/Fredoka-CZ-600.woff2?v=3") format("woff2"); font-weight: 550 649; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../assets/fonts/Fredoka-CZ-700.woff2?v=3") format("woff2"); font-weight: 650 900; font-display: swap; }
/* Záložní písmo pro případné chybějící znaky (stahuje se jen pokud je potřeba) */
@font-face { font-family: "Roboto Condensed"; src: url("../assets/fonts/RobotoCondensed-Variable.woff2?v=3") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Graduate"; src: url("../assets/fonts/Graduate-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } /* logo */
@font-face { font-family: "PT Sans Narrow"; src: url("../assets/fonts/PTSansNarrow-Regular.woff2?v=1") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 109%; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --orange-1: #f7a23b;
  --orange-2: #ff6a00;
  --orange: #ff8a1f;          /* tlačítko: černý text 8.1:1 */
  --grad-a: #f7a23b; --grad-b: #ff6a00; /* gradient loga (A) */
  --btn-grad-a: #ffb347; --btn-grad-b: #ff5a00; /* gradient tlačítek (B) */
  --ink: #121110;
  --ink-2: #1e1c1a;
  --paper: #fff8ef;
  --muted-dark: #c9c1b6;

  --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --step--1: .875rem;
  --step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  --step-3:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --outline: 3px solid var(--ink);
  --font-display: "Fredoka", "Roboto Condensed", system-ui, sans-serif;
  --font-body: "PT Sans Narrow", "Roboto Condensed", system-ui, sans-serif;

  /* HERO FOTO – season-daynight.js sem zapíše image-set() s fotkou podle období a denní doby (na <html>).
     Výchozí bez JS = podzim-den. */
  --hero-photo: image-set(url("../assets/img/hero/autumn-day.webp") type("image/webp"), url("../assets/img/hero/autumn-day.jpg") type("image/jpeg"));
  --hero-photo-pos: 50% 45%;
  /* Barevné téma – zatím jednotné. Sezónní varianty viz konec souboru. */
  --accent: var(--orange-1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; color: #fff; background: var(--ink); }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--orange-1); outline-offset: 3px; border-radius: 6px; }
.container { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.page { flex: 1; display: flex; flex-direction: column; }

/* ---------- Tlačítko ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.2; text-align: center;
  padding: .65em 1.5em; border: var(--outline); border-radius: 999px; text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; color: var(--ink); background: #fff; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-orange { background: var(--orange); background: linear-gradient(90deg, var(--btn-grad-a), var(--btn-grad-b)); }
.btn-orange:hover { background: linear-gradient(90deg, var(--btn-grad-a), var(--btn-grad-b)); filter: brightness(1.06); }

/* ---------- Hero ---------- */
.hero { flex: 1; position: relative; isolation: isolate; overflow: hidden; color: #fff; text-align: center; background: var(--ink);
  min-height: min(84vh, 720px); display: grid; align-items: center; padding: var(--space-8) 0 calc(var(--space-8) + 1rem); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; }
/* Fotka + tmavý radiální „spotlight“ za textem (AA kontrast pro bílý text) */
.hero--photo::before { background:
    radial-gradient(ellipse 36rem 24rem at 50% 48%, rgba(10,9,8,.78) 0%, rgba(10,9,8,.66) 55%, rgba(10,9,8,.38) 88%, rgba(10,9,8,.28) 100%),
    var(--hero-photo) var(--hero-photo-pos) / cover no-repeat, var(--ink); }
.hero h1 { margin: 0; font-weight: 400; }
.hero-tagline { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1.15; margin: 0 0 var(--space-3); text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.hero-sub { font-size: var(--step-1); max-width: 34rem; margin: 0 auto var(--space-6); line-height: 1.5; color: #f3ede6; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.hero .accent { color: var(--accent); text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.9); }
/* Tablet/mobil: posunout fotku doprava, aby byla vidět katedrála Petrov (schválený ořez). */
@media (max-width: 899px) { :root { --hero-photo-pos: 63% 45%; } }
@media (max-width: 599px) { :root { --hero-photo-pos: 70% 45%; } }
@media (max-width: 599px) {
  .hero { min-height: 0; padding: var(--space-7) 0 calc(var(--space-8) + 1.45rem); }
  .hero--photo::before { background:
    linear-gradient(90deg, rgba(10,9,8,.36) 0%, rgba(10,9,8,.3) 55%, rgba(10,9,8,0) 88%),
    linear-gradient(rgba(10,9,8,.56), rgba(10,9,8,.5) 60%, rgba(10,9,8,.4)),
    var(--hero-photo) var(--hero-photo-pos) / cover no-repeat, var(--ink); }
  .btn { font-size: 1.05rem; padding: .65em 1.2em; }
}

.hero-text { max-width: 40rem; margin: 0 auto var(--space-6); }
.hero-text p { font-size: var(--step-1); line-height: 1.5; color: #f3ede6; text-shadow: 0 1px 10px rgba(0,0,0,.9); margin: 0 0 .7em; }
.hero-text p:last-child { margin-bottom: 0; }
@media (max-width: 599px) { .hero-text p { font-size: 1.05rem; } }

/* ---------- O nás – pastelově oranžové pozadí (světlý odstín brand oranžové), tmavý text ---------- */
.about { background: #ffe1bf; color: var(--ink); text-align: center; padding: clamp(1.25rem, 2.4vw, 1.9rem) 0; border-bottom: var(--outline); }
.about-text { max-width: 46rem; }
.about-text p { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2, clamp(1.35rem, 1.2rem + .6vw, 1.6rem)); line-height: 1.45; margin: 0 0 1em; text-wrap: balance; }
.about-text p:last-child { margin-bottom: 0; }
@media (max-width: 599px) { .about-text p { font-size: 1.2rem; } }

/* ---------- Kontakt (text z původního webu) ---------- */
.contact { background: var(--paper); color: var(--ink); text-align: center; padding: clamp(1.6rem, 3.5vw, 2.6rem) 0 calc(clamp(1.6rem, 3.5vw, 2.6rem) + 1.25rem); }
.contact-lead { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1.25; max-width: 44rem; margin: 0 auto var(--space-7); text-wrap: balance; }
.contact-lead a { color: #a84300; text-decoration-color: var(--orange-2); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.contact-lead a:hover { color: var(--ink); }
.contact-cards { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: var(--space-4); max-width: 44rem; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
.contact-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.1rem 1rem; text-decoration: none; color: var(--ink);
  background: #fff; border: var(--outline); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
.contact-card { cursor: pointer; }
.contact-card:not([href]) .contact-value { font-size: 1rem; font-weight: 600; opacity: .8; } /* bez JS: jen poznámka */
.contact-card.is-ready .contact-value { font-size: var(--step-1); font-weight: 700; opacity: 1; }
.contact-card:focus-visible { outline: 3px solid var(--orange-2); outline-offset: 3px; }
.contact-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--orange-2); }
.contact-label { font-family: "Graduate", "Rockwell", serif; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--orange-2);
  -webkit-text-stroke: .03em currentColor; }
.contact-value { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); overflow-wrap: anywhere; }
.contact-cta { margin: 0 0 var(--space-6); }
/* Větší tlačítko v kontaktní sekci (~21 % oproti hero tlačítku na tabletu/desktopu, ~12 % na mobilu) */
.contact-cta .btn-lg { font-size: calc(var(--step-1) * 1.21); min-height: 63px; }
@media (max-width: 599px) { .contact-cta .btn-lg { font-size: calc(1.05rem * 1.12); min-height: 58px; } }
.contact :focus-visible { outline-color: var(--ink); }

/* Proužek pod hero: oranžová / černá / světlá */
.stripe { height: 18px; border-block: var(--outline);
  background: linear-gradient(90deg, var(--orange-1), var(--orange-2)) top / 100% 6px no-repeat,
              linear-gradient(var(--ink), var(--ink)) center / 100% 6px no-repeat, var(--paper); }

/* ---------- Logo (text, font Graduate) ---------- */
.logo { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle;
  font-family: "Graduate", "Rockwell", "Courier New", serif; font-weight: 400; line-height: .95;
  text-transform: uppercase; text-align: center; letter-spacing: .1em; isolation: isolate; }
.logo__top, .logo__bottom { position: relative; display: block; margin-right: -.1em;
  -webkit-text-stroke: .045em currentColor; paint-order: stroke fill; }
.logo__top { color: var(--orange-1); }
.logo__bottom { color: var(--orange-2); }
.logo__bar { display: block; height: .17em; margin: .16em 0 .15em; border-radius: .03em;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); }
/* Hero logo: bílé písmo + tmavé a oranžové vytažení (varianta B, .hero--logo-outline) */
.logo--hero { font-size: clamp(2.6rem, 11vw, 4.6rem); margin: 0 auto var(--space-5); }
.logo--hero .logo__top, .logo--hero .logo__bottom { color: #fff; text-shadow: .045em .05em 0 var(--ink), 0 .06em .35em rgba(0,0,0,.65); }
.hero--logo-outline .logo--hero .logo__top, .hero--logo-outline .logo--hero .logo__bottom { text-shadow: none; }
.hero--logo-outline .logo--hero .logo__top::before, .hero--logo-outline .logo--hero .logo__bottom::before,
.hero--logo-outline .logo--hero .logo__top::after, .hero--logo-outline .logo--hero .logo__bottom::after { content: attr(data-t); position: absolute; inset: 0; paint-order: stroke fill; }
.hero--logo-outline .logo--hero .logo__top::before, .hero--logo-outline .logo--hero .logo__bottom::before { z-index: -2; color: var(--orange-2); -webkit-text-stroke: .17em var(--orange-2); }
.hero--logo-outline .logo--hero .logo__top::after, .hero--logo-outline .logo--hero .logo__bottom::after { z-index: -1; color: var(--ink); -webkit-text-stroke: .115em var(--ink); }
.hero--logo-outline .logo--hero .logo__bar { box-shadow: 0 0 0 .03em var(--ink), 0 0 0 .055em var(--orange-2); }

/* ---------- Hodiny v hero: „22:54 · 23. 10. 2026 · ☾“ (season-daynight.js, místní čas návštěvníka) ---------- */
.hero-clock { position: absolute; right: .9rem; bottom: .9rem; margin: 0; z-index: 1; display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem; line-height: 1; color: #fff;
  background: rgba(18,17,16,.78); border: 2px solid rgba(255,255,255,.9); border-radius: 999px; padding: .35rem .75rem;
  box-shadow: 3px 3px 0 var(--orange-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-clock .sdn-icon { display: inline-flex; color: var(--orange-1); font-size: 1.05em; vertical-align: -.12em; }
.hero-clock svg { display: block; }
@media (max-width: 599px) { .hero-clock { right: 50%; transform: translateX(50%); bottom: .7rem; font-size: .8rem; } .hero-actions { margin-bottom: .95rem; } }


/* ---------- Odznak kapacity (stejný tvar jako .hero-clock) ---------- */
.hero-capacity, .hero-clock { width: 13.5rem; min-width: 13.5rem; justify-content: center; box-sizing: border-box; }
.hero-capacity { position: absolute; left: .9rem; top: auto; bottom: .9rem; transform: none; margin: 0; z-index: 1; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem; line-height: 1; color: #fff;
  background: rgba(18,17,16,.78); border: 2px solid rgba(255,255,255,.9); border-radius: 999px; padding: .35rem .75rem;
  box-shadow: 3px 3px 0 var(--orange-2); white-space: nowrap; }
.hero-capacity__dot { width: .55rem; height: .55rem; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 .35rem #ff3b3b; flex: 0 0 auto; }
@media (max-width: 599px) { .hero-capacity { left: 50%; right: auto; transform: translateX(-50%); bottom: 3.5rem; font-size: .8rem; max-width: calc(100% - 1.4rem); } }

/* ---------- Patička ---------- */
.site-footer { background: var(--ink); color: var(--muted-dark); padding: var(--space-5) 0; font-size: var(--step--1); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.footer-row p { margin: 0; }
.footer-copy { max-width: 56rem; font-family: var(--font-body); font-size: 1rem; }
.site-footer .logo { font-size: 22px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } .btn:hover { transform: none; } }

/* ---------- Sezónní barevná témata (ODLOŽENO – připravený háček) ----------
   season-daynight.js nastavuje na <html> i <body>: data-season="spring|summer|autumn|winter",
   data-daytime="day|night" a data-theme="winter-night" apod. Téma = přepsat proměnné, např.:
   [data-season="winter"] { --accent: #9fd3ff; }
   [data-season="spring"][data-daytime="day"] { --accent: #b6e36a; }
*/