/* ============================================
   Meadow — części wielokrotnego użytku
   ============================================ */

/* === Przycisk pigułka ===================================== */
.pill {
  display: inline-grid;
  place-items: center;
  width: 761px;
  max-width: 100%;
  height: 60px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--text-on-cta);
  text-decoration: none;
  cursor: pointer;
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pill:hover {
  color: var(--c-ink);
  background: transparent;
}

/* === Odliczanie ===========================================
   Dni potrafią mieć trzy cyfry, więc pole ma stałą szerokość —
   inaczej cały wiersz drgałby co sekundę. */
.countdown {
  display: flex;
  gap: 0.35em;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-script);
  font-size: var(--fs-count);
  line-height: 1;
}

.countdown__unit {
  min-width: 2.2ch;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.countdown__sep {
  opacity: 0.55;
}

/* === Galeria przewijana w bok =============================
   Taśma jest szersza niż strona: sąsiednie kadry podglądają zza
   krawędzi. Boczne wcięcie odsuwa pierwszy i ostatni slajd tak,
   żeby każdy dał się wyśrodkować. */
.slider {
  position: relative;
}

/* Każda galeria ma swój rozmiar slajdu; wartości siedzą w tokenach,
   więc telefon dostaje własne bez walki ze stylem w atrybucie. */
.slider--gal1 {
  --slide-w: var(--slide-1-w);
  --slide-ar: var(--slide-1-ar);
}

.slider--gal2 {
  --slide-w: var(--slide-2-w);
  --slide-ar: var(--slide-2-ar);
}

.slider__track {
  display: flex;
  gap: var(--slide-gap);
  padding-inline: calc((100% - var(--slide-w)) / 2);
  overflow-x: auto;
  /* „proximity”, nie „mandatory” — przy twardym przyciąganiu taśma
     szarpie się, gdy prowadzi ją przewijanie strony. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: calc((100% - var(--slide-w)) / 2);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

/* Gdy taśmę prowadzi przewijanie strony, przyciąganie do slajdów
   walczyłoby z płynnym ruchem — włącza się dopiero przy geście. */
.slider__track {
  scroll-behavior: auto;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__slide {
  flex: 0 0 var(--slide-w);
  margin: 0;
  scroll-snap-align: center;
}

.slider__slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--slide-ar);
  object-fit: cover;
}

/* Strzałki i kropki dokłada slider.js — bez skryptu galeria nadal
   przewija się gestem, więc nic się nie traci. */
.slider__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 26px;
  line-height: 1;
  color: var(--c-ink);
  cursor: pointer;
  background: var(--c-paper);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.45);
  transform: translateY(-50%);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.slider__nav:hover {
  background: var(--c-paper);
  transform: translateY(-50%) scale(1.06);
}

.slider__nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

.slider__nav--prev { left: 32px; }
.slider__nav--next { right: 32px; }

.slider__dots {
  position: absolute;
  right: 0;
  bottom: 22px;
  left: 0;
  z-index: 2;
  display: flex;
  gap: 14px;
  justify-content: center;
}

.slider__dot {
  width: 13px;
  height: 13px;
  padding: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--c-paper) 45%, transparent);
  border: 1.5px solid var(--c-paper);
  border-radius: 50%;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  transition: background var(--dur) var(--ease);
}

.slider__dot:hover {
  background: color-mix(in srgb, var(--c-paper) 75%, transparent);
}

.slider__dot[aria-current='true'] {
  background: var(--c-paper);
}

/* === Kalendarz ============================================ */
.calendar {
  width: 761px;
  max-width: 100%;
  margin-inline: auto;
  font-size: var(--fs-small);
  border-collapse: collapse;
  text-align: center;
}

.calendar th {
  padding-bottom: 18px;
  font-weight: 400;
  color: var(--c-accent);
}

.calendar__day,
.calendar__pad {
  position: relative;
  height: 74px;
  font-variant-numeric: tabular-nums;
}

/* Dzień ślubu dostaje serce; cyfra leży na nim, więc musi być nad. */
.calendar__day--wedding .calendar__num {
  position: relative;
  z-index: 1;
  color: var(--c-paper);
}

.calendar__heart {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 46px;
  height: 42px;
  background: var(--c-ink);
  transform: translate(-50%, -50%);
  -webkit-mask: url('../img/heart.svg') no-repeat center / contain;
  mask: url('../img/heart.svg') no-repeat center / contain;
}

/* === Kółka dress code =====================================
   W makiecie kółka nachodzą na siebie, nie stoją w odstępach. */
.swatches {
  display: flex;
  justify-content: center;
}

.swatches li {
  width: 97px;
  height: 97px;
  border-radius: 50%;
}

.swatches li + li {
  margin-left: -33px;
}

/* === Pola formularza ====================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field__label {
  font-size: var(--fs-small);
}

.field__input {
  width: 100%;
  height: 56px;
  padding-inline: 20px;
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-ink);
  border-radius: 4px;
}

.field__input:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.option-list {
  display: flex;
  gap: 12px;
}

.option-pill {
  display: grid;
  flex: 1;
  place-items: center;
  height: 56px;
  font-size: var(--fs-small);
  cursor: pointer;
  background: var(--c-band);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.option-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-pill:has(input:checked) {
  color: var(--text-on-cta);
  background: var(--c-ink);
}

.form-status {
  min-height: 1.6em;
  margin-top: 12px;
  font-size: var(--fs-small);
}

.form-status[data-state='error'] {
  color: #a4442f;
}

/* Pole-pułapka na roboty — człowiek go nie zobaczy. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* === Pasek podglądu ======================================= */
.preview-flag {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  font-size: 15px;
  color: var(--c-paper);
  text-align: center;
  background: var(--c-ink);
}

