/* =======================================================================
   FC Glattal Dübendorf — About/Sponsors CSS
   Organized, deduplicated, and tier-tunable via CSS variables
   ======================================================================= */

/* ------------------------------
   1) Theme variables
   ------------------------------ */
:root{
  --red:#ed1f25;
  --red-dark:#6c0e12;
  --blue:#253570;
  --blue-mid:#1b2a59;
  --blue-dark:#0a1f3f;

  --gold:#f9ec17;
  --gold-light:#fff36a;

  --ink:#0b1220;
  --muted:#8ea0c5;
  --glass: rgba(255,255,255,.7);
  --shadow: 0 12px 30px rgba(0,0,0,.25);

  /* Sponsor grid defaults (can be overridden per tier) */
  --s-grid-gap: clamp(12px, 1.6vw, 20px);
  --s-tile: 140px;        /* base square tile size */
  --s-pad: clamp(6px, 2.2vw, 12px);
  --s-zoom: .98;
}

/* ------------------------------
   2) Shell / wrapper
   ------------------------------ */
.wrap{
  width:min(1100px,92%);
  margin-inline:auto;
  padding-top: 30px;
}
@media (max-width: 525px){
  .wrap{ padding-top: 0; }
}

/* ------------------------------
   3) HERO (About)
   ------------------------------ */
