/* Discovery pages: by-family / by-season */

.promo-hero{
  padding-block: var(--space-8) var(--space-6);
  text-align:center;
}
.promo-hero h1{ font-size: var(--fs-3xl); margin-block: var(--space-3) var(--space-4); }
.promo-hero p{ color: var(--fg-muted); max-width: 42ch; margin-inline:auto; }

.family-deck{
  display:flex;
  gap: var(--space-4);
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-pad);
  padding-inline: var(--container-pad);
  padding-block: var(--space-2) var(--space-8);
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.family-deck::-webkit-scrollbar{ display:none; }

.family-card{
  scroll-snap-align: start;
  flex: 0 0 78vw;
  max-width: 360px;
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5) var(--space-6);
  display:flex; flex-direction:column; justify-content:space-between;
  min-height: 62vh;
  position:relative;
  overflow:hidden;
  color: var(--color-on-ink);
  transition: transform var(--dur-base) var(--ease-out);
}
.family-card:active{ transform: scale(0.98); }
.family-card__eyebrow{ font-size: var(--fs-2xs); letter-spacing: var(--ls-eyebrow); text-transform:uppercase; opacity:0.75; }
.family-card__name{ font-family: var(--font-display); font-size: clamp(2.25rem, 8vw, 3rem); line-height:1.05; margin-block: var(--space-3) var(--space-4); }
.family-card__count{ font-size: var(--fs-xs); opacity:0.75; margin-bottom: var(--space-6); display:block; }
.family-card__notes{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.family-card__notes span{
  font-size: var(--fs-2xs); padding: 6px 12px; border-radius: var(--radius-pill);
  border:1px solid rgba(255,255,255,0.3); letter-spacing:0.02em;
}
.family-card__cta{
  display:inline-flex; align-items:center; gap: var(--space-2);
  font-size: var(--fs-xs); font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
}
.family-card__cta svg{ width:14px; height:14px; transition: transform var(--dur-fast) var(--ease-out); }
.family-card:hover .family-card__cta svg{ transform: translateX(4px); }

.family-card--oriental{ background: radial-gradient(120% 120% at 20% 0%, #4A3420, #1E140B); }
.family-card--woody{ background: radial-gradient(120% 120% at 20% 0%, #55492F, #241D10); }
.family-card--floral{ background: radial-gradient(120% 120% at 20% 0%, #5C4A46, #241A17); }
.family-card--citrus{ background: radial-gradient(120% 120% at 20% 0%, #6B5B2E, #2B2410); }
.family-card--gourmand{ background: radial-gradient(120% 120% at 20% 0%, #5A3B22, #26160A); }
.family-card--green{ background: radial-gradient(120% 120% at 20% 0%, #454A38, #1B1E15); }
.family-card--fruity{ background: radial-gradient(120% 120% at 20% 0%, #5C3F35, #251712); }
.family-card--aquatic{ background: radial-gradient(120% 120% at 20% 0%, #3E4A4C, #161D1E); }
.family-card--leather{ background: radial-gradient(120% 120% at 20% 0%, #3A2A22, #150E0A); }
.family-card--custom{ background: radial-gradient(120% 120% at 20% 0%, #4A4038, #1C1814); }

.deck-progress{ display:flex; justify-content:center; gap:6px; margin-top: calc(-1 * var(--space-6)); margin-bottom: var(--space-7); }
.deck-progress span{ width:6px; height:6px; border-radius:50%; background: var(--border); }
.deck-progress span.is-active{ background: var(--color-gold); width:18px; border-radius: var(--radius-pill); transition: width var(--dur-base) var(--ease-out); }

@media (min-width: 900px){
  .family-deck{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
    overflow:visible; padding-inline: var(--container-pad); scroll-snap-type:none;
    max-width: var(--container-max); margin-inline:auto;
  }
  .family-card{ flex:none; max-width:none; min-height:340px; }
  .deck-progress{ display:none; }
}

.season-tabs{
  display:flex; justify-content:center; gap: var(--space-2);
  padding-block: var(--space-5);
  flex-wrap:wrap;
  padding-inline: var(--container-pad);
}
.season-tab{
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight:600; letter-spacing:0.03em;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.season-tab.is-active{ background: var(--color-ink); color: var(--color-on-ink); border-color: var(--color-ink); }
.season-tab:hover{ border-color: var(--color-ink); }

.season-hero{
  position:relative;
  min-height: 56vh;
  display:flex; align-items:flex-end;
  padding: var(--space-7) var(--container-pad) var(--space-8);
  color: var(--color-on-ink);
  overflow:hidden;
}
.season-hero__eyebrow{ font-size: var(--fs-2xs); letter-spacing: var(--ls-eyebrow); text-transform:uppercase; opacity:0.8; margin-bottom: var(--space-3); display:block; }
.season-hero__name{ font-family: var(--font-display); font-size: clamp(3rem, 14vw, 6rem); line-height:0.95; margin-bottom: var(--space-4); }
.season-hero__lede{ max-width: 46ch; opacity:0.9; margin-bottom: var(--space-5); }
.season-hero__families{ display:flex; flex-wrap:wrap; gap: var(--space-2); }
.season-hero__families span{ font-size: var(--fs-2xs); padding: 6px 12px; border-radius: var(--radius-pill); border:1px solid rgba(255,255,255,0.35); }

.season-hero[data-season="spring"]{ background: radial-gradient(120% 120% at 20% 0%, #4F5A3C 0%, #232A18 70%); }
.season-hero[data-season="summer"]{ background: radial-gradient(120% 120% at 20% 0%, #6B5B2E 0%, #2B2410 70%); }
.season-hero[data-season="autumn"]{ background: radial-gradient(120% 120% at 20% 0%, #5A3B22 0%, #26160A 70%); }
.season-hero[data-season="winter"]{ background: radial-gradient(120% 120% at 20% 0%, #2E2A38 0%, #121018 70%); }

.season-picks-head{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap:wrap; }
.season-picks-head p{ color: var(--fg-muted); font-size: var(--fs-sm); max-width: 42ch; }
.product-grid--3{ grid-template-columns: repeat(2, 1fr); }
@media (min-width:900px){ .product-grid--3{ grid-template-columns: repeat(3, 1fr); } }