/* ═══════════════════════════════════════════════════════════════════════════
   WELCOME / CONTENT SCREEN
   Shown after passphrase auth in welcome mode.
   Body-scroll layout: cover screen is hidden (display:none) after auth, content flows inline.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Content background layer (z:47) — organic multi-toned, shown with content screen ── */

.content-bg {
  position: fixed;
  inset: 0;
  z-index: 47;
  pointer-events: none;
  opacity: 0;
  background: var(--content-bg-gradient, var(--color-bg-primary));
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.content-bg.is-visible {
  opacity: 1;
}

/* ── Content eucalyptus frame (z:48) — same geometry as teaser, independently animated ── */

.content-eucalyptus {
  position: fixed;
  inset: 0;
  z-index: 48;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.content-eucalyptus.is-visible {
  opacity: var(--eucalyptus-opacity, 0.88);
}

/* Branch positions — mirroring teaser frame geometry */
.eucalyptus-branch--content-bl {
  left: -6%;
  bottom: -18%;
  width: clamp(150px, 48vw, 700px);
  rotate: -22deg;
}
.eucalyptus-branch--content-br {
  right: -6%;
  bottom: -18%;
  width: clamp(138px, 43vw, 640px);
  rotate: 22deg;
}
.eucalyptus-branch--content-tl {
  left: -6%;
  top: -10%;
  width: clamp(112px, 34vw, 520px);
  rotate: -158deg;
}
.eucalyptus-branch--content-tr {
  right: -6%;
  top: -10%;
  width: clamp(106px, 32vw, 500px);
  rotate: 158deg;
}
.eucalyptus-branch--content-el {
  left: -20%;
  top: 28%;
  width: clamp(90px, 27vw, 430px);
  rotate: 90deg;
}
.eucalyptus-branch--content-er {
  right: -20%;
  top: 44%;
  width: clamp(82px, 24vw, 400px);
  rotate: -90deg;
}

@media (min-width: 768px) {
  .eucalyptus-branch--content-bl { bottom: -30%; }
  .eucalyptus-branch--content-br { bottom: -30%; }
}
@media (min-width: 1200px) {
  .eucalyptus-branch--content-bl { bottom: -46%; }
  .eucalyptus-branch--content-br { bottom: -46%; }
}

/* Body-scroll architecture: content-screen sits in normal document flow.
   .content-bg (z:47) and .content-eucalyptus (z:48) remain position:fixed
   behind it, so backgrounds stay anchored while content scrolls.
   Pre-auth (teaser/coming-soon/welcome-login), content-screen is empty
   and must not add to body height — cover-screen fills the viewport. */
.content-screen {
  position: relative;
  z-index: 50;            /* above bg (z:47) + eucalyptus (z:48), below controls (z:100) */
  isolation: isolate;     /* stacking-context boundary: WAAPI-promoted children never bleed
                             below z:48 eucalyptus during GPU layer re-sort on mobile */
  overflow-x: hidden;     /* safety clip — no horizontal scroll from wide children */
  background: transparent; /* eucalyptus + bg-layer are behind, glass sections blur them */
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.content-screen.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Post-auth only: cover-screen is removed from layout so body scroll starts
   at the content, and content-screen gets a viewport-height floor so the
   fade-in covers the full viewport even when content is short. */
html.mode-content-ready #cover-screen {
  display: none;
}

html.mode-content-ready .content-screen {
  min-height: 100dvh;
}

/* Returning user: hide cover-screen during branches animation (no flicker) */
#cover-screen.auth-skip {
  opacity: 0;
  pointer-events: none;
}

/* Returning user: content-nav appears instantly without slide-in delay */
.returning-user #content-nav {
  transition-delay: 0s !important;
}

/* ── Hero: centered column, flows naturally into page ── */

.content-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--spacing-3xl) + var(--spacing-3xl)); /* clearance for fixed controls */
  padding-bottom: var(--spacing-xl);
  padding-inline: var(--spacing-md);
  gap: var(--spacing-xl);
  position: relative;
}

/* Full-screen overlay — softens eucalyptus so hero text stays readable;
   very low opacity so branches still show behind glass sections          */
.content-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-bg-primary);
  opacity: 0.28;
  pointer-events: none;
}

/* Override default contentReveal on elements inside the hero —
   play fresh entrance when the content screen becomes visible instead. */
.content-hero .title-display,
.content-hero .countdown-grid,
.content-hero .date-label {
  animation: none;
  opacity: 0;
}

