/* ===========================================================================
   Doplňky k designu webu Bytolo.

   styles.css a fonts.css jsou převzaté ze vzoru BAJTOVĚ BEZE ZMĚNY — až přijde
   nová verze od designéra, stačí je přepsat. Všechno, co jsme přidali my
   (podstránky, patička s právními odkazy, stránka podpory), žije tady a staví
   jen na tokenech a třídách vzoru.
   =========================================================================== */

/* --- patička: právní dokumenty a podpora vedle údajů o provozovateli ------ */

.footer-legal a { color: inherit; text-decoration: underline; text-decoration-color: #c9d6e8; text-underline-offset: 3px; white-space: nowrap; }
.footer-legal a:hover { color: var(--color-primary); text-decoration-color: currentColor; }

/* --- kontaktní formulář (jen to, co jsme do vzoru přidali) --------------- */

/* Odkaz na zásady, který script.js připojí pod tlačítko (privacyUrl). Ve vzoru nikdy nebyl
   vidět, takže nedostal styl odkazu a splýval s šedým textem kolem. */
.contact-form-card .contact-privacy a { text-decoration: underline; text-decoration-color: #c9d6e8; text-underline-offset: 3px; }
.contact-form-card .contact-privacy a:hover { color: var(--color-primary); text-decoration-color: currentColor; }

/* "Odeslat e-mailem" vedle "Zkopírovat zprávu" (jen když je nastavený supportEmail). Pod 768 px
   jsou obě tlačítka na celou šířku pod sebou a mezeru dělá vzor sám. */
@media (min-width: 768px) { #mail-message { margin-left: 10px; } }

/* --- menu: aktuální stránka ---------------------------------------------- */

.desktop-nav a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: var(--color-primary); }

/* --- karty funkcí ---------------------------------------------------------- */
/* Vzor ukazoval v kartě jen obrázek a popis schovával do najetí myší, takže karty působily
   prázdně. Teď je text vidět pořád: krátký popis vedle obrázku a pod ním tři body. Obrázek se
   zmenšuje podle šířky karty (container query), aby se popis vešel i do úzkých karet.
   Modré zvýraznění ze vzoru zůstává jako efekt při najetí myší. */
/* Vzor dával všem řádkům výšku nejvyšší karty (grid-auto-rows: 1fr) — u karet s textem to
   nechávalo prázdné pruhy. Karty v jednom řádku se dál srovnají, každý řádek má výšku podle obsahu. */
.function-grid { grid-auto-rows: auto; }
.function-card { display: block; container-type: inline-size; }
.function-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "lead visual" "points points";
    align-items: center;
    gap: 14px 20px;
}
.function-lead { grid-area: lead; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.function-body .function-visual { grid-area: visual; height: auto; }
.function-body .function-visual img { width: clamp(6rem, 34cqi, 10rem); height: auto; aspect-ratio: 1; transform: none; }
.function-points { grid-area: points; list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.function-points li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; }
.nowrap { white-space: nowrap; }
.function-points li::before { content: "✓"; position: absolute; left: 2px; font-weight: 700; color: var(--color-primary); }

@media (hover: hover) {
    .function-card:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 18px 40px #0062f51f; }
    .function-card:hover .function-points li::before { color: #fff; }
    .function-card:hover .function-visual img { transform: scale(.95); }
}
/* Úzká karta: obrázek nad text, jinak by popisu zbyl sloupec na jedno dvě slova. */
@container (max-width: 18.5rem) {
    .function-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "visual" "lead" "points"; }
    .function-body .function-visual { justify-self: start; }
}
/* Vzor přepíná na jeden sloupec až pod 600 px; se stálým textem jsou dva sloupce pod ~720 px moc úzké. */
@media (max-width: 719px) {
    .function-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .function-card, .function-card:nth-child(-n+2), .function-card:last-child { grid-column: auto; }
}
@media (max-width: 600px) {
    .function-card { padding: 22px; }
    .function-lead { font-size: 16px; }
}

/* --- kontaktní formulář: e-mail vedle formuláře a skrytá past na roboty --- */

/* Selektor s p. — pravidlo vzoru .contact-copy > p:not(.eyebrow) má stejnou váhu, vyhrává pořadí. */
.contact-copy > p.contact-mail { margin-top: 12px; color: #425f80; }
.contact-copy .contact-mail a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Zamčený formulář (bez JS nebo během odesílání): tlačítko nesmí vypadat, že jde stisknout. */
#contact-fields:disabled .form-submit { opacity: .6; cursor: default; }
/* Pole, které odmítlo API (odpověď 422) — stejná červená jako chybová hláška vzoru. */
.form-field [aria-invalid="true"] { border-color: #9f2839; box-shadow: 0 0 0 3px #9f28391a; }
/* Bez JavaScriptu: odkaz na e-mail musí být vidět jako odkaz, ne splývat s textem. */
#contact-form noscript p { margin-top: 14px; font-size: 14px; line-height: 1.6; color: #345b83; }
#contact-form noscript a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Honeypot: člověk ho nevidí, robot ho vyplní. Ne display:none — to někteří roboti přeskakují. */
.form-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- úvod podstránky ------------------------------------------------------ */

.page-hero {
    /* Bílá jako úvod domovské stránky: vzor původní gradient v poslední úpravě odstranil. */
    background: #fff;
    padding-block: 72px 60px;
    border-bottom: 1px solid #e9f0f9;
}
.page-hero h1 {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.06;
}
.page-hero h1 span { color: var(--color-primary); }
.page-hero .lead {
    font-size: 18px;
    line-height: 1.65;
    color: var(--color-muted);
    max-width: 640px;
    margin-top: 22px;
}

.section-soft { background: var(--color-bg); border-block: 1px solid #e9f0f9; }

/* --- stránka podpory ------------------------------------------------------ */

.support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}
.support-card {
    background: #fff;
    border: 1px solid #dce7f5;
    border-radius: 24px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.support-card h2 { font-size: 28px; letter-spacing: -.04em; margin: 18px 0 14px; }
.support-card > p { font-size: 16px; line-height: 1.65; color: var(--color-muted); }
.support-card .button { margin-top: auto; }
.support-card > p + .button { margin-top: 28px; }
.support-card .text-link { margin-top: 10px; }

.facts { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; }
.facts li {
    display: grid;
    grid-template-columns: minmax(8.5rem, .8fr) minmax(0, 2fr);
    gap: 6px 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 15px;
    line-height: 1.55;
}
.facts li:last-child { border-bottom: 0; }
.facts .k { color: var(--color-muted); }
.facts .v { color: var(--color-text); font-weight: 500; overflow-wrap: anywhere; }
.facts a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Šířku omezuje jen seznam; kontejner zůstává plný, ať levý okraj sedí s ostatními sekcemi. */
.support-faq .faq-list { max-width: 860px; }
.support-faq .faq-list a,
.legal-note a { color: #005ada; text-decoration: underline; text-underline-offset: 3px; }

.company-card { max-width: 860px; }
.company-card h2 { margin-bottom: 22px; }

/* Ve dvou vedle sebe stojících kartách je hodnota na 768–1023 px moc úzká (e-mail se láme
   uprostřed adresy), takže tam řádky skládáme pod sebe stejně jako na mobilu. */
@media (max-width: 1023px) {
    .support-grid .facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --- právní dokumenty ----------------------------------------------------- */

.doc-status { color: var(--color-muted); font-size: 16px; margin-top: 18px; }
.doc-status[data-state="error"] { color: #9b2533; }

.legal-doc > p { font-size: 16px; margin-top: 16px; overflow-wrap: anywhere; }
.legal-doc > p a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.doc-frame {
    display: block;
    width: 100%;
    height: min(80vh, 920px);
    background: #fff;
    border: 1px solid #dce7f5;
    border-radius: 20px;
    box-shadow: 0 14px 38px #16417a0d;
}
.legal-note { font-size: 15px; color: var(--color-muted); margin-top: 26px; }

/* Záloha uvnitř <object>, kdyby prohlížeč PDF viewer deklaroval, ale soubor nevykreslil. */
.doc-frame > p { padding: 24px 28px; font-size: 16px; color: var(--color-muted); }
.doc-frame a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Karta místo vloženého PDF v prohlížečích, které ho na stránce zobrazit neumí. */
.doc-card {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #dce7f5;
    border-radius: 24px;
    padding: 28px 32px;
}
.doc-card__text { flex: 1 1 220px; min-width: 0; }
.doc-card__text strong { display: block; font-size: 18px; overflow-wrap: anywhere; }
.doc-card__text span { display: block; font-size: 15px; color: var(--color-muted); margin-top: 4px; }

/* --- responzivita --------------------------------------------------------- */

@media (max-width: 1023px) {
    .support-card { padding: 30px; }
}
@media (max-width: 767px) {
    .page-hero { padding-block: 48px 40px; }
    .page-hero .lead { font-size: 16px; }
    .support-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .support-card { padding: 24px; border-radius: 20px; }
    .support-card h2 { font-size: 24px; }
    .facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
    .doc-frame { height: 70vh; border-radius: 14px; }
    .doc-card { padding: 22px; border-radius: 20px; }
    .doc-card .button { width: 100%; }

    /* Právní odkazy v patičce jako sloupec 44px cílů, stejně jako navigace v patičce vzoru. */
    .footer-legal { display: flex; flex-direction: column; align-items: flex-start; }
    .footer-legal .sep { display: none; }
    .footer-legal a { min-height: 44px; display: flex; align-items: center; }
}