/* Piper Records — jeden stylopis pro celý web.
   Bílá plocha, obálky nesou stránku, typografie drží rytmus.
   Žádný JavaScript, takže ani žádné stavy, které by ho potřebovaly. */

:root {
  --plocha: #ffffff;
  /* Podklady pod obrazky: misto, kde obalka nebo portret chybi, se musi od bile
     plochy odlisit, jinak vypada jako dira v rade. Proto zustavaji sede. */
  --plocha-2: #eceae5;
  --plocha-3: #e2dfd9;
  --inkoust: #17191a;
  --tlumene: #63665f;
  --linka: #b8b4ac;
  --akcent: #1d5c63;
  --akcent-tmavy: #14454a;

  /* Archivo nese cely web — nadpisy i bezny text. Pisma jsou stazena lokalne
     do assets/fonts/ (tools/stahnout_fonty.py), web nesaha na cizi CDN. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Web je zamerne jen svetly. Bez teto deklarace ho Chrome na Androidu muze
     automaticky invertovat (Auto Dark Theme) — na webu, kde nesou stranku
     barevne obalky, je to nechtene. */
  color-scheme: light;

  --logo-vyska: 48px;
  --sirka: 1240px;
  --mezera: 22px;
}

* { box-sizing: border-box; }

/* scrollbar-gutter drzi centrovany layout na miste i pri prechodu mezi
   kratkou a dlouhou strankou (Windows/Linux, kde scrollbar zabira misto). */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--plocha);
  color: var(--inkoust);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--akcent); }
a:hover { color: var(--akcent-tmavy); }

:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }

/* <main> ma tabindex="-1" kvuli skip-linku (ve WebKitu jinak focus nepreskoci).
   Ramecek kolem cele stranky pri tom ale nechceme. */
#main:focus { outline: none; }

.preskocit {
  position: absolute;
  left: -9999px;
  background: var(--inkoust);
  color: var(--plocha);
  padding: 10px 16px;
  z-index: 100;
}
.preskocit:focus { left: 12px; top: 12px; }

/* ---------- hlavička ---------- */

.hlava {
  max-width: var(--sirka);
  margin: 0 auto;
  padding: 14px max(var(--mezera), env(safe-area-inset-right))
           12px max(var(--mezera), env(safe-area-inset-left));
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--inkoust);
}

.znacka {
  display: block;
  line-height: 0;
  text-decoration: none;
  color: var(--inkoust);
}
/* Logotyp je 981x216 (~4,5:1). Vyska rozhoduje, sirka se dopocita — pri zmene
   loga za jiny pomer stran staci prepsat --logo-vyska. */
.znacka img {
  height: var(--logo-vyska, 48px);
  width: auto;
}

/* ---------- hamburger (jen mobil, bez JavaScriptu) ---------- */

/* Nad 780 px hamburger neexistuje — menu je videt porad. Checkbox proto musi
   byt display:none, jinak zustane v poradi pro klavesnici jako neviditelny
   prvek bez funkce a bez viditelneho fokusu (clip orizne i outline).
   Pod 780 px se zapina zpatky, tam display:none nesmi byt — viz media query. */
.menu-prepinac { display: none; }

.jen-pro-ctecky,
.menu-prepinac {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.menu-tlacitko { display: none; }

/* Tri linky kreslene CSS — znak ☰ by v Archivu chybel a spadl na nahradni font. */
.menu-carky,
.menu-carky::before,
.menu-carky::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--inkoust);
  transition: transform .15s ease, opacity .15s ease;
}
.menu-carky::before,
.menu-carky::after {
  content: "";
  position: absolute;
}
.menu-carky::before { transform: translateY(-7px); }
.menu-carky::after { transform: translateY(7px); }

/* Ve forced-colors (Windows High Contrast) se background vynuti na Canvas —
   carky hamburgeru by byly bila na bile a pod 780 px je to jediny pristup
   k navigaci. CanvasText je systemova barva textu, ta se zachova.
   Totez plati pro aktivni polozku menu: box-shadow se v HCM nevykresluje,
   podtrzeni ano. */
@media (forced-colors: active) {
  .menu-carky,
  .menu-carky::before,
  .menu-carky::after {
    background: CanvasText;
    forced-color-adjust: none;
  }

  .menu a[aria-current="page"] {
    text-decoration: underline 2px;
    text-underline-offset: 5px;
  }
}

.menu { display: flex; gap: 26px; }

.menu a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tlumene);
  padding-bottom: 2px;
}
.menu a:hover { color: var(--inkoust); }
.menu a[aria-current="page"] {
  color: var(--inkoust);
  box-shadow: inset 0 -2px 0 var(--akcent);
}

/* ---------- o labelu ---------- */

/* Jeden sloupec pres celou sirku kontejneru — stejne jako zbytek textu na webu. */
.o-labelu-text p { margin: 0 0 16px; }

.archiv-datum {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--inkoust);
}

/* ---------- bloky ---------- */