.content-screen.is-visible .content-hero .title-display {
  animation: contentReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.content-screen.is-visible .content-hero .countdown-grid {
  animation: contentReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.content-screen.is-visible .content-hero .date-label {
  animation: contentReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

@media (prefers-reduced-motion: reduce) {
  .content-hero .title-display,
  .content-hero .countdown-grid,
  .content-hero .date-label {
    opacity: 1;
    animation: none;
  }
}


/* ── Countdown zero states ── */

.countdown-happening {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.countdown-happening-text {
  font-family: var(--font-body), sans-serif;
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}

.countdown-enjoy-text {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.countdown-elapsed {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* ── Sections wrapper ── */

.content-sections {
  max-width: 860px;
  margin-inline: auto;
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

/* ── Individual section — welcome-page performance overrides ── */

/* Scroll optimization: skip layout+paint for off-screen sections */
.content-sections .wedding-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* Mobile — full-bleed within content-sections */
@media (max-width: 767px) {
  .content-sections {
    padding: var(--spacing-lg) 0 var(--spacing-2xl);
    gap: var(--spacing-lg);
  }
}

/* ── Section heading — welcome-specific spacing override ── */

.section-title {
  margin-bottom: calc(var(--spacing-lg) - var(--spacing-xl));
}

/* ── Stagger subsections when section enters viewport ── */
.section-subsection.is-animating {
  animation: itemReveal 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.section-subsection.is-animating:nth-child(2) { animation-delay:  60ms; }
.section-subsection.is-animating:nth-child(3) { animation-delay: 140ms; }
.section-subsection.is-animating:nth-child(4) { animation-delay: 220ms; }
.section-subsection.is-animating:nth-child(5) { animation-delay: 300ms; }

/* ── Section placeholder ── */

.section-placeholder {
  padding: var(--spacing-3xl) var(--spacing-lg);
  text-align: center;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-body), sans-serif;
  transition: border-color var(--transition-slow), color var(--transition-slow);
}

/* ═══════════════════════════════════════
   LOCATION SECTION
═══════════════════════════════════════ */

/* Map layout: tabbar + iframe stacked with tighter gap */

.map-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Map iframe container */

.map-frame-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-secondary);
  transition: background var(--transition-slow);
}

@media (max-width: 767px) {
  .map-frame-container {
    aspect-ratio: 4 / 3;
    min-height: 320px;
  }
}

.map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.map-frame--active {
  opacity: 1;
  pointer-events: auto;
}

/* Fade out during theme-driven map recreation — container bg (already re-themed) shows through */
.map-frame--active.map-frame--reloading {
  opacity: 0;
  pointer-events: none;
}

/* Spinner overlay while map tiles load after recreation */
.map-frame-container.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  z-index: 2;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-text-muted);
  border-radius: 50%;
  animation: map-spin 0.8s linear infinite;
  pointer-events: none;
}

@keyframes map-spin {
  to { transform: rotate(360deg); }
}

/* Location address — muted, preserve line breaks */

.place-address {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-base);
  line-height: 1.7;
  font-style: normal;  /* <address> is italic by default */
  white-space: pre-line;
}


/* Navigation buttons row */

.location-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}



.btn-icon--navigate-google {
  mask-image: url('../assets/images/icons/icon-navigate-google.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-navigate-google.svg');
}

.btn-icon--navigate-mapy {
  mask-image: url('../assets/images/icons/icon-navigate-mapy.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-navigate-mapy.svg');
}

.btn-icon--navigate-waze {
  mask-image: url('../assets/images/icons/icon-navigate-waze.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-navigate-waze.svg');
}

.btn-icon--external-link {
  mask-image: url('../assets/images/icons/icon-external-link.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-external-link.svg');
}

.btn-icon--copy {
  mask-image: url('../assets/images/icons/icon-copy.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-copy.svg');
}

.btn-icon--check {
  mask-image: url('../assets/images/icons/icon-check.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-check.svg');
}

/* ── GPS copy button ── */

.nav-gps-icon {
  position: relative;
  display: inline-flex;
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
}

.nav-gps-icon .btn-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 150ms ease-out;
}

.nav-gps-btn[data-gps-state="default"] .nav-gps-icon--check,
.nav-gps-btn[data-gps-state="copied"]  .nav-gps-icon--copy  { opacity: 0; }

.nav-gps-btn[data-gps-state="default"] .nav-gps-icon--copy,
.nav-gps-btn[data-gps-state="copied"]  .nav-gps-icon--check { opacity: 1; }

.nav-gps-label {
  display: grid;
}

.nav-gps-label--coords,
.nav-gps-label--done {
  grid-area: 1 / 1;
  transition: opacity 150ms ease-out;
}

.nav-gps-btn[data-gps-state="default"] .nav-gps-label--coords { opacity: 1; }
.nav-gps-btn[data-gps-state="default"] .nav-gps-label--done   { opacity: 0; }
.nav-gps-btn[data-gps-state="copied"]  .nav-gps-label--coords { opacity: 0; }
.nav-gps-btn[data-gps-state="copied"]  .nav-gps-label--done   { opacity: 1; }

/* ═══════════════════════════════════════
   TRANSPORTATION SECTION
═══════════════════════════════════════ */

/* ── External link list — optional lead icon + anchor + optional trail icon ── */

.ext-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Horizontal variant — hotel contacts, inline clusters */
.ext-link-list--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
}

/* List item wrapper — only used in column layout */
.ext-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
}

/* Leading contextual icon (bus, train, globe, parking…) */
.ext-link__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: var(--color-text-muted);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transition: background-color var(--transition-slow);
}

.ext-link__icon--bus     { mask-image: url('../assets/images/icons/icon-bus.svg');     -webkit-mask-image: url('../assets/images/icons/icon-bus.svg'); }
.ext-link__icon--train   { mask-image: url('../assets/images/icons/icon-train.svg');   -webkit-mask-image: url('../assets/images/icons/icon-train.svg'); }
.ext-link__icon--globe   { mask-image: url('../assets/images/icons/icon-globe.svg');   -webkit-mask-image: url('../assets/images/icons/icon-globe.svg'); }
.ext-link__icon--parking { mask-image: url('../assets/images/icons/icon-parking.svg'); -webkit-mask-image: url('../assets/images/icons/icon-parking.svg'); }

/* The anchor */
.ext-link__anchor {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-emphasis);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  transition:
    opacity   var(--transition-fast),
    transform 150ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* In --row context anchors have no .ext-link wrapper, add vertical padding directly */
