/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved.                   */
/* Proprietary and confidential. See LICENSE in the project root.            */

/* ==========================================================================
 *  Obsahové stránky — ceník, tematické vstupní stránky, poradna
 *
 *  Vlastní soubor, ne přílepek do kp-site.css: tyhle stránky mají svůj rytmus
 *  (tabulky, odpovědní bloky, definiční seznamy), který se na marketingových
 *  sekcích nevyskytuje, a kp-site.css má přes 1 800 řádků i bez nich.
 *
 *  Všechny barvy jdou z tokenů `--kp-*`, takže stránky reagují na motiv i na
 *  panel Vzhled stejně jako zbytek webu — pravidlo z CLAUDE.md §6.
 * ========================================================================== */

/* ---- drobečková navigace ------------------------------------------------
   Tichá řádka pod hlavičkou. Není to ozdoba: říká návštěvníkovi, kde je, a
   vyhledávači strukturu webu (tentýž obsah je v JSON-LD jako BreadcrumbList). */
.kp-crumbs {
    padding-block: 0.9rem 0;
    font-size: 0.82rem;
    color: var(--kp-ink-faint);
}

.kp-section--flush { padding-block: 0; }

.kp-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kp-crumbs li { display: inline-flex; align-items: center; gap: 0.35rem; }

.kp-crumbs a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--t-fast, .15s) ease, border-color var(--t-fast, .15s) ease;
}

.kp-crumbs a:hover {
    color: var(--kp-a);
    border-bottom-color: color-mix(in oklab, var(--kp-a) 45%, transparent);
}

.kp-crumbs a:focus-visible {
    outline: 2px solid var(--kp-a);
    outline-offset: 3px;
    border-radius: 3px;
}

.kp-crumbs [aria-current="page"] { color: var(--kp-ink-soft); font-weight: 600; }

.kp-crumbs__sep { opacity: 0.45; }

/* ---- rychlá odpověď -----------------------------------------------------
   Blok, který dává smysl VYTRŽENÝ ze stránky. Přesně tenhle tvar si bere
   jazykový model, když má odpovědět na otázku, a vyhledávač, když staví
   úryvek. Proto stojí hned pod nadpisem, je krátký a obsahuje čísla.

   Vizuálně je to karta s akcentní linkou vlevo — pozná se od běžného
   odstavce, ale nekřičí jako upozornění na chybu. */
.kp-answer {
    position: relative;
    margin: 0 auto clamp(1.75rem, 3vw, 2.75rem);
    max-width: 76ch;
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.75rem);
    border-radius: var(--kp-radius, 16px);
    background: color-mix(in oklab, var(--kp-a) 7%, var(--kp-cream-2));
    border: 1px solid color-mix(in oklab, var(--kp-a) 24%, transparent);
}

.kp-answer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 999px;
    background: var(--kp-a);
}

.kp-answer__label {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kp-a-deep);
}

[data-theme="dark"] .kp-answer__label { color: var(--kp-a-2); }

.kp-answer__text {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.62;
    color: var(--kp-ink);
}

/* ---- tabulky ------------------------------------------------------------
   Tabulka je tu nositel FAKTŮ, ne mřížka na vzhled: ceny a rozměry se z ní
   dají přečíst i strojově, proto má hlavičky se `scope` a popisek. */
.kp-tablewrap {
    /* Na telefonu se tabulka roluje uvnitř sebe — stránka vodorovný posuvník
       dostat nesmí. */
    overflow-x: auto;
    margin-inline: auto;
    max-width: 100%;
}

/* Obal je zastávka Tabu (tabindex v markupu), takže musí být vidět, že je
   zaostřený — jinak uživatel klávesnice netuší, že teď rolují šipky. */
.kp-tablewrap:focus-visible {
    outline: 2px solid var(--kp-a);
    outline-offset: 3px;
    border-radius: 12px;
}

.kp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: var(--kp-cream-2);
    border-radius: var(--kp-radius, 16px);
    overflow: hidden;
    box-shadow: var(--kp-elev-1, 0 8px 24px rgba(40, 30, 20, 0.1));
}

