/* Occasion landing pages (KAN-506), loaded after weddings.css: only the parts /weddings does not have. */

/* Brand-motif tile, drawn wherever a photo is still missing (config image None). */
.occasion-motif-tile { display: flex; align-items: center; justify-content: center; background: var(--hzl-maroon); }
.occasion-motif-tile .hzl-motif { width: 44%; height: 44%; }
.occasion-motif-tile--clover { color: var(--hzl-blue); }
.occasion-motif-tile--seal, .occasion-motif-tile--quatrefoil { color: var(--hzl-chartreuse); }
.occasion-motif-tile--flower, .occasion-motif-tile--spark { color: var(--hzl-coral); }
.occasion-motif-tile--star, .occasion-motif-tile--ogee { color: var(--hzl-pink); }
.wedding-product-example .gift-card-image > .occasion-motif-tile { position: absolute; inset: 0; }

/* Hero placeholder: a sample wishlist cover until the real screenshot exists. The corner motifs sit in the
   padding, so they never cover the text at any width. */
.occasion-cover { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; padding: clamp(76px, 9vw, 112px) clamp(24px, 4vw, 48px); overflow: hidden; background: var(--hzl-maroon); color: var(--hzl-cream); }
.occasion-cover-motifs .hzl-motif { position: absolute; width: clamp(44px, 5vw, 68px); height: clamp(44px, 5vw, 68px); }
.occasion-cover-motifs .hzl-motif--clover { top: clamp(16px, 2vw, 28px); left: clamp(16px, 2vw, 28px); color: var(--hzl-blue); }
.occasion-cover-motifs .hzl-motif--seal { top: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px); color: var(--hzl-chartreuse); }
.occasion-cover-motifs .hzl-motif--flower { bottom: clamp(16px, 2vw, 28px); left: clamp(16px, 2vw, 28px); color: var(--hzl-coral); }
.occasion-cover-motifs .hzl-motif--star { bottom: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px); color: var(--hzl-pink); }
.occasion-cover-text { position: relative; max-width: 440px; text-align: center; }
.occasion-cover .occasion-cover-names { font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 54px); line-height: 1.05; letter-spacing: -.03em; }
.occasion-cover .occasion-cover-names span { font-family: var(--font-accent, 'Cormorant Garamond', serif); font-style: italic; }
.occasion-cover .occasion-cover-subtitle { margin-top: 14px; font: 13px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.occasion-cover .occasion-cover-date { margin-top: 18px; font: 12px/1.4 var(--font-mono); opacity: .8; }
.occasion-cover .occasion-cover-message { margin-top: 18px; font: italic 17px/1.4 var(--font-accent, 'Cormorant Garamond', serif); }

/* "What to add" gift ideas, in the slot /weddings uses for testimonials. */
.occasion-ideas { background: var(--hzl-white); }
.occasion-ideas .wedding-section-heading .wedding-lead { margin-bottom: 0 !important; }
.occasion-idea-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.occasion-idea .occasion-motif-tile { width: 56px; height: 56px; }
.occasion-page .occasion-idea h3 { margin: 18px 0 8px; font-size: 18px; }
.occasion-idea p { font-size: 15px; }

/* End CTA without a photo yet. */
.cta-image--motif { display: flex; align-items: center; justify-content: center; background: var(--hzl-maroon); }
.cta-image--motif > .hzl-motif { width: 44%; height: 44%; color: var(--hzl-blue); }

@media (max-width: 1024px) {
    .occasion-idea-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .occasion-cover { min-height: 0; }
    .occasion-cover .occasion-cover-message { font-size: 15px; }
}
@media (max-width: 600px) {
    .occasion-idea-list { grid-template-columns: 1fr; gap: 24px; }
    .occasion-idea { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: start; }
    .occasion-idea .occasion-motif-tile { width: 48px; height: 48px; grid-row: span 2; }
    .occasion-page .occasion-idea h3 { margin: 0 0 4px; }
}