/* Shared UI for the 2026 event and recipient-intent landing pages. The HTML is
   server-rendered; JavaScript is only an enhancement for photo upload and the
   existing site header/footer includes. */

.event-page {
  --event-ink: var(--pg-ink, #1d1b18);
  --event-muted: var(--pg-muted, #716b62);
  --event-paper: var(--pg-paper-light, #fbf9f5);
  --event-wash: var(--pg-paper, #f3eee5);
  --event-border: var(--pg-border, #d7cdbf);
  --event-accent: var(--pg-oxblood, #71313b);
  --event-accent-hover: var(--pg-oxblood-hover, #58242d);
  --event-forest: var(--pg-forest, #2d4037);
  background: var(--event-paper);
  color: var(--event-ink);
  font-family: var(--pg-font-body, 'Poppins', sans-serif);
  line-height: 1.65;
}

.event-page *,
.event-page *::before,
.event-page *::after { box-sizing: border-box; }

.event-page img { display: block; max-width: 100%; }
.event-page a { color: inherit; }

.event-page #header-include { min-height: 76px; background: #fff; }

.event-container {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}

.event-narrow { max-width: 820px; }

.event-skip-link {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid var(--event-accent);
  border-radius: 6px;
  transform: translateY(-150%);
}

.event-skip-link:focus { transform: translateY(0); }

.event-breadcrumbs { padding: 14px 0 2px; font-size: 0.78rem; color: var(--event-muted); }
.event-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.event-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: #a9a096; }
.event-breadcrumbs a { text-underline-offset: 3px; }

.event-hero { padding: 26px 0 46px; overflow: clip; }
.event-hero-grid { display: grid; gap: 28px; align-items: center; }
.event-hero-copy { max-width: 690px; }

.event-eyebrow,
.event-kicker {
  margin: 0 0 10px;
  color: var(--event-accent);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
}

.event-page h1,
.event-page h2,
.event-page h3 {
  color: var(--event-ink);
  font-family: var(--pg-font-display, 'Cormorant Garamond', serif);
  letter-spacing: -0.028em;
}

.event-page h1 { margin: 0; font-size: clamp(2.45rem, 11vw, 5.6rem); line-height: 0.96; text-wrap: balance; }
.event-page h2 { margin: 0 0 16px; font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1.05; text-wrap: balance; }
.event-page h3 { margin: 0 0 8px; font-size: 1.45rem; line-height: 1.15; }

.event-promise { max-width: 650px; margin: 22px 0 10px; font-size: 1.15rem; font-weight: 750; line-height: 1.45; }
.event-intro { max-width: 680px; margin: 0; color: var(--event-muted); font-size: 1rem; }

.event-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 26px; }
.event-hero-actions > span { font-size: 0.78rem; color: var(--event-muted); }

.event-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.91rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.event-button-primary { background: var(--event-accent); color: #fff !important; box-shadow: 0 10px 26px rgba(113, 49, 59, 0.2); }
.event-button-primary:hover { background: var(--event-accent-hover); transform: translateY(-1px); }
.event-button-light { background: #fff; color: var(--event-accent) !important; }

.event-hero-art { position: relative; margin: 0; }
.event-hero-art::before {
  position: absolute;
  z-index: 0;
  inset: 7% -8% -4% 10%;
  border-radius: 48% 52% 45% 55%;
  background: color-mix(in srgb, var(--event-accent) 11%, var(--event-wash));
  content: '';
  transform: rotate(4deg);
}
.event-hero-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 650px;
  border-radius: 7px;
  box-shadow: 0 24px 55px rgba(31, 25, 18, 0.18);
  object-fit: cover;
}
.event-hero-art figcaption { position: relative; z-index: 1; margin-top: 10px; color: var(--event-muted); font-size: 0.7rem; line-height: 1.45; }

.event-assurance { border-block: 1px solid var(--event-border); background: #fff; }
.event-assurance ul { display: grid; margin: 0; padding: 0; list-style: none; }
.event-assurance li { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--event-border); }
.event-assurance li:last-child { border-bottom: 0; }
.event-assurance strong { font-size: 0.86rem; }
.event-assurance span { color: var(--event-muted); font-size: 0.75rem; }

.event-section { padding: 60px 0; }

.event-deadline { padding: 34px 0 0; }
.event-deadline .event-container > div { padding: 25px; border: 1px solid #decfb4; border-radius: 12px; background: #fff8e9; }
.event-deadline h2 { margin-bottom: 8px; font-size: clamp(1.65rem, 6vw, 2.4rem); }
.event-deadline p:last-child { margin: 0; color: #62594b; }
.event-deadline-calm .event-container > div { border-color: #cfd8d3; background: #f1f5f2; }
.event-deadline-calm .event-kicker { color: var(--event-forest); }

.event-choice-section { padding-bottom: 30px; }
.event-choice-grid { display: grid; gap: 12px; }
.event-choice-card { min-height: 100%; padding: 22px; border: 1px solid var(--event-border); border-radius: 10px; background: #fff; }
.event-choice-card p { margin: 0; color: var(--event-muted); font-size: 0.91rem; }

.event-products { background: var(--event-wash); }
.event-section-intro { max-width: 720px; margin: -3px 0 25px; color: var(--event-muted); }
.event-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.event-product-card { min-width: 0; overflow: hidden; border: 1px solid var(--event-border); border-radius: 9px; background: var(--event-paper); box-shadow: 0 4px 18px rgba(31, 25, 18, 0.05); }
.event-product-card > a { display: block; height: 100%; text-decoration: none; }
.event-product-image { aspect-ratio: 3 / 4; overflow: hidden; background: #e7e0d6; }
.event-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms ease; }
.event-product-card a:hover img { transform: scale(1.025); }
.event-product-copy { padding: 14px; }
.event-product-copy h3 { display: -webkit-box; margin-bottom: 10px; overflow: hidden; font-size: 1.08rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.event-product-copy span { color: var(--event-accent); font-size: 0.76rem; font-weight: 800; }

.event-preview-section { background: var(--event-ink); color: #f7f2e9; }
.event-preview-layout { display: grid; gap: 30px; align-items: center; }
.event-preview-section h2 { color: #fff; }
.event-preview-section .event-kicker { color: #d9c7a7; }
.event-preview-copy > p:not(.event-kicker) { color: #d7d0c5; }
.event-steps { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; counter-reset: steps; list-style: none; }
.event-steps li { display: grid; grid-template-columns: 36px 1fr; column-gap: 11px; counter-increment: steps; }
.event-steps li::before { display: grid; grid-row: span 2; width: 32px; height: 32px; place-items: center; border: 1px solid #8d8274; border-radius: 50%; content: counter(steps); font-size: 0.75rem; font-weight: 800; }
.event-steps strong { color: #fff; font-size: 0.9rem; }
.event-steps span { color: #bdb4a7; font-size: 0.78rem; }
.event-preview-widget-wrap { min-width: 0; padding: 5px; border-radius: 17px; background: #fff; color: var(--event-ink); }
.event-preview-widget-wrap .pg-pw { margin: 0 auto; box-shadow: none; }
.event-preview-fallback { padding: 28px 20px; text-align: center; }
.event-preview-fallback p { margin: 0 0 18px; }
.event-noscript { margin: 0; padding: 0 18px 18px; font-size: 0.78rem; text-align: center; }

.event-editorial { background: var(--event-paper); }
.event-editorial-tint { background: #fff; }
.event-prose { max-width: 820px; }
.event-prose p { color: var(--event-muted); font-size: 1rem; }
.event-prose ul { display: grid; gap: 10px; padding-left: 22px; }
.event-prose li::marker { color: var(--event-accent); }

.event-delivery { background: var(--event-wash); }
.event-table-wrap { overflow-x: auto; border: 1px solid var(--event-border); border-radius: 9px; background: #fff; -webkit-overflow-scrolling: touch; }
.event-table-wrap table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.event-table-wrap th,
.event-table-wrap td { padding: 15px; border-bottom: 1px solid var(--event-border); vertical-align: top; font-size: 0.85rem; }
.event-table-wrap thead { background: var(--event-ink); color: #fff; }
.event-table-wrap tbody th { color: var(--event-ink); }
.event-table-wrap tbody td { color: var(--event-muted); }
.event-table-wrap tbody tr:last-child > * { border-bottom: 0; }
.event-delivery-note { margin: 13px 0 0; color: var(--event-muted); font-size: 0.75rem; }

.event-faq { background: #fff; }
.event-faq-list { border-top: 1px solid var(--event-border); }
.event-faq details { border-bottom: 1px solid var(--event-border); }
.event-faq summary { position: relative; padding: 19px 38px 19px 0; cursor: pointer; font-weight: 800; list-style: none; }
.event-faq summary::-webkit-details-marker { display: none; }
.event-faq summary::after { position: absolute; top: 17px; right: 5px; color: var(--event-accent); content: '+'; font-size: 1.5rem; font-weight: 400; }
.event-faq details[open] summary::after { content: '−'; }
.event-faq details div { padding: 0 24px 17px 0; }
.event-faq details p { margin: 0; color: var(--event-muted); }

.event-related { background: var(--event-paper); }
.event-related ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.event-related a { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 17px; border: 1px solid var(--event-border); border-radius: 8px; background: #fff; font-weight: 750; text-decoration: none; }
.event-related a span { color: var(--event-accent); }

.event-closing { padding: 50px 0 74px; background: var(--event-accent); color: #fff; text-align: center; }
.event-closing p { max-width: 720px; margin: 0 auto 20px; font-family: var(--pg-font-display, serif); font-size: clamp(1.7rem, 6vw, 2.8rem); line-height: 1.15; }

.event-mobile-cta { position: fixed; z-index: 900; right: 12px; bottom: 12px; left: 12px; display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; background: var(--event-accent); box-shadow: 0 10px 26px rgba(31, 25, 18, 0.28); color: #fff !important; font-size: 0.88rem; font-weight: 850; text-decoration: none; }

.event-page :focus-visible { outline: 3px solid #c88c20; outline-offset: 3px; }

@media (min-width: 620px) {
  .event-container { width: min(100% - 48px, 1180px); }
  .event-assurance ul { grid-template-columns: repeat(3, 1fr); }
  .event-assurance li { padding: 20px; border-right: 1px solid var(--event-border); border-bottom: 0; }
  .event-assurance li:first-child { padding-left: 0; }
  .event-assurance li:last-child { padding-right: 0; border-right: 0; }
  .event-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-product-grid { gap: 18px; }
  .event-related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 880px) {
  .event-page #header-include { min-height: 100px; }
  .event-hero { padding: 40px 0 76px; }
  .event-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.72fr); gap: clamp(46px, 6vw, 90px); }
  .event-hero-art img { max-height: 680px; }
  .event-hero-actions { flex-direction: row; align-items: center; }
  .event-section { padding: 90px 0; }
  .event-deadline { padding-top: 50px; }
  .event-choice-section { padding-bottom: 54px; }
  .event-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .event-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .event-preview-layout { grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.75fr); gap: 70px; }
  .event-mobile-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .event-page *,
  .event-page *::before,
  .event-page *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

@supports (content-visibility: auto) {
  .event-editorial,
  .event-delivery,
  .event-faq,
  .event-related { content-visibility: auto; contain-intrinsic-size: auto 720px; }
}