/* ==========================================================================
   Responsive — one fluid implementation, breakpoints only where a layout
   must actually change shape.

   1200px  hero stops being two columns
    900px  every two-column section stacks; the 4-across rails go vertical
    768px  mobile type + spacing scale
    600px  single-column grids, full-width buttons
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≥ 1440px — výřez hero fotky
   -------------------------------------------------------------------------- */

/* Hero má nad 1500px pevnou výšku ~882px, ale fotka se při `cover` roztahuje
   do šířky. Přebytek výšky proto roste jen směrem nahoru a `object-position`
   zarovnané dolů ho celý odřízne — nad 2000px zmizí modelce hlava.

   Místo procenta (které se počítá z toho přebytku, takže s šířkou pluje)
   posuneme fotku o pevný díl její vlastní výšky: vykreslená výška je 0,75 ×
   šířka okna, a 14.3vw z ní dělá 19,1 % — přesně ten výřez, který je vidět
   na 1440px. Rám se tak od 1440px výš už nemění.

   Kdyby se měnila výška hera nebo poměr stran fotky, ohlídejte, ať platí
   14.3vw ≤ 0,75 × šířka − výška hera, jinak by se pod fotkou objevila mezera. */
@media (min-width: 1440px) {
  .hero__media img { object-position: 70% -14.3vw; }
}

/* --------------------------------------------------------------------------
   ≤ 1199px — hero
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .hero {
    padding-top: 26px;
    padding-bottom: clamp(40px, 6vw, 64px);
  }

  /* Fotka je pás nahoře s postupným zatmavením, jako na mobilu.

     Podstatné: vrstva se zatmavením kryje CELÉ hero, ne jen ten pás.
     Dřív končila přesně na spodní hraně fotky a i při dokonale shodné
     barvě tam vznikala viditelná linka — stačí zaokrouhlení při jiném
     zoomu nebo DPI a hrana dvou elementů se projeví. Takhle tam žádná
     hrana není: gradient dojede na plnou barvu ještě nad koncem fotky
     a dál pokračuje plochý až do konce sekce. Spodní okraj fotky tak
     leží pod neprůhlednou vrstvou. */
  .hero { --hero-band: min(700px, 170vw); }

  .hero__media { inset: 0; }

  .hero__media img { height: var(--hero-band); }

  /* Alfa roste podle smoothstep, takže na konci má NULOVOU strmost.
     Předtím gradient dojel na plnou barvu a skokem se zploštil — a přesně
     ten zlom ve strmosti oko vidí jako linku, i když se barva nemění.
     Nestačí ho posunout jinam, musí se zahladit. Plného krytí je dosaženo
     v 85 % pásu, takže spodní okraj fotky je navíc pod krycí vrstvou. */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(12, 17, 22, 0.22) calc(var(--hero-band) * 0.0000),
      rgba(12, 17, 22, 0.242) calc(var(--hero-band) * 0.0850),
      rgba(12, 17, 22, 0.301) calc(var(--hero-band) * 0.1700),
      rgba(12, 17, 22, 0.388) calc(var(--hero-band) * 0.2550),
      rgba(12, 17, 22, 0.495) calc(var(--hero-band) * 0.3400),
      rgba(12, 17, 22, 0.61) calc(var(--hero-band) * 0.4250),
      rgba(12, 17, 22, 0.725) calc(var(--hero-band) * 0.5100),
      rgba(12, 17, 22, 0.832) calc(var(--hero-band) * 0.5950),
      rgba(12, 17, 22, 0.919) calc(var(--hero-band) * 0.6800),
      rgba(12, 17, 22, 0.978) calc(var(--hero-band) * 0.7650),
      rgba(12, 17, 22, 1) calc(var(--hero-band) * 0.8500));
  }


  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "badge"
      "copy"
      "form"
      "trust";
    column-gap: 0;
    row-gap: 0;
  }

  /* Odznak sedí na úplném vrchu hero sekce, fotka teče pod ním a nadpis
     začíná až o 250px níž — přesně jako v mobilní referenci. */
  .hero__badge { margin-bottom: 16px; }

  .hero__copy { padding-top: min(250px, 62vw); }

  .hero__form {
    width: 100%;
    max-width: 560px;
    margin-top: 28px;
    margin-inline: auto;
  }

  .hero__trust { margin-top: 28px; }
}

