/* Nedomatrans / autorský systém.
   Paleta = modul, pás = dvojitý rail, trasa = šipka. Původní grid,
   lokální Ubuntu, obsah a interakce šablony zůstávají zdrojem pravdy. */
:root {
  --ndm-edge: #A39B9C;   /* neutrální teplá šeď, ne červená */
  --ndm-time: 180ms;
}
::selection { background: var(--cerv); color: var(--bila); }
html { scrollbar-color: #A39B9C #F2F1EE; }
input, textarea { caret-color: var(--akcent); }
a { text-underline-offset: .2em; }

/* Přezka: text a ikona mají vlastní kapsu v jednom měkkém rámu. */
.tl, .obsah-text .wp-block-button__link {
  min-height: 54px; border-radius: 16px; gap: 13px;
  background: var(--prechod-cerv); color: var(--bila);
  box-shadow: inset 0 0 0 999px transparent;
  transition: box-shadow var(--ndm-time) var(--ease), transform var(--ndm-time) var(--ease);
}
.tl:hover, .obsah-text .wp-block-button__link:hover { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--cerv-noc) 16%, transparent); }
.tl:active { transform: translateY(1px); box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--cerv-noc) 30%, transparent); }
.tl:has(> .ndm-arrow) { padding-right: 7px; }
.tl > .ndm-arrow {
  width: 38px; height: 38px; padding: 9px; margin: 0 0 0 5px;
  border-radius: 11px; background: rgb(255 255 255 / .14); overflow: visible;
}
.tl:hover > .ndm-arrow { transform: none; }
.tl > .ndm-arrow > g { transition: transform var(--ndm-time) var(--ease); }
.tl:hover > .ndm-arrow > g { transform: translateX(2px); }
.tl--ikona { padding-left: 7px; }
.tl-ikona { width: 38px; height: 38px; border-radius: 11px; }
.tl--na-laku .tl-ikona { background: var(--cerv-tint); color: var(--akcent); }
.tl--maly { min-height: 44px; border-radius: 13px; }
.tl--maly .tl-ikona { width: 32px; height: 32px; border-radius: 9px; }
.tl--maly > .ndm-arrow { width: 30px; height: 30px; padding: 6px; border-radius: 8px; }
.tl--tonal, .tl--tonal:hover { background: var(--cerv-tint); color: var(--akcent); }
.tl--tonal > .ndm-arrow { background: color-mix(in srgb, var(--cerv) 8%, transparent); }
.tl--tonal:hover { background: color-mix(in oklab, var(--cerv) 14%, var(--list)); }
.tl--na-laku, .tl--karta { background: var(--bila); color: var(--akcent); }
.tl--na-laku:hover, .tl--karta:hover { background: color-mix(in oklab, var(--cerv) 5%, var(--bila)); }
.tl--na-laku > .ndm-arrow, .tl--karta > .ndm-arrow { background: var(--cerv-tint); }
.lakova .tl--na-tmave, .tl--na-tmave {
  background: color-mix(in srgb, var(--cerv-noc) 52%, transparent); color: var(--bila); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
}
.lakova .tl--na-tmave:hover, .tl--na-tmave:hover { background: color-mix(in srgb, var(--cerv-noc) 72%, transparent); }
.tl--outline { background: transparent; color: var(--akcent); box-shadow: inset 0 0 0 1.5px var(--akcent); }
.tl--outline:hover { background: var(--cerv-tint); }
.tl--outline > .ndm-arrow { background: var(--cerv-tint); }
.tl--dark { background: var(--text); }
.tl--dark:hover { background: #3B363B; }
.tl--icon { width: 54px; padding: 0; }
.tl--icon svg { width: 22px; height: 22px; margin: 0; }
.tl:disabled, .tl[aria-disabled="true"] {
  color: #71696C; background: #E5E1DD; box-shadow: none; cursor: not-allowed; transform: none;
}
.tl:disabled > .ndm-arrow > g { transform: none; }
.tl:focus-visible, .wp-block-button__link:focus-visible {
  outline: 2px solid var(--akcent); outline-offset: 5px; box-shadow: inset 0 0 0 999px transparent, 0 0 0 3px var(--bila);
}
.lakova .tl:focus-visible, .tmava .tl:focus-visible { outline-color: var(--bila); box-shadow: 0 0 0 3px var(--akce-stisk); }
.odkaz { gap: 9px; }
.odkaz .ndm-arrow { width: 22px; height: 22px; }

/* Štítek nákladu: drobný zaoblený obdélník. */
.stitek { border-radius: 10px; }
.menu-seznam a { border-radius: 10px; }
.menu-seznam .current-menu-item > a { color: var(--akcent); }
.burger { border-radius: 13px; }


/* Značka rampy sedí vedle nadpisu. Na každé kartě pouze jeden detail. */
.sekce-hlava .h2 { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .24em; }
.ndm-section-mark { width: 30px; height: 30px; color: var(--akcent); margin-right: 10px; flex: none; }
.sluzba::after {
  content: ""; position: absolute; z-index: 3; right: 22px; top: 24px; width: 28px; height: 28px;
  background: url('../brand/system/section-marks/dock-corner.svg') center / contain no-repeat;
  opacity: .5; pointer-events: none; transition: opacity var(--ndm-time) var(--ease);
}
.sluzba-nazev { left: 30px; right: 62px; text-align: left; max-width: 18ch; }
.sluzba:hover::after { opacity: 1; }
.sluzba { outline: 1px solid rgb(29 30 34 / .05); outline-offset: -1px; }

/* Popruhové vodítko v mapě zůstává mimo názvy zemí a faktický obsah. */
.mapa-cil .stitek { border-radius: 9px; box-shadow: 0 2px 6px rgb(22 22 26 / .10); }
.mapa-cil--start .stitek { background: var(--prechod-cerv); }
.mapa-cil::before { box-shadow: inset 0 0 0 3px var(--akcent), 0 1px 3px rgb(22 22 26 / .2); }
.faq-ikona { border-radius: 50%; }
.faq-polozka.je-otevrena .faq-ikona { background: var(--akce); }
.faq-otazka:hover .faq-otazka-text { color: var(--akcent); }

/* Pás kontaktu: vzor je jen při vnějších okrajích, text má čisté místo. */
.vyzva-pul { position: relative; isolation: isolate; }
.vyzva-pul--tel {
  background: var(--prechod-cerv);
  box-shadow: inset 0 0 0 999px transparent;
  transition: box-shadow .25s var(--ease);
}
.vyzva-pul--tel:hover {
  background: var(--prechod-cerv);
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--cerv-noc) 15%, transparent);
}
.vyzva-pul::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../brand/system/patterns/strap.svg') left center / 144px 80px repeat;
  filter: brightness(0) invert(1); opacity: .07;
  mask-image: linear-gradient(0deg, #000, transparent 75%);
}
.vyzva-pul--email::before { background-image: url('../brand/system/patterns/cargo-grid.svg'); background-size: 112px 112px; opacity: .055; }
.vyzva-kloub::before { border-width: 1.5px; }
.vyzva-ikona { border-radius: 10px; }

