/* =========================================================================
   LUMINAGE — HERO BANNER
   =========================================================================
   Self-contained, like nav.css. Text and buttons are real HTML over
   images/hero-background.png, so every word stays selectable, translatable
   and crisp on any screen — nothing is baked into the picture.

   The photograph puts the products across the middle, so the copy lives in
   the left and right margins. A soft white scrim sits under those margins
   to keep text readable over the busier parts of the shot.

   Below 992px the overlay is abandoned entirely: there is not enough room
   beside the products on a phone, so the layout stacks instead.

   Palette (taken from the artwork)
     purple       #3a0d5c    headings, strip
     purple deep  #2a0842    ribbon text
     gold         #c9a227    rules, rings, ribbon
   ========================================================================= */

:root {
  --hero-purple: #3a0d5c;
  --hero-purple-deep: #2a0842;
  --hero-gold: #c9a227;
  --hero-gold-light: #f0d78a;
  --hero-cream: #fbf7f0;
  --hero-ink: #4a3a55;
}

/* =========================================================================
   BANNER SHELL
   ========================================================================= */
.hero-banner {
  position: relative;
  isolation: isolate;
  background-color: var(--hero-cream);
  background-image: url('../../images/hero-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Scrims: lighten the top for the headline and both flanks for the columns,
   while leaving the centre of the photograph untouched. */
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 17%, rgba(255,255,255,0) 33%),
    linear-gradient(to right,  rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.93) 13%, rgba(255,255,255,0.55) 23%, rgba(255,255,255,0) 35%),
    linear-gradient(to left,   rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.93) 13%, rgba(255,255,255,0.55) 23%, rgba(255,255,255,0) 35%);
}

/* Hidden by default; the stacked layout below 992px turns it on. */
.hero-banner__photo { display: none; }

.hero-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1rem, 3vw, 2.5rem) clamp(1.2rem, 2.2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

/* =========================================================================
   HEADLINE
   ========================================================================= */
.hero-banner__head {
  text-align: center;
  max-width: 1240px;
  margin-inline: auto;
}

.hero-title {
  margin: 0 0 0.5rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1.5rem, 3.35vw, 2.85rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--hero-purple);
  text-wrap: balance;
}

/* The gold ribbon behind the middle words. A skewed block rather than an
   image, so it scales with the type. */
.hero-ribbon {
  position: relative;
  display: inline-block;
  padding: 0.06em 0.42em 0.1em;
  margin: 0 0.06em;
}
.hero-ribbon::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: skewX(-11deg);
  background: linear-gradient(103deg, #a8781a 0%, #f3dc95 34%, #e2bb55 58%, #b88a22 100%);
  box-shadow: 0 2px 10px rgba(58, 13, 92, 0.16);
}
.hero-ribbon > span {
  position: relative;
  z-index: 1;
  font-style: italic;
  font-weight: 800;
  color: var(--hero-purple-deep);
}

.hero-sub {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.92rem, 1.5vw, 1.32rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--hero-purple);
  text-wrap: balance;
}

/* =========================================================================
   COLUMNS
   ========================================================================= */
.hero-banner__cols {
  display: grid;
  /* The middle track is empty on purpose: it is where the products sit in
     the photograph. */
  grid-template-columns: minmax(0, 19fr) minmax(0, 43fr) minmax(0, 18fr);
  gap: clamp(0.5rem, 2vw, 1.5rem);
  align-items: start;
  flex: 1 1 auto;
}

.hero-col__title {
  margin: 0 0 clamp(0.6rem, 1.4vw, 1.1rem);
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.95rem, 1.75vw, 1.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--hero-purple);
}
.hero-col--right { text-align: right; }

/* -- Feature list -------------------------------------------------------- */
.hero-feats { list-style: none; margin: 0; padding: 0; }

.hero-feat {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.85rem);
  padding: clamp(0.22rem, 0.45vw, 0.36rem) 0;
  border-bottom: 1px solid rgba(201, 162, 39, 0.45);
}
.hero-feat:last-child { border-bottom: none; }

.hero-feat__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(28px, 2.3vw, 36px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--hero-gold);
  background: linear-gradient(145deg, #4a1470, #2a0842);
  color: var(--hero-gold-light);
  box-shadow: 0 2px 8px rgba(42, 8, 66, 0.22);
}
.hero-feat__icon svg { width: 52%; height: 52%; }

.hero-feat__label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.7rem, 1.05vw, 1rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--hero-purple);
}

