/* Mohelnice – Příběh archeologického naleziště
   Mobilní průvodce k QR zastavením výstavy VMO.
   Layout: hnědá hlavička s vrstevnicemi (obálka letáku) → tyrkysový pruh s úvodem (vnitřní strana letáku)
   → bílý list s obrazovými kartami → hnědá patička. Jeden sloupec, max. 40rem. */

@font-face { font-family: "Gloock"; src: url("fonts/gloock-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Gloock"; src: url("fonts/gloock-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Barvy převzaté z letáku výstavy */
  --hneda: #371513;        /* obálka */
  --hneda-2: #4b201b;
  --tyrkys: #74d1d7;       /* vnitřní panel letáku */
  --tyrkys-svetla: #dff3f4;/* kruhy za předměty */
  --oranz: #f25826;        /* čísla kapitol */
  --oranz-text: #c8401a;   /* oranžová pro drobný text na bílé (kontrast) */
  --cerna: #231f20;        /* nadpisy */
  --text: #3b3331;
  --text-2: #6f6563;       /* šedý text odstavců */
  --list: #ffffff;
  --list-2: #f6f3f1;
  --linka: #e6dedb;

  --f-display: "Gloock", "Georgia", "Times New Roman", serif;
  --f-text: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;

  --sirka: 40rem;
  --okraj: 1.25rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--list);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--oranz); outline-offset: 3px; border-radius: 2px; }

.obal { max-width: var(--sirka); margin-inline: auto; padding-inline: var(--okraj); }

/* ---------- Hlavička ---------- */
.hlavicka {
  position: relative;
  background: var(--hneda) url("vrstevnice.svg") center / cover no-repeat;
  color: #fff;
  padding-block: calc(env(safe-area-inset-top, 0px) + 1.1rem) 2.2rem;
  overflow: hidden;
}
.lista { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lista a { display: block; text-decoration: none; }
.wordmark {
  display: block; width: 8.5rem; aspect-ratio: 900 / 105; max-width: 100%;
  background: #fff;
  -webkit-mask: url("img/wordmark.png") center / contain no-repeat; mask: url("img/wordmark.png") center / contain no-repeat;
}
.wordmark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pocitadlo { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tyrkys); font-variant-numeric: tabular-nums; white-space: nowrap; }
.podtitul-vystavy { margin: .35rem 0 0; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tyrkys); }

.kapitola { display: flex; align-items: baseline; gap: .6rem; margin-top: 2.4rem; }
.kapitola .cislo { font-weight: 600; color: var(--oranz); font-size: .95rem; font-variant-numeric: tabular-nums; }
.kapitola .nazev { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: .85; }

h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1.02; letter-spacing: -.01em;
  margin: .5rem 0 0; text-wrap: balance;
}
.tema { margin: .9rem 0 0; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tyrkys); }

/* ---------- Tyrkysový úvod ---------- */
.uvod { background: var(--tyrkys); color: var(--hneda); padding-block: 1.5rem 1.6rem; }
.uvod p { margin: 0; font-size: 1.0625rem; line-height: 1.55; max-width: 34rem; }
.uvod .zdroj { margin-top: .7rem; font-size: .8125rem; opacity: .8; }

/* ---------- Obsah ---------- */
main { padding-block: 2rem 1rem; }
.sekce-nadpis { font-family: var(--f-display); font-weight: 400; color: var(--cerna); font-size: 1.55rem; line-height: 1.15; margin: 0 0 .4rem; text-wrap: balance; }
.sekce-pozn { margin: 0 0 1.6rem; color: var(--text-2); font-size: .9375rem; }

.obrazy { display: grid; gap: 2.4rem; }
.karta { margin: 0; display: grid; gap: .8rem; min-width: 0; }
.karta-hlavicka { display: flex; align-items: baseline; gap: .6rem; }
.karta-hlavicka .cislo { font-size: .75rem; font-weight: 600; color: var(--oranz-text); font-variant-numeric: tabular-nums; letter-spacing: .06em; flex: none; }
.karta-hlavicka h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--cerna); text-wrap: balance; }
.karta p { margin: 0; color: var(--text-2); }
.karta p + p { margin-top: .7rem; }
.karta .latinsky { font-style: italic; color: var(--text-2); font-size: .9375rem; }

