/* ==========================================================================
   U Jabka — Soda design system: CONTENT PAGES
   Owned by the content agent. Loaded by the nine static routes only:
   /o-nas, /jak-to-funguje, /doprava-a-platba, /zaruka-a-reklamace,
   /obchodni-podminky, /ochrana-osobnich-udaju, /kontakt, /faq, /vykup.

   These are READING pages, so the design brief here is deliberately narrow:
   one generous measure, a clear heading hierarchy, quiet panels for callouts,
   and nothing else. No hero theatrics, no device scenes, no decorative glow.
   Everything expensive lives on the commerce pages; here the words are the
   product.

   Three constraints this file must keep obeying:
     1. Everything is scoped under `html.theme-soda`. frontend.css (the light
        legacy sheet) is still linked on every page during the migration, so an
        unscoped rule here would repaint un-migrated pages.
     2. No component recipe is redefined. CTA, panel, badge, accordion, notice
        and form primitives come from soda/components.css; this file only does
        page layout and the few content-only patterns (TOC, fact list, steps).
     3. No `@import`, no external host, no data: URL — the CSP forbids all three.
   ========================================================================== */

html.theme-soda .soda-pg {
    /* One measure for the whole content wave. ~68ch is the upper end of the
       comfortable range for continuous Czech prose; legal sections run long and
       benefit from the extra characters, teaser copy is clamped tighter below. */
    --measure: 68ch;
    --pg-gap: clamp(1.6rem, 3vw, 2.6rem);

    /*
     * THE DARK VESPER GROUND (§9 of the rollout scope: supporting pages, for
     * visual consistency). The masthead and the section heads sit on it; each
     * section's container is a white .soda-plane, which components.css joins by
     * selector so ten templates did not have to be edited one by one.
     *
     * Ink and chrome are scoped here exactly as .soda-hero, .soda-catalog,
     * .soda-detail and .soda-commerce scope theirs — including the BUTTON
     * tokens, without which a plain .soda-btn on this ground keeps the surface
     * theme's near-white fill under a white label.
     */
    background: var(--vesper-void);
    color: #fff;

    --ink: #ffffff;
    --ink-muted: rgba(255, 255, 255, .72);
    --ink-faint: rgba(255, 255, 255, .55);
    --ink-2: rgba(255, 255, 255, .72);
    --ink-3: rgba(255, 255, 255, .55);
    --line: rgba(255, 255, 255, .15);
    --line-hi: rgba(255, 255, 255, .3);
    --glass-border: rgba(255, 255, 255, .15);
    --panel: transparent;
    --panel-hi: rgba(255, 255, 255, .06);
    --hover-wash: rgba(255, 255, 255, .07);
    --focus: #ffffff;
    --btn-bg: rgba(0, 0, 0, .42);
    --btn-bg-hover: rgba(0, 0, 0, .68);
    --btn-border: rgba(255, 255, 255, .18);
    --accent: #ffffff;
    --accent-rgb: 255, 255, 255;
    --accent-ink: #000000;
}

/* base.css declares `color: var(--ink)` on every heading to beat the legacy
   sheet, and an explicit declaration beats the scope above. */
html.theme-soda .soda-pg-hero .soda-pg-title,
html.theme-soda .soda-pg-hero .soda-eyebrow {
    color: #fff;
}

/* THE PLANE'S PADDING. components.css gives the section container the surface;
   the rhythm inside it belongs here. */
html.theme-soda .soda-pg-section > .soda-container {
    padding: clamp(1.75rem, 3.4vw, 2.75rem);
}

/* The masthead's own contact channels stay on the dark ground beside the
   copy, ruled rather than boxed. */
html.theme-soda .soda-pg-hero .soda-pg-contact__channel {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

/* Cards, steps and facts are on the plane now, so they are ruled blocks rather
   than boxes stacked on a box. */
html.theme-soda .soda-pg-section > .soda-container .soda-pg-card,
html.theme-soda .soda-pg-section > .soda-container .soda-pg-step {
    padding: 0 0 0 1.111vw;
    border: 0;
    border-left: 1px solid rgba(0, 0, 0, .15);
    background: transparent;
}

html.theme-soda .soda-pg-section > .soda-container .soda-pg-card:hover,
html.theme-soda .soda-pg-section > .soda-container .soda-pg-card:focus-within {
    border-left-color: #000;
    background: transparent;
}

/* ============================================================ page masthead */

html.theme-soda .soda-pg-hero {
    position: relative;
    z-index: 6;
    padding-block: var(--page-intro-space) clamp(1.8rem, 3.5vw, 3rem);
}

html.theme-soda .soda-pg-hero__inner {
    display: grid;
    gap: var(--pg-gap);
    align-items: start;
}

/* Optional right-hand aside (contact channels, at-a-glance facts). Never
   decorative — if a page has no real facts to put here it uses one column. */
@media (min-width: 900px) {
    html.theme-soda .soda-pg-hero__inner--split {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 4rem);
    }
}

