/**
 * Friends of Bulgaria - Hero Section Styles
 *
 * From the approved concept (v5-flag_2): a deep green band, with the hero
 * photograph repeated behind it heavily blurred and darkened, then a green
 * gradient laid over the top. Two columns — copy left, a white-framed inset
 * photo right.
 */

/* =========================================
   Hero Section
   ========================================= */

/**
 * The concept's hero is a <section>, so it picks up the global section rhythm
 * (56px top and bottom) on top of the inner wrap's own 66/72 — giving a band
 * roughly 706px tall at desktop. This template's hero sits outside the
 * .homepage-section wrappers, so that outer padding is restated here.
 *
 * It is restated smaller, though. At 706px the green band filled a 768px-tall
 * laptop screen on its own, so the red event strip below it was never seen
 * without scrolling and the page opened on green alone. Trimming the outer
 * padding brings white, green and red — the flag — into the first screenful
 * on the usual laptop sizes. The inner wrap keeps the concept's 66/72, so the
 * hero's own proportions and type sizes are untouched.
 */
.hero {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--fob-white);
  background-color: var(--fob-green);
}

/* =========================================
   Background image + overlay

   The backdrop is scaled up before blurring so the blur radius never pulls
   transparent edges into frame.
   ========================================= */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--fob-green);
  filter: blur(34px) brightness(0.7) saturate(1.15);
  transform: scale(1.2);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(11, 125, 82, 0.5) 0%,
    rgba(8, 104, 69, 0.85) 100%
  );
}

/* =========================================
   Inner container — two columns
   ========================================= */

.hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--fob-wrap-max);
  margin: 0 auto;
  /* Half the space the concept leaves above and below the hero content: the
     outer 20 + the wrap's 66/72 came to 86 and 92, so 43 and 46. Type sizes,
     the photo and the gap between the columns are unchanged. */
  padding: 43px var(--fob-wrap-pad) 46px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 54px;
  align-items: center;
}

/* =========================================
   Left column — text
   ========================================= */

.hero__text {
  color: var(--fob-white);
}

.hero__subheading {
  font-size: 0.74rem;
  font-weight: var(--fob-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--fob-tracking-eyebrow);
  color: var(--fob-red-soft);
  margin: 0;
}

.hero__headline {
  font-family: var(--fob-font-heading);
  font-size: var(--fob-font-size-h1);
  font-weight: var(--fob-font-weight-normal);
  line-height: var(--fob-line-height-tight);
  letter-spacing: var(--fob-tracking-heading);
  max-width: 16ch;
  color: var(--fob-white);
  margin: 0.7rem 0 1.3rem;
}

.hero__body {
  font-size: 1.06rem;
  line-height: var(--fob-line-height-base);
  color: rgba(255, 255, 255, 0.92);
  max-width: 46ch;
  margin: 0 0 32px;
}

/* =========================================
   CTA buttons
   ========================================= */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__cta {
  min-height: 44px;
  min-width: 44px;
}

/* On the green band the line button inherits white from .hero. */
.hero .btn--line {
  color: var(--fob-white);
}

/* =========================================
   Right column — photo with caption

   A thick white frame lifted off the band with a deep shadow.
   ========================================= */

.hero__photo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__figure {
  margin: 0;
  width: 100%;
}

.hero__photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--fob-radius-xl);
  border: 7px solid var(--fob-white);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.46);
}

/* Placeholder shown until a hero photo is set in the Customizer */
.hero__figure--placeholder {
  border: 2px dashed rgba(255, 255, 255, 0.28);
  border-radius: var(--fob-radius-xl);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--fob-space-md);
}

.hero__caption {
  display: block;
  margin-top: 12px;
  font-size: 0.72rem;
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.74);
  text-align: center;
}

/* =========================================
   Responsive — photo leads on narrow screens
   ========================================= */

@media (max-width: 760px) {
  .hero {
    padding: var(--fob-space-xl) 0;
  }

  .hero__container {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 60px var(--fob-space-lg) 64px;
  }

  .hero__photo-wrap {
    order: -1;
  }
}

@media (max-width: 575px) {
  .hero {
    padding: 0;
  }

  .hero__container {
    padding: 44px var(--fob-space-md) 48px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta {
    width: 100%;
  }
}