/*
  @file Event-highlights block.
  3-card grid: 1 large card (2 rows) + 2 horizontal cards.
*/

/* ============================================================
   Align desktop highlights with the canonical content lane
   ============================================================ */
@media (min-width: 83.125rem) {
  .lgd-region--content-top:has(.block-views-blockhighlighted-content-block-1)
    > .lgd-container.padding-horizontal {
    box-sizing: border-box;
    max-width: var(--width-xxl);
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* ============================================================
   Subtitle
   ============================================================ */
.block-views-blockhighlighted-content-block-1 h2 {
  margin-bottom: 0;
}

.view-highlighted-content__subtitle {
  color: #000;
  font-family: var(--font-family-primary), sans-serif;
  font-size: var(--font-size-h5);
  font-weight: 400;
}

/* ============================================================
   Grid wrapper
   ============================================================ */
.view-highlighted-content .view-content {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-large);
}

/* ============================================================
   Shared — make image wrappers and images fill their container
   ============================================================ */
.view-highlighted-content .lgd-card__image {
  overflow: hidden;
}

.view-highlighted-content .lgd-card__image .field,
.view-highlighted-content .lgd-card__image .field__item,
.view-highlighted-content .lgd-card__image .field__item > div,
.view-highlighted-content .lgd-card__image picture {
  display: block;
  height: 100%;
}

.view-highlighted-content .lgd-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}

/* ============================================================
   Card 1 — spans both rows, stays vertical (default card layout)
   ============================================================ */
.view-highlighted-content .views-row:first-child {
  grid-row: 1 / 3;
}

.view-highlighted-content .views-row:first-child .lgd-card {
  height: 100%;
}

.view-highlighted-content .views-row:first-child .lgd-card__image {
  flex: 1;
}

/* ============================================================
   Cards 2 & 3 — horizontal layout (image left, content right)
   ============================================================ */
.view-highlighted-content .views-row:nth-child(n + 2) .lgd-card {
  flex-direction: row;
}

.view-highlighted-content .views-row:nth-child(n + 2) .lgd-card__image {
  flex: 0 0 40%;
}

.view-highlighted-content .views-row:nth-child(n + 2) .lgd-card__content {
  flex: 1;
}

/* ============================================================
   Responsive — stack on small screens
   ============================================================ */
@media (max-width: 47.9375rem) {
  .view-highlighted-content .view-content {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .view-highlighted-content .views-row:first-child {
    grid-row: auto;
  }

  .view-highlighted-content .views-row:first-child .lgd-card__image {
    flex: none;
  }

  .view-highlighted-content .views-row:nth-child(n + 2) .lgd-card {
    flex-direction: column;
  }

  .view-highlighted-content .views-row:nth-child(n + 2) .lgd-card__image {
    flex: none;
  }

  .view-highlighted-content .lgd-card__image img {
    aspect-ratio: var(--card-image-aspect-ratio);
    height: auto;
  }
}