/* Start version of the home page (public/index.launch.html, ADR 028), palette "Navy monochrom". Design tokens only
   (tokens.css); home.css is not loaded here. Mobile first; wider layouts from 640 / 900 / 1000 px. */

.home { margin: 0; background: var(--c-bg); color: var(--c-text); font: var(--fw-regular) var(--fs-base)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; }
.home *, .home *::before, .home *::after { box-sizing: border-box; }
.home img { max-width: 100%; height: auto; display: block; }
.home :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.home-container { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons and links: navy on light ground, white on navy. */
.home-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--control-h);
  padding-inline: var(--btn-px); border: 1px solid transparent; border-radius: var(--btn-radius); background: var(--c-navy);
  color: var(--c-surface); font: var(--btn-fw) var(--fs-base)/1.2 var(--font); text-decoration: none; cursor: pointer;
}
.home-button:hover { background: var(--c-slate); }
.home-button--secondary { background: var(--c-surface); color: var(--c-navy); border-color: var(--c-border-strong); }
.home-button--secondary:hover { background: var(--c-surface); border-color: var(--c-navy); }
.home-button--light { background: var(--c-surface); color: var(--c-navy); }
.home-button--light:hover { background: var(--c-mist); }
.home-button--ghost { background: transparent; color: var(--c-surface); border-color: var(--c-slate); }
.home-button--ghost:hover { background: var(--c-navy-2); border-color: var(--c-mist); }
.home-link { color: var(--c-navy); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.home-link:hover { color: var(--c-slate); }

/* Hero */
.home-hero {
  position: relative; background: var(--c-navy-surface); color: var(--c-surface); padding-block: var(--sp-5) calc(var(--sp-8) + var(--sp-2));
}
/* Phones: kicker and the small dot map share the first row, heading and text below – the map never sits behind text. */
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-3); }
.home-hero__copy { display: contents; }
.home-hero__copy > * { grid-column: 1 / -1; }
.home-hero__copy > .home-kicker { grid-column: 1; grid-row: 1; }
/* Dot map (Europe dots, Ukraine blue/yellow, route Cologne → Kyiv) */
.home-hero__visual { grid-column: 2; grid-row: 1; width: clamp(112px, 32vw, 170px); }
.home-dotmap { display: block; width: 100%; height: auto; }
.home-kicker { display: flex; align-items: center; gap: var(--sp-3); margin: 0; color: var(--c-mist); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.home-kicker span { width: 20px; height: 2px; background: var(--c-mist); }
.home-hero h1 { margin: var(--sp-2) 0 0; max-width: 14em; font-size: clamp(2.0625rem, 4.5vw, 3.25rem); text-wrap: balance; /* ~18 % below --fs-display; even lines */ line-height: var(--lh-tight); letter-spacing: var(--ls-heading); font-weight: var(--fw-bold); }
.home-lead { margin: var(--sp-2) 0 0; max-width: 34em; color: var(--c-mist); font-size: var(--fs-base); line-height: var(--lh-body); }
.home-lead__more { display: none; } /* phones: one sentence */

/* "Ви перевізник?" – banner as wide as the search card, one link as a whole; the outlined "Створити профіль" steps back
   behind the filled "Знайти поїздку". Only real features in the checklist. */
.home-driver-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-3);
  padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); text-decoration: none;
}
.home-driver-banner:hover { border-color: var(--c-input-border); }
.home-driver-banner:hover .home-driver-banner__cta { background: var(--c-bg); }
.home-driver-banner:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-driver-banner__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--c-bg); color: var(--c-navy); }
.home-driver-banner__text { display: grid; gap: var(--sp-2); min-width: 0; }
.home-driver-banner__text strong { color: var(--c-navy); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.home-driver-banner__perks { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); color: var(--c-muted); font-size: var(--fs-sm); }
.home-driver-banner__perks > span { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.home-driver-banner__perks svg { flex: none; color: var(--c-navy); }
.home-driver-banner__cta {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--control-h);
  padding-inline: var(--btn-px); border: 1px solid var(--c-navy); border-radius: var(--btn-radius); color: var(--c-navy);
  font-weight: var(--btn-fw); white-space: nowrap;
}