/* Popisek tabulky. Není to <caption> — ten dědí šířku tabulky, takže se
   uvnitř rolovacího obalu nezalomí a jeho konec zmizí vpravo za okrajem.
   Tenhle odstavec stojí nad obalem, zalomí se podle viditelné šířky a slouží
   jako název oblasti (aria-labelledby). */
.kp-tablecap {
    margin: 0 0 0.7rem;
    text-align: left;
    font-size: 0.85rem;
    color: var(--kp-ink-faint);
}

.kp-table th,
.kp-table td {
    padding: 0.8rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--kp-line);
}

.kp-table thead th {
    font-family: var(--kp-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kp-ink-soft);
    background: color-mix(in oklab, var(--kp-a) 6%, var(--kp-cream-2));
    white-space: nowrap;
}

.kp-table tbody th { font-weight: 600; color: var(--kp-ink); }

.kp-table tbody tr:last-child th,
.kp-table tbody tr:last-child td { border-bottom: 0; }

.kp-table tbody tr:hover { background: color-mix(in oklab, var(--kp-a) 4%, transparent); }

.kp-table a { color: var(--kp-a-deep); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--kp-a) 35%, transparent); }
.kp-table a:hover { color: var(--kp-a); }

[data-theme="dark"] .kp-table a { color: var(--kp-a-2); }

.kp-table--two td:last-child { white-space: nowrap; text-align: right; }

.kp-note {
    max-width: 76ch;
    margin: 1rem auto 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--kp-ink-faint);
}

/* ---- karta úrovně výbavy ------------------------------------------------ */
.kp-levelcard {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
    border-radius: var(--kp-radius, 16px);
    background: var(--kp-cream-2);
    border: 1px solid var(--kp-line);
    box-shadow: var(--kp-elev-1, 0 8px 24px rgba(40, 30, 20, 0.1));
}

.kp-levelcard h3 { margin: 0; font-size: 1.2rem; }

.kp-levelcard__tag {
    margin: 0;
    font-size: 0.9rem;
    color: var(--kp-ink-soft);
}

.kp-levelcard__list {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
    font-size: 0.92rem;
}

.kp-levelcard__list li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--kp-ink);
}

.kp-levelcard__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kp-a);
}

@media (max-width: 620px) {
    .kp-table th,
    .kp-table td { padding: 0.65rem 0.75rem; font-size: 0.9rem; }
}

/* ---- číslovaný postup ---------------------------------------------------
   Vlastní `.kp-steps` na obsahových stránkách: `kp-home.css` má variantu
   `--path` s propojovací čárou přes celou šířku, což tady v úzkém sloupci
   textu nedává smysl. Číslo nese `<ol>` sám přes počítadlo, aby ho čtečka
   přečetla jako pořadí, ne jako dekoraci. */
.kp-steps {
    counter-reset: kp-step;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 76ch;
    display: grid;
    gap: clamp(0.9rem, 2vw, 1.4rem);
}

.kp-steps li {
    counter-increment: kp-step;
    position: relative;
    display: grid;
    gap: 0.2rem;
    padding-left: 3.1rem;
}

.kp-steps li::before {
    content: counter(kp-step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--kp-a) 14%, var(--kp-cream-2));
    border: 1px solid color-mix(in oklab, var(--kp-a) 32%, transparent);
    color: var(--kp-a-deep);
    font-family: var(--kp-font-display);
    font-weight: 700;
    font-size: 0.95rem;
}

[data-theme="dark"] .kp-steps li::before { color: var(--kp-a-2); }

.kp-steps li b { font-size: 1.05rem; color: var(--kp-ink); }
.kp-steps li span { color: var(--kp-ink-soft); line-height: 1.6; }

/* ---- seznam odkazů „kam dál“ -------------------------------------------
   Vnitřní prolinkování není ozdoba: drží tematický graf webu pohromadě, aby
   se z produktové stránky dalo dojít na ceník i na vysvětlující článek. */
.kp-linklist {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 76ch;
    display: grid;
    gap: 0.55rem;
}

