/* ==========================================================================
   Components — patterns that repeat across sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.section {
  padding: var(--section-y) var(--gutter);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
}

.container--narrow { max-width: 900px; }

/* Section intro block: eyebrow + h2 + optional lead */
.section-head {
  max-width: 700px;
  /* Plynulý náběh: ~42px na tabletu (730px) → 56px na desktopu (1440px),
     což je hodnota z návrhu. Původní ramp dával na tabletu jen 32px
     a obsah se lepil na nadpis. */
  margin-bottom: clamp(34px, 27.6px + 1.97vw, 56px);
}

.section-head > .lead { margin-top: 16px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-red);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--c-red);
}

.eyebrow--on-dark { color: var(--c-red-on-dark-3); }

.h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--c-text-muted);
}

.lead--ink { color: var(--c-text); }
.lead--on-dark { color: var(--c-on-dark-body); line-height: 1.65; }

/* Gradient highlight inside a heading.

   Spodní odsazení tam je kvůli dotahům (j, y, p) — bez něj vylézají z boxu.
   V návrhu jsou pak bílé na světlém pozadí a prakticky zmizí; při odkrývání
   dvěma vrstvami by navíc prosvítala tmavá spodní vrstva. Záporný margin
   ten přírůstek vrací, takže se nemění řádkování. */
.mark {
  display: inline-block;
  padding: 0 .16em .1em;
  margin-bottom: -.1em;
  background: var(--grad-cta);
  color: #fff;
}

/* An inline-block creates a wrap opportunity on both sides, which can leave
   the punctuation after a highlight stranded on its own line. */
.nb { white-space: nowrap; }

/* `nowrap` se dědí dovnitř; uvnitř ho vracíme, aby dlouhé zvýraznění mohlo
   v krajním případě raději zalomit než přetéct. Velikost nadpisu je nastavená
   tak, aby k tomu nedocházelo — viz --fs-h1. */
.nb > .mark { white-space: normal; }

/* Long / short spelling of the same place name. `.t-abbr` takes over below
   900px, where the full name would collide with the diagram rings or push
   the sticky bar onto a second line. */
.t-abbr { display: none; }

/* --------------------------------------------------------------------------
   Přetažení zvýraznění

   Zvýraznění je bílý text na barevném bloku. Kdyby se odkrýval jen ten blok,
   na světlých sekcích by byl text do dojetí tahu bílý na bílém. Proto jsou
   vrstvy dvě: spodní čitelná v barvě sekce a přes ni ořezávaná kopie
   s blokem a bílým textem. Odkrývají se současně, takže každé písmeno
   přebarví přesně ve chvíli, kdy přes něj tah přejede.

   Aktivní je to až když JS druhou vrstvu vytvoří — bez JS zůstává zvýraznění
   přesně tak, jak je navržené.
   -------------------------------------------------------------------------- */

.js-wipe .mark {
  position: relative;
  background-image: none;
  color: var(--c-ink);
}

/* Na tmavých sekcích musí být spodní vrstva světlá. */
.js-wipe .hero__title .mark,
.js-wipe .reassure .mark {
  color: #F4F2EE;
}

.mark__fill {
  position: absolute;
  inset: 0;
  padding: inherit;
  pointer-events: none;
  background-image: var(--grad-cta);
  color: #fff;
  clip-path: inset(0 100% 0 0);
}

/* Kopie textu je v atributu a vykresluje ji ::after — nedostane se tak do
   textContent, do výběru myší ani do stromu přístupnosti. */
.mark__fill::after { content: attr(data-text); }

.mark.is-wiped .mark__fill {
  animation: markWipe .55s cubic-bezier(.2, .7, .3, 1) both;
}

/* Hlavní nadpis navazuje na nájezd textu. */
.hero__title .mark.is-wiped .mark__fill { animation-delay: .5s; }

/* Bez animací se vrací statická podoba z návrhu. */
@media (prefers-reduced-motion: reduce) {
  .js-wipe .mark {
    background-image: var(--grad-cta);
    color: #fff;
  }

  .mark__fill { display: none; }
}

/* Gradient text (no background block) */
/* `background-image`, never the `background` shorthand: the shorthand would
   reset `background-clip` and the gradient would paint as a solid block. */