/* Search card, pulled up into the hero */
.home-search { position: relative; z-index: 1; margin-top: calc(-1 * var(--sp-8)); } /* above the hero and its flag line */
.home-search__card { padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.home-search__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
/* date + kind in one row on phones, so the whole search incl. the button fits the first screen (PO 2026-09-29) */
.home-search__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); min-width: 0; }
.home-field { display: grid; gap: var(--sp-1); min-width: 0; color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.home-field input, .home-field select {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; height: var(--control-h); padding-inline: var(--sp-3);
  border: var(--input-border); border-radius: var(--input-radius); background: var(--c-surface); color: var(--c-text);
  font: var(--fw-regular) var(--input-fs)/1.2 var(--font);
}
.home-field select { padding-inline: var(--sp-2); text-overflow: ellipsis; }
/* iOS Safari: the native date control brings its own width – without appearance none it grows out of the card. */
.home-field input[type="date"] { -webkit-appearance: none; appearance: none; line-height: var(--control-h); }
.home-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.home-date { position: relative; display: block; min-width: 0; }
.home-date__hint { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--c-muted); font-weight: var(--fw-regular); font-size: var(--input-fs); pointer-events: none; }
.home-date input:not([data-empty]) + .home-date__hint, .home-date input:focus + .home-date__hint { display: none; }
.home-date input[data-empty]:not(:focus) { color: transparent; }
.home-date input[data-empty]:not(:focus)::-webkit-datetime-edit { color: transparent; }
.home-field input::placeholder { color: var(--c-muted); }
.home-field input:focus, .home-field select:focus { outline: none; border-color: var(--c-navy); box-shadow: var(--focus-ring); }
.home-search__submit { width: 100%; }
.home-search__hint { margin: var(--sp-2) 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
.home-search__hint:empty { display: none; }

/* Найближчі поїздки: one card component for real trips and marked examples */
.home-trips { padding-top: var(--sp-7); }
.home-trips__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.home-trips__head h2, .home-ideas h2 { margin: 0; color: var(--c-navy); font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); font-weight: var(--fw-bold); }
.home-trips__note { margin: var(--sp-2) 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
.home-trips__list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.home-trip {
  display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; padding: var(--sp-4); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); text-decoration: none;
}
.home-trip:hover { border-color: var(--c-input-border); }
.home-trip__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.home-trip__date { color: var(--c-muted); font-size: var(--fs-sm); }
.home-trip__relative { margin-left: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--r-full); background: var(--c-info-soft); color: var(--c-navy); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.home-badge { padding: 2px var(--sp-2); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; }
.home-badge--example { border: 1px solid var(--c-border-strong); color: var(--c-muted); }
.home-badge--full { background: var(--c-navy); color: var(--c-surface); }
.home-route { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
/* cities break only between words or at hyphens (Івано-/Франківськ), never inside a word */
.home-route__city { color: var(--c-navy); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); overflow-wrap: break-word; }
.home-route__city--end { text-align: right; }
.home-route__line { flex: 1 1 var(--sp-4); min-width: var(--sp-2); height: 2px; background: var(--c-border-strong); }
.home-route__crossing {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--c-crossing-bg); border: 1.5px solid var(--c-crossing-border); color: var(--c-navy);
}
/* "Посилки літаком": a navy plane on the route instead of the (yellow) border point */
.home-route__plane {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--c-info-soft); color: var(--c-navy);
}
.home-badge--flight { background: var(--c-info-soft); color: var(--c-navy); }
/* Section headings "Найближчі поїздки" (bus) and "Посилки літаком" (plane): the same navy circle */
.home-trips__head h2 { display: inline-flex; align-items: center; gap: var(--sp-2); }
.home-section-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-full);
  background: var(--c-navy); color: var(--c-surface); }
.home-section-icon svg { width: 20px; height: 20px; }
.home-flights__add { margin: var(--sp-4) 0 0; color: var(--c-muted); }
.home-flights__add .home-link { display: inline-flex; align-items: center; min-height: 44px; } /* tap target */
.home-trip__crossing { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--c-bg); color: var(--c-navy); font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.home-trip__detail { color: var(--c-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.home-trip__offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.home-trip__price { color: var(--c-navy); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.home-trip__price small { color: var(--c-muted); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.home-trip__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.home-chip { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-full); background: var(--c-bg); color: var(--c-text); font-size: var(--fs-sm); }
.home-trip__driver { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-1); }
.home-trip__avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-full); background: var(--c-info-soft); color: var(--c-navy); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.home-trip__name { min-width: 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.home-trip__more { margin-left: auto; color: var(--c-navy); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Для перевізників: dark block */
.home-drivers { padding-top: var(--sp-7); }
.home-drivers__box { display: grid; gap: var(--sp-6); padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg); background: var(--c-navy-surface); color: var(--c-surface); }
.home-eyebrow { margin: 0; color: var(--c-mist); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.home-drivers h2 { margin: var(--sp-3) 0 0; font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); font-weight: var(--fw-bold); }
.home-drivers__intro > p:not(.home-eyebrow) { margin: var(--sp-3) 0 0; color: var(--c-mist); }
.home-drivers__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.home-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.home-benefits li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; }
.home-benefits__icon { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--c-navy); color: var(--c-surface); }
.home-benefits strong { font-weight: var(--fw-semibold); }
.home-benefits li > span:last-child { color: var(--c-mist); font-size: var(--fs-sm); }