.kp-linklist a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--kp-a-deep);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid color-mix(in oklab, var(--kp-a) 30%, transparent);
    transition: color var(--t-fast, .15s) ease, border-color var(--t-fast, .15s) ease;
}

.kp-linklist a::before {
    content: "→";
    color: var(--kp-a);
    font-weight: 400;
}

.kp-linklist a:hover {
    color: var(--kp-a);
    border-bottom-color: var(--kp-a);
}

.kp-linklist a:focus-visible {
    outline: 2px solid var(--kp-a);
    outline-offset: 3px;
    border-radius: 4px;
}

[data-theme="dark"] .kp-linklist a { color: var(--kp-a-2); }

/* ---- text článku -------------------------------------------------------
   Úzký sloupec a klidný rytmus. Nadpisy oddílů jsou `h2`, protože článek má
   jediný `h1` a oddíly pod ním — struktura, kterou čte čtečka i stroj. */
.kp-prose {
    max-width: 76ch;
    margin-inline: auto;
}

.kp-prose h2 {
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0.5rem;
    font-size: clamp(1.25rem, 2.1vw, 1.6rem);
}

.kp-prose p {
    margin: 0;
    line-height: 1.72;
    color: var(--kp-ink-soft);
}

/* ---- otázky a odpovědi -------------------------------------------------
   Nativní `<details name>` — exkluzivní akordeon bez řádku JavaScriptu,
   funkční před připojením okruhu i bez skriptů (past z v92). Tentýž text
   je ve strukturovaných datech jako FAQPage. */
.kp-faqlist {
    max-width: 76ch;
    margin-inline: auto;
    display: grid;
    gap: 0.55rem;
}

.kp-faqlist__item {
    border: 1px solid var(--kp-line);
    border-radius: var(--kp-radius, 16px);
    background: var(--kp-cream-2);
    overflow: hidden;
}

.kp-faqlist__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--kp-ink);
    list-style: none;
}

.kp-faqlist__item summary::-webkit-details-marker { display: none; }

.kp-faqlist__item summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--kp-a);
    transition: transform var(--kp-dur, 320ms) var(--kp-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.kp-faqlist__item[open] summary::after { transform: rotate(45deg); }

.kp-faqlist__item summary:focus-visible {
    outline: 2px solid var(--kp-a);
    outline-offset: -2px;
}

.kp-faqlist__answer {
    padding: 0 1.15rem 1.05rem;
    color: var(--kp-ink-soft);
    line-height: 1.7;
}

.kp-faqlist__answer p { margin: 0; }

/* ---- karta článku v rozcestníku ---------------------------------------- */
.kp-guidecard {
    position: relative;
    display: grid;
    gap: 0.45rem;
    align-content: start;
    padding: clamp(1.2rem, 2.4vw, 1.75rem);
    padding-right: clamp(2.6rem, 4vw, 3.25rem);
    border-radius: var(--kp-radius, 16px);
    background: var(--kp-cream-2);
    border: 1px solid var(--kp-line);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--kp-elev-1, 0 8px 24px rgba(40, 30, 20, 0.1));
    transition:
        transform 0.3s var(--kp-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color 0.3s ease;
}

.kp-guidecard:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--kp-a) 45%, transparent);
}

.kp-guidecard:focus-visible {
    outline: 2px solid var(--kp-a);
    outline-offset: 3px;
}

.kp-guidecard h2 { margin: 0; font-size: 1.15rem; }
.kp-guidecard p { margin: 0; font-size: 0.92rem; color: var(--kp-ink-soft); line-height: 1.6; }

