/**
 * Full-width ACF block overrides + grid layout tweaks.
 */

[class*="wp-block-acf-"] {
  margin: 0;
  max-width: none;
}

.has-hero-video .nav {
  position: sticky;
  top: 0;
  background: rgba(15, 14, 12, 0.55);
}

.has-hero-video main {
  padding-top: 0;
}

/* Hero video — mobile layout & playback */
@media (max-width: 980px) {
  .hero--video {
    min-height: 100svh;
    min-height: 100dvh;
    padding: 96px 0 56px;
    overflow: clip;
    align-items: flex-end;
  }

  .hero--video .hero-video {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
  }

  .hero--video .hero-video-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(15, 14, 12, 0.35) 0%,
        rgba(15, 14, 12, 0.15) 35%,
        rgba(15, 14, 12, 0.72) 78%,
        var(--bg) 100%
      );
  }

  .hero--video .hero-content {
    width: min(var(--max), calc(100% - 32px));
    max-width: min(var(--max), calc(100% - 32px));
    padding-bottom: 8px;
  }

  .hero--video .hero-content p {
    max-width: none;
    font-size: 16px;
    margin-bottom: 22px;
  }

  .hero--video h1 {
    font-size: clamp(28px, 8vw, 40px);
  }

  .hero-ctas {
    gap: 10px;
  }

  .hero-ctas .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 620px) {
  .hero--video {
    padding: 88px 0 48px;
  }

  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero-ctas .btn {
    width: 100%;
  }
}

/* Incomplete last row: center remaining cards (flex replaces grid) */
.cards,
.feature-grid,
.eco-grid,
.cost-grid,
.results-grid,
.logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cards > .card,
.feature-grid > .card {
  flex: 0 1 calc((100% - 32px) / 3);
  min-width: 0;
}

.eco-grid > .eco-card {
  flex: 0 1 calc((100% - 42px) / 4);
  min-width: 0;
}

.cost-grid > .cost-item,
.results-grid > .result-card {
  flex: 0 1 calc((100% - 56px) / 5);
  min-width: 0;
}

.logo-grid > .logo-item {
  flex: 0 1 calc((100% - 96px) / 9);
  min-width: 0;
}

@media (max-width: 980px) {
  .cards > .card,
  .feature-grid > .card,
  .eco-grid > .eco-card,
  .cost-grid > .cost-item,
  .results-grid > .result-card {
    flex: 0 1 calc((100% - 16px) / 2);
  }

  .logo-grid > .logo-item {
    flex: 0 1 calc((100% - 24px) / 3);
  }
}

@media (max-width: 620px) {
  .cards > .card,
  .feature-grid > .card,
  .eco-grid > .eco-card,
  .cost-grid > .cost-item,
  .results-grid > .result-card,
  .logo-grid > .logo-item {
    flex: 0 1 100%;
  }
}