/* Маєте ідею чи побажання? */
.home-ideas { padding-top: var(--sp-5); }
/* centred: heading, text and "Написати нам" in the middle; the opened form below, centred, fields left-aligned */
.home-ideas__box {
  display: grid; justify-items: center; gap: var(--sp-4); padding: var(--sp-5); /* full width like the drivers block above */
  border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); text-align: center;
}
.home-ideas h2 { font-size: var(--fs-xl); }
.home-ideas p { margin: var(--sp-2) auto 0; color: var(--c-muted); } /* one line on desktop, wraps on phones */
.home-ideas__form { justify-self: stretch; padding-top: var(--sp-4); border-top: 1px solid var(--c-border); text-align: left; }
.home-ideas__form[hidden] { display: none; }
.home-ideas__form .fb { max-width: 640px; margin-inline: auto; } /* readable line length on desktop */
.home-ideas .home-button[aria-expanded="true"] { border-color: var(--c-navy); }

/* Footer on navy */
.home-footer { margin-top: var(--sp-8); padding-block: var(--sp-6) var(--sp-5); background: var(--c-navy); color: var(--c-mist); font-size: var(--fs-sm); }
.home-footer a { color: var(--c-surface); text-decoration: none; }
.home-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-footer__brand { display: inline-block; border-radius: var(--r-sm); }
.home-footer__brand img { width: 150px; }
.home-footer__grid { display: grid; gap: var(--sp-5); }
.home-footer__grid p { margin: var(--sp-2) 0 0; }
.home-footer__cols { display: grid; gap: var(--sp-5); }
.home-footer__cols > * { display: flex; flex-direction: column; }
.home-footer__cols a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-base); }
.home-footer__title { margin: 0 0 var(--sp-1); color: var(--c-mist); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.home-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-navy-2); }
.home-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

@media (min-width: 640px) {
  .home-trips__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-drivers__actions { flex-direction: row; flex-wrap: wrap; }
  .home-drivers__actions .home-button { flex: 1 1 260px; } /* both equally wide: side by side or wrapped */
  .home-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-footer__cols { grid-template-columns: repeat(2, max-content); column-gap: var(--sp-8); }
  .home-ideas__box { padding: var(--sp-6) var(--sp-7); }
}
@media (min-width: 900px) {
  .home-hero { padding-block: var(--sp-6) calc(var(--sp-8) + var(--sp-5)); }
  .home-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: var(--sp-7); }
  /* Right area: the dot map for now; later the photo (4:5) with the map laid over it. */
  .home-hero__copy { display: block; grid-column: 1; grid-row: 1; }
  .home-hero__copy > * { grid-column: auto; }
  .home-hero__visual { grid-column: 2; grid-row: 1; width: 100%; max-width: 480px; justify-self: end; }
  .home-driver-banner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: var(--sp-4) var(--sp-5); }
  .home-driver-banner__cta { grid-column: auto; }
  .home-search { margin-top: calc(-1 * var(--sp-8)); }
  .home-search__card { padding: var(--sp-5); }
  .home-search__form { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: var(--sp-4); }
  .home-search__more { display: contents; }
  .home-search__submit { width: auto; }
  .home-lead__more { display: inline; }
  .home-trips { padding-top: var(--sp-8); }
  .home-trips__head h2 { font-size: var(--fs-3xl); }
  .home-trip { padding: var(--sp-5); }
  .home-route { gap: var(--sp-2); }
  .home-route__city { font-size: var(--fs-xl); }
  .home-drivers { padding-top: var(--sp-8); }
  .home-drivers__box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sp-7); padding: var(--sp-7); }
  .home-drivers h2 { font-size: var(--fs-3xl); }
  .home-benefits li { display: block; padding: var(--sp-5); border-radius: var(--r-md); background: var(--c-navy); }
  .home-benefits__icon { display: flex; margin-bottom: var(--sp-3); background: var(--c-navy-surface); }
  .home-benefits li > span:last-child { display: block; margin-top: var(--sp-1); }
  .home-footer__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-7); }
}
@media (min-width: 1000px) {
  .home-trips__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}