/* =====================================================================
   cloudstrg — verejný web (domovská stránka, cenník, kontakt…).

   Samostatný súbor: administrácia ho nenačítava a web nenačítava
   dizajn.css. Spoločné je len app.css — písmo, reset a farebné tokeny.

   Farby sa NEPÍŠU. Všetko ide cez tokeny z dizajn_tokeny(): --brand,
   --ink, --line, --card… Zmena značkovej farby v config/app.php
   prefarbí web aj appku naraz.

   Verejný web je zámerne len SVETLÝ. Tmavý režim je voľba v profile
   a návštevník webu žiadny profil nemá; dvojaká paleta by znamenala
   dve sady fotiek s inak ladeným prekryvom.
   ===================================================================== */

.w-telo {
    background: var(--card);
    color: var(--ink);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.w-obal { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.w-obal-uzky { width: min(760px, 100% - 2.5rem); margin-inline: auto; }

/* ------------------------------------------------------------ typografia
   Nadpisy škáluje clamp() — na telefóne musia ostať čitateľné, na veľkom
   monitore majú niesť stránku. Záporný tracking drží veľký text kompaktný. */
.w-nadpis-xxl {
    font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.1rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 800;
    margin: 0;
}

.w-nadpis-xl {
    font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 800;
    margin: 0;
}

.w-nadpis-l {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 700;
    margin: 0;
}

.w-nadpis-m { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }

.w-perex {
    font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
    line-height: 1.6;
    color: var(--dim);
    margin: 0;
}

.w-text { line-height: 1.68; color: var(--dim); margin: 0; }
.w-zvyraz { color: var(--brand-ink); }

/* štítok nad nadpisom — malý, prestrkaný, v značkovej farbe */
.w-oznacenie {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-ink);
    margin: 0 0 1rem;
}

.w-oznacenie::before {
    content: '';
    width: 1.6rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.w-oznacenie-svetle { color: var(--foto-dim); }

/* --------------------------------------------------------------- tlačidlá */
.w-tlacidlo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--r-prvok);
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s var(--e), box-shadow .18s var(--e), background .18s var(--e);
    white-space: nowrap;
}

.w-tlacidlo:hover { transform: translateY(-1px); }
.w-tlacidlo:active { transform: translateY(0); }

.w-tlacidlo-hlavne {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 10px 24px -12px var(--brand);
}

.w-tlacidlo-hlavne:hover { box-shadow: 0 16px 32px -14px var(--brand); }

.w-tlacidlo-druhe {
    background: var(--card);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--tien-karta);
}

.w-tlacidlo-druhe:hover { background: var(--soft); }

/* na fotke: sklo namiesto plnej farby, aby bolo vidno, čo je pod ním */
.w-tlacidlo-sklo {
    background: var(--foto-sklo);
    color: var(--foto-ink);
    border-color: rgba(255, 255, 255, .34);
    backdrop-filter: blur(10px);
}

.w-tlacidlo-sklo:hover { background: rgba(255, 255, 255, .24); }

.w-tlacidlo-velke { padding: 1rem 1.9rem; font-size: 1.02rem; }

.w-tlacidla { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ------------------------------------------------------------ hlavička */
.w-hlavicka {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--card) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: border-color .2s var(--e), background .2s var(--e);
}

.w-hlavicka[data-odscrolovana="ano"] {
    border-bottom-color: var(--line);
    background: color-mix(in srgb, var(--card) 94%, transparent);
}

.w-hlavicka-vnutro {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    height: 4.4rem;
}

.w-logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -.02em;
    color: var(--ink);
    text-decoration: none;
    flex: none;
}

.w-menu { display: flex; align-items: center; gap: .3rem; margin-inline: auto; }

.w-menu a {
    padding: .5rem .8rem;
    border-radius: var(--r-prvok);
    color: var(--dim);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    transition: color .15s var(--e), background .15s var(--e);
}

.w-menu a:hover { color: var(--ink); background: var(--soft); }
.w-menu a[aria-current="page"] { color: var(--brand-ink); }

.w-hlavicka-akcie { display: flex; align-items: center; gap: .55rem; flex: none; }
.w-hlavicka-akcie .w-tlacidlo { padding: .6rem 1.1rem; font-size: .9rem; }

.w-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-prvok);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
}

/* mobilné menu — celá plocha, aby sa dalo trafiť palcom */
.w-mobilne-menu {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--card);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    overflow-y: auto;
}