.gradient-text {
  width: max-content;
  max-width: 100%;
  background-image: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gradient-text--warm { background-image: var(--grad-warm-text); }

/* --------------------------------------------------------------------------
   Icons (inline SVG sprite)
   -------------------------------------------------------------------------- */

.icon {
  flex: none;
  width: var(--icon-size, 18px);
  height: var(--icon-size, 18px);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* German flag swatch (three stacked bands) */
.flag {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  width: var(--flag-w, 20px);
  height: var(--flag-h, 14px);
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}

.flag--on-light { box-shadow: 0 0 0 1px rgba(18, 24, 31, .12); }
.flag > span { flex: 1; }
.flag > span:nth-child(1) { background: #16161A; }
.flag > span:nth-child(2) { background: #DA000F; }
.flag > span:nth-child(3) { background: #F5C518; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 16px 28px;
  border-radius: var(--r-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base),
              background var(--t-base), border-color var(--t-base), color var(--t-base);
}

.btn--primary {
  background: var(--grad-cta);
  color: #fff;
  animation: omPulse 4.5s ease-out infinite;
}

@media (hover: hover) {
  .btn--primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--sh-cta-hover);
  }
}

.btn--primary:active { transform: translateY(0); }

/* The pulse would fight the hover shadow — stop it while hovered or focused.
   The focus half stays outside the media query: a touch device can still have
   a keyboard attached. */
.btn--primary:focus-visible { animation: none; }

@media (hover: hover) {
  .btn--primary:hover { animation: none; }
}

.btn--lg {
  padding: 17px 32px;
  font-size: 16px;
}

.btn--sm {
  min-height: 44px;
  padding: 12px 22px;
  font-size: 14px;
}

.btn--block {
  width: 100%;
  padding: 18px 24px;
  font-size: 17px;
}

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, .28);
  color: #F4F2EE;
  font-weight: 500;
  transition: all .25s ease;
}

@media (hover: hover) {
  .btn--ghost:hover {
    background: rgba(255, 255, 255, .10);
    border-color: #fff;
    color: #F4F2EE;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
  }
}

.btn__arrow-down { animation: omFloat 2.6s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Pills
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  line-height: 1.3;
}

.pill--dark {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #E4E9ED;
}

.pill--light {
  padding: 10px 18px;
  font-size: 15px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  font-weight: 600;
  color: var(--c-ink);
  transition: all var(--t-base);
}

@media (hover: hover) {
  .pill--light:hover {
    border-color: rgba(218, 0, 15, .5);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(218, 0, 15, .12);
  }
}

.pill--badge {
  background: var(--c-red);
  border: 1px solid var(--c-red);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  box-shadow: 0 8px 22px rgba(218, 0, 15, .35);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--card-pad);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  transition: transform var(--t-slow), box-shadow var(--t-slow),
              background var(--t-slow), border-color var(--t-slow);
}

/* --------------------------------------------------------------------------
   Zalamování

   `balance` u krátkých titulků vyrovná délku řádků, takže na posledním
   nezůstane osamocené slovo („…hození do / vody“).
   `pretty` u delších odstavců řeší jen poslední řádky; kde ho prohlížeč
   neumí, prostě se neuplatní.
   -------------------------------------------------------------------------- */

.card__title,
.rail__title,
.panel__title,
.quote__name,
.contact-card__lead,
.cta-band__label {
  text-wrap: balance;
}

.card__body,
.rail__text,
.lead,
.cta-band__copy,
.quote__text,
.money__text,
.checklist__item {
  text-wrap: pretty;
}

.card__title {
  font-size: var(--fs-card-title);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.35;
}

.card__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   Checklist rows (Pro koho / Koho hledáme)
   -------------------------------------------------------------------------- */

.panel {
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--r-xl);
  box-shadow: 0 10px 30px rgba(18, 24, 31, .05);
  transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t-slow);
}

.panel--warm {
  background: var(--c-warm-3);
  border: 1px solid var(--c-border-warm);
}

@media (hover: hover) {
  .panel--warm:hover {
    transform: translateY(-5px);
    border-color: rgba(240, 98, 15, .5);
    box-shadow: 0 24px 54px rgba(218, 0, 15, .16);
  }
}

.panel--dark {
  background: var(--c-ink);
  color: #F4F2EE;
  box-shadow: var(--sh-panel-dark);
}

@media (hover: hover) {
  .panel--dark:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, .34);
  }
}