main {
  max-width: var(--sirka);
  margin: 0 auto;
  /* env() drzi obsah mimo vyrez na telefonech v landscape. */
  padding-inline: max(var(--mezera), env(safe-area-inset-left));
}

.blok { padding: 46px 0 0; }
.blok-hlava {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--linka);
  padding-bottom: 10px;
  margin-bottom: 26px;
}

.nadpis-velky {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.nadpis-sekce {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
}

.odkaz-vice,
.odkaz-zpet {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.uvod { font-size: 21px; line-height: 1.5; }


.text-blok p { margin: 0 0 14px; }
/* Dlouhy retezec bez mezer (e-mail, URL) musi jit zalomit vsude, ne jen
   v textovem bloku — na 320 px jinak info@piperrecords.cz pretekl viewport
   a cela stranka scrollovala vodorovne (WCAG 1.4.10 Reflow). */
a { overflow-wrap: anywhere; }
.text-drobny { font-size: 16px; color: var(--tlumene); line-height: 1.75; }
.text-drobny strong { color: var(--inkoust); font-weight: 400; }

.prazdno { color: var(--tlumene); font-style: italic; }

.drobecky {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.drobecky a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* Drobecky jsou <ol> (kvuli semantice a strukturovanym datum), ale sazi se
   do radky s oddelovacem, ne jako cislovany seznam. */
.drobecky ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 0;
  padding: 0;
}
.drobecky li + li::before { content: "/"; margin-right: 8px; color: var(--linka); }

/* h1 na detailu desky nese interpreta i nazev desky (samotne "s/t" nebo symbol
   by nerekly nic). Interpret se sazi mensim groteskem nad nazvem, aby zustala
   puvodni hierarchie — je to jeden nadpis, ne dva. */
.nadpis-interpret {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tlumene);
  margin-bottom: 6px;
}
.nadpis-deska { display: block; }

/* Stranka kapely: fotka v jednom sloupci, bio ve druhem. Kdyz jedno z toho
   chybi, sablona tridu -dvojice nepridá a zbyly prvek zabere celou sirku. */
.kapela-hlava-dvojice {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 30px 46px;
  align-items: start;
}

.kapela-foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--plocha-3);
}

.kapela-hlava:not(.kapela-hlava-dvojice) .kapela-foto {
  max-width: 520px;
  margin-bottom: 20px;
}

/* ---------- mřížka desek ---------- */

.mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 40px 26px;
}

.dlazdice-odkaz {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.obal {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--plocha-3);
}

.dlazdice-odkaz:hover .obal { outline: 2px solid var(--inkoust); outline-offset: 3px; }

.obal-prazdny { display: block; }

.dlazdice-text { display: flex; flex-direction: column; gap: 1px; }

.cislo {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--akcent);
  font-variant-numeric: tabular-nums;
}

.interpret {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-top: 3px;
}

.deska { font-size: 19px; line-height: 1.25; }

.dlazdice-odkaz:hover .deska { text-decoration: underline; text-underline-offset: 3px; }

.udaje {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tlumene);
  margin-top: 3px;
}

/* ---------- detail desky ---------- */

.deska-detail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 46px;
  padding: 40px 0 6px;
  align-items: start;
}

.obal-velky { aspect-ratio: 1; }

.cislo-velke { font-size: 13px; margin: 0 0 10px; }

.deska-text .nadpis-velky { margin-bottom: 6px; }

.interpret-velky {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0 0 26px;
  color: var(--tlumene);
}
.interpret-velky a { color: var(--inkoust); text-decoration: none; border-bottom: 2px solid var(--akcent); }

.udaje-desky,
.udaje-kontakt-obal { font-style: normal; }

.udaje-kontakt {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 26px;
  margin: 0 0 26px;
  padding: 18px 0;
  border-top: 1px solid var(--linka);
  border-bottom: 1px solid var(--linka);
}

.udaje-desky dt,
.udaje-kontakt dt {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tlumene);
  padding-top: 5px;
}

.udaje-desky dd,
.udaje-kontakt dd { margin: 0; }

.udaje-kontakt-obal { font-style: normal; }

.udaje-kontakt { grid-template-columns: 120px minmax(0, 1fr); }

.odkazy-ven { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }

.odkaz-ven {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--akcent);
  color: var(--akcent);
  padding: 9px 16px;
}
.odkaz-ven:hover { background: var(--akcent); color: var(--plocha); }

.poznamka { font-size: 16px; color: var(--tlumene); margin: 0; }

.sloupce-dva {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px 46px;
}
.sloupce-dva .nadpis-sekce {
  border-bottom: 1px solid var(--linka);
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.tracklist { counter-reset: stopa; list-style: none; margin: 0; padding: 0; }

.tracklist li {
  counter-increment: stopa;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--inkoust) 8%, transparent);
}

.tracklist li::before {
  content: counter(stopa, decimal-leading-zero);
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--tlumene);
  padding-top: 5px;
}

/* ---------- seznam kapel ---------- */

.seznam-kapel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 34px 26px;
}

