/* Pekárna Letňanská Terasa — v5: bloky a paleta z konceptu A, komponenty z konceptu B.
   Podklad Mouka, plochy Střída, tmavé bloky v nejtmavší rudé; rudá je konverzní barva
   (tlačítka, odkazy), razítko loga a smaltová cedule; zlatá jako plocha (dnešek) a text na tmavém.
   Bez eyebrow, dvoubarevných nadpisů, pilulek, šipek a fade-upu. Tlačítka 6 px, plochy 8 px.
   Barvy jen přes tokens.css (Mapped, výjimečně Alias). Mobile-first, 12 sloupců od 56rem. */

@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --okraj: 1rem;
  --mezera: 1rem;            /* gutter 12sloupcové mřížky */
  --sirka: 76rem;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
}
@media (min-width: 40rem) { :root { --okraj: 2.5rem; --mezera: 2rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--mapped-background-page); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--mapped-background-page); color: var(--mapped-text-default); font: 400 1.0625rem/1.6 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--mapped-text-link); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--mapped-text-link-hover); text-decoration-thickness: 2px; }
p, h1, h2, ul, dl, dd, address, table { margin: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--mapped-focus); outline-offset: 3px; }
.o-nas :focus-visible, .pata :focus-visible { outline-color: var(--mapped-focus-on-dark); }
section[id] { scroll-margin-top: 1rem; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.overit { color: var(--mapped-text-link); font: 400 .8125rem/1.4 var(--sans); }

.skip {
  position: absolute; z-index: 10; left: var(--okraj); top: .5rem;
  padding: .75rem 1rem; border-radius: 6px;
  background: var(--mapped-background-section-dark); color: var(--mapped-text-reversed); font-weight: 500;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* horní lišty s křížkem (pruh mimořádné doby, pracovní verze) */
.upozorneni { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; padding: .25rem var(--okraj); }
.upozorneni p { grid-column: 2; text-align: center; text-wrap: balance; }
.upozorneni__zavrit {
  grid-column: 3; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: inherit; font: 400 1.5rem/1 var(--sans); cursor: pointer;
}
.upozorneni__zavrit:hover { background: var(--mapped-background-page); }
.pruh { background: var(--mapped-background-section-accent); color: var(--mapped-text-default); font-weight: 500; }
.pracovni { background: var(--mapped-background-subtle); color: var(--mapped-text-muted); font-size: .8125rem; line-height: 1.4; }
main:focus { outline: none; }

/* ── 12sloupcová mřížka ─────────────────────────────── */

.obal { padding-inline: max(var(--okraj), calc((100% - var(--sirka)) / 2)); }
.mrizka { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera); }
.mrizka > * { grid-column: 1 / -1; }   /* mobil: všechno přes celou šířku */

/* nadpisy: jedna barva, Cormorant, stupnice H1 96 / H2 64 */
h1, h2 { color: var(--mapped-text-headline); font-family: var(--serif); font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 1.6rem + 5vw, 6rem); line-height: .98; letter-spacing: -.015em; }
h2 { margin-bottom: 1.5rem; font-size: clamp(2.25rem, 1.5rem + 2.9vw, 4rem); line-height: 1.02; letter-spacing: -.005em; }

/* ── Komponenty (B) ─────────────────────────────────── */

/* tlačítko: plná zlatá plocha, zaoblení 6 px, bez šipky */
.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.5rem;
  border-radius: 6px; background: var(--mapped-button-default); color: var(--mapped-button-text);
  font-weight: 500; text-decoration: none;
}
.tlacitko:hover { background: var(--mapped-button-hover); color: var(--mapped-button-text); }
.tlacitko:active { background: var(--mapped-button-active); }

/* textový odkaz: druhá cesta vedle tlačítka */
.odkaz { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; }

/* razítko: rudý obdélník s logem v negativu */
.razitko { display: block; flex: none; background: var(--mapped-background-section-brand); border-radius: 4px; }