.w-mobilne-menu-hore { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

.w-mobilne-menu a.w-mobilny-odkaz {
    padding: .95rem .6rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
}

.w-mobilne-menu .w-tlacidlo { margin-top: .5rem; }

/* ----------------------------------------------------------------- hero */
.w-hero { position: relative; padding: clamp(3rem, 2rem + 5vw, 6rem) 0 0; }

.w-hero-mriezka {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
}

.w-hero-text { max-width: 35rem; }
.w-hero-text .w-perex { margin-top: 1.4rem; }
.w-hero-text .w-tlacidla { margin-top: 2rem; }

.w-hero-poznamka {
    margin-top: 1.1rem;
    font-size: .86rem;
    color: var(--faint);
    display: flex;
    flex-wrap: wrap;
    gap: .2rem 1.1rem;
}

.w-hero-poznamka span { display: inline-flex; align-items: center; gap: .35rem; }

/* fotka haly + prekrytá karta s telefónom */
.w-hero-vizual { position: relative; }

.w-hero-foto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: var(--tien);
}

.w-hero-stitok {
    position: absolute;
    left: -1.4rem;
    bottom: 2.2rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--tien);
    padding: .8rem .95rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 17rem;
}

.w-hero-stitok svg { flex: none; border-radius: 4px; }
.w-hero-stitok-kod { display: block; font-weight: 800; letter-spacing: .02em; font-size: 1rem; }
.w-hero-stitok-kde { display: block; font-size: .78rem; color: var(--dim); margin-top: .15rem; line-height: 1.35; }

/* ---------------------------------------------------------------- sekcie */
.w-sekcia { padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0; }
.w-sekcia-soft { background: var(--soft); }
.w-sekcia-hlava { max-width: 44rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.4rem); }
.w-sekcia-hlava .w-perex { margin-top: 1rem; }
.w-sekcia-hlava-stred { margin-inline: auto; text-align: center; }
.w-sekcia-hlava-stred .w-oznacenie { justify-content: center; }

/* ------------------------------------------------------- bento s fotkami */
.w-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.w-dlazdica {
    position: relative;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--tien-karta);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 15rem;
}

.w-dlazdica-sirka-3 { grid-column: span 3; }
.w-dlazdica-sirka-2 { grid-column: span 2; }
.w-dlazdica-sirka-6 { grid-column: span 6; }

.w-dlazdica-foto { position: relative; flex: none; }

.w-dlazdica-foto img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Náhľad obrazovky appky. Fotografia znesie orez na výšku, screenshot
   nie — orezaný zľava vyzerá ako chyba. Preto 16 : 9 a zarovnanie hore:
   vidno celú šírku obrazovky a odreže sa len jej spodok. */
.w-dlazdica-nahlad { flex: none; padding: 1rem 1rem 0; background: var(--soft); border-bottom: 1px solid var(--line); }

.w-dlazdica-nahlad img {
    display: block;
    width: 100%;
    /* height:auto musí byť, inak atribút height="…" z HTML prebije
       aspect-ratio a obrázok narastie na svoju plnú výšku */
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 0 -1px 0 var(--card) inset;
}

.w-dlazdica-obsah { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.w-dlazdica-obsah .w-text { font-size: .94rem; }

.w-dlazdica-ikona {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand-ink);
    margin-bottom: .3rem;
}

/* dlaždica, kde fotka tvorí celé pozadie a text leží na nej */
.w-dlazdica-plna { min-height: 22rem; justify-content: flex-end; }

.w-dlazdica-plna img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.w-dlazdica-plna::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 12, 24, .88), rgba(6, 12, 24, .35) 48%, rgba(6, 12, 24, .05));
}

.w-dlazdica-plna .w-dlazdica-obsah { position: relative; z-index: 1; color: var(--foto-ink); }
.w-dlazdica-plna .w-dlazdica-obsah .w-text { color: var(--foto-dim); }
.w-dlazdica-plna .w-dlazdica-ikona { background: rgba(255, 255, 255, .16); color: var(--foto-ink); }

/* ------------------------------------------------------------ kroky 1-2-3 */
.w-kroky { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: krok; }

.w-krok {
    position: relative;
    padding: 1.6rem 1.4rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--tien-karta);
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.w-krok-cislo {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--brand-soft);
    -webkit-text-stroke: 1px var(--brand-ink);
}

.w-krok .w-text { font-size: .93rem; }

/* Fotohlavička stránky — nižšia obdoba tmavého pásu, na uvedenie
   podstránky, ktorá inak nemá vlastný vizuál. */
.w-hlava-foto { padding: clamp(3rem, 2rem + 4vw, 5rem) 0; }
.w-hlava-foto .w-sekcia-hlava { margin-bottom: 0; }

/* ---------------------------------------------------------- tmavý pás */
.w-pas {
    position: relative;
    isolation: isolate;
    color: var(--foto-ink);
    padding: clamp(4rem, 2rem + 7vw, 7.5rem) 0;
    overflow: hidden;
}

.w-pas img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.w-pas::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(105deg, rgba(6, 12, 24, .92) 26%, rgba(6, 12, 24, .74) 62%, rgba(6, 12, 24, .68)),
        linear-gradient(to bottom, rgba(6, 12, 24, .45), rgba(6, 12, 24, .62)),
        color-mix(in srgb, var(--brand) 24%, transparent);
}

