.occasions {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem);
  background: linear-gradient(180deg, var(--gj-ivory), var(--gj-cream) 120%);
  border-top: 1px solid var(--gj-gold-line);
  overflow: hidden;
}

.occasions__botanical {
  position: absolute;
  width: clamp(120px, 14vw, 210px);
  color: rgba(155, 119, 40, 0.28);
  pointer-events: none;
}

.occasions__botanical--left {
  left: -60px;
  top: 8%;
  transform: rotate(-8deg);
}

.occasions__header {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  text-align: center;
  padding-inline: var(--gj-gutter);
}

.occasions__eyebrow {
  font-family: var(--gj-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gj-gold-700);
}

.occasions__title {
  margin-top: var(--gj-space-3);
  font-family: var(--gj-font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  color: var(--gj-mehroon-950);
}

.occasions__title em {
  font-style: italic;
  color: var(--gj-gold-600);
}

.occasions__lede {
  margin-top: var(--gj-space-4);
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  line-height: 1.7;
  color: var(--gj-muted);
}

/* ---------- Grid: 1 lead + 6 stacked ---------- */

.occasions__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  max-width: var(--gj-container);
  margin-inline: auto;
  padding-inline: var(--gj-gutter);
}

.occasions__stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}

/* ---------- Occasion card ---------- */

.occ-card {
  position: relative;
  display: block;
  min-height: 168px;
  border-radius: var(--gj-radius-md);
  overflow: hidden;
  border: 1px solid var(--gj-gold-line);
  background: var(--gj-mehroon-950);
  isolation: isolate;
}

.occ-card--lead {
  min-height: 100%;
}

.occ-card__media {
  position: absolute;
  inset: 0;
  display: block;
}

.occ-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--gj-ease);
}

.occ-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 6, 13, 0.05) 30%, rgba(36, 6, 13, 0.78));
  z-index: 1;
}

.occ-card__content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: clamp(0.85rem, 2vw, 1.4rem);
  color: var(--gj-ivory);
}

.occ-card__name {
  font-family: var(--gj-font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.1;
}

.occ-card--lead .occ-card__name {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.occ-card__phrase {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--gj-blush);
}

.occ-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gj-gold-300);
  opacity: 0.9;
  transition: gap var(--gj-dur-fast) var(--gj-ease), opacity var(--gj-dur-fast) var(--gj-ease);
}

.occ-card:hover .occ-card__media img {
  transform: scale(1.045);
}

.occ-card:hover .occ-card__cta {
  gap: 10px;
  opacity: 1;
}

.occ-card:focus-visible {
  outline: 2px solid var(--gj-gold-500);
  outline-offset: 3px;
}

/* ---------- Breakpoints ---------- */

@media (max-width: 1023px) {
  .occasions__grid {
    grid-template-columns: 1fr;
  }

  .occ-card--lead {
    min-height: 300px;
  }

  .occasions__stack {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .occasions__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    margin-inline: 0;
    padding-inline: var(--gj-gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--gj-gold-soft) transparent;
  }

  .occ-card,
  .occ-card--lead {
    flex: 0 0 74vw;
    min-height: 320px;
    scroll-snap-align: start;
  }

  .occasions__stack {
    display: contents;
  }

  .occasions__stack .occ-card {
    flex-basis: 62vw;
    min-height: 320px;
  }
}

@media (max-width: 400px) {
  .occ-card,
  .occ-card--lead,
  .occasions__stack .occ-card {
    flex-basis: 80vw;
  }
}