html.theme-soda .soda-pg-title {
    font-family: var(--font-display);
    font-size: clamp(2.05rem, 4.4vw, 3.3rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.038em;
    margin: .85rem 0 0;
    max-width: 20ch;
}

html.theme-soda .soda-pg-lead {
    font-size: 1.03rem;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 56ch;
    margin: 1.15rem 0 0;
}

html.theme-soda .soda-pg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.7rem;
}

/* Thin rule that closes the masthead and opens the reading area. */
html.theme-soda .soda-pg-hero::after {
    content: '';
    display: block;
    width: var(--container);
    height: 1px;
    margin: clamp(2rem, 4vw, 3.2rem) auto 0;
    background: linear-gradient(90deg, var(--line-hi), transparent 72%);
}

/* ============================================================== page sections */

html.theme-soda .soda-pg-section {
    position: relative;
    z-index: 6;
    padding-block: clamp(2rem, 4vw, 3.4rem);
}

html.theme-soda .soda-pg-section--last {
    padding-bottom: clamp(3.4rem, 7vw, 6rem);
}

html.theme-soda .soda-pg-section__head {
    max-width: var(--measure);
    margin-bottom: clamp(1.3rem, 2.6vw, 2rem);
}

html.theme-soda .soda-pg-section__head h2 {
    font-size: clamp(1.45rem, 2.6vw, 1.95rem);
    letter-spacing: -.03em;
    margin: .7rem 0 0;
}

html.theme-soda .soda-pg-section__head p {
    color: var(--ink-2);
    line-height: 1.65;
    max-width: var(--measure);
    margin: .8rem 0 0;
}

/* ------------------------------------------------- reading column + contents */

/* Long documents (terms, privacy, claims) get a sticky table of contents on
   wide screens. It is a plain list of in-page anchors, so it works with JS off;
   ui.js only upgrades the jump to a smooth scroll. */
html.theme-soda .soda-pg-layout {
    display: grid;
    gap: clamp(1.6rem, 3vw, 3rem);
    align-items: start;
}

@media (min-width: 1000px) {
    html.theme-soda .soda-pg-layout--toc {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    }
}

html.theme-soda .soda-pg-toc {
    padding: 1.15rem 1.25rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}

@media (min-width: 1000px) {
    html.theme-soda .soda-pg-toc {
        position: sticky;
        top: 6.5rem;
    }
}

html.theme-soda .soda-pg-toc__heading {
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    /* --ink-3 (40% white) measures 3.73:1 on the page background, below the
       4.5:1 AA floor for text this size. These labels carry meaning, so they
       use --ink-2 (8.74:1). --ink-3 stays for genuinely redundant marks. */
    color: var(--ink-2);
    margin: 0 0 .8rem;
}

html.theme-soda .soda-pg-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: soda-toc;
}

html.theme-soda .soda-pg-toc li {
    counter-increment: soda-toc;
    margin: 0 0 .1rem;
}

html.theme-soda .soda-pg-toc a {
    display: flex;
    gap: .6rem;
    padding: .38rem 0;
    font-size: .86rem;
    line-height: 1.4;
    color: var(--ink-2);
    transition: color .3s ease;
}

/* The counter is redundant with the link text beside it, so it may stay at the
   quieter --ink-3 without hiding information. */
