/* ==========================================================================
   Section Heading Component
   Per Figma design - H4 text style
   Using element+class selectors for proper specificity over generic h2 rules
   ========================================================================== */


@layer components {
  /* Alignment variants */
  .section-heading--left {
    text-align: left;
  }

  .section-heading--center {
    text-align: center;
  }

  .section-heading--right {
    text-align: right;
  }
}

.section-heading--extra-bottom {
  padding-bottom: 10px;
}

/* Drop shadow on all 4 sides for the "It's your journey..." headline.
   Soft, blurred shadow projected top/bottom/left/right so the white
   text reads against any part of the hero video (sky-blue clouds, pale
   highlights, etc.) without a hard outline. Black at 63% opacity per
   ADA review, 3px offset, 4px blur on each side. Desktop-only. */
.section-heading--journey-shadow {
  text-shadow: none;
}

@media (min-width: 768px) {
  .section-heading--journey-shadow {
    text-shadow:
      0  5px 5px rgba(0, 0, 0, 0.43),
      0 -4px 5px rgba(0, 0, 0, 0.43),
      4px 0  5px rgba(0, 0, 0, 0.43),
     -4px 0  5px rgba(0, 0, 0, 0.43);
  }
}