/**
 * Homepage hero — matches Letters template (section_hero / home-hero_block / hero_slider).
 * Loaded after letters-template.webflow.*.css to override Tailwind/globals edge cases.
 */

.section_hero .home-hero_right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Base .w-slider sets height: 300px; template’s .hero_slider must win for full column height */
.section_hero .hero_slider.w-slider {
  height: auto !important;
  min-height: 100% !important;
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  background: transparent !important;
  text-align: left;
}

/* .hero_mask in the Webflow export sets overflow: visible — clips breaks the slider; mask must clip */
/* Two-up Publication cards: use full width of home-hero_right (template mask was single-column narrow). */
.section_hero .hero_mask.w-slider-mask {
  overflow: hidden !important;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* Two cards side-by-side in each hero “page” */
.section_hero .hero_pair.w-dyn-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-auto-columns: 1fr;
  width: 100%;
  align-items: stretch;
}

.section_hero .hero_pair-cell.hero_collect-item:last-child {
  border-right: none;
}

.section_hero .hero_slider-track {
  display: block;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  will-change: transform;
}

.section_hero .hero_slide.w-slide {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  font-size: initial;
  line-height: normal;
}

@media screen and (max-width: 991px) {
  .section_hero .hero_mask.w-slider-mask {
    width: 100%;
    min-width: auto;
    max-width: none;
  }

  .section_hero .hero_pair.w-dyn-items {
    grid-template-columns: minmax(0, 1fr);
  }

  .section_hero .hero_pair-cell.hero_collect-item {
    border-right: none;
    border-bottom: 1px solid var(--border-color--border-primary);
  }

  .section_hero .hero_pair-cell.hero_collect-item:last-child {
    border-bottom: none;
  }
}

@media screen and (max-width: 479px) {
  .section_hero .hero_mask.w-slider-mask {
    max-width: none;
  }
}