/* BUYER CONSULTING - PROJECT MEDIA / VISUAL EVIDENCE */

/*
 * Intended Cornerstone structure:
 *
 * Project Media                    .bc-project-media-section
 *   Project Media Container        .bc-project-media-section__container
 *     Project Media Content        .bc-project-media-section__content
 *       [bc_project_media]
 *
 * The section sits between How We Worked and Outcome and Impact.
 */

.bc-project-media-section {
  position: relative;
  width: 100%;
  margin: 0 !important;

  /*
   * Treat visual evidence as a distinct editorial interlude between
   * the dark How We Worked section and the Cloud Dancer results section.
   */
  /*
   * Keep a clear white breathing zone beneath the caption row before
   * the page changes back to Cloud Dancer for Outcome and Impact.
   */
  padding:
    clamp(3.5rem, 5vw, 4.5rem)
    0
    clamp(2.6rem, 3.4vw, 3.25rem) !important;

  background:
    var(--bc-white, #FFFFFF) !important;
}

.bc-project-media-section__container {
  display: block !important;
  width: 100% !important;
  max-width: var(--bc-site-width, 1440px) !important;
  margin-inline: auto !important;
  padding-inline: var(--bc-gutter, clamp(1.25rem, 4vw, 3rem)) !important;
}

.bc-project-media-section__content {
  display: block !important;
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.bc-project-media {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  color: var(--bc-azure, #005461);
}

.bc-project-media__header {
  width: 100%;
  max-width: 46rem;
  margin: 0 0 clamp(1.6rem, 2.4vw, 2rem);
}

.bc-project-media__eyebrow {
  display: block;
  width: fit-content;
  margin: 0 0 0.55rem;
  font-family: var(--bc-font-secondary, "Metropolis", Arial, Helvetica, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bc-project, #392BA0);
}

.bc-project-media__title {
  margin: 0;
  max-width: 42rem;
  font-family: var(--bc-font-secondary, "Metropolis", Arial, Helvetica, sans-serif);
  font-size: clamp(1.8rem, 2.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--bc-azure, #005461);
}

.bc-project-media__intro {
  max-width: 42rem;
  margin: 0.8rem 0 0;
  font-family: var(--bc-font-primary, "Nunito", Arial, Helvetica, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bc-azure, #005461);
}

.bc-project-media__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
  align-items: start;
}

/*
 * One visual is treated as an editorial feature rather than a gallery card.
 * Keep it wide and cinematic so it supports the case-study flow without
 * dominating the page vertically.
 */
.bc-project-media--count-1 .bc-project-media__grid {
  grid-template-columns: minmax(0, 1fr);
}

.bc-project-media--count-1 .bc-project-media__visual {
  aspect-ratio: 16 / 9;
  max-height: 585px;
}

.bc-project-media--count-2 .bc-project-media__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bc-project-media--count-3 .bc-project-media__grid {
  /*
   * Three items use a deliberate editorial mosaic:
   * one large feature on the left and two equal supporting items
   * stacked on the right. Fixing the grid's overall aspect ratio
   * prevents the right column from looking short or detached.
   */
  grid-template-columns:
    minmax(0, 1.42fr)
    minmax(0, 0.92fr);

  grid-template-rows:
    repeat(2, minmax(0, 1fr));

  grid-auto-flow:
    dense;

  aspect-ratio:
    16 / 9;

  align-items:
    stretch;
}

.bc-project-media--count-3 .bc-project-media__item {
  display:
    grid;

  grid-template-rows:
    minmax(0, 1fr)
    auto;

  min-height:
    0;
}

.bc-project-media--count-3 .bc-project-media__item--featured {
  grid-column:
    1;

  grid-row:
    1 / span 2;
}

.bc-project-media--count-3
.bc-project-media__item:not(.bc-project-media__item--featured) {
  grid-column:
    2;
}

.bc-project-media--count-3 .bc-project-media__visual,
.bc-project-media--count-3
.bc-project-media__item--featured
.bc-project-media__visual {
  width:
    100%;

  height:
    100%;

  min-height:
    0;

  aspect-ratio:
    auto;
}

.bc-project-media--count-3 .bc-project-media__caption {
  margin-top:
    0.65rem;
}

.bc-project-media__item {
  min-width: 0;
  margin: 0;
}

.bc-project-media__visual {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--bc-border, rgba(0, 84, 97, 0.14));
  border-radius: var(--bc-radius-medium, 12px);
  background: var(--bc-white, #fff);
}

.bc-project-media__item--featured .bc-project-media__visual {
  aspect-ratio: 4 / 3;
}

.bc-project-media__image,
.bc-project-media__visual-link {
  display: block;
  width: 100%;
  height: 100%;
}

.bc-project-media__image {
  object-fit: cover;
  object-position: var(--bc-media-x, 50%) var(--bc-media-y, 50%);
}

.bc-project-media__visual iframe,
.bc-project-media__visual video,
.bc-project-media__visual .wp-video,
.bc-project-media__visual .wp-video-shortcode {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
}

.bc-project-media__visual iframe,
.bc-project-media__visual video {
  display: block;
  border: 0;
  object-fit: cover;
}

.bc-project-media__embed-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 2rem;
  font-family: var(--bc-font-secondary, "Metropolis", Arial, Helvetica, sans-serif);
  font-weight: 700;
  color: var(--bc-project, #392BA0);
  text-decoration: none;
}

/*
 * Caption, credit and source stay together as one compact evidence row.
 * Do not throw the source action to the far right of a wide single image.
 */
.bc-project-media__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.65rem;
  align-items: baseline;
  width: 100%;
  margin-top: 0.7rem;
  font-family: var(--bc-font-primary, "Nunito", Arial, Helvetica, sans-serif);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--bc-azure, #005461);
}

.bc-project-media__caption-text {
  font-weight: 600;
}

.bc-project-media__credit {
  opacity: 0.72;
}

.bc-project-media__credit:not(:first-child)::before {
  content: "\00B7";
  margin-right: 0.65rem;
  color: rgba(0, 84, 97, 0.45);
}

.bc-project-media__source-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0;
  font-family: var(--bc-font-secondary, "Metropolis", Arial, Helvetica, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bc-project, #392BA0);
  text-decoration: none;
}

.bc-project-media__source-link:not(:first-child)::before {
  content: "\00B7";
  margin-right: 0.35rem;
  color: rgba(0, 84, 97, 0.45);
}

.bc-project-media__source-link::after {
  content: "\2197";
  font-family: Arial, Helvetica, sans-serif;
}

.bc-project-media__source-link:hover,
.bc-project-media__source-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/*
 * When Outcome and Impact follows immediately, both sections contribute
 * to the perceived gap. Override the normal large Results top padding so
 * the transition remains deliberate rather than looking like empty space.
 */
body.single-bc_project
.bc-project-media-section + .bc-project-results {
  margin-top:
    0 !important;

  /*
   * The colour change is a real section boundary, so give Outcome and
   * Impact enough top space to establish its own heading hierarchy.
   */
  padding-top:
    clamp(3.5rem, 4.5vw, 4.25rem) !important;
}

body.single-bc_project
.bc-project-media-section + .bc-project-outcomes,
body.single-bc_project
.bc-project-media-section + section[class*="bc-project-results"],
body.single-bc_project
.bc-project-media-section + section[class*="bc-project-outcome"] {
  margin-top:
    0 !important;
}

@media (max-width: 1024px) {
  .bc-project-media-section {
    padding:
      3.25rem
      0
      2.5rem !important;
  }

  body.single-bc_project
  .bc-project-media-section + .bc-project-results {
    padding-top:
      3.25rem !important;
  }

  .bc-project-media--count-1 .bc-project-media__visual {
    max-height: 520px;
  }
}

@media (max-width: 767px) {
  .bc-project-media-section {
    padding:
      2.75rem
      0
      2rem !important;
  }

  body.single-bc_project
  .bc-project-media-section + .bc-project-results {
    padding-top:
      2.75rem !important;
  }

  .bc-project-media__grid,
  .bc-project-media--count-2 .bc-project-media__grid,
  .bc-project-media--count-3 .bc-project-media__grid {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .bc-project-media--count-3 .bc-project-media__grid {
    grid-template-rows:
      none;

    aspect-ratio:
      auto;
  }

  .bc-project-media--count-3 .bc-project-media__item,
  .bc-project-media--count-3 .bc-project-media__item--featured,
  .bc-project-media--count-3
  .bc-project-media__item:not(.bc-project-media__item--featured) {
    display:
      block;

    grid-column:
      auto;

    grid-row:
      auto;
  }

  .bc-project-media__visual,
  .bc-project-media__item--featured .bc-project-media__visual,
  .bc-project-media--count-1 .bc-project-media__visual {
    aspect-ratio: 4 / 3;
    max-height: none;
  }

  .bc-project-media__source-link {
    margin-left: 0;
  }
}