/* =====================================================================
   Propozycja v2 — „Droga”
   Ładowane po style.css; kolory, fonty, koperta i gałązki bez zmian.
   Zmieniamy układ (hero bez zmian — pełnoekranowe zdjęcie z style.css),
   sekcje informacyjne w dwóch kolumnach (nazwa sekcji przyklejona z lewej),
   galeria jako pozioma „droga” ze złotą linią łączącą kadry.
   Jedyny ruch bez akcji gościa: wejście hero i jednorazowe rysowanie drogi.
   ===================================================================== */

:root {
  --gold-line: rgba(176, 141, 87, 0.42);
  --split-gap: clamp(2rem, 6vw, 6rem);
}

/* ---------- spokój: bez wjeżdżających nagłówków poza hero ---------- */
main > section:not(.hero) .reveal { opacity: 1; transform: none; transition: none; }

/* ukryta nawigacja nie powinna rzucać cienia na hero */
.topnav:not(.is-visible) { box-shadow: none; }

/* HERO: zostaje wersja z style.css (pełnoekranowe zdjęcie) — decyzja 14.10.2026 */

/* =====================================================================
   SEKCJE DWUKOLUMNOWE: nazwa sekcji z lewej (przyklejona), treść z prawej
   ===================================================================== */

.split > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--split-gap);
  width: min(1180px, 100% - 2.5rem);
}
.split > .wrap > * { grid-column: 2; min-width: 0; }

.split .kicker {
  grid-column: 1;
  grid-row: 1 / span 12;
  align-self: start;
  position: sticky;
  top: 6.5rem;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--gold-line);
  text-align: left;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--bottle);
}
.split .section-title {
  grid-row: 1;
  max-width: 26ch;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  text-align: left;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  color: var(--ink-soft);
}

/* karty → spokojne listy z linią; jedno pole, nie mozaika pudełek */
.split .info-cards { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.split .info-card {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 1.25rem;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.split .info-card__icon { grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; margin: 0; background: none; border: 1px solid var(--gold-line); }
.split .info-card__icon svg { fill: var(--gold); }
.split .info-card h3 { font-size: 1.45rem; margin-bottom: 0.25rem; }

.split .location__layout { grid-template-columns: 1fr; gap: 2rem; }
/* dwa miejsca obok siebie, jak dwie kolumny zaproszenia; bez pudełek */
.split .location__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 4vw, 3rem); }
.split .place { padding: 1rem 0 0; background: none; border: 0; border-top: 1px solid var(--gold-line); border-radius: 0; }
.split .location__note { grid-column: 1 / -1; }
@media (max-width: 600px) { .split .location__cards { grid-template-columns: 1fr; gap: 1.5rem; } }
.split .stay__grid { grid-template-columns: 1fr; }
.split .gifts__layout { grid-template-columns: 1fr; }
.split .crew__intro { text-align: left; margin: -0.75rem 0 2rem; }
.split .crew__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split .faq__list { margin-top: 0; }

/* plan dnia: godziny jako duże cyfry, prawdziwa sekwencja */
.split .timeline { display: block; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.split .timeline::before, .split .timeline::after { display: none; }
.split .timeline__item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  opacity: 1;
  transform: none;
}
.split .timeline__dot { display: none; }
.split .timeline__item time {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--gold-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.split .timeline__item span { max-width: none; margin: 0; font-size: 1.1rem; color: var(--ink); }

@media (max-width: 860px) {
  .split > .wrap { grid-template-columns: 1fr; }
  .split > .wrap > * { grid-column: 1; }
  .split .kicker { grid-row: auto; position: static; margin-bottom: 0.75rem; }
  .split .section-title { grid-row: auto; }
  .split .crew__cards { grid-template-columns: 1fr; }
  .split .timeline__item { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
  .split .timeline__item time { font-size: 1.6rem; }
}

/* =====================================================================
   ODLICZANIE: cyfry jak w złotym druku, cienkie przegrody
   ===================================================================== */

.countdown .countdown__grid { gap: 0; }
.countdown .countdown__cell + .countdown__cell { border-left: 1px solid rgba(217, 196, 151, 0.28); }

/* =====================================================================
   GALERIA — „DROGA”: poziomy pas kadrów, złota linia przez wszystkie zdjęcia
   ===================================================================== */

.gallery--road { background: var(--paper-2); overflow: hidden; }
.gallery--road > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 2rem;
  width: min(1180px, 100% - 2.5rem);
}
.gallery--road .kicker { grid-column: 1; text-align: left; margin-bottom: 0.4rem; }
.gallery--road .section-title { grid-column: 1; text-align: left; margin: 0; max-width: 18ch; }
.road__controls { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 0.5rem; }
.road__btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: var(--card);
  color: var(--bottle);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease, transform .16s var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .road__btn:hover:not(:disabled) { background: var(--bottle); color: var(--paper); border-color: var(--bottle); }
}
.road__btn:disabled { opacity: 0.35; cursor: default; }

