/* Sponsorpagina (sponsors.php). Bouwt verder op evenementen.css (kleuren, header, knoppen, secties).
   Klassen beginnen met "so-". De vraag staat in het zwart, de sponsors in een witte band eronder:
   de meeste logo's zijn voor een witte achtergrond gemaakt. */

/* ---------- Zwart: de vraag, met ernaast hoe lang we al spelen en waar je de steun hoort ---------- */
.so-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 60px; align-items: center; padding-top: 50px; padding-bottom: 100px; }
.so-intro-actions { margin-top: 26px; }
.so-side { display: flex; flex-direction: column; gap: 34px; }
.so-years { margin: 0; display: flex; flex-direction: column; }
.so-years strong { font-size: clamp(96px, 12vw, 176px); line-height: .85; letter-spacing: -.05em; }
.so-years span { margin-top: 12px; color: var(--ev-muted); font-size: 17px; }
.so-upcoming { border-top: 1px solid var(--ev-line); padding-top: 22px; }
.so-upcoming h2 { margin: 0 0 14px; font-size: 20px; }
.so-upcoming-item { display: flex; gap: 16px; align-items: center; padding: 10px 0; color: var(--ev-text); text-decoration: none; }
.so-upcoming-item .ev-timesig { min-width: 58px; border-left-width: 2px; }
.so-upcoming-item .ev-timesig .num { font-size: 24px; }
.so-upcoming-item .ev-timesig .den { font-size: 11px; margin-top: 5px; padding-top: 5px; }
.so-upcoming-item strong { display: block; font-size: 17px; }
.so-upcoming-item small { display: block; color: var(--ev-dim); font-size: 13px; }
.so-upcoming-item:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.so-upcoming-all { display: inline-block; margin-top: 10px; color: var(--ev-text); font-size: 14px; font-weight: bold; }
/* Met een foto bovenaan staat de vraag op de foto: hier blijven de jaren en de evenementen op één rij,
   de evenementen als kaartjes naast elkaar (zoals "Ook van de partij" op de evenementenpagina) */
.so-intro.pg-after-hero { grid-template-columns: minmax(0, 1fr); padding-bottom: 80px; }
.pg-after-hero .so-side { flex-direction: row; align-items: center; gap: 50px; }
.pg-after-hero .so-years { flex-shrink: 0; }
.pg-after-hero .so-years strong { font-size: clamp(80px, 9vw, 130px); }
.pg-after-hero .so-years span { max-width: 210px; }
.pg-after-hero .so-upcoming { flex: 1; min-width: 0; border-top: 0; padding-top: 0; }
.pg-after-hero .so-upcoming-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.pg-after-hero .so-upcoming-item { padding: 16px 18px; border: 1px dashed rgba(252, 252, 252, .35); border-radius: 16px; transition: border-color .2s, background .2s; }
.pg-after-hero .so-upcoming-item:hover { border-color: var(--ev-text); background: var(--ev-raised); }
.pg-after-hero .so-upcoming-item:hover strong { text-decoration: none; }
.so-list { padding-top: 70px; padding-bottom: 90px; background: #fcfcfc; color: #070707; }
.so-list h2 { font-size: 32px; margin: 0 0 30px; color: #070707; }

/* Hoe hoger de tier, hoe groter het vak */
.so-tier { display: grid; gap: 18px; }
.so-tier + .so-tier { margin-top: 18px; }
.so-tier-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.so-tier-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.so-tier-3 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

.so-card { display: flex; flex-direction: column; min-width: 0; background: #fff; color: #070707; border: 1px solid rgba(7, 7, 7, .1); border-radius: 18px; overflow: hidden; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
a.so-card:hover, a.so-card:focus-visible { transform: translateY(-3px); border-color: rgba(7, 7, 7, .25); box-shadow: 0 10px 28px rgba(7, 7, 7, .1); outline: none; }
.so-logo { display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.so-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.so-logo-name { font-weight: bold; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.so-name { display: block; font-weight: bold; }

.so-card-1 .so-logo { height: 170px; padding: 28px 34px; }
.so-card-1 .so-logo-name { font-size: 26px; }
.so-card-1 .so-name { padding: 18px 28px 0; border-top: 1px solid rgba(7, 7, 7, .08); font-size: 20px; }
.so-card-1 .so-text { display: block; padding: 6px 28px 0; color: #444; font-size: 15px; }
.so-card-1 .so-link { display: block; padding: 12px 28px 22px; font-size: 14px; font-weight: bold; }
.so-card-1 .so-name:last-child, .so-card-1 .so-text:last-child { padding-bottom: 22px; }

.so-card-2 .so-logo { height: 130px; padding: 20px 22px; }
.so-card-2 .so-logo-name { font-size: 19px; }
.so-card-2 .so-name { padding: 0 16px 16px; font-size: 14px; text-align: center; }

.so-card-3 .so-logo { height: 104px; padding: 14px 14px; border-radius: 14px; }
.so-card-3 { border-radius: 14px; }
.so-card-3 .so-logo-name { font-size: 16px; }

/* Lege plaats achteraan: een uitnodiging, geen sponsor */
.so-card-you { background: transparent; border: 2px dashed rgba(7, 7, 7, .25); color: #070707; }
.so-card-you .so-logo { height: 100%; min-height: 90px; font-weight: bold; text-align: center; }
a.so-card-you:hover, a.so-card-you:focus-visible { border-color: #070707; box-shadow: none; }

@media (max-width: 900px) {
  .so-intro { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 16px; padding-bottom: 56px; }
  .pg-after-hero .so-side { flex-direction: column; gap: 30px; }
  .pg-after-hero .so-upcoming { border-top: 1px solid var(--ev-line); padding-top: 22px; }
  .so-list { padding-top: 50px; padding-bottom: 60px; }
  .so-list h2 { font-size: 28px; }
  .so-tier-1 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .so-tier-2, .so-tier-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .so-card-1 .so-logo { height: 140px; padding: 22px 30px; }
  .so-card-2 .so-logo { height: 110px; padding: 16px; }
  .so-card-3 .so-logo { height: 84px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .so-card { transition: none; }
}