/**
 * [srd_exhibitor_logos]: the homepage exhibitor logo field.
 *
 * Built for the navy homepage band. The field is ruled with 1px gaps (every
 * slot is always filled, so no empty cell ever shows the rule colour), the
 * count takes ONE cell in the SRD red, and each logo sits on a LIGHT plate, as
 * on the SRD26 exhibitors page: brand marks assume a light backdrop.
 *
 * Slots per device, always whole rows. The count is a grid child like a plate,
 * so the same nth-child cut holds with or without it:
 *   mobile   3 columns, 15 slots: the count and 14 plates
 *   tablet   4 columns, 16 slots: the count and 15 plates
 *   desktop  6 columns, 18 slots: the count and 17 plates
 * Without the count (count="hide") 18 plates are rendered and the first one
 * takes its slot.
 *
 * NOTE: no container-type here. Inside Elementor's flex wrappers it collapses
 * the element to width 0.
 *
 * @package SRD_Schedule
 */

.srdexl {
  --srdexl-red:    #cc251c;
  --srdexl-rule:   #16405c;
  /* White, not the exhibitors page's #f2f5f7: many uploaded logos are white
     squares, which show as boxes on a tinted plate. */
  --srdexl-plate:  #ffffff;
  --srdexl-empty:  #082741;
  --srdexl-ink:    #eaf1f6;
  --srdexl-font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  font-family: var(--srdexl-font);
  color: var(--srdexl-ink);
}

.srdexl *,
.srdexl *::before,
.srdexl *::after { box-sizing: border-box; }

.srdexl .srdexl-field {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--srdexl-rule);
  border: 1px solid var(--srdexl-rule);
}

.srdexl p { margin: 0; padding: 0; }

/* -- Count ------------------------------------------------------------------ */

/* One slot, the same 3:2 box as a plate, so its row never grows past the
   plates beside it. Number and label together at the foot, the number straight
   above its label (owner, 2026-09-18). */
.srdexl .srdexl-count {
  aspect-ratio: 3 / 2;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .35rem;
  padding: .55rem .6rem .6rem;
  background: var(--srdexl-red);
  color: #ffffff;
}

.srdexl .srdexl-count-n {
  font-size: clamp(1.9rem, 8vw, 3.2rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.srdexl .srdexl-count-l {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
}

/* The square from the SRD logo, white on red as on the homepage labels that
   sit on a red section. */
.srdexl .srdexl-count-l::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: .2em;
  background: #ffffff;
}

/* -- Plates ------------------------------------------------------------------ */

.srdexl .srdexl-cell {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--srdexl-plate);
}

.srdexl .srdexl-cell--empty { background: var(--srdexl-empty); }

/* A plain block, not a centring grid: the image's 100% height then resolves
   against this absolutely placed box, whose height is definite. */
.srdexl .srdexl-logo {
  position: absolute;
  inset: 0;
  display: block;
  padding: 13% 15%;
  transition: opacity .65s ease;
}

.srdexl .srdexl-logo.is-in,
.srdexl .srdexl-logo.is-out { opacity: 0; }

/* The image box fills the padded plate and object-fit scales the logo inside
   it. A max-height: 100% inside a centring grid did not work: the track had
   no definite height, so a tall square logo ran off the bottom. Specificity
   (0,2,1) beats the theme's img{height:auto} and Elementor's
   .elementor img{height:auto}. */
.srdexl .srdexl-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Mobile: 15 slots. The count, when there is one, is child 1. */
.srdexl .srdexl-field > .srdexl-cell:nth-child(n+16) { display: none; }

@media (min-width: 768px) {
  .srdexl .srdexl-field { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Tablet: 16 slots. */
  .srdexl .srdexl-field > .srdexl-cell:nth-child(n+16) { display: block; }
  .srdexl .srdexl-field > .srdexl-cell:nth-child(n+17) { display: none; }

  .srdexl .srdexl-count { padding: .8rem .85rem .85rem; }
  .srdexl .srdexl-count-n { font-size: clamp(2.8rem, 6vw, 4.4rem); }
  .srdexl .srdexl-count-l { font-size: 11px; letter-spacing: .1em; }
}

@media (min-width: 1025px) {
  .srdexl .srdexl-field { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* Desktop: all 18 slots. */
  .srdexl .srdexl-field > .srdexl-cell:nth-child(n+17) { display: block; }

  .srdexl .srdexl-count { padding: 1rem 1.1rem 1.1rem; }
  .srdexl .srdexl-count-n { font-size: clamp(3.2rem, 5vw, 6.4rem); }
  .srdexl .srdexl-count-l { font-size: 13px; letter-spacing: .12em; }
  .srdexl .srdexl-count-l::before { width: 9px; height: 9px; }
}

/* Where container queries exist, the number is sized from the count cell's
   own height, so it is as large as the cell allows at every width. cqh is a
   percent of the cell's CONTENT box (padding already out); besides the number
   (line-height .85, hence the 117.6 = 100 / .85) it holds the label at two
   lines and the gap, which is what each offset below subtracts, per device.
   The vw sizes above are the fallback. Size containment is safe HERE because
   the cell's width comes from its grid track and its height from its aspect
   ratio; it is NOT safe on .srdexl or the field, where Elementor's flex
   wrappers would collapse the grid to width 0. */
@supports (container-type: size) {
  .srdexl .srdexl-count { container-type: size; }

  .srdexl .srdexl-count-n { font-size: clamp(1.5rem, calc(117.6cqh - 34px), 6rem); }

  @media (min-width: 768px) {
    .srdexl .srdexl-count-n { font-size: clamp(2rem, calc(117.6cqh - 36px), 7rem); }
  }

  @media (min-width: 1025px) {
    .srdexl .srdexl-count-n { font-size: clamp(2.4rem, calc(117.6cqh - 42px), 8.5rem); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .srdexl .srdexl-logo { transition: none; }
}