/* matches the theme's own .wrapper.section_wrapper container — retune here only */
.mcww-card-row,
.mcww-landscape-image-wrapper {
  --mcww-max: 1170px;
}

.mcww-card-row {
  display: grid;
  /* 260px floor so phones drop to a single column; 160px packed 2-up at 360w */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  max-inline-size: var(--mcww-max);
  margin-inline: auto;

  &::before,
  &::after {
    display: none;
  }

  & .vc_column_container {
    inline-size: auto;
    /* VC's float grid margins leak into the track and make column 1 wider */
    margin-inline: 0;
  }

  /* empty VC columns render as a bare .vc_column-inner — don't box those */
  & .vc_column_container:has(.wpb_wrapper) {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
    padding-block-end: 1.25rem;
  }
}

/* class sits on the heading itself, not a wrapper */
.mcww-hero-wrapper {
  color: #fff !important;
  font-weight: 700 !important;
  /* photo behind is light in places — AEH uses the same scrim on its page title */
  text-shadow: 0 2px 5px rgb(0 0 0 / 0.5);

  /* break out of the theme's 1170px .section_wrapper; body already clips overflow-x */
  inline-size: 100vw;
  max-inline-size: none;
  margin-inline: calc(50% - 50vw);
}

/* .vc_row gets overflow:hidden, which would clip the breakout back to 1170 */
.vc_section:has(.mcww-hero-wrapper),
.vc_row:has(.mcww-hero-wrapper) {
  overflow: visible;
}

.mcww-landscape-image-wrapper {

  /* wrapper varies (div, , or figure depending on VC link setting) — size the img itself */
  & .vc_single_image-wrapper,
  & .vc_figure,
  & .wpb_wrapper {
    display: block;
    inline-size: 100%;
    border: 0;
    padding: 0;
  }

  & img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    max-inline-size: var(--mcww-max) !important;
    margin-inline: auto;
  }
}

.mcww-hover-card-wrapper {
  & .wpb_wrapper>.wpb_singleimage_heading {
    display: none;
  }

  & .vc_single_image-wrapper {
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 0;
    padding: 0;
    border-radius: 4px;
    max-inline-size: 400px;
    margin: auto;
    isolation: isolate;
    container-type: inline-size;

    &>* {
      grid-area: 1 / 1;
      min-width: 0;
      min-height: 0;
    }

    &>span {
      display: grid;
      align-content: center;
      padding: clamp(1rem, 8cqi, 2.25rem);
      background: linear-gradient(to top,
          rgb(0 0 0 / 0.92) 0%,
          rgb(0 0 0 / 0.78) 55%,
          rgb(0 0 0 / 0.35) 100%);
      color: #fff;
      opacity: 0;
      transition: opacity 0.3s ease;
      overflow-y: auto;
      overscroll-behavior: contain;
      z-index: 1;

      & h2 {
        /* theme's img_hover_title hides this and pulls it out of flow — undo both
           so the grid's align-content: end can bottom-align it */
        opacity: 1;
        position: static;
        margin: 0;
        color: inherit;
        font-family: inherit;
        font-weight: 400;
        font-size: clamp(0.75rem, 3.4cqi, 1rem);
        line-height: 1.45;
        text-transform: none;
        letter-spacing: 0;
      }
    }
  }

  & .vc_single_image-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transition: transform 0.4s ease;
  }

  /* hovering anywhere in the column — image, name or role — reveals the overlay */
  .mcww-card-row>.vc_column_container:hover &,
  &:focus-within {
    & .vc_single_image-wrapper>span {
      opacity: 1;
    }
  }

  .mcww-card-row>.vc_column_container:hover & .vc_single_image-img {
    transform: scale(1.04);
  }

  @media (hover: none) {
    & .vc_single_image-wrapper>span {
      opacity: 1;
    }

    & .vc_single_image-img {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    & .vc_single_image-img,
    & .vc_single_image-wrapper>span {
      transition: none;
    }

    .mcww-card-row>.vc_column_container:hover & .vc_single_image-img {
      transform: none;
    }
  }
}