/* ==========================================================================
   GAME DAY EXPERIENCES — LANDING / ARCHIVE
   Loaded only by custom-game-day-experiences.hbs (the plural page
   template). Self-contained, like In The South's page template: its
   own copy of the Bucs palette rather than depending on
   game-day-experiences.css, since the two templates never load
   together and this page needs to keep working even if the post
   template's stylesheet changes shape later.

   Per spec, "The Ticket is the hero and archive-card identity" — so
   every card below is a compact reprise of the Ticket hero's visual
   language (punch holes, dashed perforation, barcode stub, Admit One)
   rather than a generic blog card grid.
   ========================================================================== */

.gdl-page{
  --ink:#0A0A08; --charcoal:#211D19; --charcoal2:#302A24; --pewter:#8A8175; --paper:#F3EEE2;
  --bucs-orange:#FF7900; --bucs-orange2:#FF8200; --bucs-red:#D50A0A; --bucs-red2:#C8102E;
  background:var(--ink); color:var(--paper); font-family:'Work Sans', sans-serif;
  min-height:60vh; padding:56px 24px 100px;
}
.gdl-page *{ box-sizing:border-box; }
.gdl-wrap{ max-width:1180px; margin:0 auto; }

/* ---------------------------------------------------------------- */
/* MASTHEAD                                                          */
/* ---------------------------------------------------------------- */

.gdl-masthead{ text-align:center; margin-bottom:48px; }
.gdl-eyebrow{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bucs-orange2); margin-bottom:10px;
}
.gdl-title{
  margin:0; font-family:'Anton', sans-serif; text-transform:uppercase;
  line-height:.92; font-size:clamp(36px, 6.4vw, 68px);
  background:linear-gradient(90deg, var(--bucs-orange), var(--bucs-red2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* ---------------------------------------------------------------- */
/* FILTER BAR                                                         */
/* All / Home / Away are fixed; season chips are appended by JS from  */
/* whatever data-season values the rendered cards actually carry.     */
/* ---------------------------------------------------------------- */

.gdl-filters{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 10px; margin:0 0 40px;
}
.gdl-filter-divider{
  width:1px; height:20px; background:rgba(243,238,226,.18);
  margin:0 4px;
}
@media (max-width:480px){ .gdl-filter-divider{ display:none; } }

.gdl-filter-chip{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--paper);
  background:rgba(243,238,226,.06); border:1px solid rgba(243,238,226,.16);
  border-radius:999px; padding:8px 16px; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.gdl-filter-chip:hover{ border-color:var(--bucs-orange2); }
.gdl-filter-chip[aria-pressed="true"]{
  background:var(--bucs-orange2); border-color:var(--bucs-orange2); color:var(--ink);
  font-weight:700;
}

/* ---------------------------------------------------------------- */
/* CARD GRID                                                          */
/* ---------------------------------------------------------------- */

.gdl-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:28px;
}

.gdl-card{
  position:relative; display:flex; flex-direction:column;
  border-radius:12px; overflow:hidden; text-decoration:none; color:inherit;
  background:linear-gradient(155deg, var(--charcoal2), var(--charcoal) 70%);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(243,238,226,.06);
  isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
/* Filtering (game-day-experiences-landing.js) hides non-matching
   cards by setting the `hidden` attribute. Without this rule they'd
   stay visible anyway: the browser's built-in "[hidden]{display:none}"
   rule is a user-agent default, and this file's own .gdl-card{
   display:flex } above — an ordinary author-stylesheet rule — beats
   it regardless of which is written first, so `hidden` alone was a
   no-op here. Same specificity concern applies wherever else a
   `hidden` toggle might target this class later. */
.gdl-card[hidden]{ display:none; }
@media (hover:hover){
  .gdl-card:hover{
    transform:translateY(-6px) rotate(-.4deg);
    box-shadow:0 26px 50px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(243,238,226,.1);
  }
}
.gdl-card:active{ transform:scale(.98); }

.gdl-card-photo{
  position:relative; display:block; aspect-ratio:16/10;
  background-color:var(--charcoal2);
  background-size:cover; background-position:center 38%;
}
.gdl-card-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,8,0) 45%, rgba(10,10,8,.92) 100%);
}

