/* SASA Packaging — Hero (v5) Mine
   LEFT : text slider – only the text moves, the hero background never changes.
   RIGHT: independent product gallery – columns drift up/down in a seamless CSS loop.
   Palette: blush #F6E2E9 · cream #FEFAF3 · sage #B8CFB3 · deep sage #84A282
   Load AFTER sasa-ui / sasa-premium / tailwind-generated. */

.sx-hero {
  --h-blush: #F6E2E9;
  --h-cream: #FEFAF3;
  --h-sage: #B8CFB3;
  --h-deep: #84A282;
  --h-ink: #1f2b22;
  --h-gap: clamp(8px, 1vw, 14px);
  position: relative !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  background: var(--h-cream) !important;
}

/* ---------- Layout ---------- */
.sx-hero .sx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: clamp(40px, 6vw, 88px);
}

/* ---------- Text slider (left) ---------- */
.sx-hero__slides { display: grid; }
.sx-hero .sx-hs {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
}
.sx-hero .sx-hs.is-active,
.sx-hero .sx-hs.is-leaving { visibility: visible; opacity: 1; }
.sx-hero .sx-hs .sx-hs__content { position: static; max-width: 40rem; }

.sx-hero .sx-hs .sx-hs__content > * { opacity: 0; transform: translateX(-42px); }
.sx-hero .sx-hs.is-active .sx-hs__content > * { animation: sxRise .7s cubic-bezier(.2, .8, .2, 1) both; }
.sx-hero .sx-hs.is-active .sx-hs__content > :nth-child(1) { animation-delay: .00s; }
.sx-hero .sx-hs.is-active .sx-hs__content > :nth-child(2) { animation-delay: .10s; }
.sx-hero .sx-hs.is-active .sx-hs__content > :nth-child(3) { animation-delay: .20s; }
.sx-hero .sx-hs.is-active .sx-hs__content > :nth-child(4) { animation-delay: .30s; }
@keyframes sxRise { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: none; } }

.sx-hero .sx-hs.is-leaving .sx-hs__content > * { opacity: 1; transform: none; animation: sxFall .35s ease-in both; }
.sx-hero .sx-hs.is-leaving .sx-hs__content > :nth-child(2) { animation-delay: .03s; }
.sx-hero .sx-hs.is-leaving .sx-hs__content > :nth-child(3) { animation-delay: .06s; }
.sx-hero .sx-hs.is-leaving .sx-hs__content > :nth-child(4) { animation-delay: .09s; }
@keyframes sxFall { to { opacity: 0; transform: translateX(42px); } }

.sx-hero .sx-hs__content h1,
.sx-hero .sx-hs__content h2 { color: var(--h-ink); }

/* Typography (self-contained, brand fonts) */
.sx-hero .sx-hs__content .sx-eyebrow {
  display: block; margin: 0 0 14px;
  font: 700 .8rem/1.2 Inter, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #4d6b4f;
}
.sx-hero .sx-hs__content h1,
.sx-hero .sx-hs__content h2 {
  margin: 0 0 18px; color: var(--h-ink);
  font-family: Outfit, Inter, system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.08; letter-spacing: -.02em;
}
.sx-hero .sx-hs__content p {
  margin: 0 0 28px; max-width: 34rem; color: #425246;
  font: 400 clamp(1rem, 1.3vw, 1.125rem)/1.7 Inter, system-ui, sans-serif;
}
.sx-hero .sx-hs__content .sx-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Gallery (right) ---------- */
.sx-hero__gallery {
  position: relative;
  height: clamp(400px, 66vh, 620px);
  overflow: hidden;
  /* soft fade at top and bottom so tiles glide in and out */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
}
.sx-gal {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: var(--h-gap);
  height: 100%;
}
.sx-gcol { min-width: 0; overflow: hidden; }
.sx-gcol__track {
  display: flex;
  flex-direction: column;
  animation: sxColUp var(--dur, 80s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
.sx-gcol.is-down .sx-gcol__track { animation-direction: reverse; }
/* the track holds the same tiles twice, so -50% lands exactly where it started */
@keyframes sxColUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }

/* Tiles: margin (not gap) so both halves of the track are exactly equal in height */
.sx-tile {
  flex: none;
  width: 100%;
  margin-bottom: var(--h-gap);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.sx-tile--l { aspect-ratio: 1 / 1.45; }
.sx-tile--m { aspect-ratio: 1 / 1.12; }
.sx-tile--s { aspect-ratio: 1 / .82; }
/* photo border: thin line in the exact theme colours (no cream) */
.sx-tile--img { box-sizing: border-box; padding: 0; border: 2px solid transparent; }
.sx-frame--sage  { border-color: #B8CFB3; }
.sx-frame--blush { border-color: #F6E2E9; }
.sx-tile img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

/* empty decorative blocks – brand colours */
.sx-tile--cream { background: var(--h-cream); box-shadow: inset 0 0 0 1px rgba(132, 162, 130, .35); }
.sx-tile--blush { background: var(--h-blush); }
.sx-tile--sage  { background: var(--h-sage); }

/* paused when the hero is scrolled out of view (set by sasa-hero.js) */
.sx-hero.is-offscreen .sx-gcol__track { animation-play-state: paused; }

/* ---------- Old hero controls hidden (safety) ---------- */
.sx-hero__controls, .sx-dots, .sx-pause, .sx-arrows, .sx-arrow { display: none !important; }

/* ---------- No JavaScript: show the first slide ---------- */
html:not(.sx-js) .sx-hero .sx-hs:first-child { visibility: visible; opacity: 1; }
html:not(.sx-js) .sx-hero .sx-hs:first-child .sx-hs__content > * { opacity: 1; transform: none; }

/* ---------- Tablet: 3 columns, gallery below the text ---------- */
@media (max-width: 991px) {
  .sx-hero .sx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sx-hero__gallery { height: clamp(300px, 46vh, 420px); }
  .sx-gal { --cols: 3 !important; }
  .sx-gal .sx-gcol:nth-child(n+4) { display: none; }
}
/* ---------- Mobile: 2 columns, shorter, calmer ---------- */
@media (max-width: 575px) {
  .sx-hero__gallery { height: 280px; }
  .sx-gal { --cols: 2 !important; }
  .sx-gal .sx-gcol:nth-child(n+3) { display: none; }
  .sx-tile { border-radius: 12px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-gcol__track { animation: none !important; }
  .sx-hero .sx-hs .sx-hs__content > *,
  .sx-hero .sx-hs.is-active .sx-hs__content > *,
  .sx-hero .sx-hs.is-leaving .sx-hs__content > * { animation: none !important; opacity: 1; transform: none; }
  .sx-hero .sx-hs.is-leaving { visibility: hidden; opacity: 0; }
}