.ext-link-list--row .ext-link__anchor {
  padding: var(--spacing-xs) 0;
}

/* Trailing external-link indicator icon — fixed 16px, uses -sm icon */
.ext-link__trail {
  width: 1rem;
  height: 1rem;
  mask-image: url('../assets/images/icons/icon-external-link-sm.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-external-link-sm.svg');
}

/* Separator dot between sibling anchors in --row */
.ext-link__sep {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  user-select: none;
  transition: color var(--transition-slow);
}

@media (hover: hover) and (pointer: fine) {
  .ext-link__anchor:hover { opacity: 0.72; transform: translateX(2px); }

  .content-screen .btn--secondary:hover { transform: translateY(-1px); }
}

.section-subsection .location-nav {
  margin-top: var(--spacing-xs);
}

/* ── Transport distance table — vlastním autem vzdálenosti ── */

.transport-distance-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.transport-distance-group thead {
  display: contents;
}

.transport-distance-group + .transport-distance-group,
p + .transport-distance-group {
  margin-top: var(--spacing-md);
}


.transport-distance-list {
  display: flex;
  flex-direction: column;
}

.transport-distance-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0 var(--spacing-lg);
  align-items: baseline;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--color-ghost);
  transition: border-color var(--transition-slow);
}

.transport-distance-row:last-child {
  border-bottom: none;
}

.transport-distance-row__city {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: left;
  transition: color var(--transition-slow);
}

.transport-distance-row__km,
.transport-distance-row__time {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  text-align: right;
  transition: color var(--transition-slow);
}

.transport-distance-row__km {
  min-width: 4.5rem;
}

.transport-distance-row__time {
  min-width: 6.5rem;
}

.transport-distance-row--header {
  background: color-mix(in srgb, var(--color-ghost) 80%, transparent);
  border-radius: var(--radius-sm);
  border-bottom: none;
  transition: background var(--transition-slow);
}

/* Stagger distance rows when section enters viewport */
.transport-distance-row.is-animating {
  animation: itemReveal 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.transport-distance-list .transport-distance-row.is-animating:nth-child(1) { animation-delay:  25ms; }
.transport-distance-list .transport-distance-row.is-animating:nth-child(2) { animation-delay:  50ms; }
.transport-distance-list .transport-distance-row.is-animating:nth-child(3) { animation-delay:  75ms; }
.transport-distance-list .transport-distance-row.is-animating:nth-child(4) { animation-delay: 100ms; }

/* ═══════════════════════════════════════
   ACCOMMODATIONS SECTION
═══════════════════════════════════════ */


/* Overview distance table — hidden once per-card data is shown */
.accommodation-overview-table { display: none; }

/* ── Distance hero ── */

.hotel-distance-hero {
  display: flex;
  align-items: stretch;
  background: color-mix(in srgb, var(--color-ghost) 80%, transparent);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background var(--transition-slow);
}

.hotel-dist-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-md) var(--spacing-lg);
}

.hotel-dist-stat__value {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
  transition: color var(--transition-slow);
}

.hotel-dist-stat__label {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-muted);
  transition: color var(--transition-slow);
}

.hotel-dist-sep {
  width: 1px;
  background: color-mix(in srgb, var(--color-border) 80%, transparent);
  align-self: stretch;
  flex-shrink: 0;
  transition: background var(--transition-slow);
}

/* ── Amenities grid ── */

.hotel-amenities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md) 1px;
}

.hotel-amenity {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.hotel-amenity__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-text-muted);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transition: background-color var(--transition-slow);
}

.hotel-amenity__icon--checkin {
  mask-image: url('../assets/images/icons/icon-checkin.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-checkin.svg');
}
.hotel-amenity__icon--checkout {
  mask-image: url('../assets/images/icons/icon-checkout.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-checkout.svg');
}
.hotel-amenity__icon--breakfast {
  mask-image: url('../assets/images/icons/icon-breakfast.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-breakfast.svg');
}
.hotel-amenity__icon--bed {
  mask-image: url('../assets/images/icons/icon-bed.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-bed.svg');
}

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

.hotel-amenity__label {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  transition: color var(--transition-slow);
}

.hotel-amenity__value {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  transition: color var(--transition-slow);
}

/* Stagger amenity rows when section enters viewport */
.hotel-amenity.is-animating {
  animation: amenityFadeIn 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.hotel-amenity.is-animating:nth-child(1) { animation-delay:  40ms; }
.hotel-amenity.is-animating:nth-child(2) { animation-delay:  80ms; }
.hotel-amenity.is-animating:nth-child(3) { animation-delay: 120ms; }
.hotel-amenity.is-animating:nth-child(4) { animation-delay: 160ms; }
.hotel-amenity.is-animating:nth-child(5) { animation-delay: 200ms; }

@keyframes amenityFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes itemReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hotel-amenity.is-animating { animation: none; }
}


/* ── Hotel contact block (address + website links) ── */

.hotel-contact {
  display: flex;
  flex-direction: column;
  margin: var(--spacing-sm) 0;
}

.hotel-contact__address {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: normal;
  transition: color var(--transition-slow);
}


/* Address margin-top was set for meta-tag context — no longer needed */
#section-accommodations .place-address {
  margin-top: 0;
}

/* Nav buttons: tight to the website link, no extra gap */
#section-accommodations .location-nav {
  margin-top: 0;
}

