/* ==========================================================================
   Made for Every Season — component styles. Everything is prefixed seasons-
   and scoped to .seasons-section, so nothing outside the component changes.
   ========================================================================== */
.seasons-section {
  --seasons-text: #2A2A2E;
  --seasons-muted: #6B6B70;
  --seasons-border: #C9D1DC;
  --seasons-border-hover: #9AA6B6;
  --seasons-active: #2A2A2E;
  --seasons-radius: 16px;
  --seasons-ease: cubic-bezier(.22, .8, .24, 1);
  --seasons-fade: 450ms;
  --seasons-heading-font: var(--serif, inherit);
  background: #FFFFFF;
  padding: 64px 0 72px;
  color: var(--seasons-text);
}
@media (min-width: 1024px) { .seasons-section { padding: 96px 0; } }

.seasons-inner {
  width: 100%; max-width: calc(900px + var(--pad, 20px) * 2); margin: 0 auto; padding: 0 var(--pad, 20px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.seasons-heading {
  margin: 0; font-family: var(--seasons-heading-font); font-size: clamp(28px, 6vw, 48px); line-height: 1.12;
  font-weight: 400; letter-spacing: -.01em; color: var(--seasons-text);
}
.seasons-heading strong { font-weight: 700; }
.seasons-description {
  margin: 16px 0 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--seasons-muted);
}
@media (min-width: 1024px) { .seasons-description { font-size: 20px; } }

/* --- main image: reserved 4:3 box, three stacked images --- */
.seasons-media {
  position: relative; width: 100%; max-width: 900px; aspect-ratio: 4 / 3; margin-top: 36px;
  border-radius: var(--seasons-radius); overflow: hidden; isolation: isolate;
  background: #1c1f22; /* never shows white while switching */
  box-shadow: 0 1px 2px rgba(20, 24, 30, .06), 0 24px 48px -24px rgba(20, 24, 30, .35), 0 60px 90px -60px rgba(20, 24, 30, .3);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
@supports not (aspect-ratio: 4 / 3) {
  .seasons-media { height: 0; padding-top: 75%; }
}
.seasons-picture { display: contents; }
.seasons-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; z-index: 0; transition: opacity var(--seasons-fade) ease; -webkit-user-drag: none; pointer-events: none;
}
.seasons-image.is-prev { opacity: 1; z-index: 1; transition: none; }
.seasons-image.is-active { opacity: 1; z-index: 2; }
.seasons-media:focus-visible { outline: 3px solid var(--seasons-active); outline-offset: 4px; }

/* --- mode selectors --- */
.seasons-tabs { display: flex; justify-content: center; gap: 28px; margin-top: 28px; }
@media (min-width: 768px) { .seasons-tabs { gap: 44px; margin-top: 36px; } }
.seasons-tab {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px; margin: 0;
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--seasons-muted);
  -webkit-tap-highlight-color: transparent; border-radius: 12px;
}
.seasons-tab-circle {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: #FFFFFF; border: 2px solid var(--seasons-border); color: var(--seasons-text);
  transition: transform .3s var(--seasons-ease), background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
@media (min-width: 768px) { .seasons-tab-circle { width: 80px; height: 80px; } }
.seasons-tab-circle svg { width: 26px; height: 26px; display: block; }
@media (min-width: 768px) { .seasons-tab-circle svg { width: 30px; height: 30px; } }
.seasons-tab-label {
  font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: color .3s ease;
}
html[lang="ar"] .seasons-tab-label { letter-spacing: 0; text-transform: none; font-size: 15px; }
.seasons-tab:hover .seasons-tab-circle { border-color: var(--seasons-border-hover); box-shadow: 0 6px 16px rgba(20, 24, 30, .08); }
.seasons-tab:hover .seasons-tab-label { color: var(--seasons-text); }
.seasons-tab[aria-selected="true"] .seasons-tab-circle {
  background: var(--seasons-active); border-color: var(--seasons-active); color: #FFFFFF; transform: scale(1.08);
  box-shadow: 0 10px 24px -8px rgba(20, 24, 30, .45);
}
.seasons-tab[aria-selected="true"] .seasons-tab-label { color: var(--seasons-text); }
.seasons-tab:focus { outline: none; }
.seasons-tab:focus-visible .seasons-tab-circle { outline: 3px solid var(--seasons-active); outline-offset: 4px; }

/* --- dynamic caption --- */
.seasons-caption { margin-top: 28px; max-width: 560px; min-height: 104px; }
.seasons-caption-title {
  margin: 0; font-family: var(--seasons-heading-font); font-size: clamp(22px, 4.6vw, 30px); line-height: 1.25;
  font-weight: 600; color: var(--seasons-text);
}
.seasons-caption-text { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--seasons-muted); }
@media (min-width: 1024px) { .seasons-caption-text { font-size: 18px; } }
.seasons-caption.is-swap > * { animation: seasons-cap .45s ease both; }
.seasons-caption.is-swap > * + * { animation-delay: .05s; }
@keyframes seasons-cap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .seasons-image, .seasons-tab-circle, .seasons-tab-label { transition: none !important; }
  .seasons-tab[aria-selected="true"] .seasons-tab-circle { transform: none; }
  .seasons-caption.is-swap > * { animation: none !important; }
}