.foto {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--list-2); border-radius: 4px; overflow: hidden;
}
.foto img { width: 100%; }
.foto.kresba { background: #fff; border: 1px solid var(--linka); }
.foto.kresba img { padding: .5rem; }
.foto .lupa {
  position: absolute; right: .55rem; bottom: .55rem; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center; background: rgba(55, 21, 19, .82); color: #fff; pointer-events: none;
}
.foto .lupa svg { width: 1.1rem; height: 1.1rem; }
.foto-par { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.foto-par.ctyri { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Mřížka vzorků (suroviny) */
.vzorky { display: grid; gap: 1.6rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vzorky .karta { gap: .5rem; }
.vzorky .karta-hlavicka h2 { font-family: var(--f-text); font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.vzorky .foto img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 34rem) { .vzorky { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Kroj (Muž / Žena) */
.osoby { display: grid; gap: 1.8rem; margin-top: 2rem; }
.osoba h2 { margin: 0 0 .4rem; font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; color: var(--cerna); }
.osoba p { margin: 0; color: var(--text-2); }

.citace { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linka); font-size: .8125rem; color: var(--text-2); }
.upozorneni { margin: 0 0 1.6rem; padding: .8rem 1rem; background: var(--tyrkys-svetla); color: var(--hneda); border-radius: 4px; font-size: .875rem; }

/* ---------- Navigace mezi zastaveními ---------- */
.dalsi { margin-top: 2.6rem; display: grid; gap: .8rem; }
.dalsi-odkaz {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: 1.1rem 1.2rem; background: var(--hneda) url("vrstevnice.svg") center / cover; color: #fff; text-decoration: none; border-radius: 4px;
}
.dalsi-odkaz small { display: block; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tyrkys); }
.dalsi-odkaz strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; line-height: 1.15; margin-top: .2rem; }
.dalsi-odkaz .sipka { color: var(--oranz); font-size: 1.6rem; line-height: 1; }
.vsechna { display: block; text-align: center; padding: .9rem; color: var(--hneda); font-weight: 600; font-size: .9375rem; text-decoration: none; border: 1px solid var(--linka); border-radius: 4px; }

/* ---------- Rozcestník ---------- */
.titulka { background: var(--hneda) url("vrstevnice.svg") center / cover no-repeat; color: #fff; overflow: hidden; padding-block: calc(env(safe-area-inset-top, 0px) + 1.2rem) 0; }
.vmo-logo { width: 8.5rem; }
.titulka .wordmark { width: min(100%, 22rem); margin-top: 2.2rem; }
.titulka .podtitul-vystavy { font-size: .8125rem; margin-top: .7rem; }
.sloup { margin: 1rem auto 0; width: min(100%, 26rem); }
.claim { display: inline; background: var(--tyrkys); color: var(--hneda); font-weight: 600; line-height: 1.75; padding: .15rem .4rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.claim-obal { margin: -3.4rem 0 0; position: relative; padding-bottom: 2rem; font-size: 1rem; max-width: 22rem; }

.seznam { list-style: none; margin: 0; padding: 0; display: grid; }
.seznam li { border-bottom: 1px solid var(--linka); }
.seznam a { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: baseline; gap: .2rem .6rem; padding-block: 1.1rem; text-decoration: none; }
.seznam .cislo { grid-column: 1; grid-row: 1; color: var(--oranz-text); font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.seznam strong { grid-column: 2; grid-row: 1; font-family: var(--f-display); font-weight: 400; font-size: 1.4rem; line-height: 1.15; color: var(--cerna); }
.seznam small { grid-column: 2; grid-row: 2; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.seznam .sipka { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--oranz); font-size: 1.3rem; }

/* ---------- Patička ---------- */
.paticka { margin-top: 3rem; background: var(--hneda); color: #fff; padding-block: 2rem calc(env(safe-area-inset-bottom, 0px) + 2rem); font-size: .875rem; }
.paticka .obal { display: grid; gap: 1.2rem; }
.paticka p { margin: 0; color: rgba(255,255,255,.78); }
.paticka a { color: var(--tyrkys); text-decoration: none; font-weight: 600; }
.paticka .vmo-logo { width: 9rem; }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 50; background: #1c0a09; display: grid; grid-template-rows: auto 1fr auto; touch-action: none; }
.lb[hidden] { display: none; }
.lb-lista { display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + .6rem) 1rem .6rem; color: rgba(255,255,255,.75); font-size: .8125rem; }
.lb-zavrit { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lb-plocha { position: relative; overflow: hidden; display: grid; place-items: center; }
.lb-plocha img { max-width: 100%; max-height: 100%; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; will-change: transform; }
.lb-popis { padding: .6rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem); color: #fff; font-size: .875rem; line-height: 1.4; max-height: 30vh; overflow: auto; }
.lb-popis span { display: block; color: var(--tyrkys); font-size: .75rem; margin-top: .25rem; }
.vzorky .karta-hlavicka { min-height: 3.9em; align-items: flex-end; }