/* Full-width amenity item */
.hotel-amenity--full {
  grid-column: 1 / -1;
}

#section-transportation .section-subsection .location-nav .btn--secondary,
#section-accommodations .section-subsection .location-nav .btn--secondary,
.info-box .btn--secondary {
  font-size: var(--text-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* ═══════════════════════════════════════
   WEATHER SECTION
═══════════════════════════════════════ */

.weather-info {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 38ch;
  transition: color var(--transition-slow);
}

/* ── Horizontal timeline: [today] [···] [22] [23] [24★] [25] [26] ── */

.weather-timeline {
  display: flex;
  align-items: flex-end;    /* bottom-align: wedding card sticks up, others align at bottom */
  gap: var(--spacing-xs);
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 1rem;        /* clearance so the badge above wedding card isn't clipped */
}

.weather-timeline::-webkit-scrollbar {
  display: none;
}

/* ── Dots separator between today and the 5-day window ── */

.weather-gap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* dots centered within the card-height span */
  gap: 5px;
  padding: 0 var(--spacing-xs);
  flex-shrink: 0;
  opacity: 0.35;
  /* align-self: flex-start + height matching card min-height: dots sit at card vertical center */
  align-self: flex-start;
  height: 11.5rem;
}

.weather-gap span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

/* ── E8 egg: two stacked timeline rows ── */

/* In the egg row the today-wrap stretches like all other day-wraps */
.weather-timeline--egg .weather-day-wrap:has(.weather-day--today) {
  flex-shrink: 1;
  flex-grow: 1;
}

.weather-gap--egg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  padding: var(--spacing-sm) 0;
  opacity: 0.35;
  height: auto;
}

.weather-gap--egg span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

/* ── Wrap: flex item that contains the day card + detached history box ── */

.weather-day-wrap {
  flex: 1;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

/* Today wrap: don't stretch as wide as day-window cards */
.weather-day-wrap:has(.weather-day--today) {
  flex-shrink: 0;
  flex-grow: 0;
}

/* ── Container queries: narrow card adaptations ── */

/* At ≤75 px: smaller text/icons so detail rows don't overflow the card */
@container (max-width: 75px) {
  .weather-detail {
    font-size: 0.60rem;
  }
  .weather-detail__row,
  .weather-detail--wind,
  .weather-detail--sun-times {
    gap: 0.12rem;
  }
  .weather-detail__icon {
    width: 0.65rem;
    height: 0.65rem;
  }
}

/* ── Base day card ── */

.weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);
  min-height: 11.5rem; /* normalizes card height across all states, including detail rows */
  background: var(--color-subsection-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  position: relative;
  /* Subtle shadow — shows the card is elevated above the history box below */
  box-shadow: 0 2px 6px var(--color-shadow);
  transition:
    background var(--transition-slow),
    border-color var(--transition-slow),
    box-shadow var(--transition-slow),
    opacity var(--transition-slow);
}

.weather-day--unavailable {
  background: color-mix(in srgb, var(--color-subsection-bg) 45%, transparent);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-border) 85%, transparent);
  box-shadow: none;
}

/* ── Today card — warm tint, slightly distinct ── */

.weather-day--today {
  background: var(--color-weather-today-bg, color-mix(in srgb, var(--color-bg-glass-card) 90%, var(--color-accent) 10%));
  border-style: dashed;
}

/* ── Wedding day card — premium tier; taller at top so badge can float above ── */

.weather-day--wedding {
  padding-top: var(--spacing-md);    /* one step up — creates the extra height above */
  padding-inline: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  background: var(--color-weather-wedding-bg);
  border-color: var(--color-weather-wedding-border);
  border-width: 1.5px;
  border-radius: var(--radius-md);
  box-shadow:
    0 8px 32px var(--color-weather-wedding-shadow),
    0 2px 8px var(--color-weather-wedding-shadow-sm);
  z-index: 1;
}

/* ── Day abbreviation ── */

.weather-day__abbr {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-sm);             /* one step up — more prominent */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-emphasis);
  margin-top: var(--spacing-xs);         /* extra breathing room at top */
  transition: color var(--transition-slow);
}

.weather-day--wedding .weather-day__abbr {
  color: var(--color-weather-wedding-muted);
}

/* ── Date ── */

.weather-day__date {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: color var(--transition-slow);
  white-space: nowrap;
  margin-top: calc(var(--spacing-xs) - var(--spacing-md));
}


/* ── Weather condition icon ── */

.weather-day__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.weather-day--wedding .weather-day__icon {
  width: 2rem;
  height: 2rem;
}

/* Empty <span> on unavailable cards — preserves flex layout space */
span.weather-day__icon {
  visibility: hidden;
}

.weather-day--unavailable .weather-day__abbr,
.weather-day--unavailable .weather-day__date {
  opacity: 0.6;
}

/* ── Temperature row ── */

/* Fixed height ensures the temps area takes the same space whether data is
   present (real numbers) or absent (em dashes). */
.weather-day__temps {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  height: 1.5rem;
  font-family: var(--font-body), sans-serif;
  font-variant-numeric: tabular-nums;
  margin-top: calc(var(--spacing-sm) - var(--spacing-md));
}

/* Wedding card uses text-base for max temp — slightly taller slot. */
.weather-day--wedding .weather-day__temps {
  height: 1.75rem;
}

.weather-day__max {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  transition: color var(--transition-slow);
}

.weather-day--wedding .weather-day__max {
  font-size: var(--text-base);
}