/* místo pro fotku: přiznaná plocha s popiskem */
.foto {
  display: flex; align-items: end; padding: 1rem;
  border-radius: 8px; background: var(--mapped-background-subtle); color: var(--mapped-text-link);
  font-size: .875rem; font-weight: 500;
}

/* ── Lišta s razítkem visícím od horní hrany ────────── */

.lista__obal { align-items: center; row-gap: .25rem; padding-bottom: .75rem; }
/* wide logo na rudé kartičce, visí od horní hrany */
.lista__razitko { grid-column: 1 / -1; justify-self: start; width: 11.5rem; padding: .75rem .875rem .875rem; border-radius: 0 0 4px 4px; }
.lista__nav { grid-column: 1 / -1; }
.lista__nav ul { list-style: none; padding: 0; display: flex; justify-content: space-between; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.lista__nav a { display: flex; align-items: center; min-height: 2.75rem; color: var(--mapped-text-default); font-size: .8125rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.lista__nav a:hover { text-decoration: underline; }
.lista__objednat { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 22.49rem) { .lista__nav ul { flex-wrap: wrap; justify-content: flex-start; column-gap: 1.25rem; } }

@media (min-width: 56rem) {
  .lista__obal { padding-bottom: 1rem; }
  .lista__razitko { grid-column: 1 / span 4; width: 15rem; padding: 1rem 1.125rem 1.125rem; }
  .lista__nav { grid-column: 5 / -1; justify-self: end; }
  .lista__nav ul { display: flex; gap: 2.5rem; }
  .lista__nav a { font-size: .9375rem; }
  .lista__obal:has(.lista__objednat:not([hidden])) .lista__nav { grid-column: 5 / span 5; }
  .lista__objednat { grid-column: 10 / -1; justify-self: end; margin-top: 1rem; }
}

/* ── Úvod: text (1–7), místo pro fotku (8–12) ───────── */

.uvod { row-gap: 2rem; padding-top: 2.5rem; padding-bottom: 4rem; }
.uvod__text { display: grid; gap: 1.25rem; align-content: center; justify-items: start; }
.uvod__naproti { color: var(--mapped-text-muted); }
.uvod__akce { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: .5rem; }
.uvod__foto { aspect-ratio: 4 / 3; }

/* živý stav: tečka + text (rudá = otevřeno, obrys = zavřeno) */

@media (min-width: 56rem) {
  .uvod { padding-top: 3.5rem; padding-bottom: 6rem; }
  .uvod__text { grid-column: 1 / span 7; gap: 1.5rem; }
  .uvod__foto { grid-column: 8 / -1; aspect-ratio: 4 / 5; }
}

/* ── Otevírací doba (1–5) + karta Kde nás najdete (7–12) ── */

.prakticke { row-gap: 3rem; padding-bottom: 4.5rem; }

/* tabule: dny v Cormorantu, dnešek celý na zlaté ploše, pod ním živý stav */
.tabule { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.tabule th, .tabule td { padding: .75rem .875rem; border-bottom: 1px solid var(--mapped-border); vertical-align: baseline; }
.tabule tr:last-child > * { border-bottom: 0; }
.tabule th { text-align: left; font: 600 1.375rem/1.2 var(--serif); }
.tabule th::first-letter { text-transform: uppercase; }
.tabule td { text-align: right; white-space: nowrap; font-size: 1rem; }
.tabule .dnes > *, .stav-radek td { background: var(--mapped-background-section-accent); color: var(--mapped-text-default); border-bottom-color: transparent; }
.tabule .dnes th { border-radius: 6px 0 0 6px; }
.tabule .dnes td { border-radius: 0 6px 6px 0; font-weight: 500; }
.tabule .dnes:has(+ .stav-radek:not([hidden])) th { border-bottom-left-radius: 0; }
.tabule .dnes:has(+ .stav-radek:not([hidden])) td { border-bottom-right-radius: 0; }
.stav-radek td { padding-top: 0; border-radius: 0 0 6px 6px; text-align: left; white-space: normal; text-wrap: pretty; font-weight: 500; }
.stitek { margin-left: .625rem; font: 500 .8125rem/1 var(--sans); }
.poznamka { margin-top: .75rem; }

.kde { padding: 2rem 1.25rem 2.25rem; border-radius: 8px; background: var(--mapped-background-subtle); }
.kde h2 { margin-bottom: 1.25rem; }
.kde address { font-size: 1.25rem; font-weight: 500; line-height: 1.45; }
.kde address .overit { display: block; margin-top: .25rem; }
.naproti { margin-top: 1rem; max-width: 32rem; }
.cesta { display: grid; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--mapped-border); }
.cesta dt { font-weight: 500; }
.kde .cedule { margin-top: 2rem; }
.kde__dalsi { margin-top: .75rem; }

/* cedule: rudá smaltová tabule, bílý vnitřní rámeček, rudý okraj kolem; celá je jeden odkaz */
.cedule { display: block; position: relative; width: 100%; max-width: 30rem; margin-inline: auto; padding: 7px; border-radius: 16px; text-decoration: none; container-type: inline-size; }
.cedule__tabule {
  display: block; padding: .625rem 1rem .25rem;
  background: var(--mapped-background-section-brand); color: var(--alias-white);
  border: 3px solid var(--alias-white); border-radius: 9px; box-shadow: 0 0 0 7px var(--mapped-background-section-brand);
  text-align: center; text-transform: uppercase; font-weight: 500;
}
.cedule__ctvrt { display: block; font-size: .875rem; letter-spacing: .16em; }
.cedule__ulice { display: block; margin-top: .375rem; padding-top: .5rem; border-top: 2px solid var(--alias-white); font-size: min(3.25rem, (100cqi - 40px) / 7.9); line-height: 1.05; letter-spacing: .03em; }
.cedule__cislo { display: block; margin-top: .125rem; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem); letter-spacing: .08em; }
.cedule__akce {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem;
  margin-top: .5rem; border-top: 2px solid var(--alias-white);
  text-transform: none; font-size: 1rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
}
.cedule:hover .cedule__akce { text-decoration-thickness: 2px; }
.cedule:focus-visible { outline-offset: 4px; }

@media (min-width: 56rem) {
  .prakticke { padding-bottom: 7rem; }
  .doba { grid-column: 1 / span 5; padding-top: 2.5rem; }
  .kde { grid-column: 7 / -1; padding: 2.5rem 3rem 3rem; }
  .cesta { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .tabule th, .tabule td { padding: 1rem 1.25rem; }
  .tabule th { font-size: 1.75rem; }   /* H3 28 px */
  .tabule td { font-size: 1.125rem; }
  .stav-radek td { padding-top: 0; }
}

/* ── Pás Střídy: nabídka + O nás ─────────────────────── */

.pas { padding-top: 4rem; padding-bottom: 4rem; background: var(--mapped-background-subtle); }

.nabidka__hlava { row-gap: 1rem; margin-bottom: 2rem; }
.nabidka__hlava h2 { margin-bottom: 0; }
.nabidka__hlava p { max-width: 30rem; color: var(--mapped-text-muted); }

/* nabídka jako sazba v seznamu s linkami, ne karty */
.sortiment { list-style: none; padding: 0; }
.sortiment li {
  padding: .625rem 0 .75rem; border-bottom: 1px solid var(--mapped-border);
  color: var(--mapped-text-headline); font: 500 clamp(1.75rem, 1.3rem + 2vw, 2.75rem)/1.1 var(--serif);
}
.sortiment li:first-child { border-top: 1px solid var(--mapped-border); }
.sortiment li::first-letter { text-transform: uppercase; }
.sortiment span { display: block; margin-top: .25rem; color: var(--mapped-text-muted); font: 400 1rem/1.4 var(--sans); }

/* O nás: tmavý dělený blok Kůrky, vlevo místa pro fotky, vpravo text */
.o-nas { display: grid; margin-top: 4rem; overflow: hidden; border-radius: 8px; background: var(--mapped-background-section-dark); color: var(--mapped-text-reversed); }
.o-nas__fotky { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.o-nas__foto { aspect-ratio: 1; border-radius: 0; background: var(--alias-secondary-darker); color: var(--mapped-text-reversed); }
.o-nas__text { padding: 2.5rem 1.25rem 3rem; }
.o-nas h2 { margin-bottom: 1.25rem; color: var(--mapped-text-reversed); }
.o-nas__text p { max-width: 34rem; font-size: 1.125rem; line-height: 1.65; text-wrap: pretty; }

@media (min-width: 56rem) {
  .pas { padding-top: 6rem; padding-bottom: 7.5rem; }
  .nabidka__hlava { align-items: end; margin-bottom: 3rem; }
  .nabidka__hlava h2 { grid-column: 1 / span 7; }
  .nabidka__hlava p { grid-column: 8 / -1; }
  /* dva sloupce na mřížce (1–6, 7–12), řádky sdílené, aby linky lícovaly */
  .sortiment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: var(--mezera); }
  .sortiment li { padding: .875rem 0 1rem; }
  .sortiment li:nth-child(4) { border-top: 1px solid var(--mapped-border); }
  .sortiment span { display: inline; margin-left: .75rem; }

  .o-nas { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera); margin-top: 5.5rem; }
  .o-nas__fotky { grid-column: 1 / span 6; grid-template-columns: 1fr; }
  .o-nas__foto { aspect-ratio: auto; min-height: 15rem; padding: 1.25rem; }
  .o-nas__text { grid-column: 8 / span 4; align-self: center; padding: 4rem 0; }
  .o-nas__text p { font-size: 1.25rem; }
}

/* ── Patička: Kůrka, 3 sloupce po 4 ────────────────── */

.pata { background: var(--mapped-background-section-dark); color: var(--mapped-text-reversed); font-size: .9375rem; }
.pata a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--mapped-text-reversed); }
.pata a:hover { color: var(--mapped-text-on-brand-heading); }
.pata .overit { color: var(--mapped-text-on-brand-heading); }
.pata__obal { row-gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
/* plné logo B (včetně „ve spolupráci Mansson") přímo na rudé patičce, dost velké, aby šlo přečíst;
   záporný okraj vyrovná prázdný okraj v SVG (~5,5 %), aby kresba lícovala se sloupcem textu */
.pata__logo { display: block; width: 11.5rem; margin: 0 0 1.5rem -.625rem; }
.pata__provozovatel { max-width: 24rem; font-size: .8125rem; line-height: 1.55; }
.pata__nadpis { margin-bottom: .75rem; color: var(--mapped-text-on-brand-heading); font-size: 1.75rem; line-height: 1.1; }
.pata address { margin-bottom: .75rem; }
.pata__odkazy { list-style: none; padding: 0; }
.pata__odkazy li { display: flex; flex-wrap: wrap; align-items: center; column-gap: .375rem; min-height: 2.75rem; }

@media (min-width: 56rem) {
  .pata__obal { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .pata__sloupec { grid-column: span 4; }
  .pata__logo { width: 14.5rem; margin-left: -.8125rem; }
}

/* ── Textová stránka (zásady, 404) ──────────────────── */

.text { max-width: 44rem; margin: 0 auto; padding: 2.5rem var(--okraj) 4.5rem; }
.text h1 { margin-bottom: 1.25rem; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); line-height: 1.05; }
.text h2 { margin: 2.25rem 0 .5rem; font-size: 1.75rem; line-height: 1.15; }
.text p, .text ul { margin-bottom: 1rem; }
.stranka-text .pata__obal { padding-top: 1.5rem; padding-bottom: 1.5rem; }