/* Vedlejší stránky sdílejí stejné komponenty. */
.vuz-karta { position: relative; overflow: hidden; }
/* Model-specific silhouettes; decoration only, no changes to card sizing. */
.vuz-karta[data-vuz="ducato-plachta"] { --vuz-watermark: url('../brand/system/vehicles/ducato-plachta.svg'); }
.vuz-karta[data-vuz="transit-plachta"] { --vuz-watermark: url('../brand/system/vehicles/transit-plachta.svg'); }
.vuz-karta[data-vuz="ducato-skrin"] { --vuz-watermark: url('../brand/system/vehicles/ducato-skrin.svg'); }
.vuz-karta[data-vuz="master-skrin"] { --vuz-watermark: url('../brand/system/vehicles/master-skrin.svg'); }
.vuz-karta::after {
  content: ""; position: absolute; right: 2px; bottom: 7px; width: min(168px, 58%); height: 84px;
  background: var(--vuz-watermark, none) right bottom / contain no-repeat; opacity: .085; pointer-events: none;
}
.vuz-karta .stitek { background: var(--cerv-tint); color: var(--akcent); }
.vp-ovladani { border-radius: 16px; gap: 4px; padding: 5px; }
.vp-ovladani button { border-radius: 11px; min-height: 44px; }
.vp-ovladani button[aria-pressed="true"] { background: var(--akce); color: var(--bila); box-shadow: none; }
.dispecink-panel { background: var(--prechod-cerv); }

/* Reusable pole, bez závislosti na formulářovém pluginu.
   Label je vždy viditelný; placeholder nikdy nenahrazuje popisek. */
.ndm-field { display: grid; gap: 8px; }
.ndm-field > label { font-size: 16px; font-weight: 500; }
.ndm-input-wrap { position: relative; }
.ndm-input-wrap > .ikona { position: absolute; top: 17px; left: 17px; width: 22px; height: 22px; color: var(--akcent); pointer-events: none; }
.ndm-input, .ndm-select, .ndm-textarea {
  display: block; width: 100%; min-height: 56px; padding: 14px 16px;
  border: 1px solid var(--ndm-edge); border-radius: 14px; background: var(--bila); color: var(--text);
  font: 400 17px/1.5 var(--f-text); transition: border-color var(--ndm-time) var(--ease);
}
.ndm-input-wrap > .ikona ~ .ndm-input { padding-left: 52px; }
.ndm-input::placeholder, .ndm-textarea::placeholder { color: #6E6569; opacity: 1; }
.ndm-input:hover, .ndm-select:hover, .ndm-textarea:hover { border-color: var(--akcent); }
.ndm-input:focus-visible, .ndm-select:focus-visible, .ndm-textarea:focus-visible { border-color: var(--akcent); outline: 2px solid var(--akcent); outline-offset: 3px; }
.ndm-input[aria-invalid="true"], .ndm-textarea[aria-invalid="true"] { border: 2px solid var(--akcent); }
.ndm-hint, .ndm-error { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.ndm-error { color: var(--akcent); font-weight: 500; }
.ndm-input:disabled { background: var(--list-2); color: #71696C; cursor: not-allowed; }
.ndm-textarea { resize: vertical; min-height: 140px; }
.ndm-filter { min-height: 46px; padding: 11px 19px; border: 1px solid #C7BFC0; border-radius: 999px; font: 500 16px/1.3 var(--f-text); background: transparent; color: var(--text); cursor: pointer; }
.ndm-filter[aria-pressed="true"] { background: var(--cerv-tint); color: var(--akcent); border-color: var(--akcent); }
.ndm-filter:hover { border-color: var(--akcent); }

@media (max-width: 900px) {
  .sluzba-nazev { max-width: 24ch; }
}
@media (max-width: 760px) {
  .sluzba-nazev { top: 25px; left: 24px; right: 52px; max-width: 20ch; font-size: clamp(22px, 6vw, 31px); }
  .sluzba::after { right: 18px; top: 24px; width: 24px; height: 24px; }
  .ndm-section-mark { width: 24px; height: 24px; margin-right: 5px; }
  .mapa-cil .stitek { border-radius: 8px; }
}
@media (max-width: 380px) {
  .vyzva-hodnota { font-size: 23px; }
  .vyzva-pul--email .vyzva-hodnota { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl:hover > .ndm-arrow > g, .tl:active { transform: none; }
  .odkaz:hover svg { transform: none; }
}