@media (max-width: 767px) {
  .pill { width: 313px; height: 34px; font-size: var(--fs-tiny); }

  .slider__nav { display: none; }

  .calendar { width: 313px; font-size: var(--fs-tiny); }
  .calendar th { padding-bottom: 10px; }
  .calendar__day,
  .calendar__pad { height: 34px; }
  .calendar__heart { width: 22px; height: 20px; }

  .swatches li { width: 44px; height: 44px; }
  .swatches li + li { margin-left: -16px; }

  .field__input,
  .option-pill { height: 44px; }
}

/* === Ekran powitalny ======================================
   Papierowa kurtyna z festonową krawędzią. Po załadowaniu strony
   unosi się w górę i odsłania treść. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--c-dark);
}

.intro__paper {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--c-dark) var(--paper-url) center / cover no-repeat;
}

.intro__body {
  color: var(--text-on-dark);
  text-align: center;
}

/* Motto i data leżą na ciemnym papierze — bez pełnej jasności
   i szerokiego rozstrzelenia giną w teksturze. */
.intro__tagline {
  font-size: var(--fs-heading);
  letter-spacing: 0.12em;
  color: var(--c-paper);
}

.intro__date {
  margin-top: 34px;
  font-size: var(--fs-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-paper);
}

.intro__seal {
  display: block;
  width: 200px;
  margin: 49px auto 0;
}

.intro__seal img {
  display: block;
  width: 100%;
  height: auto;
}

.intro__names {
  margin-top: 48px;
  font-size: var(--fs-display);
  line-height: 1.1;
}

/* Wyjście dwustopniowe: najpierw gasną napis i pieczęć, dopiero potem
   rozpływa się papier. Kurtyna nigdzie nie odjeżdża. */
.intro[data-done] .intro__body {
  animation: intro-text-out 0.5s var(--ease) both;
}

.intro[data-done] {
  animation: intro-veil-out 0.55s var(--ease) 0.4s both;
}

@keyframes intro-text-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-14px); }
}

@keyframes intro-veil-out {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

@media (max-width: 767px) {
  .intro__seal { width: 96px; margin-top: 26px; }
  .intro__date { margin-top: 18px; }
  .intro__names { margin-top: 24px; }
}


/* === Pojawianie się treści przy przewijaniu ===============
   Element startuje przygaszony i lekko niżej, a po wejściu w kadr
   wraca na swoje miejsce. Klasę dokłada reveal.js, więc bez
   JavaScriptu treść jest po prostu widoczna od razu. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Sąsiadujące elementy wchodzą kaskadą, nie wszystkie naraz. */
.timeline__step:nth-child(2) { transition-delay: 0.08s; }
.timeline__step:nth-child(3) { transition-delay: 0.16s; }
.timeline__step:nth-child(4) { transition-delay: 0.24s; }
.info__block:nth-child(2)    { transition-delay: 0.08s; }
.info__block:nth-child(3)    { transition-delay: 0.16s; }

/* Bez ruchu i bez skryptu — nic się nie chowa. */
.no-reveal .reveal,
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Kopie slajdów użyte do zapętlenia galerii — dla czytnika ekranu
   nie istnieją, wizualnie są nie do odróżnienia od oryginałów. */
.slider__slide--clone {
  pointer-events: auto;
}


/* === Stopka ============================================== */
.site-footer {
  position: relative;
  margin-top: -1px;
  padding-block: 535px 918px; /* 8638 − 8103 ; zapas pod podpisem */
  color: var(--text-on-dark);
  text-align: center;
  background: var(--c-dark) var(--paper-url) center / cover no-repeat;
}

.site-footer__tagline {
  font-size: var(--fs-heading);
  line-height: 1.3;
}

.site-footer__date {
  margin-top: 9px; /* 8672 − 8638, wg makiety */
  font-size: var(--fs-heading);
}

.site-footer__seal {
  display: block;
  width: 200px;
  margin: 49px auto 0; /* 8777 − (8638 + 90) */
}

/* Bez tego obraz trzyma wysokość z atrybutu HTML i pieczęć wychodzi
   ponad dwa razy za wysoka. */
.site-footer__seal img {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer__names {
  margin-top: 79px; /* 9058 − (8777 + 202) */
  font-size: 88px;
  line-height: 1;
}

.site-footer__sign {
  margin-top: 26px;
  font-size: var(--fs-small);
}

@media (max-width: 767px) {
  /* Makieta 303:546: stopka 3674..4419 = 745 px; motto 3934, data 3967,
     pieczęć 4014 (83x84), imiona 4135. */
  .site-footer { padding-block: 234px 224px; }
  .site-footer__date { margin-top: 33px; font-size: var(--fs-body); }
  .site-footer__seal { width: 83px; margin-top: 0; }
  .site-footer__names { margin-top: 37px; }
  .site-footer__names { margin-top: 37px; font-size: 26px; }
}