/*
 * AUTOBAZAR (autobazar, verze 1.0.0) - "Autobazar Pětikolka", styl webu vzoru pro nativni Builder PublicMC (S-007).
 *
 * Patri do korene webu jako /style.css (builder_verejna.php ho linkuje pred styly rendereru), proto pravidla zacinaji "body".
 * Vzhled se veze na tridy sekci (customClass), ktere editor pri ulozeni zachovava:
 *   ab-hlavicka ab-paticka ab-hero ab-cisla ab-karty ab-duvody ab-vykup ab-mapa ab-zahlavi ab-tabulka ab-otazky ab-kontakt
 *   ab-pozadi-tmave ab-pozadi-jemne (pozadi sekce; atribut background editor prepisuje)
 * Barvy = tokenPreset autobazar/cista: bila, namornicka modra a zelena cena; zaoblene karty se stinem, bezpatkove pismo.
 * Plna sirka okna, na sirokych monitorech (>= 1600 px) vetsi pismo (clamp).
 */
:root {
  --ab-modra: #0f2a4a;
  --ab-modra-svetla: #1d4673;
  --ab-zelena: #19a974;
  --ab-zelena-tmava: #10845a;
  --ab-text: #13212f;
  --ab-text-jemny: #4d5c6b;
  --ab-jemne: #f2f5f8;
  --ab-okraj: #dbe2e9;
  --ab-bok: clamp(20px, 3.4vw, 96px);
  --ab-pismo: clamp(17px, 0.55vw + 9.5px, 23px);
  --ab-zaobleni: 14px;
  --ab-pismo-rodina: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --cmc-b-primary: var(--ab-modra);
  --cmc-b-ink: var(--ab-modra);
  --cmc-b-on-ink: #fff;
  --cmc-b-surface: #fff;
  --cmc-b-page: #fff;
  --cmc-b-surface-muted: var(--ab-jemne);
  --cmc-b-text: var(--ab-text);
  --cmc-b-text-soft: var(--ab-text-jemny);
  --cmc-b-text-muted: #6a7887;
  --cmc-b-border: var(--ab-okraj);
  --cmc-b-border-strong: var(--ab-okraj);
}

body { margin: 0; background: #fff; color: var(--ab-text); font-family: var(--ab-pismo-rodina); font-size: var(--ab-pismo); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body a { color: var(--ab-modra-svetla); }
body img { max-width: 100%; }
body .cmc-b-document *, body .pmc-hlavicka *, body .pmc-paticka * { box-sizing: border-box; }

/* ---------- plna sirka ---------- */
body .cmc-b-document { max-width: none; margin: 0; padding: 0; }
body section.cmc-b-section { max-width: none; margin: 0; padding-left: var(--ab-bok); padding-right: var(--ab-bok); background: #fff; }
body .cmc-b-container { max-width: none; margin: 0; }
body .cmc-b-padY-none { padding-top: 0; padding-bottom: 0; }
body .cmc-b-padY-sm { padding-top: clamp(8px, 0.7vw, 16px); padding-bottom: clamp(8px, 0.7vw, 16px); }
body .cmc-b-padY-md { padding-top: clamp(28px, 2.6vw, 56px); padding-bottom: clamp(28px, 2.6vw, 56px); }
body .cmc-b-padY-lg { padding-top: clamp(40px, 4.2vw, 96px); padding-bottom: clamp(40px, 4.2vw, 96px); }
body .cmc-b-padY-xl { padding-top: clamp(56px, 6vw, 136px); padding-bottom: clamp(56px, 6vw, 136px); }

/* ---------- pismo ---------- */
body .cmc-b-heading { font-family: var(--ab-pismo-rodina); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ab-text); margin: 0 0 0.5em; text-wrap: balance; }
body h1.cmc-b-heading { font-size: clamp(38px, 4.2vw, 92px); }
body h2.cmc-b-heading { font-size: clamp(28px, 2.6vw, 58px); }
body h3.cmc-b-heading { font-size: clamp(18px, 1.15vw, 26px); line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; }
body .cmc-b-paragraph { font-size: var(--ab-pismo); line-height: 1.6; color: var(--ab-text-jemny); margin: 0 0 1em; }
body .cmc-b-paragraph strong { color: var(--ab-text); }
body figcaption, body .cmc-b-caption { font-size: 0.8em; color: #6a7887; margin-top: 0.6em; }

/* stitek sekce: zelena tecka */
body :is(.ab-vykup) .cmc-b-column > p.cmc-b-paragraph:first-child,
body .ab-hero > .cmc-b-container > p.cmc-b-paragraph:first-child {
  display: inline-flex; align-items: center; gap: 0.55em; padding: 0.35em 0.9em; border-radius: 999px; background: rgba(25, 169, 116, .12);
  font-size: 0.78em; font-weight: 650; letter-spacing: 0.02em; color: var(--ab-zelena-tmava); margin-bottom: 1.2em;
}
body :is(.ab-vykup) .cmc-b-column > p.cmc-b-paragraph:first-child::before,
body .ab-hero > .cmc-b-container > p.cmc-b-paragraph:first-child::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--ab-zelena); flex: none; }