/* Od tabletu nahoru patří odznak k nadpisu. Na telefonu funguje nahoře jako
   štítek celé stránky, ale na širší obrazovce by mezi ním a nadpisem zůstalo
   250px fotky a působil by osamoceně. */
/* Od tabletu nahoru patří odznak k nadpisu (viz níž), ale samotné
   přeskupení lišty důvěry dává smysl už od 600px. */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero__badge {
    margin-top: min(250px, 32vw);
    margin-bottom: 24px;
  }

  .hero__copy { padding-top: 0; }
}

@media (min-width: 600px) and (max-width: 1199px) {
  /* Čtyři položky na jeden řádek se nevejdou a zalomily by se 3 + 1.
     Mřížka 2 × 2 na střed drží pod formulářem klidnější tvar. */
  .hero__trust {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 14px 36px;
  }
}

/* Pruh s fakty přechází na 2 × 2 dřív než zbytek — pod 1100px se popisky
   ve čtyřech sloupcích lámou na dva řádky a čísla se rozjedou do různých
   výšek. */
@media (max-width: 1099px) {
  /* Bez mezery v mřížce — jinak čáry „nedojedou“ k sobě a kříž se
     nepotká. Odstup dělá padding uvnitř buněk. */
  .facts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .facts__item + .facts__item {
    padding-left: 0;
    border-left: 0;
  }

  .facts__item { padding: 16px 0; }

  .facts__item:nth-child(odd) { padding-right: clamp(16px, 2.6vw, 40px); }

  .facts__item:nth-child(even) {
    padding-left: clamp(16px, 2.6vw, 40px);
    border-left: 1px solid var(--c-border-dark);
  }

  .facts__item:nth-child(n + 3) { border-top: 1px solid var(--c-border-dark); }
}

