/* ARLing hub: telefón najprv.
 *
 * Načítava sa hneď za paper.css a platí len pre päť stránok, ktoré sú
 * výkladom firmy: arling.sk (sk, en, de), knihy hlavolamov a hry.
 * Paper.css tu nemeníme, lebo ho používa stoosemnásť ďalších stránok.
 *
 * Čo tu je a prečo:
 *   1. hlavička v jednom riadku s tlačidlom Menu, lebo pri 390 bodoch sa
 *      navigácia lámala do troch riadkov a hlavička merala 105 bodov;
 *   2. úvod, ktorý sa zmestí nad ohyb: nadpis najviac tri riadky, jedno
 *      plné tlačidlo a dve vedľajšie vedľa seba, dôkazy ako zoznam;
 *   3. rytmus v násobkoch ôsmich a ceny s tlačidlom pred podrobnosťami.
 */

/* ── 1. Hlavička ─────────────────────────────────────────────────────────
   Tlačidlo Menu je v HTML vždy, na širokej obrazovke ho skryjeme. Navigácia
   sa na telefóne vysunie pod lištu ako panel: je position:absolute, takže
   výška hlavičky sa otvorením nemení a --hlavicka (vzhlad.js) ostáva platná. */
.menu-btn { display:none; }
.bar { position:relative; }

@media (max-width:820px) {
  header .bar { flex-wrap:nowrap; height:56px; row-gap:0; gap:8px; padding:0; }
  .bar .brand { flex:0 1 auto; min-width:0; margin-right:auto; gap:8px; }
  .bar .brand span { display:none; }   /* "Bratislava", "Games": na telefóne kradne riadok */
  .bar .brand b { font-size:17px; }

  /* 44 bodov na výšku aj na šírku je najmenší cieľ dotyku, ktorý si držíme;
     do lišty vysokej 56 bodov sa zmestí so šiestimi bodmi nad a pod. */
  .menu-btn { display:inline-flex; order:2; align-items:center; justify-content:center; gap:8px;
              height:44px; min-height:44px; min-width:44px; padding:0 12px; flex:none;
              border:1px solid var(--line); border-radius:10px; background:var(--card);
              color:var(--ink); font:500 14px/1 var(--ui); cursor:pointer; }
  .menu-btn svg { width:18px; height:12px; flex:none; }
  header .bar .langsel { order:1; margin-left:0; flex:none; }
  /* Paper.css dáva prepínaču jazyka zvislý padding 7 bodov; pri pevnej výške
     by text posunul nadol, preto ho tu vynulujeme a ostane vodorovný. */
  header .bar .langsel > summary { height:44px; min-height:44px; padding:0 12px;
                                   display:inline-flex; align-items:center; }

  header .bar nav { display:none; position:absolute; left:0; right:0; top:56px; z-index:60;
                    order:0; width:auto; margin:0; padding:8px 0 12px; gap:0;
                    flex-direction:column; align-items:stretch; flex-wrap:nowrap;
                    background:var(--paper); border-bottom:1px solid var(--line);
                    box-shadow:0 18px 40px -22px rgba(0,0,0,.9); }
  header .bar[data-menu="otvorene"] nav { display:flex; }
  header .bar nav a { display:block; padding:12px 0; font-size:16px; line-height:1.4;
                      border-top:1px solid var(--line); white-space:nowrap; }
  header .bar nav a:first-child { border-top:0; }
  header .bar nav a::after { display:none; }
}

/* Medzi 821 a 960 bodmi paper.css navigáciu zalomí do druhého riadku, ale
   lišta má pevných 66 bodov, takže riadok visel mimo hlavičky. */
@media (min-width:821px) and (max-width:960px) {
  header .bar { height:auto; padding:10px 0 8px; }
}

/* ── 2. Úvod ────────────────────────────────────────────────────────────
   Nad ohybom (844 bodov na 390) má byť nadpis, jedna veta, jedna hlavná
   akcia a dôkazy. Nadpis preto najviac tri riadky: menšie písmo a bez
   obmedzenia 17 znakov, ktoré z neho na telefóne robilo päť riadkov. */