.w-pas .w-nadpis-xl { color: var(--foto-ink); }
.w-pas .w-perex { color: var(--foto-dim); }

/* čísla na tmavom páse */
.w-cisla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 3rem; }

.w-cislo-hodnota {
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}

.w-cislo-popis { margin-top: .5rem; font-size: .9rem; color: var(--foto-dim); line-height: 1.5; }

/* --------------------------------------------------------------- appka */
.w-appka { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }

.w-telefony { position: relative; display: flex; justify-content: center; gap: 1rem; }

.w-telefon {
    width: min(15.5rem, 42vw);
    border-radius: 2rem;
    padding: .5rem;
    background: var(--ram);
    box-shadow: var(--tien);
    flex: none;
}

.w-telefon img { display: block; width: 100%; height: auto; border-radius: 1.6rem; }
.w-telefon-vzad { transform: rotate(-4deg) translateY(1.6rem) scale(.9); opacity: .96; }
.w-telefon-vpred { transform: rotate(2deg); position: relative; z-index: 1; }

.w-zoznam-odrazok { display: grid; gap: .9rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.w-zoznam-odrazok li { display: flex; gap: .7rem; line-height: 1.55; color: var(--dim); }
.w-zoznam-odrazok li svg { flex: none; color: var(--brand-ink); margin-top: .15rem; }
.w-zoznam-odrazok strong { color: var(--ink); }

.w-obchody { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }

/* ---------------------------------------------------------------- cenník */
.w-cennik { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; }

.w-balik {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.7rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--tien-karta);
}

.w-balik-zvyrazneny {
    border-color: var(--brand);
    box-shadow: 0 22px 50px -26px var(--brand);
    position: relative;
}

.w-balik-odznak {
    position: absolute;
    top: -.72rem;
    left: 1.5rem;
    background: var(--brand);
    color: var(--on-brand);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: .28rem .6rem;
    border-radius: 999px;
}

.w-balik-cena { display: flex; align-items: baseline; gap: .35rem; }
.w-balik-cena b { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.w-balik-cena span { color: var(--dim); font-size: .9rem; }
.w-balik .w-text { font-size: .9rem; }
.w-balik ul { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .55rem; }
.w-balik li { display: flex; gap: .55rem; font-size: .9rem; color: var(--dim); line-height: 1.45; }
.w-balik li svg { flex: none; color: var(--ok); margin-top: .1rem; }
.w-balik .w-tlacidlo { margin-top: auto; }

.w-cennik-poznamka { margin-top: 1.4rem; font-size: .88rem; color: var(--faint); }

/* --------------------------------------------------------------- otázky */
.w-otazky { display: grid; gap: .6rem; }

.w-otazka {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    padding: 0 1.2rem;
    box-shadow: var(--tien-karta);
}

.w-otazka summary {
    list-style: none;
    cursor: pointer;
    padding: 1.05rem 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.w-otazka summary::-webkit-details-marker { display: none; }
.w-otazka summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--brand-ink); line-height: 1; }
.w-otazka[open] summary::after { content: '−'; }
.w-otazka .w-text { padding-bottom: 1.15rem; font-size: .94rem; }

/* Poznámka, ktorá nesie informáciu (nie dekoráciu) — --faint je na ňu
   príliš slabý, tak dostane vlastný, čitateľnejší podklad. */
.w-poznamka-info {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-top: 1.3rem;
    padding: .8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-prvok);
    background: var(--soft);
    font-size: .88rem;
    line-height: 1.55;
    color: var(--dim);
}

.w-poznamka-info svg { flex: none; color: var(--brand-ink); margin-top: .12rem; }

/* -------------------------------------------------------------- kontakt */
.w-kontakt-mriezka { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); }

.w-udaje { display: grid; gap: 1.5rem; }

.w-udaj-skupina {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    padding: 1.3rem 1.4rem;
    box-shadow: var(--tien-karta);
}

.w-udaj-skupina h3 { margin: 0 0 .9rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.w-udaj-riadok { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; font-size: .95rem; }
.w-udaj-riadok + .w-udaj-riadok { border-top: 1px solid var(--line); }
.w-udaj-riadok dt { color: var(--dim); }
.w-udaj-riadok dd { margin: 0; font-weight: 600; text-align: right; }
.w-udaj-riadok a { color: var(--brand-ink); text-decoration: none; }
.w-udaj-riadok a:hover { text-decoration: underline; }

.w-formular { display: grid; gap: .9rem; align-content: start; }
.w-pole { display: grid; gap: .35rem; }
.w-pole label { font-size: .86rem; font-weight: 600; color: var(--dim); }

.w-pole input,
.w-pole textarea,
.w-pole select {
    font: inherit;
    padding: .72rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-prvok);
    background: var(--card);
    color: var(--ink);
    width: 100%;
}