.weather-day__min {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: color var(--transition-slow);
}

/* ── Badge — centered on the top border of the wedding card, floats above it ── */

.weather-day__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-body), sans-serif;
  font-size: 0.6rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-weather-wedding-text);
  background: var(--color-emphasis);
  border: 1.5px solid var(--color-emphasis);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color var(--transition-slow), background var(--transition-slow), border-color var(--transition-slow);
}

/* ── "Soon" note — subtle, inline after temps on unavailable cards ── */

.weather-day__soon {
  font-family: var(--font-body), sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-align: center;
}

/* "Již brzy" overlay: absolutely centered in the unavailable card */
.weather-day__soon--overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body), sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* ── Weather detail rows (déšť/sníh, vítr, východ/západ slunce) ── */

.weather-day__details {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-sm);
  width: 100%;
}

.weather-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--transition-slow);
}

/* Rain / snow rows use a 2-line column layout: pct on line 1, icon+value on line 2 */
.weather-detail--rain,
.weather-detail--snow {
  flex-direction: column;
}

.weather-detail__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* 0 mm / 0 cm precipitation — dimmed further */
.weather-detail--zero { opacity: 0.45; }

.weather-detail__icon {
  display: inline-block;
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.weather-detail__value {
  line-height: 1;
}

.weather-detail__pct {
  line-height: 1;
  opacity: 0.7;
}

.weather-detail--rain                              { color: var(--color-weather-rain-muted); }
.weather-detail--rain.weather-detail--active       { color: var(--color-weather-rain-active); }
.weather-detail--snow                              { color: var(--color-weather-snow-active); }
.weather-detail--wind                               { color: var(--color-weather-wind-calm); }
.weather-detail--wind.weather-detail--wind-medium   { color: var(--color-weather-wind-medium); }
.weather-detail--wind.weather-detail--wind-strong   { color: var(--color-weather-wind-strong); }
.weather-detail--sun-times {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: var(--spacing-xs);
  justify-content: center;
  align-items: center;
  color: var(--color-weather-sun-times);
}

/* Wind arrow: rotate(windDeg) on upward arrow shows which direction wind blows FROM. */
/* --wind-deg is set per-element via JS inline style; 0deg fallback = North. */
.weather-detail__icon--wind-arrow {
  --wind-deg: 0deg;
  transform: rotate(var(--wind-deg));
}

.weather-detail__icon--rain-drop  { mask-image: url('../assets/images/icons/weather-rain-drop.svg');  -webkit-mask-image: url('../assets/images/icons/weather-rain-drop.svg'); }
.weather-detail__icon--snowflake  { mask-image: url('../assets/images/icons/weather-snowflake.svg');  -webkit-mask-image: url('../assets/images/icons/weather-snowflake.svg'); }
.weather-detail__icon--wind-arrow { mask-image: url('../assets/images/icons/weather-wind-arrow.svg'); -webkit-mask-image: url('../assets/images/icons/weather-wind-arrow.svg'); }
.weather-detail__icon--sunrise    { mask-image: url('../assets/images/icons/weather-sunrise.svg');    -webkit-mask-image: url('../assets/images/icons/weather-sunrise.svg'); }
.weather-detail__icon--sunset     { mask-image: url('../assets/images/icons/weather-sunset.svg');     -webkit-mask-image: url('../assets/images/icons/weather-sunset.svg'); }

/* ── Separate history box: attached below the day card, no top radius ── */

.weather-history-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xs);
  margin-inline: var(--spacing-xs);           /* slight inset so the card above visually overhangs */
  background: color-mix(in srgb, var(--color-subsection-bg) 60%, transparent);
  border: 1px solid var(--color-border);
  border-top: none;             /* seamless connection with card above */
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition:
    background var(--transition-slow),
    border-color var(--transition-slow);
}

.weather-history-box--error {
  justify-content: center;
  align-items: center;
  padding-block: var(--spacing-sm);
}

.weather-history-error {
  font-family: var(--font-body), sans-serif;
  font-size: 0.55rem;
  color: var(--color-text-muted);
  opacity: 0.6;
  text-align: center;
  font-style: italic;
  transition: color var(--transition-slow);
}

.weather-history-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  font-family: var(--font-body), sans-serif;
}

.weather-history-year {
  font-size: 0.55rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 1.8ch;
  text-align: right;
  transition: color var(--transition-slow);
}

.weather-history-icon {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  flex-shrink: 0;
}

.weather-history-temp {
  font-size: 0.55rem;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  white-space: nowrap;
  min-width: 2ch;
  transition: color var(--transition-slow);
}

/* Stagger weather cards when section enters viewport — indexed by wrap position in timeline
   (gap element at nth-child(2) has no .weather-day so its delay has no effect) */
.weather-day.is-animating {
  animation: itemReveal 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.weather-timeline > :nth-child(1) .weather-day.is-animating { animation-delay:   0ms; }
.weather-timeline > :nth-child(2) .weather-day.is-animating { animation-delay:  25ms; }
.weather-timeline > :nth-child(3) .weather-day.is-animating { animation-delay:  50ms; }
.weather-timeline > :nth-child(4) .weather-day.is-animating { animation-delay:  75ms; }
.weather-timeline > :nth-child(5) .weather-day.is-animating { animation-delay: 100ms; }
.weather-timeline > :nth-child(6) .weather-day.is-animating { animation-delay: 125ms; }
.weather-timeline > :nth-child(7) .weather-day.is-animating { animation-delay: 150ms; }

/* ── Info box — generic inline notice ── */

.info-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: color-mix(in srgb, var(--color-bg-glass-card) 60%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  transition:
    background var(--transition-slow),
    border-color var(--transition-slow),
    color var(--transition-slow);
}

#section-weather .info-box { margin-top: var(--spacing-md); }

.info-box__icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  opacity: 0.55;
}

