/* Section: reference_banners — Industrial: one wide photo banner (text centred, left-to-right gradient) + half-width banners (text at the bottom). */

.ex-reference-banners__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ex-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ex-reference-banners__item { display: flex; min-width: 0; scroll-margin-top: var(--ex-scroll-offset); }
.ex-reference-banners__item--wide { grid-column: 1 / -1; }
/* An odd banner left alone on the last row spans it. */
.ex-reference-banners__item:not(.ex-reference-banners__item--wide):nth-child(even):last-child { grid-column: 1 / -1; }

.ex-reference-banners__banner {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  min-width: 0;
  min-height: clamp(240px, 26vw, 340px);
  padding: 22px;
  overflow: hidden;
  background: var(--ex-dark);
  color: var(--ex-white);
}
.ex-reference-banners__banner:hover { color: var(--ex-white); }
.ex-reference-banners__banner--wide {
  align-items: center;
  min-height: clamp(220px, 24vw, 320px);
  padding: 28px clamp(24px, 3vw, 52px);
}

.ex-reference-banners__media { position: absolute; inset: 0; background: var(--ex-dark); }
.ex-reference-banners__media > img { transition: transform .6s var(--ex-ease-out); }
a.ex-reference-banners__banner:hover .ex-reference-banners__media > img,
a.ex-reference-banners__banner:focus-visible .ex-reference-banners__media > img { transform: scale(1.03); }

.ex-reference-banners__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(35, 31, 32, .9) 0%, rgba(35, 31, 32, .1) 60%);
  pointer-events: none;
}
.ex-reference-banners__banner--wide::after {
  background: linear-gradient(90deg, rgba(32, 35, 43, .92) 0%, rgba(32, 35, 43, .55) 55%, rgba(32, 35, 43, .12) 100%);
}

.ex-reference-banners__body { position: relative; z-index: var(--ex-z-raised); display: block; width: 100%; min-width: 0; }
.ex-reference-banners__eyebrow {
  display: block;
  font-size: var(--ex-fs-kicker);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .2em;
}
.ex-reference-banners__title {
  margin: 6px 0 0;
  font-size: var(--ex-fs-h3);
  font-weight: var(--ex-fw-title);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ex-white);
}
.ex-reference-banners__text { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.5; }
.ex-reference-banners__more {
  display: inline-block;
  margin-top: 12px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--ex-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
.ex-reference-banners__arrow { display: inline-block; transition: transform var(--ex-t-btn); }
a.ex-reference-banners__banner:hover .ex-reference-banners__arrow,
a.ex-reference-banners__banner:focus-visible .ex-reference-banners__arrow { transform: translateX(5px); }

/* Wide banner: larger type */
.ex-reference-banners__banner--wide .ex-reference-banners__eyebrow { font-size: var(--ex-fs-eyebrow); letter-spacing: var(--ex-ls-eyebrow); }
.ex-reference-banners__banner--wide .ex-reference-banners__title { margin-top: 8px; font-size: clamp(26px, 2.6vw, 42px); line-height: 1; }
.ex-reference-banners__banner--wide .ex-reference-banners__text { max-width: 520px; margin-top: 8px; font-size: 13.5px; line-height: 1.55; }
.ex-reference-banners__banner--wide .ex-reference-banners__more { margin-top: 16px; padding-bottom: 4px; font-size: 11.5px; }

/* ---------- Responsive (proposal — not designed) ---------- */
@media (max-width: 899px) {
  .ex-reference-banners__list { grid-template-columns: minmax(0, 1fr); }
  .ex-reference-banners__banner--wide { align-items: flex-end; padding: 22px; }
  .ex-reference-banners__banner--wide::after { background: linear-gradient(to top, rgba(32, 35, 43, .92) 0%, rgba(32, 35, 43, .2) 70%); }
}

@media (prefers-reduced-motion: reduce) {
  .ex-reference-banners__media > img,
  .ex-reference-banners__arrow { transition: none; }
  a.ex-reference-banners__banner:hover .ex-reference-banners__media > img,
  a.ex-reference-banners__banner:focus-visible .ex-reference-banners__media > img,
  a.ex-reference-banners__banner:hover .ex-reference-banners__arrow,
  a.ex-reference-banners__banner:focus-visible .ex-reference-banners__arrow { transform: none; }
}