.w-pole textarea { min-height: 8.5rem; resize: vertical; }
.w-pole input:focus, .w-pole textarea:focus, .w-pole select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.w-pole-chyba input, .w-pole-chyba textarea { border-color: var(--bad); }
.w-chyba { font-size: .82rem; color: var(--bad); }

.w-oznam { padding: .95rem 1.1rem; border-radius: var(--r-prvok); font-size: .93rem; line-height: 1.5; }
.w-oznam-ok { background: var(--ok-bg); color: var(--ok); }
.w-oznam-zle { background: var(--bad-bg); color: var(--bad); }

/* medonosná pasca na roboty — človek pole nevidí, robot ho vyplní */
.w-pasca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------- pätička */
.w-paticka { border-top: 1px solid var(--line); background: var(--soft); padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0 2rem; }
.w-paticka-mriezka { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.w-paticka-uvod .w-text { font-size: .9rem; margin-top: .9rem; max-width: 22rem; }
.w-paticka h4 { margin: 0 0 .9rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.w-paticka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.w-paticka a { color: var(--dim); text-decoration: none; font-size: .92rem; }
.w-paticka a:hover { color: var(--brand-ink); }

.w-paticka-spodok {
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    justify-content: space-between;
    font-size: .84rem;
    color: var(--faint);
}

/* --------------------------------------------------------- právne texty */
.w-dokument { max-width: 46rem; }
.w-dokument h2 { font-size: 1.3rem; letter-spacing: -.02em; margin: 2.6rem 0 .9rem; }
.w-dokument h3 { font-size: 1.02rem; margin: 1.8rem 0 .6rem; }
.w-dokument p, .w-dokument li { line-height: 1.7; color: var(--dim); }
.w-dokument p { margin: 0 0 1rem; }
.w-dokument ul, .w-dokument ol { margin: 0 0 1.2rem; padding-left: 1.3rem; display: grid; gap: .5rem; }
.w-dokument a { color: var(--brand-ink); }
.w-dokument strong { color: var(--ink); }

/* ---------------------------------------------------- odhalenie pri scrole
   Bez JS (alebo pri vypnutej animácii) zostane všetko normálne viditeľné —
   trieda sa pridáva až skriptom, takže obsah nikdy nezmizne natrvalo. */
.js .w-odhal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--e), transform .6s var(--e); }
.js .w-odhal.je-vidno { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .w-odhal { opacity: 1; transform: none; transition: none; }
    .w-tlacidlo:hover { transform: none; }
    .w-telefon-vzad, .w-telefon-vpred { transform: none; }
}

/* ------------------------------------------------------------- responzív */
@media (max-width: 1080px) {
    .w-cennik { grid-template-columns: repeat(2, 1fr); }
    .w-kroky { grid-template-columns: repeat(2, 1fr); }
    .w-cisla { grid-template-columns: repeat(2, 1fr); }
    .w-paticka-mriezka { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .w-menu { display: none; }
    .w-hlavicka-akcie .w-tlacidlo-druhe { display: none; }
    .w-burger { display: inline-flex; }
    .w-hero-mriezka { grid-template-columns: 1fr; }
    .w-hero-vizual { order: -1; }
    .w-hero-stitok { left: auto; right: 1rem; bottom: -1.2rem; }
    .w-appka { grid-template-columns: 1fr; }
    .w-kontakt-mriezka { grid-template-columns: 1fr; }
    .w-bento { grid-template-columns: repeat(2, 1fr); }
    .w-dlazdica-sirka-3, .w-dlazdica-sirka-2, .w-dlazdica-sirka-6 { grid-column: span 2; }
}

@media (max-width: 620px) {
    .w-obal, .w-obal-uzky { width: min(100% - 2rem, 100%); }
    .w-cennik, .w-kroky, .w-cisla, .w-bento, .w-paticka-mriezka { grid-template-columns: 1fr; }
    .w-dlazdica-sirka-3, .w-dlazdica-sirka-2, .w-dlazdica-sirka-6 { grid-column: span 1; }
    .w-telefon-vzad { display: none; }
    .w-telefon { width: min(17rem, 72vw); }
    .w-tlacidla .w-tlacidlo { flex: 1 1 100%; }
}

/* metóda HTTP v tabuľke koncových bodov API */
.w-stav-metoda {
    display: inline-block;
    padding: .12rem .45rem;
    border-radius: 4px;
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ukážky volaní v dokumentácii */
.w-dokument pre {
    margin: 0 0 1.2rem;
    padding: 1rem 1.1rem;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--r-prvok);
    overflow-x: auto;
    font-size: .84rem;
    line-height: 1.65;
}

.w-dokument code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
.w-dokument pre code { font-size: 1em; }