/* Karta kapely: portret, jmeno, pocet desek. Jmeno se u dlouhych nazvu zalomi
   na dva radky (DARRREN EVE & NIKOS MISTAKIDIS) — proto grid s 1fr uprostred,
   aby pocet desek zustal na stejne lince u vsech karet v rade. */
.seznam-kapel li { display: grid; }

.seznam-kapel a {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.portret {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--plocha-3);
}

.seznam-kapel a:hover .portret { outline: 2px solid var(--inkoust); outline-offset: 3px; }

/* Kapely bez fotky (nebyly na starém webu) mají místo portrétu obal desky.
   Obal je čtvercový, tak ho necháme dýchat místo agresivního ořezu na 4:3. */
.portret-obal { object-fit: contain; background: var(--plocha-2); }

.kapela-jmeno {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.25;
}

.kapela-pocet {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tlumene);
}

/* Posledni vydani na home drzi jednu radu peti desek. Hranice je 1180 px:
   pod ni by pet sloupcu bylo uzsich nez 215 px, coz je minimum, se kterym
   pracuje mrizka jinde na webu (na 900 px vychazely 150 px, tedy stejne jako
   na mobilu). Pod hranici se vraci k auto-fill. */
@media (min-width: 1180px) {
  .posledni .mrizka { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- recenze ---------- */

.recenze-uvod { color: var(--tlumene); margin-bottom: 30px; }

.seznam-recenzi {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linka);
}

.seznam-recenzi a {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 8px 20px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--linka);
  text-decoration: none;
  color: inherit;
}

.seznam-recenzi a:hover .recenze-titulek { color: var(--akcent); }

.recenze-datum {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--tlumene);
}

.recenze-titulek { font-size: 19px; }

.recenze-autor {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tlumene);
}

.recenze-hlavicka {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin: 0 0 26px;
}

/* Prvni radek puvodniho textu — casto nese vydavatele a rok /Dayafter 2006/.
   Sazi se jako mezititulek, aby bylo poznat, ze patri k textu, ne k nasi hlavicce. */
.recenze-uvodni-radek {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .03em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linka);
  margin: 0 0 20px;
}

.recenze-text p { margin: 0 0 18px; }

@media (max-width: 640px) {
  .seznam-recenzi a { grid-template-columns: 1fr auto; }
  .recenze-datum { grid-column: 1 / -1; }
}

/* ---------- patička ---------- */

.pata {
  max-width: var(--sirka);
  margin: 70px auto 0;
  padding: 22px var(--mezera) 46px;
  border-top: 2px solid var(--inkoust);
}

.pata-radek {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tlumene);
}

.pata-znacka { color: var(--inkoust); font-weight: 500; }

/* Podpis autora webu — uplne dole, nejdrobnejsim pismem na strance, aby stal
   stranou obsahu labelu. */
.pata-autor {
  margin: 26px 0 0;
  text-align: center;
  padding-top: 14px;
  border-top: 1px solid var(--linka);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--tlumene);
}
.pata-autor a { color: var(--tlumene); }
.pata-autor a:hover { color: var(--inkoust); }

/* ---------- menší obrazovky ---------- */

@media (max-width: 780px) {
  :root { --logo-vyska: 34px; }

  /* Pevnych 120 px na popisek zabralo na 320 px 43 % sirky — pod sebe. */
  .udaje-kontakt-obal { font-style: normal; }

.udaje-kontakt { grid-template-columns: 1fr; gap: 2px 0; }
  .udaje-kontakt dt { margin-top: 12px; }

  /* Hamburger: tlacitko vedle loga, menu pod nim pres celou sirku hlavicky. */
  .menu-tlacitko {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    cursor: pointer;
    color: var(--inkoust);
  }

  .menu { display: none; }

  .menu-prepinac:checked ~ .menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    order: 3;
    margin-top: 6px;
    border-top: 1px solid var(--linka);
  }

  .menu-prepinac:checked ~ .menu a {
    padding: 13px 0;
    border-bottom: 1px solid var(--linka);
    font-size: 15px;
  }

  /* Otevrene menu: z hamburgeru se stane kriz. */
  .menu-prepinac:checked ~ .menu-tlacitko .menu-carky { background: transparent; }
  .menu-prepinac:checked ~ .menu-tlacitko .menu-carky::before { transform: rotate(45deg); }
  .menu-prepinac:checked ~ .menu-tlacitko .menu-carky::after { transform: rotate(-45deg); }

  /* Klavesnice: fokus na skrytem checkboxu musi byt videt na tlacitku. */
  .menu-prepinac:focus-visible ~ .menu-tlacitko {
    outline: 2px solid var(--akcent);
    outline-offset: 2px;
  }
  .deska-detail { grid-template-columns: 1fr; gap: 26px; }
  .kapela-hlava-dvojice { grid-template-columns: 1fr; gap: 22px; }
  .mrizka { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 18px; }
  .seznam-kapel { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .hlava { padding: 10px var(--mezera) 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}