@media (max-width:560px) {
  .hero-noc { padding:32px 0 40px; }
  /* Selektor musí mať body.noc, lebo paper.css má body.noc h1 (0,1,2) a samotné
     .hero-noc h1 (0,1,1) prehrá: nadpis potom ostal na 40 bodoch a mal päť riadkov. */
  body.noc .hero-noc h1 { max-width:none; font-size:clamp(23px,6.4vw,31px); line-height:1.16;
                          letter-spacing:-.026em; text-wrap:balance; }
  .hero-noc .lead { font-size:16.5px; line-height:1.5; max-width:none; margin:16px 0 0; }

  /* Tri tlačidlá: jedno plné cez celú šírku, dve vedľajšie v jednom riadku. */
  .hero-noc .akcie { display:grid; grid-template-columns:1fr 1fr; gap:8px;
                     width:100%; align-self:stretch; margin-top:24px; }
  .hero-noc .akcie > .btn { width:100%; justify-content:center; margin:0; padding:0 12px; }
  .hero-noc .akcie > .btn:first-child { grid-column:1 / -1; }

  /* Dôkazy ako zoznam pod sebou, nie ako rozsypané riadky. */
  .hero-noc .fakty { display:grid; grid-template-columns:1fr; gap:8px;
                     width:100%; align-self:stretch; margin-top:32px;
                     justify-content:start; justify-items:start; text-align:left;
                     font-size:13px; line-height:1.4; }
  .hero-noc .fakty span { align-items:flex-start; }
  .hero-noc .fakty span::before { margin-top:6px; }
}

/* ── 3. Rytmus sekcií na telefóne ──────────────────────────────────────── */
@media (max-width:560px) {
  body.noc section { padding-top:48px; padding-bottom:48px; }
  body.noc h2 { font-size:23px; line-height:1.22; }
  body.noc h3 { font-size:19px; }
  body.noc h1 + p, body.noc h2 + p, body.noc h3 + p { margin-top:8px; }
  body.noc .kicker { margin:0 0 8px; }
  .sub { font-size:16px; line-height:1.5; }
  .rule { margin:24px 0; }
  .btn { padding:0 16px; }
}

/* ── 4. Rozbaľovacie podrobnosti ────────────────────────────────────────
   Právne odseky a dlhé vysvetlenia sú v <details>. V HTML sú otvorené,
   na úzkej obrazovke ich krátky skript pri načítaní zavrie: keď skript
   nebeží, návštevník vidí všetko, čo je horší, ale nikdy nie horší stav. */
.detail { border:0; border-top:1px solid var(--line); margin:16px 0 0; padding:12px 0 0; }
.detail > summary { display:block; position:relative; list-style:none; cursor:pointer;
                    padding:2px 28px 2px 0; min-height:24px;
                    font:600 15px/1.45 var(--ui); color:var(--ink); }
.detail > summary::-webkit-details-marker { display:none; }
.detail > summary::before { content:none; }
.detail > summary::after { content:"+"; position:absolute; right:2px; top:0;
                           color:var(--accent); font:400 19px/1.3 var(--ui); }
.detail[open] > summary::after { content:"\2013"; }
.detail > summary:hover { color:var(--accent-light); }
.detail > *:not(summary) { margin:8px 0 0; }
.detail .dostanete { font-size:15px; color:var(--body); }
.drobne { font:400 13.5px/1.55 var(--ui); color:var(--muted); margin:12px 0 0; max-width:62ch; }
/* Drobné písmo býva druhý odsek v rozbalených podrobnostiach; vlastná šírka
   62ch by ho zalamovala inak ako odsek nad ním. */
.detail .drobne { max-width:none; margin-top:12px; }

/* ── 5. Ponuka na hube: cena a tlačidlo pred podrobnosťami ─────────────── */
.ponuky > li > .co { grid-column:1; grid-row:1; }
.ponuky > li > .kup { grid-column:2; grid-row:1 / span 2; }
.ponuky > li > .detail { grid-column:1; grid-row:2; }
.kup .btn { margin-top:16px; }

@media (max-width:900px) {
  .ponuky > li > .co,
  .ponuky > li > .kup,
  .ponuky > li > .detail { grid-column:1; grid-row:auto; }
  .ponuky > li { gap:16px; }
  .kup .btn { width:100%; justify-content:center; margin-top:16px; }
  .ponuky > li > .detail { margin-top:0; }
}
@media (max-width:560px) {
  .ponuky > li { padding:24px 0; }
  .ponuky .bolest { margin:0; font-size:16px; line-height:1.5; }
  .ponuky h3 { margin:0 0 8px; }
  .ponuky .cena { font-size:24px; }
  .entries > li > a { padding:12px 0; }
  .hry-index a { padding:12px 0; gap:16px; }
  .demo-note { margin-top:24px; }
  .viac { margin-top:24px; }
  .viac .btn { width:100%; justify-content:center; }
  h3.podnadpis, body.noc h3.podnadpis { margin-top:40px; }
}

/* ── 6. Knihy hlavolamov ────────────────────────────────────────────────
   Na širokej obrazovke ostáva cenový box vpravo, dôkazy pod úvodným textom.
   Na telefóne ide poradie zhora: nadpis, dve vety, cena s tlačidlom, dôkazy. */