.info-box__icon--info {
  mask-image: url('../assets/images/icons/icon-info-sm.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-info-sm.svg');
}

.info-box__icon--percent {
  mask-image: url('../assets/images/icons/icon-circle-percent-sm.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-circle-percent-sm.svg');
}

.info-box__body {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.info-box__code {
  color: var(--color-emphasis);
  letter-spacing: 0.04em;
  transition: color var(--transition-slow);
}

/* ── Promo code copy button — state machine ── */

.promo-copy-icon {
  position: relative;
  display: inline-flex;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.promo-copy-icon .btn-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 150ms ease-out;
}

.promo-copy-btn[data-promo-state="default"] .promo-copy-icon--check,
.promo-copy-btn[data-promo-state="copied"]  .promo-copy-icon--copy  { opacity: 0; }

.promo-copy-btn[data-promo-state="default"] .promo-copy-icon--copy,
.promo-copy-btn[data-promo-state="copied"]  .promo-copy-icon--check { opacity: 1; }

.promo-copy-label {
  display: grid;
}

.promo-copy-label--default,
.promo-copy-label--done {
  grid-area: 1 / 1;
  transition: opacity 150ms ease-out;
}

.promo-copy-btn[data-promo-state="default"] .promo-copy-label--default { opacity: 1; }
.promo-copy-btn[data-promo-state="default"] .promo-copy-label--done    { opacity: 0; }
.promo-copy-btn[data-promo-state="copied"]  .promo-copy-label--default { opacity: 0; }
.promo-copy-btn[data-promo-state="copied"]  .promo-copy-label--done    { opacity: 1; }

/* ── CS-only content: hidden in SK language ── */

html[lang="sk"] .cs-only { display: none; }
html[lang="cs"] .sk-only { display: none; }

/* ═══════════════════════════════════════
   SCHEDULE SECTION
═══════════════════════════════════════ */

.schedule-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0; /* items control their own spacing */
  contain: layout; /* isolates layout recalculations during flip-clock animation */
}

/* Continuous vertical line connecting dots */
.schedule-timeline::before {
  content: '';
  position: absolute;
  /* Horizontal center of the dot column (time col width + gap + half-dot-col) */
  left: calc(5.5rem + var(--spacing-md) + 0.375rem);
  top: 0.55rem;
  bottom: 0.55rem;
  width: 1px;
  background: var(--color-border);
  transition: background var(--transition-slow);
}

.schedule-item {
  display: grid;
  grid-template-columns: 5.5rem 0.75rem 1fr;
  gap: 0 var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) 0;
}

/* Time column */
.schedule-time {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: color var(--transition-slow);
}

/* Dot marker — sits on the vertical line */
.schedule-dot {
  width: 0.625rem;   /* 10px */
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-text-muted);
  flex-shrink: 0;
  justify-self: center;
  z-index: 1;
  transition: background var(--transition-slow), border-color var(--transition-slow);
}

/* Ceremony: larger, filled dot — marks the only exact time */
.schedule-item--ceremony .schedule-time {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-base);
}

.schedule-item--ceremony .schedule-dot {
  width: 0.875rem;
  height: 0.875rem;
  background: var(--color-text-secondary);
  border-color: var(--color-text-secondary);
}

/* Event column */
.schedule-event {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.schedule-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask-image: var(--schedule-icon-src);
          mask-image: var(--schedule-icon-src);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  flex-shrink: 0;
  color: var(--color-emphasis);
  transition: color var(--transition-slow);
}

.schedule-item--ceremony .schedule-icon {
  color: var(--color-emphasis);
}

.schedule-icon--arrival       { --schedule-icon-src: url('../assets/images/icons/schedule-arrival.svg'); }
.schedule-icon--refreshments  { --schedule-icon-src: url('../assets/images/icons/schedule-refreshments.svg'); }
.schedule-icon--ceremony      { --schedule-icon-src: url('../assets/images/icons/schedule-ceremony.svg'); }
.schedule-icon--lunch         { --schedule-icon-src: url('../assets/images/icons/schedule-lunch.svg'); }
.schedule-icon--cake          { --schedule-icon-src: url('../assets/images/icons/schedule-cake.svg'); }
.schedule-icon--first-dance   { --schedule-icon-src: url('../assets/images/icons/schedule-first-dance.svg'); }
.schedule-icon--accommodation { --schedule-icon-src: url('../assets/images/icons/schedule-accommodation.svg'); }
.schedule-icon--games         { --schedule-icon-src: url('../assets/images/icons/schedule-games.svg'); }
.schedule-icon--photo         { --schedule-icon-src: url('../assets/images/icons/schedule-photo.svg'); }
.schedule-icon--evening-snack { --schedule-icon-src: url('../assets/images/icons/schedule-evening-snack.svg'); }
.schedule-icon--disco         { --schedule-icon-src: url('../assets/images/icons/schedule-disco.svg'); }
.schedule-icon--beer          { --schedule-icon-src: url('../assets/images/icons/icon-beer.svg'); }
.schedule-icon--pipe          { --schedule-icon-src: url('../assets/images/icons/icon-wind.svg'); }
.schedule-icon--end           { --schedule-icon-src: url('../assets/images/icons/schedule-end.svg'); }
.schedule-icon--last          { --schedule-icon-src: url('../assets/images/icons/schedule-last.svg'); }