.about-hero{
  position:relative;
  background: linear-gradient(120deg, var(--blue-dark), var(--blue-mid) 70%);
  color:#fff;
  padding: 36px 0 28px;
  padding-top: 4vh;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.about-hero h1{
  margin:0;
  font-size: clamp(30px, 4.6vw, 52px);
  letter-spacing:.2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.about-hero .subtitle{
  margin:.5rem 0 0;
  opacity:.92;
  color: color-mix(in oklab,#fff 88%, transparent);
}
.about-hero .hero-watermark{
  position:absolute; inset:auto -12% -28% auto;
  width:min(60vw, 720px); height:60%;
  background: url('/images/logo.svg') no-repeat right bottom / contain;
  opacity:.10; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
  pointer-events:none;
}

/* ------------------------------
   4) Layout blocks / headings
   ------------------------------ */
.about-wrap{ padding: 24px 0 56px; }

.section{ margin-top: 26px; }

.section-head h2{
  margin:0 0 12px;
  font-size: clamp(20px, 3vw, 28px);
  color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Card (glass on dark-blue) */
.about-card{
  background: color-mix(in oklab, #ffffff 10%, var(--blue-dark));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  padding: clamp(14px, 2vw, 18px);
  color:#eaf0ff;
  line-height: 1.7;
  backdrop-filter: blur(8px);
}
.about-card h3{ margin:0 0 8px; color:#fff; }

/* Two-column helper */
.two-col{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 16px);
}
@media (max-width: 820px){ .two-col{ grid-template-columns: 1fr; } }

/* ------------------------------
   5) Timeline
   ------------------------------ */
.timeline{
  list-style:none;
  margin:0; padding: 8px 0 0;
  position:relative;
}
.timeline li{
  display:grid; grid-template-columns: 24px 1fr; gap:12px; align-items:flex-start;
  padding: 8px 0;
}
.timeline .dot{
  width:12px; height:12px; border-radius:50%; margin:6px 0 0 6px;
  background: linear-gradient(180deg, var(--gold), var(--gold-light) 85%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--gold) 35%, black);
}
.timeline .tl-body{
  background: color-mix(in oklab,#ffffff 8%, var(--blue-dark));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 10px 12px; color:#eaf0ff;
}

/* ------------------------------
   6) People (staff/officials)
   ------------------------------ */
.group-title{
  margin: 18px 0 10px;
  display:inline-block;
  font-size: clamp(16px, 2.4vw, 22px);
  color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.35);
  padding: 6px 10px; border-radius: 12px;
  background: color-mix(in oklab, var(--blue) 30%, rgba(255,255,255,.1));
  border: 1px solid rgba(255,255,255,.18);
}

/* Flex so the last row is centered */
.people-grid{
  display:flex; flex-wrap:wrap; gap: clamp(16px, 2.5vw, 24px);
  justify-content:center;
}
.person-card{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background: color-mix(in oklab, #ffffff 8%, var(--blue-dark));
  border: 1px solid var(--blue-dark);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  flex: 0 0 235px; width: 235px;
}
.person-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 14px 28px rgba(0,0,0,.3);
}
.person-photo{
  width: 100%; aspect-ratio: 3 / 4;
  border-radius: 14px; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: #0b1730;
  border: 2px solid var(--blue-dark);
  position: relative;
}
.person-photo::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.person-meta{
  text-align:center; display:flex; flex-direction:column; gap:4px; margin-top: 2px;
}
.person-meta .name{
  color:#fff; font-weight:900; line-height:1.2;
  font-size: clamp(18px, 1.2vw + 12px, 28px); letter-spacing:.2px;
}
.person-meta .role{
  color:#d5e6ff; font-weight:600;
  font-size: clamp(14px, .6vw + 12px, 18px); letter-spacing:.3px;
}

/* a11y helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ------------------------------
   7) Sponsors — Intro copy
   ------------------------------ */
.thank-you{
  margin-top:.5rem; color:#94a3b8;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
}
.sponsor-intro h2{ margin-bottom: .25rem; }
.sponsor-intro .lead{ margin-bottom: 1rem; color: #5a7a90; }
.sponsor-intro ul,
.sponsor-tier .tier-bullets{ margin: .5rem 0 1.25rem 1rem; }

/* ------------------------------
   8) Premium banner (wide image tiles)
   ------------------------------ */
.premium-banner{ padding-bottom: 30px; }
.wrap-premium{ padding-inline: 0; } /* flush edges */
.premium-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-grid-gap);
  margin:0; padding:0;
}

/* Optional tall premium image card (banner style) */
.premium-card{
  position: relative;
  background:#000;                /* black bg per request */
  aspect-ratio: 16 / 9;           /* wide tile */
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.premium-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: contain;            /* show whole logo nicely */
  object-position: 50% 50%;
  display:block;
}
@media (max-width: 640px){
  .premium-card{ height: clamp(140px, 40vw, 220px); }
}

/* ------------------------------
   9) Sponsor Tiers (copy + grid)
   ------------------------------ */

/* Header card before each tier grid (adds the gap you asked for) */
.sponsor-about{
  margin-bottom: clamp(12px, 2.5vw, 24px);
}

/* Dark-blue readability for text blocks */
.sponsor-tier .about-card{ color:#eaf0ff; }
.sponsor-tier .about-card p{ color: color-mix(in oklab, #ffffff 85%, #9fb0c7); }

/* Tier containers can override tile sizes via CSS vars */
/* === Premium: full-width banner tile === */
.sponsor-tier--premium .sponsor-grid{
  /* keep flex for consistency; a 100% item will span the row */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-grid-gap);
}
.sponsor-tier--premium .logo-card.premium-card{
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  /* wide cinematic aspect; tweak if you prefer 16/9 */
  aspect-ratio: 21 / 9;
  background: #000;
}
@media (max-width: 640px){
  .sponsor-tier--premium .logo-card.premium-card{
    aspect-ratio: 16 / 9;             /* a bit taller on phones */
    min-height: clamp(160px, 40vw, 240px);
  }
}

/* === Make other tiers larger via CSS variables === */
/* Gold: big tiles */
.sponsor-tier--gold{
  --s-tile: 220px;
  --s-pad: clamp(8px, 2vw, 14px);
  --s-zoom: .98;
}
/* Silver: medium-large tiles */
.sponsor-tier--silver{
  --s-tile: 180px;
  --s-pad: clamp(6px, 1.8vw, 12px);
  --s-zoom: .96;
}
/* Bronze: comfortably larger than before */
.sponsor-tier--bronze{
  --s-tile: 160px;
  --s-pad: clamp(6px, 1.6vw, 10px);
  --s-zoom: .95;
}

/* Optional: keep them sensible on small screens */
@media (max-width: 520px){
  .sponsor-tier--gold{   --s-tile: 200px; }
  .sponsor-tier--silver{ --s-tile: 150px; }
  .sponsor-tier--bronze{ --s-tile: 130px; }
}

/* ------------------------------
   10) Sponsor Grid (CENTERED last row)
   Using flex ensures the final line is centered for uneven counts.
   ------------------------------ */
.sponsor-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;          /* centers every line, including the last */
  gap: var(--s-grid-gap);
  padding-top: 2vh;
}

/* Square card — fixed size from vars so rows align neatly */
.logo-card{
  position:relative;
  display:block;
  width: var(--s-tile);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}

/* Premium “big” tiles still use the same card with 16:9:
   give them their own modifier to switch shape if needed */
.logo-card.premium-card{
  width: min(100%, calc(var(--s-tile) * 1.6));
  aspect-ratio: 16 / 9;
  background:#000;
}

/* Logo centering */
.logo-wrap{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding: var(--s-pad);
}
.logo-card img{
  max-width:100%; max-height:100%; object-fit:contain; display:block;
  transform: translateZ(24px) scale(var(--s-zoom));
  transition: transform .25s ease;
}

/* Hover/focus lift */
.logo-card:hover,
.logo-card:focus-visible{
  transform: translateY(-6px) rotateX(6deg) rotateY(-6deg);
  box-shadow: 0 18px 44px rgba(0,0,0,.26);
  border-color: rgba(0,0,0,.10);
}
.logo-card:hover img,
.logo-card:focus-visible img{ transform: translateZ(40px) scale(1); }

/* Keyboard focus */
.logo-card:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ------------------------------
   11) CTA Card
   ------------------------------ */
.sponsor-cta{
  margin-block: clamp(24px, 5vw, 48px);
}
.sponsor-cta .cta-card{
  text-align: center;
  padding: clamp(18px, 4vw, 36px);
  border-radius: 18px;
  background:
    radial-gradient(1200px 480px at 50% -140px, rgba(59,130,246,.18), rgba(59,130,246,0)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 34px rgba(2,6,23,.16);
}
.sponsor-cta .cta-card h3{ margin: 0 0 6px; color: #fff; }
.sponsor-cta .cta-card p{ margin: 0 0 14px; color: #cbd5e1; }
.sponsor-cta .btn{
  display:inline-block; padding: 10px 16px; border-radius: 999px; font-weight: 700;
  background: #2563eb; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.2);
}
.sponsor-cta .btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }


/* Collapsible tier copy */
.tier-details { margin-top: .25rem; }
.tier-details > summary::-webkit-details-marker { display:none; }

.tier-toggle{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  font-weight:800;
  color:#0b1220;                      /* dark text on light button */
  background-color: #86a6d3a9;
  border: 2px solid color-mix(in oklab, var(--gold) 35%, black);
  box-shadow: var(--shadow);
  transition: transform .12s ease, filter .2s ease;
}
.tier-toggle:hover { transform: translateY(-1px); filter: brightness(1.03); }
.tier-toggle:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }

.tier-toggle .chev { transition: transform .2s ease; }

/* Toggle text swap without JS */
.tier-details .when-open { display:none; }
.tier-details[open] .when-open { display:inline; }
.tier-details[open] .when-closed { display:none; }
.tier-details[open] .chev { transform: rotate(180deg); }

/* Collapsed content body */
.tier-content{
  margin-top:.75rem;
  padding:.5rem .25rem 0;
  border-top:1px solid rgba(255,255,255,.16);
  color:#eaf0ff;                     /* readable on dark blue cards */
}
.tier-content p { margin: 0 0 .5rem; color: color-mix(in oklab, #ffffff 90%, #9fb0c7); }
.tier-content .tier-bullets { margin:.5rem 0 0 1rem; }


/* ------------------------------
   12) Group Photo block (optional)
   ------------------------------ */
.group-photo-section{ margin: clamp(16px, 4vw, 40px) 0; }
.group-photo{
  position: relative;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.group-photo img{
  width:100%; height:100%; display:block;
  aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center 45%;
  filter: saturate(1.05) contrast(1.02);
}
.group-photo figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding: clamp(10px, 2vw, 18px);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  color:#fff; display:flex; align-items:end; gap:.5rem;
  font-size: clamp(14px, .9vw + 10px, 18px);
}
.group-photo figcaption strong{ font-weight:900; letter-spacing:.2px; }
.group-photo figcaption span{ opacity:.9; }

/* ------------------------------
   13) Field teaser (optional)
   ------------------------------ */
.field-teaser .field-figure{
  margin:0; display:grid; gap:8px; justify-items:center;
}
.field-teaser img{
  width:100%; height:auto; border-radius:12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.field-teaser figcaption{
  font-size:.95rem; text-align:center;
}

/* ------------------------------
   14) Utilities
   ------------------------------ */
.card{ background:#fff; border:1px solid #e7eef7; border-radius:16px; padding:12px; }
.muted{ color:#5a7a90; }
.tilt{ transform: perspective(700px) rotateX(0) rotateY(0); }
.tilt:hover{ transform: perspective(700px) rotateX(1.5deg) rotateY(-1.5deg) scale(1.02); }