.gdl-card-punch{
  position:absolute; z-index:3; width:12px; height:12px; border-radius:50%;
  background:var(--ink); box-shadow:inset 0 2px 3px rgba(0,0,0,.5);
}
.gdl-card-punch--tl{ top:10px; left:10px; }
.gdl-card-punch--bl{ bottom:10px; left:10px; }

.gdl-card-body{
  position:relative; z-index:2;
  padding:16px 18px 4px; display:flex; flex-direction:column; gap:6px;
}

.gdl-card-eyebrow{
  font-family:'Space Mono', monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bucs-orange2);
}
/* Away games get a white (paper-toned, matching the rest of the
   theme's "white" text) eyebrow instead of orange, purely so Home vs.
   Away reads as visually distinct at a glance across a full grid of
   cards, rather than every card leading with the same accent color. */
.gdl-card--away .gdl-card-eyebrow{ color:var(--paper); opacity:.85; }

.gdl-card-matchup{
  margin:0; font-family:'Anton', sans-serif; text-transform:uppercase;
  line-height:1.04; font-size:clamp(19px, 2.6vw, 24px);
}
/* Populated by JS (game-day-experiences-landing.js), same split-on-
   " @ " logic as the Ticket hero — see initMatchups there. */
.gdl-card-matchup .gdl-opponent{ color:rgba(243,238,226,.62); }
.gdl-card-matchup .gdl-at{
  display:inline-block; margin:0 .22em; font-size:.5em; vertical-align:.32em;
  color:var(--paper); letter-spacing:.1em;
}
/* Three color treatments for the Bucs side of the matchup, picked at
   random per card by JS (see pickBucsVariant in
   game-day-experiences-landing.js) so a full grid of repeated "Tampa
   Bay Buccaneers" text doesn't read as visually monotonous. The
   gradient is the original/default treatment; solid red and solid
   orange are the two added variants. */
.gdl-card-matchup .gdl-bucs.gdl-bucs--gradient{
  background:linear-gradient(90deg, var(--bucs-orange), var(--bucs-red2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gdl-card-matchup .gdl-bucs.gdl-bucs--red{ color:var(--bucs-red); }
.gdl-card-matchup .gdl-bucs.gdl-bucs--orange{ color:var(--bucs-orange2); }

.gdl-card-date{
  font-family:'Oswald', sans-serif; font-weight:500; font-size:12px;
  letter-spacing:.03em; color:var(--paper); opacity:.75; text-transform:uppercase;
}

.gdl-card-state{
  align-self:flex-start; margin-top:6px;
  font-family:'Space Mono', monospace; font-weight:700; font-size:11px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
  background:var(--paper); padding:5px 10px; border-radius:3px;
}

.gdl-card-stub{
  position:relative; z-index:2; margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-top:2px dashed rgba(243,238,226,.2);
}
.gdl-card-admit{
  font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:.05em;
  font-size:11px; color:rgba(243,238,226,.75);
}
.gdl-card-barcode{
  width:70px; height:16px; opacity:.7;
  background:repeating-linear-gradient(
    90deg,
    var(--paper) 0px, var(--paper) 1px,
    transparent 1px, transparent 2px,
    var(--paper) 2px, var(--paper) 3px,
    transparent 3px, transparent 5px,
    var(--paper) 5px, var(--paper) 6px,
    transparent 6px, transparent 7px
  );
}

/* ---------------------------------------------------------------- */
/* EMPTY STATES                                                       */
/* ---------------------------------------------------------------- */

.gdl-empty, .gdl-empty-filtered{
  text-align:center; padding:60px 20px; color:var(--pewter);
  font-family:'Space Mono', monospace; font-size:13px;
}
.gdl-empty-filtered[hidden]{ display:none; }

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