/* Pre-animation placeholder: muted '--:--' until the flip clock runs */
.schedule-time[data-loading] {
  opacity: 0.35;
}

/* Flip-clock spans — both hour and minute digits animate via WAAPI (scaleY spin) */
.schedule-time__hour,
.schedule-time__minutes {
  display: inline-block;
  transform-origin: center center;
  font-variant-numeric: tabular-nums;
  /* No will-change: WAAPI auto-promotes the element when animation starts (fill:'none'
     means at most 2 layers active at once). Pre-promotion via will-change would create
     26 simultaneous compositor layers → GPU VRAM overflow → eucalyptus layer eviction → flicker. */
}

/* Count-up spans — zero-to-value loading animation (same WAAPI technique as flip clock) */
.count-up {
  display: inline-block;
  transform-origin: center center;
  font-variant-numeric: tabular-nums;
}

.transport-distance-row__km[data-count-loading],
.transport-distance-row__time[data-count-loading],
.hotel-dist-stat__value[data-count-loading] {
  opacity: 0.35;
}

.schedule-name {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  transition: color var(--transition-slow);
}

.schedule-item--ceremony .schedule-name {
  font-weight: var(--font-weight-medium);
}

/* Fixed-time marker ✦ — prepended to exact schedule times */
.schedule-fixed-mark {
  display: inline-block;
  margin-right: 0.25em;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  opacity: 0.65;
  vertical-align: 0.05em;
  transition: color var(--transition-slow);
}

.schedule-item--ceremony .schedule-fixed-mark {
  color: var(--color-text-secondary);
  opacity: 0.85;
}

/* Schedule footnote */
.schedule-note {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  line-height: 1.6;
  margin-top: var(--spacing-sm);
  transition: color var(--transition-slow);
}

/* Stagger schedule items when section enters viewport */
.schedule-item.is-animating {
  animation: itemReveal 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.schedule-item.is-animating:nth-child(1)  { animation-delay:  30ms; }
.schedule-item.is-animating:nth-child(2)  { animation-delay:  60ms; }
.schedule-item.is-animating:nth-child(3)  { animation-delay:  90ms; }
.schedule-item.is-animating:nth-child(4)  { animation-delay: 120ms; }
.schedule-item.is-animating:nth-child(5)  { animation-delay: 150ms; }
.schedule-item.is-animating:nth-child(6)  { animation-delay: 180ms; }
.schedule-item.is-animating:nth-child(7)  { animation-delay: 210ms; }
.schedule-item.is-animating:nth-child(8)  { animation-delay: 240ms; }
.schedule-item.is-animating:nth-child(9)  { animation-delay: 270ms; }
.schedule-item.is-animating:nth-child(10) { animation-delay: 300ms; }
.schedule-item.is-animating:nth-child(11) { animation-delay: 330ms; }
.schedule-item.is-animating:nth-child(12) { animation-delay: 360ms; }
.schedule-item.is-animating:nth-child(13) { animation-delay: 390ms; }

/* ── Mobile: collapse time column slightly ── */
@media (max-width: 479px) {
  .schedule-item {
    grid-template-columns: 4.5rem 0.75rem 1fr;
    gap: 0 var(--spacing-sm);
  }

  .schedule-timeline::before {
    left: calc(4.5rem + var(--spacing-sm) + 0.375rem);
  }

  .schedule-time {
    font-size: var(--text-xs);
  }
}

/* ═══════════════════════════════════════
   RULES SECTION
═══════════════════════════════════════ */

.rules-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: calc(-1 * var(--spacing-xs));
  transition: color var(--transition-slow);
}

.rules-list {
  list-style: none;
  counter-reset: rule-item;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.rules-item {
  counter-increment: rule-item;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--spacing-sm);
  row-gap: var(--spacing-xs);
}

.rules-item::before {
  content: counter(rule-item, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  padding-top: 0.1rem;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: color var(--transition-slow);
}

.rules-item__title {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  transition: color var(--transition-slow);
}

.rules-item__body {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  letter-spacing: 0.02em;
  transition: color var(--transition-slow);
}

/* Stagger rules items when section enters viewport */
.rules-item.is-animating {
  animation: itemReveal 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.rules-item.is-animating:nth-child(1) { animation-delay:  35ms; }
.rules-item.is-animating:nth-child(2) { animation-delay:  70ms; }
.rules-item.is-animating:nth-child(3) { animation-delay: 105ms; }
.rules-item.is-animating:nth-child(4) { animation-delay: 140ms; }
.rules-item.is-animating:nth-child(5) { animation-delay: 175ms; }

/* ═══════════════════════════════════════
   SCROLL-TO-TOP BUTTON
   Fixed circle with chevron-up, appears after scrolling past hero.
═══════════════════════════════════════ */

.scroll-top-btn {
  position: fixed;
  right: var(--spacing-md);
  bottom: 1.5rem;
  z-index: calc(var(--z-controls) - 1);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-bg-glass);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid var(--color-border);
  /* box-shadow: 0 2px 12px var(--color-shadow); */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);
  transition:
    opacity    0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform  0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background var(--transition-slow),
    border-color var(--transition-slow),
    box-shadow var(--transition-slow);
}

