/* =====================================================================
   MSM Markets — Event Sponsor grid (public/templates/parts/sponsor-section.php).
   Reuses the design tokens defined in event-preview.css (loaded first by
   every page that includes this section) -- this file only adds the
   section/grid/card layout itself; colors are overridden per-brand in
   event-brand-fnl.css, same split as every other section on this page.
   ===================================================================== */

.msm-sponsor-section {
  padding: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--msm-line);
}

.msm-sponsor-section .msm-sponsor-heading {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--msm-ink-faint);
  margin: 0 0 1.25rem;
}

.msm-title-sponsor { text-align: center; margin: 0 0 1.75rem; }
.msm-title-sponsor .msm-title-sponsor-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--msm-ink-faint);
  margin: 0 0 0.75rem;
}

/* Every logo -- title or regular -- sits inside its own fixed-size card
   so a non-transparent submission always looks clean; object-fit:contain
   on the image handles any aspect ratio without cropping or distorting.
   Card content-box widths (title 180px, regular 136px) are deliberately
   well past the 125px minimum rendered logo width -- most sponsors are
   paying sponsors, so the logo should read as a real presence in the
   card, not a small mark lost in whitespace. */
.msm-title-sponsor-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  padding: 20px;
  background: var(--msm-surface);
  border: 2px solid var(--msm-line-strong);
  border-radius: var(--msm-radius-lg);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.msm-title-sponsor-card:hover,
.msm-title-sponsor-card:focus-visible { transform: translateY(-2px); }
.msm-title-sponsor-card:focus-visible {
  outline: 2px solid var(--msm-gold-400);
  outline-offset: 3px;
}

.msm-sponsor-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.msm-sponsor-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 168px;
  padding: 16px;
  background: var(--msm-surface);
  border: 1px solid var(--msm-line);
  border-radius: var(--msm-radius-lg);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.msm-sponsor-logo-link:hover,
.msm-sponsor-logo-link:focus-visible { transform: translateY(-2px); }
.msm-sponsor-logo-link:focus-visible {
  outline: 2px solid var(--msm-gold-400);
  outline-offset: 3px;
}
.msm-sponsor-logo-link.msm-sponsor-nolink:hover,
.msm-sponsor-logo-link.msm-sponsor-nolink:focus-visible {
  transform: none;
}

/* width/height:100% (not max-width/max-height) -- a logo now scales UP
   to fill its card, not just down when it's too big. object-fit:contain
   still guarantees no cropping or distortion: whichever axis the aspect
   ratio allows reaches 100%, the other letterboxes. This intentionally
   trades a little sharpness on a low-resolution source file for a logo
   that reads as a real, prominent presence rather than a small mark
   floating in whitespace -- request the 'large' image size in
   sponsor-section.php so real high-res logos stay sharp when scaled. */
.msm-sponsor-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 620px) {
  .msm-title-sponsor-card { width: 190px; height: 190px; padding: 18px; }
  .msm-sponsor-logo-link { width: 158px; height: 158px; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-sponsor-logo-link,
  .msm-title-sponsor-card {
    transition: none;
  }
}