/* =========================================================
   Site polish — overrides on top of the template's CSS
   ========================================================= */

/* ---- Hero: soft shade behind the transparent nav and the headline so
   white text stays readable over bright sky. Lives on the foreground layer,
   so it fades out with the headline as the hero shrinks. ---- */
[data-testid="hero-foreground"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20, 14, 8, 0.34) 0, rgba(20, 14, 8, 0) 180px),
    linear-gradient(to top, rgba(20, 14, 8, 0.68) 0, rgba(20, 14, 8, 0.37) 28%, rgba(20, 14, 8, 0) 58%);
  pointer-events: none;
}

/* Headline: warm ivory with a soft shadow so it holds up over the bright
   stone and coats behind it */
[data-testid="hero-foreground"] svg {
  filter: drop-shadow(0 2px 3px rgba(20, 14, 8, 0.35)) drop-shadow(0 6px 22px rgba(20, 14, 8, 0.45));
}

[data-testid="hero-headline"] {
  fill: #fdf6ec !important;
}

/* ---- Details: five cards (no registry) — centre the short last row
   instead of leaving it hanging on the left ---- */
@media (min-width: 768px) and (max-width: 1279px) {
  #details .grid.xl\:grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #details .grid.xl\:grid-cols-3 > * {
    grid-column: span 2;
  }

  #details .grid.xl\:grid-cols-3 > :last-child:nth-child(odd) {
    grid-column: 2 / span 2;
  }
}

@media (min-width: 1280px) {
  #details .grid.xl\:grid-cols-3 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #details .grid.xl\:grid-cols-3 > * {
    grid-column: span 2;
  }

  #details .grid.xl\:grid-cols-3 > :nth-child(4):nth-last-child(2) {
    grid-column: 2 / span 2;
  }
}

/* ---- Our story: even line breaks in chapter titles and text ---- */
#story h3 {
  text-wrap: balance;
}

#story p {
  text-wrap: pretty;
}

/* ---- Timeline: one card per day instead of a long centred list ---- */
#full-schedule > div {
  max-width: 72rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* the collapse wrapper clips overflow; give the card shadows room */
#full-schedule-content > div {
  margin: 0 -16px;
  padding: 0 16px 40px;
}

#full-schedule-content > div > div {
  display: grid;
  gap: 1rem;
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  #full-schedule-content > div > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    padding-top: 3rem;
  }
}

#full-schedule-content > div > div > * {
  margin: 0 !important;
}

/* day card */
#full-schedule-content > div > div > div {
  padding: 2rem 1.5rem 1.75rem;
  border: 1px solid var(--template-border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--template-card) 70%, transparent);
  box-shadow: 0 1px 2px rgba(47, 36, 27, 0.04), 0 14px 34px rgba(47, 36, 27, 0.06);
}

/* day name, with a short gold rule under it */
#full-schedule-content h3 {
  margin: 0 0 1.5rem !important;
}

#full-schedule-content h3::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 0.9rem auto 0;
  background: var(--template-accent-soft);
}

#full-schedule-content h3 + div > * {
  margin: 0 !important;
}

#full-schedule-content article + article {
  margin-top: 1.1rem !important;
  padding-top: 1.1rem;
  border-top: 1px dashed color-mix(in srgb, var(--template-text) 14%, transparent);
}

#full-schedule-content h4 {
  font-size: 1.2rem;
  line-height: 1.3;
}

#full-schedule-content article > div {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--template-muted) !important;
}

#full-schedule-content article > div:empty {
  display: none;
}

/* event notes (e.g. "Maybe Old Rag!") read as an aside, not a time */
#full-schedule-content article > div + div {
  margin-top: 0.4rem;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.95rem;
}

/* ---- Wedding party: four across so each party fills one row ---- */
@media (min-width: 768px) {
  .grid.md\:grid-cols-3:has(> div > figure) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* Names are truncated ("Elise McEn…") in the narrow portrait cards;
   tighten the name pill and let long names wrap instead. */
div.backdrop-blur-md > p.truncate.font-bold.text-white {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}

@media (min-width: 768px) {
  div.backdrop-blur-md:has(> p.truncate.font-bold.text-white) {
    left: 0.75rem;
    top: 0.75rem;
    max-width: calc(100% - 24px);
    padding: 0.375rem 0.75rem;
  }

  div.backdrop-blur-md > p.truncate.font-bold.text-white {
    font-size: 1rem;
  }
}

/* ---- Footer: lift "M + M" into the sky above the couple, and lighten
   the heavy flat overlay to a gradient behind the text ---- */
#footer [data-testid="footer-quote"] {
  text-shadow: 0 2px 18px rgba(20, 14, 8, 0.35);
}

#footer [data-testid="footer-quote"]::after {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  margin: 0.35em auto 0;
  background: rgba(255, 255, 255, 0.7);
}

#footer div.relative.z-10 {
  transform: none;
  translate: 0 -26svh;
}

#footer .z-0 > div.absolute.inset-0 {
  background-color: transparent !important;
  background-image: linear-gradient(to bottom,
    rgba(17, 12, 9, 0.5) 0%,
    rgba(17, 12, 9, 0.16) 50%,
    rgba(17, 12, 9, 0.22) 100%);
}

/* Story photo viewer: while it is open the template lifts #story to
   z-index 100 too, and #story comes later in the page, so the other
   polaroids were drawn over the enlarged photo and its close button. */
body > div.fixed:has(button[aria-label="Close photo viewer"]) {
  z-index: 110;
}