.scroll-top-btn::before {
  content: '';
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 2px solid var(--color-text-secondary);
  border-right: 2px solid var(--color-text-secondary);
  transform: rotate(-45deg) translate(-2px, 2px);
}

.scroll-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top-btn.is-visible:active {
  transform: scale(0.92);
}

/* ── Dress code colour palette ── */

.dresscode-palette {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: nowrap;
  padding-top: var(--spacing-lg);
}

.dresscode-swatch {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.dresscode-swatch__circle {
  display: block;
  width: min(72px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
}

.dresscode-swatch__name {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  transition: color var(--transition-slow);
}

.dresscode-swatch__hex {
  font-family: monospace;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  transition: color var(--transition-slow);
}

/* ── Tie product cards (men's dresscode) ──
   Image-only cards linking to e-shop. Sibling of weather-day cards: same
   border / radius / shadow language. Desktop: 4 equal-width flex columns.
   Mobile: horizontal scroll-snap, cards overflow visibly. */

.tie-cards {
  display: flex;
  gap: var(--spacing-md);
  width: 100%;
}

.tie-card {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  position: relative;
  padding: var(--spacing-sm);
  background: var(--color-subsection-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 6px var(--color-shadow);
  overflow: hidden;
  scroll-snap-align: start;
  transition:
    transform    200ms cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow   200ms cubic-bezier(0.25, 1, 0.5, 1),
    border-color 200ms cubic-bezier(0.25, 1, 0.5, 1),
    background   var(--transition-slow);
}

/* External link affordance — same size/color as .ext-link__trail in hotel links */
.tie-card::after {
  content: '';
  position: absolute;
  bottom: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 1rem;
  height: 1rem;
  background-color: var(--color-emphasis);
  mask-image: url('../assets/images/icons/icon-external-link-sm.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-external-link-sm.svg');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  pointer-events: none;
  z-index: 1;
  transition: background-color var(--transition-slow);
}

.tie-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--color-shadow);
  border-color: var(--color-text-muted);
  cursor: pointer;
}

.tie-card:hover::after {
  background-color: var(--color-text-secondary);
}

.tie-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px var(--color-shadow);
  transition-duration: 80ms;
}

.tie-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile: horizontal scroll, cards overflow visibly — same pattern as .weather-timeline */
@media (max-width: 767px) {
  .tie-cards {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    padding-bottom: var(--spacing-xs);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tie-cards::-webkit-scrollbar {
    display: none;
  }

  .tie-card {
    min-width: 128px;
    min-height: 128px;
  }

  .tie-card img {
    width: auto;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tie-card {
    transition: none;
  }

  .tie-card:hover {
    transform: none;
  }
}

/* Stagger tie cards when section enters viewport — left to right, same cadence as weather cards */
.tie-card.is-animating {
  animation: itemReveal 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tie-cards > .tie-card.is-animating:nth-child(1) { animation-delay:  60ms; }
.tie-cards > .tie-card.is-animating:nth-child(2) { animation-delay: 110ms; }
.tie-cards > .tie-card.is-animating:nth-child(3) { animation-delay: 160ms; }
.tie-cards > .tie-card.is-animating:nth-child(4) { animation-delay: 210ms; }

/* ── Conclusion: photo + blockquote ── */

.conclusion-photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.conclusion-quote {
  margin: 0;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}


.conclusion-quote p {
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
  padding-inline: var(--spacing-md);
  transition: color var(--transition-slow);
}

.conclusion-quote__attribution {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  transition: color var(--transition-slow);
}

/* ── Reduced motion: disable all entrance/stagger animations ── */
@media (prefers-reduced-motion: reduce) {
  .section-subsection.is-animating,
  .schedule-item.is-animating,
  .rules-item.is-animating,
  .weather-day.is-animating,
  .transport-distance-row.is-animating,
  .tie-card.is-animating {
    animation: none;
    opacity: 1;
  }
  .ext-link__anchor,
  .content-screen .btn--secondary {
    transition: none;
  }
  .content-hero .hero-cta {
    opacity: 1;
    animation: none;
  }
}


/* ── Hero CTA button ── */

.content-hero .hero-cta {
  animation: none;
  opacity: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.content-screen.is-visible .content-hero .hero-cta {
  animation: contentReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

.btn-icon--calendar-plus {
  mask-image: url('../assets/images/icons/icon-calendar-plus-sm.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-calendar-plus-sm.svg');
}

.btn-icon--calendar-download {
  mask-image: url('../assets/images/icons/icon-calendar-arrow-down.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-calendar-arrow-down.svg');
}

.btn-icon--x {
  mask-image: url('../assets/images/icons/icon-x-sm.svg');
  -webkit-mask-image: url('../assets/images/icons/icon-x-sm.svg');
}


/* ═══════════════════════════════════════
   EASTER EGG COUNTER
   Fixed pill bottom-left, symmetric to .scroll-top-btn
═══════════════════════════════════════ */

.egg-counter {
  position: fixed;
  left: var(--spacing-md);
  bottom: 1.5rem;
  z-index: calc(var(--z-controls) - 1);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  background: var(--color-bg-glass);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity    0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform  0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background var(--transition-slow),
    border-color var(--transition-slow);
}

.egg-counter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.egg-counter__icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: var(--color-emphasis);
  mask-image: url('../assets/images/icons/icon-egg-sm.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url('../assets/images/icons/icon-egg-sm.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.egg-counter__count {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-text-primary);
  min-width: 1ch;
  display: inline-block;
}