@media (min-width:961px) {
  /* Cenový box siaha cez oba riadky, takže druhý riadok je vysoký; bez menšej
     medzery medzi riadkami visel zoznam dôkazov sto bodov pod textom. */
  /* Druhý riadok musí byť 1fr, inak si prvý riadok vezme polovicu prebytku,
     ktorý spôsobí cenový box cez oba riadky, a pod textom ostane diera. */
  .hero.knihy { row-gap:24px; grid-template-rows:auto 1fr; }
  .hero.knihy > .text { grid-column:1; grid-row:1; }
  .hero.knihy > .cena { grid-column:2; grid-row:1 / span 2; }
  .hero.knihy > .facts { grid-column:1; grid-row:2; align-self:start; }
}
@media (max-width:960px) {
  .hero.knihy > .facts { margin-top:24px; }
}
@media (max-width:560px) {
  /* Nadpis kníh sú dve vety v dvoch blokoch; pri 34 bodoch mala druhá veta
     na 360 bodoch tri riadky, teda štyri spolu. */
  body.noc .hero.knihy h1 { font-size:clamp(27px,7.9vw,34px); }
}
/* Tlačidlá v regáli majú vo vlastnom štýle knižnej stránky 42 bodov a ten štýl
   je v dokumente až za týmto súborom, takže tu potrebujeme o triedu vyššiu váhu.
   Na dotykových šírkach (do 900 bodov) dvíhame cieľ na 48. */
@media (max-width:900px) {
  body.noc .regal .akcie .btn { height:48px; min-height:48px; }
}
@media (max-width:760px) {
  .hero.knihy { padding-block:24px 8px; gap:24px; }
  #cena { padding:20px 16px; }
  #cena .suma { font-size:40px; }
  #cena .zaco { margin:8px 0 16px; font-size:14px; }
  #cena ul { margin-top:16px; }
  #cena .btn { height:48px; }
  .regal li { padding:24px 0; gap:16px; }
  /* Prvý riadok regálu už má nad sebou čiaru .rule, dve vlásočnice pod sebou
     vyzerali ako chyba. */
  .regal li:first-child { border-top:0; padding-top:8px; }
  .regal .akcie { display:grid; grid-template-columns:1fr; gap:8px; margin-top:16px; }
  .regal .akcie .btn { width:100%; justify-content:center; }
  .regal p { margin-top:8px; font-size:16px; line-height:1.5; }
  .regal .meta { margin-top:8px; }
  body.noc .regal h3 { font-size:22px; }
}

/* ── 7. Hry ─────────────────────────────────────────────────────────────── */
/* Do 900 bodov je karta hry úzka (na tablete sú dva stĺpce po 330 bodoch) a dve
   tlačidlá vedľa seba sa zalomia na rôzne šírky. Pod sebou a na plnú šírku. */
@media (max-width:900px) {
  .zoznam p:has(.btn) { display:grid; grid-template-columns:1fr; gap:8px; margin:16px 0 0; }
  .zoznam p:has(.btn) .btn { width:100%; height:48px; min-height:48px; justify-content:center; }
}
@media (max-width:560px) {
  /* Obrázok hry ostáva celý: je to naša skutočná sociálna karta a štvorcový
     výrez sprava síce ukázal len mriežku, ale tlačidlo Hrať spadlo na 905
     bodov, teda pod prvú obrazovku. Prednosť má akcia. */
  #hero + #games { padding-top:24px; }
  .hero .lead { font-size:16.5px; line-height:1.5; }
}
@media (max-width:760px) {
  .zoznam { gap:16px; }
  .zoznam li > div { padding:16px; }
  body.noc .zoznam h2 { margin:0 0 8px; font-size:22px; }
  .zoznam p { margin:0; font-size:16px; line-height:1.5; }
  .zoznam p:has(.btn) { display:grid; grid-template-columns:1fr; gap:8px; margin:16px 0 0; }
  .zoznam p:has(.btn) .btn { width:100%; height:48px; min-height:48px; justify-content:center; }
  .zoznam p.small { margin:16px 0 0; }
  .fineprint { font-size:14px; line-height:1.6; }
}

/* Podrobnosti v karte hry a v cenovom boxe: text vždy zľava, aj keď je
   karta na stred, lebo rozbalený odsek na stred sa zle číta. */
.zoznam .detail, .cena .detail { text-align:left; }
.zoznam .detail { margin-top:16px; }
.cena .detail { margin-top:16px; border-top-color:var(--line); }
.cena .detail > summary { font-size:14px; }
.cena .detail .zaco { margin:8px 0 0; }
.cena .detail .pomoc { margin:8px 0 0; }
.hero.knihy .text > .detail { max-width:62ch; }

/* ── 8. Drobnosti spoločné pre všetkých päť stránok ─────────────────────── */
@media (max-width:560px) {
  .foot { gap:16px; }
  .subscribe-form { gap:8px; margin:16px 0 8px; }
  .dopyt-form label { margin-top:8px; }
  .btn { min-height:48px; }
}