/* --------------------------------------------------------------------------
   ≤ 999px
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
  .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   ≤ 899px — the main stacking breakpoint
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .header__nav { display: none; }

  .duties,
  .panels,
  .money__grid,
  .quotes,
  .reassure__grid,
  .about__grid,
  .apply__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .duties__figure {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .duties__figure img { position: static; height: 100%; }

  .geo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "map"
      "pills"
      "cap";
    gap: 20px;
  }

  /* Schéma a jeho popisek se rozpojí, aby mezi ně mohly pilulky měst —
     to je pořadí z mobilní reference. */
  .geo__figure { display: contents; }
  .geo__map { grid-area: map; max-width: 420px; margin-inline: auto; }
  .geo__note { grid-area: cap; }

  .geo__head,
  .geo__pills { align-self: auto; }

  /* Schéma je vycentrované, takže pilulky i popisek pod ním taky. */
  .geo__pills { justify-content: center; }
  .geo__note { text-align: center; margin-inline: auto; }

  .t-full { display: none; }
  .t-abbr { display: inline; }

  /* ---- Sticky bar: value + place on the left, CTA on the right ---- */

  .stickybar {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .stickybar__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .stickybar__prefix { display: none; }

  .stickybar__value {
    font-size: 18px;
    line-height: 1.15;
  }

  .stickybar__where {
    font-size: 12.5px;
    line-height: 1.3;
    white-space: nowrap;
  }

  .stickybar .btn {
    flex: none;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }

  .geo__town--hb { top: 30%; left: 20%; }
  .geo__town--ch { top: 12%; left: 62%; }
  .geo__town--sv { top: 86%; left: 60%; }
  .geo__town--gj { top: 72%; left: 24%; }
  .geo__town::before { width: 7px; height: 7px; }

  .geo__note { max-width: none; }

  .contact-card,
  .stats3 { max-width: none; }

  /* Po složení do jednoho sloupce už odstavce nic neomezuje a natáhnou se
     na 88–92 znaků na řádek. Strop na míru řádku to drží v čitelném pásmu,
     aniž by se hnulo rozložení. */
  .apply__intro,
  .reassure .lead,
  .about__text .lead,
  .rail__text { max-width: 62ch; }

  .about__photo { aspect-ratio: 16 / 10; max-height: 380px; }

  /* ---- Rails become a vertical timeline ---- */

  .rail {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* 7px, ne 6.5 — na celé pixely, jinak se 2px čára rozmaže přes tečky. */
  .rail::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 22px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(180deg, #DA000F, rgba(218, 0, 15, .18));
  }

  .rail__step {
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    gap: 0 18px;
    align-items: start;
  }

  .rail__line,
  .rail__stem { display: none; }

  .rail__track {
    margin: 0;
    padding-top: 16px;
  }

  .rail__card {
    margin-bottom: 18px;
    padding: 18px 20px 20px;
    border-radius: var(--r-md);
  }

  .rail--day .rail__meta {
    flex-direction: row;
    align-items: center;
    gap: 9px;
  }

  .rail--day .rail__icon { --icon-size: 18px; --icon-stroke: 2; }
}

/* --------------------------------------------------------------------------
   ≤ 767px — mobile scale
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --header-h: 68px;
    --stickybar-h: 72px;
    --section-y: clamp(40px, 11vw, 56px);
    --card-pad: 20px;
  }

  .header { padding: 12px var(--gutter); }
  .header__logo { height: 14px; }
  .header .btn--sm { padding: 12px 18px; }



  .hero__copy { gap: 20px; }
  .hero__pills { gap: 7px; }

  .hero__pills .pill {
    gap: 6px;
    padding: 6px 11px;
    font-size: 12.5px;
  }

  .hero__trust {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    font-weight: 600;
    text-align: center;
  }

  .hero__trust li { text-shadow: none; }
  .hero__trust .icon { --icon-size: 19px; color: var(--c-red); }

  .hero__form { padding: 22px; }

  .duties__item {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
  }

  .duties__item .icon { --icon-size: 26px; }

  .benefits__photo { border-radius: var(--r-lg); }

  .quote img { width: 76px; height: 76px; margin: 24px 22px 0; }
  .quote__body { padding: 16px 22px 22px; }

  .faq__q { padding: 18px 20px; }
  .faq__a { padding: 0 20px 18px; font-size: 15px; }

  .money__foot { gap: 14px; }
  .money__foot span { font-size: 14px; }

  .stats3 { padding: 18px 0; }
  .stats3__item { padding-right: 10px; }
  .stats3__item:last-child { padding-right: 0; }
  .stats3__item + .stats3__item { padding-left: 10px; }
  .stats3__label { font-size: 13px; }

  .footer__inner {
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .footer__top {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .footer__brand { align-items: center; }
  .footer__logo { align-self: center; height: 16px; }
  .footer__tagline { max-width: 300px; font-size: 14.5px; }

  .footer__links {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }

  .footer__link { justify-content: center; }
  .footer__rule { width: 40px; align-self: center; }
  .footer__meta { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   ≤ 599px — small phones
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {
  /* Na telefonu stačí míň — obsah je úzký a stránka by se zbytečně
     natáhla. */
  .section-head { margin-bottom: clamp(28px, 7vw, 36px); }

  .facts__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .facts__item {
    align-items: center;
    padding: 16px 0;
    text-align: center;
  }

  .facts__item:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .facts__item + .facts__item {
    padding-top: 16px;
    border-top: 1px solid var(--c-border-dark);
  }

  .benefits__grid { grid-template-columns: minmax(0, 1fr); }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }

  .cta-band { flex-direction: column; align-items: stretch; }

  /* `flex: 1 1 300px` je psané pro řádek — ve sloupci by se z basisu stala
     výška 300px a mezi textem a tlačítkem by zela díra. */
  .cta-band__text { flex: 0 1 auto; }

  .cta-band .btn { width: 100%; }

  .money__foot .btn { width: 100%; }

  .quote img { margin-inline: auto; }
  .quote__body { text-align: center; }
  .quote__who { text-align: center; }
}

/* --------------------------------------------------------------------------
   ≤ 400px — 390 / 375 fine tuning
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  .hero__salary { gap: 6px; }
  .hero__salary-unit { font-size: 13.5px; }

  .stats3__value { font-size: 18px; }
  .stats3__label { font-size: 12.5px; }

  .stickybar .btn { padding: 13px 16px; font-size: 14px; }
  .stickybar__where { font-size: 12px; }
}