html.theme-soda .soda-pg-toc a::before {
    content: counter(soda-toc) '.';
    flex: none;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

html.theme-soda .soda-pg-toc a:hover {
    color: var(--accent);
}

/* The reading column itself. `.soda-prose` (base.css) owns colour, line-height
   and link treatment; this only owns the measure and the vertical rhythm. */
html.theme-soda .soda-pg-body {
    max-width: var(--measure);
}

html.theme-soda .soda-pg-body > * + * {
    margin-top: 1.05rem;
}

html.theme-soda .soda-pg-article + .soda-pg-article {
    margin-top: clamp(2rem, 3.6vw, 3rem);
    padding-top: clamp(1.6rem, 3vw, 2.4rem);
    border-top: 1px solid var(--line);
}

html.theme-soda .soda-pg-article h2 {
    font-size: clamp(1.28rem, 2.2vw, 1.6rem);
    letter-spacing: -.028em;
    margin: 0 0 .9rem;
    /* Anchored sections must not hide under the sticky header on a jump. */
    scroll-margin-top: 6rem;
}

html.theme-soda .soda-pg-article h3 {
    font-size: 1.02rem;
    margin: 1.6rem 0 .5rem;
}

html.theme-soda .soda-pg-article p,
html.theme-soda .soda-pg-article li {
    max-width: var(--measure);
}

html.theme-soda .soda-pg-article ul,
html.theme-soda .soda-pg-article ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

/* ==================================================================== cards */

html.theme-soda .soda-pg-cards {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

html.theme-soda .soda-pg-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: clamp(1.15rem, 2vw, 1.5rem);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    transition: border-color var(--dur) ease, background var(--dur) ease;
}

html.theme-soda .soda-pg-card:hover,
html.theme-soda .soda-pg-card:focus-within {
    border-color: var(--line-hi);
    background: var(--panel-hi);
}

/* Three-up verification/assessment grids read better slightly wider than the
   auto-fit default, which would otherwise drop them to two columns early. */
html.theme-soda .soda-pg-cards.soda-pg-checks {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

html.theme-soda .soda-pg-card__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    /* Square, like every other marker in the system: Vesper's own list and
       button markers are tiny SQUARES (size-[0.139vw] bg-current), and a circle
       here was the last curved geometry left in the component layer. */
    border-radius: var(--r-mark);
    background: rgba(var(--accent-rgb), .12);
    color: var(--accent);
}

html.theme-soda .soda-pg-card__icon .ico {
    width: 18px;
    height: 18px;
}

html.theme-soda .soda-pg-card h2,
html.theme-soda .soda-pg-card h3 {
    font-size: 1.02rem;
    letter-spacing: -.02em;
    margin: .15rem 0 0;
}

html.theme-soda .soda-pg-card p {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
}

html.theme-soda .soda-pg-card p + p {
    margin-top: .55rem;
}

html.theme-soda .soda-pg-card a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* Right-aligned price/label pair inside a card head. */
html.theme-soda .soda-pg-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
}

html.theme-soda .soda-pg-card__value {
    flex: none;
    font-family: var(--font-display);
    font-size: .84rem;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==================================================================== steps */

html.theme-soda .soda-pg-steps {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: soda-step;
}

html.theme-soda .soda-pg-step {
    counter-increment: soda-step;
    padding: clamp(1.15rem, 2vw, 1.5rem);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}

html.theme-soda .soda-pg-step::before {
    content: counter(soda-step, decimal-leading-zero);
    display: block;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--accent);
    margin-bottom: .7rem;
}

html.theme-soda .soda-pg-step h3 {
    font-size: 1rem;
    letter-spacing: -.02em;
    margin: 0 0 .4rem;
}

html.theme-soda .soda-pg-step p {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
}

/* ============================================================== fact list */

/* Operator identity, delivery facts — a definition list, not a table, because
   the pairs are labelled values rather than a matrix. */
html.theme-soda .soda-pg-facts {
    display: grid;
    gap: .1rem;
    margin: 0;
}

@media (min-width: 620px) {
    html.theme-soda .soda-pg-facts {
        grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
        column-gap: 1.4rem;
    }
}

html.theme-soda .soda-pg-facts dt {
    padding: .55rem 0 0;
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 600;
    /* A field label on a legal page is content, not chrome — see the contrast
       note above; --ink-3 would put "IČO" and "Sídlo" below the AA floor. */
    color: var(--ink-2);
}

html.theme-soda .soda-pg-facts dd {
    margin: 0;
    padding: 0 0 .55rem;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--ink);
}

@media (min-width: 620px) {
    html.theme-soda .soda-pg-facts dt { padding-top: .55rem; }
    html.theme-soda .soda-pg-facts dd { padding-top: .55rem; }
}

html.theme-soda .soda-pg-facts dd + dt {
    border-top: 1px solid var(--line);
}

html.theme-soda .soda-pg-facts dd a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* ================================================================== notices */

/* Owner-gate and status notes. Built on .soda-notice; this only adds the
   reading measure and the inline heading run-in. */
html.theme-soda .soda-pg-note {
    max-width: var(--measure);
    line-height: 1.6;
    color: var(--ink-2);
}

html.theme-soda .soda-pg-note strong {
    color: var(--ink);
}

/* Notices sit outside `.soda-prose`, so their links need the accent treatment
   spelled out or they inherit `color: inherit` and stop reading as links. */
html.theme-soda .soda-pg-note a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* ==================================================================== FAQ */

html.theme-soda .soda-pg-faq__group + .soda-pg-faq__group {
    margin-top: clamp(2rem, 3.6vw, 3rem);
}

html.theme-soda .soda-pg-faq__heading {
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    letter-spacing: -.028em;
    margin: 0 0 1rem;
    scroll-margin-top: 6rem;
}

html.theme-soda .soda-pg-faq__list {
    max-width: 62rem;
}

