/* ========== Global safety (prevents hero peek) ========== */
html, body { height: 100%; }
body { margin: 0; }

/* ========== Full-bleed, full-viewport hero gallery ========== */
/* Add class="hero-wrap" to the grid wrapper that contains your image-gallery */
.hero-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 !important;
}

/* Add class="hero-gallery" to the .image-gallery element on your landing page */
.hero-gallery {
  position: relative;
  width: 100vw;
  height: 100vh;        /* full height on entry */
  overflow: hidden;
}

/* Make slides truly fill the viewport */
.hero-gallery img,
.hero-gallery figure img,
.hero-gallery .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* If the theme uses backgrounds for slides, keep them covered */
.hero-gallery .slide,
.hero-gallery .image,
.hero-gallery figure {
  background-size: cover;
  background-position: center;
}

/* Ensure the content below starts after the hero (no overlap) */
.hero-wrap + [grid-row],
.hero-wrap + div[grid-row] {
  margin-top: 0;
}

/* ========== Gallery nav arrows: white + 24px ========== */
.hero-gallery .gallery_prev,
.hero-gallery .gallery_next,
.hero-gallery .gallery-arrow,
.hero-gallery .slideshow-arrow,
.hero-gallery .nav.prev,
.hero-gallery .nav.next,
.hero-gallery .carousel-prev,
.hero-gallery .carousel-next {
  color: #fff !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  line-height: 24px !important;
  z-index: 5;
}

/* If the arrow is an <svg> */
.hero-gallery .gallery_prev svg,
.hero-gallery .gallery_next svg,
.hero-gallery .slideshow-arrow svg {
  width: 24px !important;
  height: 24px !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* If the arrow uses a background-image */
.hero-gallery .gallery_prev,
.hero-gallery .gallery_next {
  background-size: 24px 24px !important;
  background-repeat: no-repeat;
}

/* If the arrow is drawn via ::before / ::after */
.hero-gallery .gallery_prev::before,
.hero-gallery .gallery_next::before,
.hero-gallery .gallery_prev::after,
.hero-gallery .gallery_next::after {
  color: #fff !important;
  width: 24px !important;
  height: 24px !important;
}

/* Optional: better hit-target on mobile while icon stays 24px */
@media (hover: none) {
  .hero-gallery .gallery_prev,
  .hero-gallery .gallery_next {
    padding: 0px; /* larger tap area */
  }
}

/* ========== Two-column text below hero ========== */
/* Add class="two-col" to the text containers under the hero */
.two-col {
  max-width: 1200px;
  margin: 6rem auto 4rem; /* ensures you have to scroll to reach it */
  column-count: 2;
  column-gap: 3rem;
}

/* Keep links white to match your theme if desired */
.two-col a { color: #fff; text-decoration: underline; }

/* Single column on narrow screens */
@media (max-width: 900px) {
  .two-col {
    column-count: 1;
    margin: 3rem auto 2rem;
  }
}