/*
 * DGA homepage hero section (checklist criterion #6, "homepage template" --
 * flagged separately on the client's audit deck as "Applying hero section
 * template").
 *
 * Values below are copied directly from DGA's own compiled homepage-
 * template preview (dga-home-template-preview.zip in the guideline
 * download), a real rendered instance of their <dga-hero> component, not a
 * Figma screenshot:
 *   <section class="lg:max-h-[491px] lg:h-[491px] ..." style="background:
 *     linear-gradient(0deg, rgba(9,42,30,.8) 0%, rgba(9,42,30,.8) 100%),
 *     url(...) ...">
 *     <h1 class="display-xl-semibold text-[#FFF]">
 *     <p class="text-xl-regular text-[#FFF] mt-[24px] mb-[32px]">
 *
 * DGA's real hero is an embla carousel with multiple slides and dot
 * indicators -- rebuilding that structurally is out of scope here. This
 * only brings the theme's existing single-slide hero
 * (components/hero-banner-text-left.blade.php) in line with DGA's real
 * height cap, dark overlay tint, and typography.
 */

.dga-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center; /* keep content vertically centered at any hero height */
}

/* Flat dark-green tint over the background image -- both gradient stops
   in DGA's source are the same color/alpha, so a plain overlay is
   equivalent. Sits above the background-image layers (z-0) and below the
   text content (z-10) from partials/responsive-background-images.blade.php
   and hero-banner-text-left.blade.php. */
.dga-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(9, 42, 30, 0.8);
}

@media (min-width: 1024px) {
  .dga-hero {
    min-height: 622px;
    max-height: 622px;
    box-sizing: border-box;
    /* offset the vertical centering by the overlapping (absolute) nav height
       so content is centered in the visible area below the header */
    padding-top: 81px;
  }

  /* Client report: heading sits too close to the header even though the
   * bottom of the hero (below the "Learn more" button) already has plenty
   * of clear space. hero-banner-text-left.blade.php previously had TWO
   * nested divs both applying py-24 padding (~192px stacked at desktop
   * widths), pushing real content height past this 491px cap and getting
   * silently clipped by .dga-hero's overflow:hidden -- fixed by removing
   * the redundant inner py-24 (see that file). With the double-padding
   * gone, rebalance the single remaining padding budget toward the top
   * instead of splitting it evenly, since the bottom already has clear
   * space below the button. */
  .dga-hero__container {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Client report (confirmed via their own DevTools computed-style panel
 * at ~1005px window width -- this breakpoint, not the >=1024px one) --
 * same padding issue as above, below the 1024px breakpoint. 94px/32px
 * confirmed correct by the client directly in their own browser's
 * DevTools (live-edited the value there before reporting it back). */
@media (max-width: 1023px) {
  .dga-hero > div {
    padding-top: 94px;
    padding-bottom: 32px;
    /* Below lg the container switches to flex-col, so its `items-center`
       (kept for vertical centering at lg) instead centers the content
       horizontally. Align to the start so text follows reading direction --
       left in English, right in Arabic (RTL) -- instead of being centered. */
    align-items: flex-start;
  }
  .dga-hero > div > div {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  /* The shared button component defaults to w-full below the lg breakpoint,
     so the hero's "Learn more" CTA stretches the full column width on
     mobile & tablet and reads as oversized. Scope it back to content width
     here (leaving the site-wide default untouched). */
  .dga-hero .dga-button {
    width: auto;
    display: inline-flex;
  }
  .dga-hero .dga-button__label {
    width: auto;
  }
}

.dga-hero__heading {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-display-xl);
  line-height: var(--line-height-display-xl);
  letter-spacing: var(--letter-spacing-display-xl);
  font-weight: var(--font-weight-semibold);
  color: #fff;
}

.dga-hero__description {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-xl);
  line-height: var(--line-height-text-xl);
  font-weight: var(--font-weight-regular);
  color: #fff;
  margin-top: var(--spacing-3xl);
  margin-bottom: var(--spacing-4xl);
}