.kp-guidecard__go {
    position: absolute;
    right: clamp(1rem, 2vw, 1.4rem);
    top: clamp(1.2rem, 2.4vw, 1.75rem);
    color: var(--kp-a);
    font-size: 1.1rem;
    transition: transform 0.3s var(--kp-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.kp-guidecard:hover .kp-guidecard__go { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .kp-guidecard,
    .kp-guidecard__go,
    .kp-faqlist__item summary::after { transition: none; }

    .kp-guidecard:hover { transform: none; }
}

/* ==========================================================================
 *  Trojice kurníků na jedné fotce
 *  ---------------------------------------------------------------------
 *  Ceník i rozcestník „kurníky pro slepice" velikosti do té doby jen
 *  POPISOVALY tabulkou. Fotka mezi nadpis a tabulku patří proto, že rozdíl
 *  mezi malým, středním a velkým je vizuální, ne číselný.
 *
 *  Poměr stran drží `aspect-ratio`, ne výška obrázku: bez něj by si stránka
 *  místo nerezervovala a tabulka pod fotkou by po dotažení poskočila.
 * ========================================================================== */
.kp-trio {
    margin: 0 0 clamp(1.2rem, 2.6vw, 1.9rem);
}

.kp-trio img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1600 / 950;
    object-fit: cover;
    border-radius: var(--kp-radius-lg, 22px);
    border: 1px solid var(--kp-line);
    background: var(--kp-cream-2);
    box-shadow: var(--kp-elev-1, 0 8px 24px rgba(40, 30, 20, 0.1));
}

.kp-trio figcaption {
    margin-top: 0.6rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--kp-ink-faint, var(--kp-ink-soft));
    text-align: center;
}

/* ==========================================================================
 *  Kolem kurníku — samostatné výrobky (popeliště, sklad, podsvícení)
 *  ---------------------------------------------------------------------
 *  Jiný tvar než `.kp-levelcard`: tyhle karty nesou FOTKU, protože o tom, co
 *  je popeliště, se z názvu nic nedozví ani zákazník, ani vyhledávač.
 * ========================================================================== */
.kp-extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(1rem, 2.2vw, 1.5rem);
}

.kp-extra {
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: var(--kp-radius, 16px);
    overflow: hidden;
    background: var(--kp-cream-2);
    border: 1px solid var(--kp-line);
    box-shadow: var(--kp-elev-1, 0 8px 24px rgba(40, 30, 20, 0.1));
}

.kp-extra__photo {
    display: block;
    line-height: 0;
    background: var(--kp-cream-3, var(--kp-cream-2));
}

.kp-extra__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.kp-extra__photo:hover img,
.kp-extra__photo:focus-visible img { transform: scale(1.04); }

.kp-extra__photo:focus-visible { outline: 3px solid var(--kp-a); outline-offset: -3px; }

.kp-extra__body {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    padding: clamp(1rem, 2vw, 1.35rem);
}

.kp-extra__body h3 { margin: 0; font-size: 1.15rem; }

.kp-extra__desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--kp-ink-soft);
}

/* Cena je na kartě to jediné, co se čte na dálku — proto patkový řez a o dva
   stupně větší než popis. */
.kp-extra__price {
    margin: 0.15rem 0 0;
    font-family: var(--kp-font-head);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--kp-ink);
}

/* „Cena na dotaz" se sází jako text, ne jako číslo — má být poznat, že to
   cena NENÍ. Vymyslet ji jen proto, aby karta vypadala souměrně, by bylo
   proti pravidlu pravdy. */
.kp-extra__quote {
    font-family: var(--kp-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kp-ink-soft);
}

.kp-extra__link {
    justify-self: start;
    margin-top: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kp-a-deep, var(--kp-a));
}

@media (prefers-reduced-motion: reduce) {
    .kp-extra__photo img { transition: none; }
    .kp-extra__photo:hover img,
    .kp-extra__photo:focus-visible img { transform: none; }
}


/* Blok „vyplatí se balíček" pod tabulkou doplňků. Stejný tvar jako rychlá
   odpověď nahoře — je to totiž taky odpověď, jen na otázku, kterou si
   zákazník klade až u tabulky: „mám si to poskládat sám?" Zelený lem ho
   odliší od poznámky nad ním, aby se nečetl jako drobné písmo. */
.kp-answer--saving {
    margin-top: 14px;
    border-left: 3px solid var(--kp-a);
    background: color-mix(in oklab, var(--kp-a) 7%, var(--kp-cream-2));
}