.road {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-inline: max(1.25rem, (100vw - 1180px) / 2);
  scroll-padding-inline: max(1.25rem, (100vw - 1180px) / 2);
}
.road::-webkit-scrollbar { display: none; }
.road:focus-visible { outline-offset: -4px; }

.gallery--road .gallery__grid {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  columns: auto;
  width: max-content;
  padding-bottom: 1rem;
}
.gallery--road .gallery__grid figure {
  flex: none;
  margin: 0;
  scroll-snap-align: start;
}
/* rytm drogi: kadry na zmianę wyżej i niżej */
.gallery--road .gallery__grid { padding-top: 0.5rem; padding-bottom: 3.5rem; }
.gallery--road .gallery__grid figure:nth-child(odd) { margin-top: 0; }
.gallery--road .gallery__grid figure:nth-child(even) { margin-top: clamp(5rem, 10vw, 8rem); }
/* podpis parzystych kadrów nad zdjęciem: pod nimi biegnie droga */
.gallery--road .gallery__grid figure:nth-child(even) { display: flex; flex-direction: column-reverse; }
.gallery--road .gallery__grid figure:nth-child(even) figcaption { margin: 0 0 2.4rem; }
.gallery--road .gallery__grid figure:nth-child(odd) figcaption { margin-top: 2.6rem; }
.gallery--road .gallery__grid button { width: auto; border-radius: 6px; background: var(--line); }
.gallery--road .gallery__grid img {
  width: auto;
  height: clamp(260px, 38vw, 420px);
  object-fit: cover;
}
.gallery--road .gallery__grid figure:nth-child(even) img { height: clamp(220px, 30vw, 340px); }
.gallery--road .gallery__grid figcaption { max-width: 26ch; margin-top: 0.75rem; }

.road__path {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.road__path path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 0.5 6;
}
.road__stops circle { fill: var(--paper-2); stroke: var(--gold); stroke-width: 1.4; }

@media (max-width: 600px) {
  .gallery--road > .wrap { grid-template-columns: 1fr; }
  .road__controls { display: none; }
  .gallery--road .gallery__grid img { height: 300px; }
  .gallery--road .gallery__grid figure:nth-child(even) { margin-top: 3.5rem; }
  .gallery--road .gallery__grid figure:nth-child(even) img { height: 240px; }
  .gallery--road .gallery__grid img { max-width: 78vw; }
}

/* =====================================================================
   ŚWIADKOWIE: większe portrety
   ===================================================================== */

.split .crew__card { padding: 1.4rem 1.5rem; gap: 1.3rem; }
.split .crew__avatar--photo { width: 5.5rem; height: 5.5rem; }
.split .crew__card[data-placeholder] .crew__avatar { width: 5.5rem; height: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  .road { scroll-behavior: auto; }
}

/* =====================================================================
   PIECZĘĆ — proste przełamanie (seal.js, v4)
   ===================================================================== */

/* szczelina: ciemna linia + jasna faza krawędzi wosku */
.seal-split path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.seal-split__line { stroke: #2A0B0B; stroke-width: 1.3; }
.seal-split__line.is-branch { stroke-width: 0.8; }
.seal-split__edge { stroke: #D9928A; stroke-opacity: 0.55; stroke-width: 0.8; transform: translate(0.6px, 0.6px); }
.seal-split__edge.is-branch { stroke-width: 0.5; }

/* połówki pieczęci po przełamaniu */
.seal-halves { position: absolute; inset: 0; pointer-events: none; }
.seal-half { position: absolute; inset: 0; will-change: transform, opacity; }
.seal-half svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* drobne okruchy wosku */
.seal-crumb { position: absolute; border-radius: 40% 60% 55% 45%; pointer-events: none; will-change: transform, opacity; }
/* kropelki wosku przy brzegu pieczęci spadają razem z okruchami */
.envelope.is-snapped .wax-drips circle { animation: drip .7s ease-in forwards; }