/* home.css — strona główna (tryb landing): skrót historii głównej + wejścia. */

.home-intro {
  padding-block: var(--sp-6);
  text-align: center;
}

.home-intro .u-body {
  max-width: var(--measure-body);
  margin-inline: auto;
  color: var(--color-graphite);
}

.home-story__head {
  padding-inline: var(--page-margin);
  max-width: var(--content-max);
  margin-inline: auto;
  margin-bottom: var(--sp-5);
  text-align: center;
}

.home-story__head .u-meta {
  display: block;
  margin-bottom: var(--sp-2);
}

.home-story__head a {
  text-decoration: none;
}

.home-story__head a:hover .u-couple-name,
.home-story__head a:focus-visible .u-couple-name {
  color: var(--color-graphite);
}

.home-story__head .u-couple-name {
  transition: color var(--dur-nav) ease-out;
}

.home-story__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-photos);
}

.home-cta {
  position: relative;
  /* Ta sama przerwa "montażowa", co między rozdziałami w /ola-mateusz/
     (.chapter { margin-top: var(--gap-chapters) }) — tu trzeba ją dopisać
     ręcznie, bo .home-cta nie jest elementem .chapter i nie dziedziczy jej
     automatycznie. Bez tego zdjęcie "Szeroki" i pełnoekranowe CTA stykają
     się bez żadnego odstępu. */
  margin-top: var(--gap-chapters);
}

.home-cta__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #FAFAF8;
}

.home-cta__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgba(250, 250, 248, 0.85);
  /* Sama biała obwódka bez tła ginie na jasnych kadrach (białe suknie,
     jasne wnętrza) — pod spodem jest dowolne zdjęcie z galerii, nie da się
     zagwarantować, że będzie ciemne w tym miejscu. Półprzezroczyste
     ciemne tło daje kontrast niezależnie od zdjęcia pod spodem. Delikatnie
     podbite (0,45→0,6) po feedbacku — nadal ma nie "krzyczeć", tylko być
     pewnie czytelne. */
  background-color: rgba(16, 16, 16, 0.6);
  transition: border-color var(--dur-nav) ease-out, background-color var(--dur-nav) ease-out;
}

.home-cta__link:hover .home-cta__label,
.home-cta__link:focus-visible .home-cta__label {
  border-color: #FAFAF8;
  background-color: rgba(16, 16, 16, 0.78);
}

.home-offer {
  text-align: center;
  padding-block: var(--sp-7);
}

.home-offer .u-body {
  max-width: var(--measure-body);
  margin-inline: auto;
  color: var(--color-graphite);
}

/* Kreska pod tekstem była stała (border-bottom) — ten sam wygląd co nowe
   wyróżnienie pojedynczego słowa (.u-emphasis, patrz base.css), więc np.
   "tylko" w zdaniu o dostępności zaczęło wyglądać jak link. Rozwiązanie:
   strzałka "→" (spójna z .home-cta__label "Zobacz całą historię →") jako
   stały wskaźnik klikalności, linia tylko przy hover/focus — jako feedback
   interakcji, nie stały element wyglądu. */
.home-offer__link {
  display: inline-block;
  margin-top: var(--sp-3);
  text-decoration: none;
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
}

.home-offer__link:hover,
.home-offer__link:focus-visible {
  border-bottom-color: var(--color-ink);
}

/* Wzmianka o drugiej historii — jedna dyskretna linijka, NIE kafelek ani
   osobna sekcja ze zdjęciem. Patrz "Tryby strony": przy dwóch reportażach
   żadnej formy wyboru między historiami (Index z dwoma kaflami komunikuje
   brak doświadczenia) — to tylko cichy link, nie nawigacja "wybierz
   historię". Ten sam wzorzec co .home-offer__link: strzałka jako stały
   wskaźnik klikalności, kreska tylko na hover/focus. */
.home-also {
  text-align: center;
  padding-bottom: var(--sp-6);
  color: var(--color-graphite);
}

.home-also__link {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.home-also__link:hover,
.home-also__link:focus-visible {
  border-bottom-color: var(--color-ink);
}