/* ============================================================
   MODULE: Feature Strip
   Full-width dark statement section — cinematic, centred text.

   Two variants:
     Default  — solid charcoal background with subtle plum/sage
                gradient overlay (the original "Lomi Hale" dark strip)
     --has-image — background photo fills the section; a dark
                   overlay is applied automatically for legibility

   The .hds-feature-strip__overlay element handles the tint in
   both cases so there's a single control point for darkness.
   ============================================================ */

/* ── Outer wrapper ─────────────────────────────────────────── */

.hds-feature-strip {
  position: relative;
  padding: 96px var(--gutter);
  text-align: center;
  background: var(--charcoal);
  overflow: hidden;
}

/* ── Background image (--has-image variant) ────────────────── */

.hds-feature-strip__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hds-feature-strip__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Slight desaturation keeps text legible over colourful images */
  filter: saturate(0.85);
  display: block;
}

/* ── Overlay ───────────────────────────────────────────────── */
/*
   Default (no image): a light plum-to-sage diagonal wash adds
   depth to the charcoal background.

   With image: replaced by a heavier dark gradient so the photo
   reads as atmosphere rather than competing with the text.
*/

.hds-feature-strip__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Default: subtle branded gradient on charcoal */
  background: linear-gradient(
    135deg,
    rgba(118, 82, 133, 0.18) 0%,
    transparent 55%,
    rgba(195, 211, 185, 0.09) 100%
  );
}

.hds-feature-strip--has-image .hds-feature-strip__overlay {
  /* Image variant: dark vignette ensures WCAG AA contrast for white text */
  background: linear-gradient(
    to bottom,
    rgba(44, 40, 38, 0.42) 0%,
    rgba(44, 40, 38, 0.68) 50%,
    rgba(44, 40, 38, 0.58) 100%
  );
}

/* ── Inner content (sits above bg + overlay) ───────────────── */

.hds-feature-strip__inner {
  position: relative;
  z-index: 1;
}

/* ── Decorative vertical rule ──────────────────────────────── */

.hds-feature-strip__rule {
  width: 1px;
  height: 52px;
  background: var(--sage);
  margin: 0 auto var(--space-md);
}

/* ── Typography ────────────────────────────────────────────── */

.hds-feature-strip__eyebrow {
  color: rgba(255, 255, 255, 0.45);
}

.hds-feature-strip__heading {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--fw-light);
  color: var(--white);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-md);
}

/* Italic accent: sage on dark backgrounds */
.hds-feature-strip__heading em {
  font-style: italic;
  color: var(--sage);
}

.hds-feature-strip__content {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.65);
  max-width: var(--max-narrow);
  margin: 0 auto var(--space-sm);
  line-height: var(--lh-body);
}

/* ── Button ────────────────────────────────────────────────── */

.hds-feature-strip__btn {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  background: transparent;
  margin-top: var(--space-md);
}

.hds-feature-strip__btn:hover {
  border-color: var(--sage);
  background: rgba(195, 211, 185, 0.12);
  transform: translateY(-2px);
  color: var(--white);
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hds-feature-strip { padding: 72px var(--gutter); }
  .hds-feature-strip__heading { font-size: 38px; }
}

@media (max-width: 600px) {
  .hds-feature-strip { padding: 56px var(--gutter); }
  .hds-feature-strip__heading { font-size: 28px; }
}