/* -- Right-hand claim ----------------------------------------------------- */
.hero-claim {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.05rem, 2.3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--hero-purple);
}
.hero-claim__rule {
  width: clamp(40px, 5vw, 76px);
  height: 2px;
  margin: clamp(0.5rem, 1vw, 0.85rem) 0 clamp(0.5rem, 1vw, 0.85rem) auto;
  border: 0;
  background: var(--hero-gold);
}
.hero-claim__note {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.72rem, 1.1vw, 1.05rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--hero-ink);
}

/* =========================================================================
   TRUST STRIP
   ========================================================================= */
.hero-strip {
  position: relative;
  z-index: 1;
  background: var(--hero-purple);
  border-top: 2px solid var(--hero-gold);
  border-bottom: 2px solid var(--hero-gold);
}
.hero-strip__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(0.55rem, 1vw, 0.8rem) clamp(1rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.hero-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.2rem 0.75rem;
  border-right: 1px solid rgba(201, 162, 39, 0.4);
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.62rem, 0.95vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
.hero-strip__item:last-child { border-right: none; }
.hero-strip__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(22px, 1.9vw, 30px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--hero-gold);
  color: var(--hero-gold-light);
}
.hero-strip__icon svg { width: 55%; height: 55%; }

/* =========================================================================
   CALL TO ACTION
   ========================================================================= */
.hero-cta {
  background: var(--hero-cream);
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);
  text-align: center;
  padding: clamp(0.9rem, 1.7vw, 1.25rem) 1rem;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: clamp(0.72rem, 1.1vw, 0.92rem) clamp(1.6rem, 3vw, 2.9rem);
  border: 2px solid var(--hero-gold);
  border-radius: 999px;
  background: var(--hero-purple);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.78rem, 1.15vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-btn:hover {
  background: var(--hero-purple-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(42, 8, 66, 0.55);
}
.hero-btn svg { width: 17px; height: 17px; flex: 0 0 17px; }
.hero-btn__chev { margin-left: 0.15rem; }

.hero-btn:focus-visible {
  outline: 3px solid var(--hero-purple);
  outline-offset: 3px;
}

/* =========================================================================
   DESKTOP SIZING
   =========================================================================
   Locked to the artwork's own 1376 x 768 proportion so the copy keeps its
   position relative to the products, with a cap so it never dominates a
   tall screen.
   ========================================================================= */
@media (min-width: 992px) {
  /* A minimum height rather than a locked aspect ratio: the copy must never
     be clipped, so the banner grows if it needs to and the photograph
     crops instead. */
  .hero-banner {
    min-height: min(58vh, 520px);
    display: flex;
    align-items: stretch;
  }
  .hero-banner__inner { flex: 1 1 auto; }
  .hero-banner__cols { align-content: start; }
}

@media (min-width: 1500px) {
  .hero-banner { min-height: 560px; }
}

/* =========================================================================
   TABLET AND PHONE
   =========================================================================
   There is no room beside the products at this width, so the overlay is
   dropped: headline first, then the photograph at its natural proportion,
   then the copy underneath where it has space to breathe.
   ========================================================================= */
@media (max-width: 991px) {
  .hero-banner {
    background-image: none;
    background-color: var(--hero-cream);
  }
  .hero-banner::before { display: none; }

  .hero-banner__inner {
    padding: clamp(1.5rem, 5vw, 2.25rem) clamp(1rem, 5vw, 2rem) clamp(1.25rem, 4vw, 2rem);
    gap: clamp(1.25rem, 4vw, 1.75rem);
  }

  /* The photograph becomes a real element in the flow. */
  .hero-banner__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1376 / 768;
    background: url('../../images/hero-background.png') center / cover no-repeat;
    border-radius: 6px;
  }

  .hero-banner__cols {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 4vw, 1.75rem);
  }
  .hero-col--right { text-align: left; }
  .hero-claim__rule { margin-left: 0; margin-right: auto; }

  .hero-strip__inner { grid-template-columns: 1fr; gap: 0.15rem; }
  .hero-strip__item {
    justify-content: flex-start;
    border-right: none;
    border-bottom: 1px solid rgba(201, 162, 39, 0.3);
    padding: 0.55rem 0;
    text-align: left;
  }
  .hero-strip__item:last-child { border-bottom: none; }
}


@media (max-width: 575px) {
  .hero-banner__cols { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-feat__icon { width: 34px; }
  .hero-feat__label { font-size: 0.86rem; }
  .hero-col__title { font-size: 1.05rem; }
  .hero-claim { font-size: 1.5rem; }
  .hero-btn { width: 100%; max-width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-btn { transition: none; }
  .hero-btn:hover { transform: none; }
}