/* App-level overrides for the React rebuild (loaded after the WP stylesheets). */

/* Homepage hero video.
   The original section is a full-width cover banner; our self-hosted <video>
   sits inside GeneratePress's .grid-container (max-width:1200px, auto margins),
   which leaves white gutters on wide screens. Let the hero section and its inner
   container span the full content width so the video fills the band edge-to-edge.
   We avoid a 100vw breakout (it overflows past the scrollbar) and instead just
   unclamp the container — the section is already a full-width block in the flow. */
.section-gmb2cfdbc,
.section-gme7a7e9c {
  width: 100%;
  margin: 0;
  padding: 0;
}

.section-gmb2cfdbc > .grid-container,
.section-gme7a7e9c > .grid-container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Autoplaying muted background hero video — no controls, not interactive. */
.allos-hero-video {
  width: 100%;
  max-width: 100%;
  height: 600px;
  display: block;
  object-fit: cover;
  background: #000;
  pointer-events: none;
}

/* On narrow screens let the height be natural (16:9) rather than a fixed 600px. */
@media (max-width: 900px) {
  .allos-hero-video { height: auto; aspect-ratio: 16 / 9; }
}

/* Restore the original Ecotone section rhythm after WP block CSS resets. */
.entry-content > .wp-block-columns {
  padding: 50px 0;
}

.entry-content > .wp-block-columns:first-child {
  padding-top: 0;
}

.entry-content > .wp-block-columns .wp-block-heading {
  margin-top: 0;
}

.entry-content > .wp-block-columns .wp-block-buttons {
  margin-top: 30px;
}

/* Homepage news carousel: keep every visible card as tall as the tallest card,
   with the CTA/date block aligned at the bottom. Covers both the raw carousel
   markup and Slick's initialized .slick-track/.slick-slide wrappers. */
#news-grid .gutentor-module-carousel-row {
  display: flex;
  align-items: stretch;
}

#news-grid .gutentor-module-carousel-row .gutentor-carousel-item,
#news-grid .slick-track,
#news-grid .slick-slide,
#news-grid .slick-slide > div {
  display: flex;
  align-items: stretch;
}

#news-grid .slick-track {
  height: auto !important;
}

#news-grid .slick-slide {
  height: auto !important;
}

#news-grid .slick-slide > div,
#news-grid .gutentor-carousel-item {
  height: 100%;
}

#news-grid .gutentor-post-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#news-grid .gutentor-button-wrap {
  margin-top: auto;
}