/* ---------- tlacitka: zaoblena ---------- */
body :where(p).cmc-b-button { margin: 1.3em 0.6em 0 0; display: inline-block; max-width: 100%; }
body a.cmc-b-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0.7em 1.5em; border-radius: 10px;
  font-family: var(--ab-pismo-rodina); font-size: 0.92em; font-weight: 650; text-decoration: none; border: 2px solid var(--ab-zelena); background: var(--ab-zelena); color: #fff;
  box-sizing: border-box; max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body a.cmc-b-button:hover, body a.cmc-b-button:focus-visible { background: var(--ab-zelena-tmava); border-color: var(--ab-zelena-tmava); box-shadow: 0 8px 20px rgba(16, 132, 90, .25); }
body a.cmc-b-button:focus-visible { outline: 3px solid var(--ab-modra); outline-offset: 3px; }
body a.cmc-b-button-secondary { background: var(--ab-modra); border-color: var(--ab-modra); }
body a.cmc-b-button-outline { background: #fff; border-color: var(--ab-okraj); color: var(--ab-modra); }
body a.cmc-b-button-outline:hover { background: #fff; border-color: var(--ab-modra); color: var(--ab-modra); box-shadow: none; }
body a.cmc-b-button-link { background: none; border-color: transparent; color: var(--ab-modra-svetla); padding-left: 0; padding-right: 0; min-height: 44px; }
body a.cmc-b-button-link::after { content: "\203A"; font-size: 1.3em; line-height: 1; }
body a.cmc-b-button-link:hover { background: none; border-color: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; color: var(--ab-modra); }

/* ---------- sloupce, obrazky ---------- */
body .cmc-b-columns { gap: clamp(16px, 1.8vw, 40px); margin: clamp(22px, 2vw, 44px) 0 0; }
body .cmc-b-columns.cmc-b-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .cmc-b-columns.cmc-b-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .cmc-b-columns.cmc-b-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body .cmc-b-column { background: none; border: 0; padding: 0; min-width: 0; }
body .cmc-b-column > :last-child { margin-bottom: 0; }
body .cmc-b-image { margin: 0; }
body .cmc-b-image img { width: 100%; height: auto; border-radius: var(--ab-zaobleni); display: block; }
body hr.cmc-b-divider { border: 0; border-top: 1px solid var(--ab-okraj); margin: clamp(22px, 2vw, 40px) 0; }

/* ---------- pozadi ---------- */
body section.ab-pozadi-tmave { background: var(--ab-modra); color: #dfe8f1; }
body section.ab-pozadi-jemne { background: var(--ab-jemne); }
body .ab-pozadi-tmave .cmc-b-heading { color: #fff; }
body .ab-pozadi-tmave .cmc-b-paragraph { color: #b9c8d8; }
body .ab-pozadi-tmave .cmc-b-paragraph strong { color: #fff; }

/* ---------- hlavicka: horni pruh + radek s logem, neni lepkava ---------- */
body .pmc-hlavicka { background: #fff; border-bottom: 1px solid var(--ab-okraj); }
body .ab-hlavicka > .cmc-b-container { display: flex; flex-wrap: wrap; align-items: center; gap: 4px clamp(14px, 1.8vw, 36px); }
body .ab-hlavicka :where(p).cmc-b-button { margin: 0; }
body .ab-hlavicka > .cmc-b-container > p.cmc-b-paragraph:first-child {
  flex: 0 0 calc(100% + 2 * var(--ab-bok)); margin: 0 calc(-1 * var(--ab-bok)) clamp(8px, 0.8vw, 14px); padding: 6px var(--ab-bok);
  background: var(--ab-jemne); border-bottom: 1px solid var(--ab-okraj); font-size: 0.74em; text-align: right; color: var(--ab-text-jemny); line-height: 1.6;
}
body .ab-hlavicka > .cmc-b-container > p.cmc-b-paragraph:first-child a { color: var(--ab-zelena-tmava); font-weight: 650; display: inline-block; min-height: 24px; }
body .ab-hlavicka > .cmc-b-container > p.cmc-b-paragraph:first-child em { color: #8a97a4; }
body .ab-hlavicka > .cmc-b-container > p:nth-child(2) { margin-right: auto; }
body .ab-hlavicka > .cmc-b-container > p:nth-child(2) a.cmc-b-button-link { font-size: clamp(24px, 1.7vw, 36px); font-weight: 800; letter-spacing: -0.03em; color: var(--ab-modra); gap: 0.35em; }
body .ab-hlavicka > .cmc-b-container > p:nth-child(2) a.cmc-b-button-link::before {
  content: ""; width: 1.15em; height: 1.15em; border-radius: 50%; flex: none;
  background: radial-gradient(circle, var(--ab-zelena) 0 28%, transparent 30%), conic-gradient(var(--ab-modra) 0 20%, #fff 0 22%, var(--ab-modra) 0 42%, #fff 0 44%, var(--ab-modra) 0 64%, #fff 0 66%, var(--ab-modra) 0 86%, #fff 0 88%, var(--ab-modra) 0);
}
body .ab-hlavicka > .cmc-b-container > p:nth-child(2) a.cmc-b-button-link::after { content: none; }
body .ab-hlavicka > .cmc-b-container > p:nth-child(2) a.cmc-b-button-link:hover { text-decoration: none; }
body .ab-hlavicka a.cmc-b-button-link { color: var(--ab-text); font-weight: 600; font-size: 0.9em; }
body .ab-hlavicka a.cmc-b-button-link::after { content: none; }
body .ab-hlavicka a.cmc-b-button-primary { min-height: 46px; padding: 0.55em 1.2em; font-size: 0.86em; }

/* ---------- hero: na stred, stitky filtru, obrazek pod textem ---------- */
body .ab-hero > .cmc-b-container { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; padding: 0 var(--ab-bok); }
body section.ab-hero { padding-left: 0; padding-right: 0; background: linear-gradient(180deg, #eaf1f7 0%, #fff 70%); }
body .ab-hero > .cmc-b-container > :is(h1, p.cmc-b-paragraph:not(:first-child)) { flex: 0 0 100%; margin-left: auto; margin-right: auto; }
body .ab-hero h1.cmc-b-heading { padding: 0 max(0px, calc((100% - 20ch) / 2)); font-size: clamp(38px, 4.6vw, 104px); letter-spacing: -0.035em; }
body .ab-hero > .cmc-b-container > p.cmc-b-paragraph:nth-child(3) { padding: 0 max(0px, calc((100% - 52ch) / 2)); font-size: clamp(18px, 1.2vw, 26px); }
body .ab-hero :where(p).cmc-b-button { margin: 0.4em 0.25em 0; }
body .ab-hero a.cmc-b-button-outline { min-height: 44px; padding: 0.4em 1.1em; border-radius: 999px; font-size: 0.86em; }
body .ab-hero a.cmc-b-button-outline:hover { background: var(--ab-modra); border-color: var(--ab-modra); color: #fff; }
body .ab-hero > .cmc-b-container > figure { flex: 0 0 100%; margin-top: clamp(28px, 3vw, 64px); }
body .ab-hero > .cmc-b-container > figure img { aspect-ratio: 21 / 8; object-fit: cover; border-radius: clamp(14px, 1.4vw, 28px); }

/* ---------- pruh cisel ---------- */
body .ab-cisla .cmc-b-columns { margin: 0; }
body .ab-cisla .cmc-b-column > p:first-child { margin: 0; line-height: 1.1; }
body .ab-cisla .cmc-b-column > p:first-child strong { font-size: clamp(30px, 2.6vw, 58px); font-weight: 800; letter-spacing: -0.03em; color: #6fe0b4; }
body .ab-cisla .cmc-b-column > p:last-child { margin: 0.3em 0 0; font-size: 0.9em; }
body .ab-cisla > .cmc-b-container > p.cmc-b-paragraph:last-child { margin: 1.4em 0 0; font-size: 0.76em; }

/* ---------- karty vozu ---------- */
body .ab-karty > .cmc-b-container > p.cmc-b-paragraph:nth-child(2) { max-width: 70ch; }
body .ab-karty .cmc-b-columns + .cmc-b-columns { margin-top: clamp(16px, 1.8vw, 40px); }
body .ab-karty .cmc-b-column { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ab-okraj); border-radius: var(--ab-zaobleni); padding: 0 0 clamp(14px, 1.2vw, 24px); overflow: hidden; box-shadow: 0 8px 24px rgba(15, 42, 74, .08); transition: transform .15s ease, box-shadow .15s ease; }
body .ab-karty .cmc-b-column:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15, 42, 74, .14); }
body .ab-karty .cmc-b-column > figure img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
body .ab-karty .cmc-b-column > :not(figure) { margin-left: clamp(14px, 1.2vw, 24px); margin-right: clamp(14px, 1.2vw, 24px); }
body .ab-karty .cmc-b-column > h3.cmc-b-heading { margin-top: 0.9em; margin-bottom: 0.25em; }
body .ab-karty .cmc-b-column > p.cmc-b-paragraph:nth-of-type(1) { font-size: 0.82em; margin-bottom: 0.6em; }
body .ab-karty .cmc-b-column > p.cmc-b-paragraph:nth-of-type(2) { margin: auto clamp(14px, 1.2vw, 24px) 0; padding-top: 0.5em; border-top: 1px solid var(--ab-okraj); }
body .ab-karty .cmc-b-column > p.cmc-b-paragraph:nth-of-type(2) strong { font-size: 1.3em; font-weight: 800; letter-spacing: -0.02em; color: var(--ab-modra); }
body .ab-karty .cmc-b-column > p.cmc-b-button { margin-top: 0.2em; }
body .ab-karty > .cmc-b-container > p.cmc-b-button:last-child { margin-top: 2em; }

/* ---------- duvody ---------- */
body .ab-duvody .cmc-b-column { position: relative; padding-top: 3.6em; }
body .ab-duvody .cmc-b-column::before { content: "\2713"; position: absolute; top: 0; left: 0; width: 2.4em; height: 2.4em; display: grid; place-items: center; border-radius: 12px; background: rgba(25, 169, 116, .12); color: var(--ab-zelena-tmava); font-weight: 800; }
body .ab-duvody > .cmc-b-container > p.cmc-b-paragraph:last-child { margin-top: 1.6em; font-size: 0.8em; }

/* ---------- vykup ---------- */
body .ab-vykup .cmc-b-columns { margin: 0; align-items: center; }
body .ab-vykup .cmc-b-column > p.cmc-b-paragraph:first-child { background: rgba(111, 224, 180, .14); color: #6fe0b4; }
body .ab-vykup .cmc-b-column > p.cmc-b-paragraph:has(> strong:first-child) { margin-bottom: 0.6em; }
body .ab-vykup .cmc-b-column > p.cmc-b-paragraph > strong:first-child { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; margin-right: 0.5em; border-radius: 50%; background: var(--ab-zelena); color: #fff; font-size: 0.85em; }

/* ---------- mapa na uvodu ---------- */
body .ab-mapa .cmc-b-columns { margin: 0; align-items: center; }
body .ab-mapa .cmc-b-image img { aspect-ratio: 2 / 1; object-fit: cover; }

/* ---------- zahlavi podstranek ---------- */
body .ab-zahlavi { border-bottom: 1px solid var(--ab-okraj); }
body .ab-zahlavi > .cmc-b-container > p.cmc-b-paragraph { max-width: 70ch; font-size: clamp(18px, 1.1vw, 24px); }
body .ab-zahlavi :where(p).cmc-b-button { margin: 0.4em 0.4em 0 0; }
body .ab-zahlavi a.cmc-b-button { min-height: 44px; padding: 0.4em 1.1em; border-radius: 999px; font-size: 0.86em; }

/* ---------- tabulka splatek ---------- */
body .ab-tabulka > .cmc-b-container > p.cmc-b-paragraph:nth-child(2) { max-width: 72ch; }
body .ab-tabulka .cmc-b-columns { gap: 0; background: #fff; border: 1px solid var(--ab-okraj); border-radius: var(--ab-zaobleni); overflow: hidden; }
body .ab-tabulka .cmc-b-column { border-left: 1px solid var(--ab-okraj); }
body .ab-tabulka .cmc-b-column:first-child { border-left: 0; background: #f8fafc; }
body .ab-tabulka .cmc-b-column > p.cmc-b-paragraph { margin: 0; padding: 0.85em clamp(12px, 1.2vw, 24px); border-top: 1px solid var(--ab-okraj); font-variant-numeric: tabular-nums; color: var(--ab-text); }
body .ab-tabulka .cmc-b-column > p.cmc-b-paragraph:first-child { border-top: 0; background: var(--ab-modra); color: #fff; font-weight: 650; font-size: 0.86em; }

/* ---------- otazky: karty s otazkou ---------- */
body .ab-otazky h3.cmc-b-heading { position: relative; margin: 0; padding: 1em 2.4em 0.4em 0; border-top: 1px solid var(--ab-okraj); }
body .ab-otazky h3.cmc-b-heading::after { content: "?"; position: absolute; right: 0; top: 0.9em; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; background: var(--ab-jemne); color: var(--ab-modra); font-size: 0.85em; }
body .ab-otazky .cmc-b-paragraph { margin: 0 0 1em; max-width: 72ch; }

/* ---------- kontakt ---------- */
body .ab-kontakt .cmc-b-columns { margin: 0; align-items: center; }
body .ab-kontakt .cmc-b-column:first-child { background: #fff; border-radius: var(--ab-zaobleni); padding: clamp(22px, 2.4vw, 52px); box-shadow: 0 8px 24px rgba(15, 42, 74, .08); }
body .ab-kontakt .cmc-b-column:first-child > p.cmc-b-paragraph:nth-child(3) strong { font-size: clamp(26px, 2.2vw, 48px); font-weight: 800; letter-spacing: -0.02em; color: var(--ab-modra); }
body .ab-kontakt .cmc-b-column:first-child > p.cmc-b-paragraph:nth-child(4) strong { font-size: 1.1em; overflow-wrap: anywhere; }

/* ---------- paticka ---------- */
body .pmc-paticka { background: var(--ab-jemne); }
body .ab-paticka .cmc-b-columns { margin-top: 0; }
body .ab-paticka .cmc-b-column > p.cmc-b-paragraph:first-child strong { font-size: clamp(24px, 1.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; color: var(--ab-modra); }
body .ab-paticka h3.cmc-b-heading { font-size: clamp(16px, 0.95vw, 21px); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ab-modra); }
body .ab-paticka :where(p).cmc-b-button { display: block; margin: 0; }
body .ab-paticka a.cmc-b-button-link { min-height: 36px; padding: 0; color: var(--ab-text-jemny); font-weight: 500; }
body .ab-paticka a.cmc-b-button-link::after { content: none; }
body .ab-paticka > .cmc-b-container > p.cmc-b-paragraph:last-child { font-size: 0.76em; margin: 0; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  body .cmc-b-columns.cmc-b-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  body .ab-tabulka .cmc-b-columns.cmc-b-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; }
  body .ab-karty .cmc-b-columns.cmc-b-cols-4 { row-gap: clamp(16px, 1.8vw, 40px); }
}

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  body .cmc-b-columns.cmc-b-cols-2, body .cmc-b-columns.cmc-b-cols-3 { grid-template-columns: 1fr; }
  body .cmc-b-columns.cmc-b-cols-4 { grid-template-columns: 1fr; }
  body .ab-cisla .cmc-b-columns.cmc-b-cols-4, body .ab-karty .cmc-b-columns.cmc-b-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body .ab-tabulka .cmc-b-columns.cmc-b-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body .ab-tabulka .cmc-b-column > p.cmc-b-paragraph { padding: 0.7em 6px; font-size: 13px; }
  body .ab-hlavicka > .cmc-b-container { gap: 0 14px; }
  body .ab-hlavicka > .cmc-b-container > p.cmc-b-paragraph:first-child { text-align: left; font-size: 12px; }
  body .ab-hlavicka > .cmc-b-container > p:last-child { order: 1; flex: 0 0 100%; margin: 6px 0 4px; }
  body .ab-hlavicka > .cmc-b-container > p:last-child a.cmc-b-button { width: 100%; }
  body .ab-hlavicka > .cmc-b-container > p:nth-child(2) { flex: 0 0 100%; }
  body .ab-hlavicka a.cmc-b-button-link { font-size: 15px; }
  body .ab-hero h1.cmc-b-heading { padding: 0; }
  body .ab-hero > .cmc-b-container > figure img { aspect-ratio: 4 / 3; }
  body .ab-karty .cmc-b-column > :not(figure) { margin-left: 10px; margin-right: 10px; }
  body .ab-karty .cmc-b-column > p.cmc-b-paragraph:nth-of-type(2) { margin-left: 10px; margin-right: 10px; }
  body .ab-karty .cmc-b-column > h3.cmc-b-heading { font-size: 15px; }
  body .ab-karty .cmc-b-column > p.cmc-b-paragraph { font-size: 13px; }
  body .ab-karty .cmc-b-column > p.cmc-b-paragraph:nth-of-type(2) strong { font-size: 17px; }
  body .ab-karty a.cmc-b-button-link { font-size: 14px; }
  body .ab-vykup .cmc-b-columns, body .ab-mapa .cmc-b-columns, body .ab-kontakt .cmc-b-columns { row-gap: 28px; }
  body .ab-mapa .cmc-b-columns > .cmc-b-column:first-child { order: 1; }
  body .ab-karty > .cmc-b-container > p.cmc-b-button:last-child a, body .ab-duvody > .cmc-b-container > p.cmc-b-button a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body a.cmc-b-button, body .ab-karty .cmc-b-column { transition: none; }
  body .ab-karty .cmc-b-column:hover { transform: none; }
}