/**
 * SecureClimate homepage.
 *
 * Phase 60D scope: layout only for the four ACF-driven homepage sections
 * (Hero, Blog Spotlight, Explore, Our Global Impact) rendered by
 * template-parts/dynamic-home.php. Card, grid, button, link, and eyebrow
 * styling is intentionally NOT duplicated here - see
 * secureclimate-components.css and secureclimate-brand-tokens.css, both
 * already enqueued as dependencies. Only homepage-specific section spacing,
 * hero/impact media sizing, and Global Impact's two-column alignment live
 * in this file. No new colors, gradients, or shadows are introduced.
 *
 * @package HelloElementorChild
 */



/* ==========================================================================
   1. Hero
   ========================================================================== */

.sc-home-hero {
  position: relative;
  padding: var(--sc-space-8) 0;
  border-bottom: 1px solid var(--sc-color-soft-border);
}

.sc-home-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sc-space-6);
  align-items: center;
}

.sc-home-hero__text {
  max-width: var(--sc-heading-width);
}

.sc-main .sc-home-hero__title {
  margin: 0;
  font-size: var(--sc-text-h1-size-desktop);
  line-height: var(--sc-text-h1-line-height);
}

.sc-home-hero__intro {
  margin-top: var(--sc-space-4);
  font-size: var(--sc-text-body-lg-size);
  line-height: var(--sc-text-body-lg-line-height);
  color: var(--sc-color-muted-ink);
}

.sc-home-hero__intro > :first-child {
  margin-top: 0;
}

.sc-home-hero__intro > :last-child {
  margin-bottom: 0;
}

.sc-home-hero__cta {
  margin: var(--sc-space-6) 0 0;
}

/* --------------------------------------------------------------------------
   Hero with background image
   -------------------------------------------------------------------------- */

.sc-home-hero--has-bg {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;   /* fallback for older browsers */
  min-height: 100svh;  /* full screen height, mobile-safe */
  border-bottom: 0;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Dark overlay so the text stays readable */
.sc-home-hero--has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.sc-home-hero--has-bg .sc-home-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Limit text width */
.sc-home-hero--has-bg .sc-home-hero__text {
  max-width: 640px;
}

.sc-home-hero--has-bg .sc-home-hero__intro {
  max-width: 560px;
}

/* White text on the dark image */
.sc-main .sc-home-hero--has-bg .sc-home-hero__title,
.sc-home-hero--has-bg .sc-home-hero__intro {
  color: #fff;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .sc-main .sc-home-hero__title {
    font-size: var(--sc-text-h1-size-tablet);
  }
}

@media (max-width: 767px) {
  .sc-main .sc-home-hero__title {
    font-size: var(--sc-text-h1-size-mobile);
  }

  .sc-home-hero--has-bg {
    background-position: center top !important;
  }
}

/* ==========================================================================
   2. Blog spotlight
   ========================================================================== */

.sc-home-blog {
  padding: var(--sc-space-8) 0;
}

.sc-home-blog__heading {
  margin: 0 0 var(--sc-space-6);
}

.sc-home-blog__image-link {
  display: block;
  margin: 0 0 var(--sc-space-3);
}

.sc-home-blog__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sc-radius-sm);
}

.sc-home-blog__link {
  margin: var(--sc-space-6) 0 0;
}

/* ==========================================================================
   3. Explore
   ========================================================================== */

.sc-home-explore {
  padding: var(--sc-space-8) 0;
  background-color: var(--sc-color-cloud);
}

.sc-home-explore__heading {
  margin: 0 0 var(--sc-space-6);
}

/* ==========================================================================
   4. Our Global Impact
   ========================================================================== */

.sc-home-impact {
  padding: var(--sc-space-8) 0;
}

.sc-home-impact__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-6);
}

.sc-home-impact__media {
  flex: 1 1 0%;
}

.sc-home-impact__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sc-radius-md);
}

.sc-home-impact__content {
  flex: 1 1 0%;
}

.sc-home-impact__title {
  margin: var(--sc-space-2) 0 var(--sc-space-4);
}

.sc-home-impact__teaser {
  margin: 0 0 var(--sc-space-5);
}

@media (min-width: 768px) {
  .sc-home-impact__inner {
    flex-direction: row;
    align-items: center;
  }

  /* Alignment: "right" mirrors the row so the image sits on the right of
     the text - matches the Drupal "feature" Paragraph's own alignment
     field (paragraph__field_alignment). */
  .sc-home-impact--right .sc-home-impact__inner {
    flex-direction: row-reverse;
  }

  /* Smaller display: reduces the media column's share of the row instead
     of shrinking the image itself, matching the Drupal
     paragraph__field_smaller_display flag's intent without inventing a
     fixed pixel size the source data doesn't specify. */
  .sc-home-impact--smaller .sc-home-impact__media {
    flex: 0 1 40%;
  }

  .sc-home-impact--smaller .sc-home-impact__content {
    flex: 1 1 60%;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
  .sc-home-hero,
  .sc-home-blog,
  .sc-home-explore,
  .sc-home-impact {
    padding: var(--sc-space-7) 0;
  }
}

@media (max-width: 767px) {
  .sc-home-hero,
  .sc-home-blog,
  .sc-home-explore,
  .sc-home-impact {
    padding: var(--sc-space-6) 0;
  }
}