.panel__title {
  margin-bottom: 20px;
  font-size: clamp(19px, 17.4px + 0.43vw, 22px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.panel__title--gradient {
  width: max-content;
  max-width: 100%;
  background-image: var(--grad-icon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.panel__title--red { color: var(--c-red-on-dark); }
.checklist { display: flex; flex-direction: column; }

.checklist__item {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  margin-inline: -12px;
  padding: 13px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  line-height: 1.6;
  transition: transform var(--t-fast), background var(--t-fast);
}

@media (hover: hover) {
  .checklist__item:hover { transform: translateX(6px); }
}

@media (hover: hover) {
  .panel--warm .checklist__item:hover { background: rgba(218, 0, 15, .05); }
}
@media (hover: hover) {
  .panel--dark .checklist__item:hover { background: rgba(255, 255, 255, .05); }
}

.panel--dark .checklist__item { color: var(--c-on-dark); }

.checklist__mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--mark-size, 30px);
  height: var(--mark-size, 30px);
  border-radius: 50%;
  background: var(--grad-icon);
  color: #fff;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

@media (hover: hover) {
  .checklist__item:hover .checklist__mark {
    transform: scale(1.12) rotate(-8deg);
    box-shadow: 0 4px 12px rgba(218, 0, 15, .26);
  }
}

.checklist--lg { --mark-size: 34px; }
.checklist--lg .checklist__item { align-items: flex-start; padding: 14px 12px; }
.checklist--lg .checklist__mark { margin-top: -2px; }

/* --------------------------------------------------------------------------
   CTA band (the warm strip that closes several sections)
   -------------------------------------------------------------------------- */

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(26px, 3.2vw, 44px);
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--c-warm-1);
  border: 1px solid #F8DCD2;
  border-radius: var(--r-lg);
}

.cta-band__text { flex: 1 1 300px; min-width: 0; }

.cta-band__label {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-red);
}

.cta-band__copy {
  max-width: 620px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
}

.cta-band .btn { flex: none; }

/* --------------------------------------------------------------------------
   Timeline rail (Váš běžný den / Výběrové řízení)
   -------------------------------------------------------------------------- */

.rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 20px;
}

.rail__step {
  display: flex;
  flex-direction: column;
}

.rail__track {
  display: flex;
  align-items: center;
  margin-inline: -12px;
}

.rail__line {
  flex: 1;
  height: 2px;
  background: rgba(218, 0, 15, .85);
}

.rail__step:first-child .rail__line:first-child {
  background: linear-gradient(90deg, rgba(218, 0, 15, 0), rgba(218, 0, 15, .85));
}

.rail__step:last-child .rail__line:last-child {
  background: linear-gradient(90deg, rgba(218, 0, 15, .85), rgba(218, 0, 15, 0));
}

.rail__dot {
  /* Musí se kreslit NAD svislou čárou railu (ta je ::before rodiče, tedy
     pozicovaná). Bez toho čára prosvítá skrz dutý střed tečky a vypadá
     přeškrtnutě. Reference to řeší position: relative na obalu kroků. */
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--rail-dot-bg, #fff);
  border: 3px solid var(--c-red);
  /* Stejná pulzace jako u ostatních značek — v exportu je u teček navíc
     statické box-shadow halo, ale animace ho celé přepisuje, takže se
     nikdy nevykreslí. */
  animation: omPulse 4.5s ease-out infinite;
}

/* The final marker is filled — it reads as the end of the timeline rather
   than one more stop along it. */
.rail__step:last-child .rail__dot {
  background: var(--c-red);
  border-color: var(--c-red);
}

@media (min-width: 900px) {
  .rail--day .rail__dot {
    width: 14px;
    height: 14px;
    border-width: 2.5px;
  }
}

.rail__stem {
  align-self: center;
  width: 1.5px;
  height: 28px;
  background: var(--c-red);
  opacity: .8;
}

.rail__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card-sm);
  transition: transform var(--t-slow), box-shadow var(--t-slow);
}

@media (hover: hover) {
  .rail__card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-card-hover-neutral);
  }
}

.rail__card--tint {
  background: var(--c-warm-2);
  border-color: #F7D3D2;
}

.rail__card--tint .rail__text { color: #6B5B5A; }

.rail__card--accent {
  background: var(--grad-card);
  border-color: var(--c-red);
  color: #fff;
}

.rail__card--accent .rail__label { color: rgba(255, 255, 255, .9); }
.rail__card--accent .rail__title { color: #fff; }
.rail__card--accent .rail__text { color: rgba(255, 255, 255, .92); }

/* The day rail's accent card is a hair softer than the process one. */
.rail--day .rail__card--accent .rail__label { color: rgba(255, 255, 255, .85); }
.rail--day .rail__card--accent .rail__title { color: #F4F2EE; }

.rail__meta {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Day cards stack the icon above the label; process cards keep them inline. */
.rail--day .rail__meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.rail__icon {
  --icon-size: 28px;
  --icon-stroke: 1.7;
  color: var(--c-red);
  transition: transform .3s ease;
}

@media (hover: hover) {
  .rail__card:hover .rail__icon { transform: rotate(-8deg) scale(1.08); }
}
.rail__card--accent .rail__icon { color: #fff; }

.rail__icon--sm { --icon-size: 20px; --icon-stroke: 2; }

.rail__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-red);
}

.rail__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--c-ink);
}

.rail__text {
  font-size: var(--fs-card-body);
  line-height: 1.65;
  color: var(--c-text-muted);
}