/* Occasion landing pages (/tr/dugun, /en/wedding, …) — linked by
   occasion.html only, after landing/base.css. One shared template; each
   page's mood is its accent tokens on main.occasion--<id>. Palette C: tints
   and accent text only, no dark panels; amber stays --warn. Every --accent
   passes WCAG AA as text on its --hero-tint and on --panel. */

.occasion--wedding   { --accent: var(--signal); --accent-bg: var(--signal-bg); --accent-line: var(--signal-border); --hero-tint: #f8f5fc; }
.occasion--kina      { --accent: #b8004f; --accent-bg: #fde6f0; --accent-line: #f6bfd8; --hero-tint: #fdf1f5; }
.occasion--corporate { --accent: #3a3f63; --accent-bg: #ecedf3; --accent-line: #d3d5e3; --hero-tint: #f1f2f6; }
.occasion--birthday  { --accent: #0f766e; --accent-bg: #e3f4f1; --accent-line: #bfe3dc; --hero-tint: #eff8f6; }

.occ h1 em, .occ h2 em { color: var(--accent); }
.occ .hero-eyebrow, .occ .strip-eyebrow, .occ .step-num, .occ .feat-no { color: var(--accent); }
.occ .step { border-top: 3px solid var(--accent-line); }
.occ .feat-row { border-bottom-color: var(--accent-line); }
.occ .faq-card { border-left: 3px solid var(--accent); }

/* hero: copy left (~40%), one large 3:2 photo right (~60%) that runs to
   the page's right edge */
.occ-hero {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
  padding: 56px 0 56px 40px;
  background: var(--hero-tint);
}
/* kına: a scatter of pop-pink dots, like confetti on a henna tray */
.occasion--kina .occ-hero {
  background:
    radial-gradient(circle at 18px 18px, rgba(255, 0, 140, .13) 2.5px, transparent 3px) 0 0 / 36px 36px,
    var(--hero-tint);
}
/* birthday: confetti in the three party colours */
.occasion--birthday .occ-hero {
  background:
    radial-gradient(circle at 10px 14px, rgba(15, 118, 110, .16) 2.5px, transparent 3px) 0 0 / 44px 44px,
    radial-gradient(circle at 32px 30px, rgba(255, 0, 140, .13) 2.5px, transparent 3px) 0 0 / 44px 44px,
    radial-gradient(circle at 24px 6px, rgba(101, 0, 216, .11) 2px, transparent 2.5px) 0 0 / 44px 44px,
    var(--hero-tint);
}
.occ-hero h1 { font-size: clamp(36px, 3.8vw, 56px); line-height: 1.04; letter-spacing: -.01em; }
.occ-hero .hero-sub { font-size: 18px; color: var(--text-muted); max-width: 34em; margin: 18px 0 0; line-height: 1.55; }
.occ-photo {
  position: relative;
  margin: 0;
}
.occ-photo img,
.occ-photo-pending {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px 0 0 6px;
}
.occ-photo-pending {
  background: repeating-linear-gradient(45deg, var(--accent-bg), var(--accent-bg) 12px, var(--panel) 12px, var(--panel) 24px);
  border: 2px dashed var(--accent-line);
  border-right: 0;
}
.occ-photo figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .86);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .06em;
}

/* the problem: one centered paragraph */
.occ-problem { max-width: 760px; margin: 0 auto; padding: 56px 40px 50px; text-align: center; }
.occ-problem h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; }
.occ-problem p { font-size: 17.5px; line-height: 1.7; color: var(--text-muted); margin: 16px 0 0; }

/* related occasions + pricing: pill links */
.occ-related { padding: 48px 40px 64px; }
.occ-related ul { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 24px 0 0; padding: 0; }
.occ-related a {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  border: 1px solid var(--border-control);
  border-radius: 999px;
  background: var(--panel);
  text-decoration: none;
  font-weight: 600;
}
.occ-related a:hover { border-color: var(--accent); }
.occ-related a span { color: var(--accent); font-family: var(--font-display); font-size: 20px; line-height: 1; }

@media (max-width: 900px) {
  .occ-hero { grid-template-columns: 1fr; padding: 40px 0 0; gap: 32px; }
  .occ-hero > div { padding: 0 20px; }
  .occ-photo img, .occ-photo-pending { border-radius: 0; }
  .occ-photo-pending { border-left: 0; }
  .occ-problem, .occ-related { padding-left: 20px; padding-right: 20px; }
}