/*
 * The FAQ index reuses `.soda-pg-toc`, but it is NOT the legal pages' sidebar:
 * it sits full-bleed above the accordion instead of inside `.soda-pg-layout--toc`.
 * With only the sidebar rules it stretched to the full 1360px container around a
 * single ~15rem column of six links — a panel that was four fifths empty, and
 * wider than the accordion it introduces.
 *
 * So it takes the accordion's own measure and lets the links flow into as many
 * columns as fit. Nothing about the markup, the anchors or the counter changes.
 */
html.theme-soda .soda-pg-faq__index {
    max-width: 62rem;
}

html.theme-soda .soda-pg-faq__index ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    column-gap: 1.6rem;
}

/* Sticky is a sidebar affordance. This panel is in normal flow at the top of
   its own section, where it has no travel to stick through. */
@media (min-width: 1000px) {
    html.theme-soda .soda-pg-faq__index {
        position: static;
    }
}

/* The answer measure inside an accordion is set by components.css; the group
   list only needs to stop the questions from running the full page width. */

/* ================================================================ contact */

html.theme-soda .soda-pg-contact {
    display: grid;
    gap: var(--gap);
}

html.theme-soda .soda-pg-contact__channel {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: clamp(1.15rem, 2vw, 1.5rem);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-card);
    -webkit-backdrop-filter: blur(var(--blur-sm));
    backdrop-filter: blur(var(--blur-sm));
}

html.theme-soda .soda-pg-contact__channel h2 {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 0;
}

html.theme-soda .soda-pg-contact__value {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0;
}

html.theme-soda .soda-pg-contact__value a {
    color: var(--accent);
}

html.theme-soda .soda-pg-contact__note {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
}

/* ============================================================ closing block */

html.theme-soda .soda-pg-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.2rem, 3vw, 2.4rem);
}

html.theme-soda .soda-pg-cta__copy {
    max-width: 46ch;
}

html.theme-soda .soda-pg-cta__copy h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    letter-spacing: -.03em;
    margin: .6rem 0 .5rem;
}

html.theme-soda .soda-pg-cta__copy p {
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
}

html.theme-soda .soda-pg-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

html.theme-soda .soda-pg-related {
    max-width: var(--measure);
    margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
    font-size: .88rem;
    color: var(--ink-2);
}

html.theme-soda .soda-pg-related a {
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: .18em;
}

html.theme-soda .soda-pg-related a:hover {
    color: var(--accent);
}

/* ================================================================== print */
/* Legal pages get printed and e-mailed. The dark mood wash would burn a
   cartridge and drop the text to white-on-white, so print gets plain ink. */
@media print {
    html.theme-soda,
    html.theme-soda body {
        background: #fff;
        color: #000;
    }

    html.theme-soda body::after,
    html.theme-soda .soda-topbar,
    html.theme-soda .soda-header,
    html.theme-soda .soda-footer,
    html.theme-soda .soda-pg-toc,
    html.theme-soda .soda-pg-hero__actions,
    html.theme-soda .soda-pg-cta__actions,
    html.theme-soda .skip-link {
        display: none;
    }

    html.theme-soda h1,
    html.theme-soda h2,
    html.theme-soda h3,
    html.theme-soda .soda-prose,
    html.theme-soda .soda-pg-facts dd,
    html.theme-soda .soda-pg-card p,
    html.theme-soda .soda-pg-step p {
        color: #000;
    }

    html.theme-soda .soda-pg-card,
    html.theme-soda .soda-pg-step,
    html.theme-soda .soda-notice {
        background: transparent;
        border-color: #999;
    }

    /* Collapsed answers must not vanish from a printed FAQ. ui.js puts `hidden`
       on a closed panel, which the UA sheet turns into display:none, so the
       grid-row override alone is not enough. */
    html.theme-soda .soda-acc__a {
        grid-template-rows: 1fr;
    }

    html.theme-soda .soda-acc__a[hidden] {
        display: grid;
    }
}


/* -------------------------------- boxes that became rules on the plane */

/* The table of contents is a ruled column beside the prose, not a card
   floating on the surface it belongs to. */
html.theme-soda .soda-pg-section > .soda-container .soda-pg-toc {
    padding: 0 1.667vw 0 0;
    border: 0;
    border-right: 1px solid rgba(0, 0, 0, .15);
    background: transparent;
    border-radius: var(--r-none);
}

/* A single-column TOC (the FAQ index) has nothing to its right to be ruled
   against, so it closes on a rule underneath instead. */
html.theme-soda .soda-pg-section > .soda-container .soda-pg-faq__index {
    padding: 0 0 1.667vw;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    background: transparent;
}

/* The closing call to action is the plane's last block, not a box on it. */
html.theme-soda .soda-pg-section > .soda-container .soda-pg-cta {
    padding: 0;
    border: 0;
    background: transparent;
}

@media (max-width: 900px) {
    html.theme-soda .soda-pg-section > .soda-container .soda-pg-toc {
        padding: 0 0 1.5rem;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .15);
    }
}