/**
 * @file
 * p_media_gallery — general tabbed grid of image cards (Figma node 11780:9733,
 * "Advertising Formats").
 *
 * Tab nav reuses the shared `.rmaa-tabs__*` component (css/base/tabs.css); only
 * the section layout, the card grid, and the caption row live here. Auto-attached
 * via bootstrap_subtheme_preprocess_paragraph__p_media_gallery (its own library —
 * NOT @imported into style.css).
 */

.p-media-gallery {
  padding-block: 60px;
}

.p-media-gallery__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Title → tabs → grid all sit on an even 40px rhythm (Figma node 11780:9733
   gap-40), so the tab nav gets matching breathing room above and below. */
.p-media-gallery__title {
  margin: 0 0 40px;
}

/* Compound selector (0,2,0) so this beats the shared `.rmaa-tabs__nav { margin: 0 }`
   shorthand in css/base/tabs.css, which loads after this library and would
   otherwise zero the gap below the pill row. */
.p-media-gallery__nav.rmaa-tabs__nav {
  margin-bottom: 40px;
}

/* Hidden inactive panes are handled by Bootstrap's .tab-pane / .fade. The flat
   (single-group, no-tabs) case renders one .p-media-gallery__pane with no
   .tab-pane class, so it is always visible. */

.p-media-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ---- Card -------------------------------------------------------------- */

/* Gray card surface (Figma 11780:9739): #f7f7f9 rounded card, image flush at
   the top (its own radius matches the card), 28px gap to the caption block and
   28px bottom padding. */
.p-media-gallery-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: var(--grayMoreLight);
  border-radius: var(--radius-card);
  padding-bottom: 28px;
}

.p-media-gallery-card__media {
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* The media field renders through Drupal's media-entity wrappers
   (.field / .field__item / .contextual-region) and an inline <picture>. The
   inline <picture> shrink-wraps to the source, collapsing an intermediate
   wrapper below the card width. Force the whole chain block + full width so
   the image always fills the card, even when the source is narrower. */
.p-media-gallery-card__media .field,
.p-media-gallery-card__media .field__item,
.p-media-gallery-card__media picture {
  display: block;
  width: 100%;
}

/* 28px horizontal inset for the text block so an optional title and the
   caption both align inside the card. */
.p-media-gallery-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-inline: 28px;
}

.p-media-gallery-card__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* Caption row: bold label + value pairs, first metric left / last right.
   Author one or two inline blocks (e.g. "Size: …", "OTS: …"). */
.p-media-gallery-card__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
}

.p-media-gallery-card__caption p {
  margin: 0;
}

.p-media-gallery-card__caption strong,
.p-media-gallery-card__caption b {
  font-weight: var(--fw-bold);
}

/* ---- Dark (gray) canvas ------------------------------------------------ */


/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 900px) {
  .p-media-gallery__grid {
    grid-template-columns: 1fr;
  }
}

/* Section padding halves on mobile (matches the stat-cards panel). */
@media (max-width: 767px) {
  .p-media-gallery {
    padding-block: 30px;
  }

  /* Full-bleed tab nav: the pill row stretches edge to edge and the tabs
     (Outdoor / Indoor) split the width evenly. Overrides the shared
     `.rmaa-tabs__nav` `max-width: fit-content`. */
  .p-media-gallery__nav.rmaa-tabs__nav {
    max-width: 100%;
    width: 100%;
  }
  .p-media-gallery__nav .rmaa-tabs__item {
    flex: 1;
  }
  .p-media-gallery__nav .rmaa-tabs__link {
    width: 100%;
  }
}