.pwrap { max-width:1040px; margin:0 auto; padding:0 32px; }

/* PAGE HEADER (shared across pages) */
.page-head { position:relative; padding:40px 0 18px; }
.ph-note { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:8px; }

/* CARD GRID */
/* Always 3 columns, centered. Each card flexes up to 320px (so it never
   stretches to fill) and the trio is centred, putting any spare space in the
   side margins rather than as dead space on the right. */
.tgrid { display:grid; grid-template-columns:repeat(3, minmax(0, 320px)); justify-content:center; gap:20px; margin:18px 0 40px; }

.tcard { display:flex; flex-direction:column; background:linear-gradient(180deg,var(--ink-2),#0A0F22); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.tcard:hover { transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 28px 50px -30px rgba(0,0,0,.8); }
.tcard.active { border-color:rgba(0,209,122,.4); }
.tcard.active:hover { box-shadow:0 28px 56px -28px rgba(0,209,122,.45); }

/* IMAGE */
.tcard-media { position:relative; height:190px; }
.tcard-media img { width:100%; height:100%; display:block; }
.tcard-media img.cover { object-fit:cover; object-position:center; }
.tcard-media img.emblem { object-fit:contain; background:#f3f5fa; padding:18px; }
.tcard-media::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(10,15,34,0) 55%, rgba(10,15,34,.55)); }

/* STATUS pill overlay — solid dark chip so the label is readable over any image */
.tpill { position:absolute; top:12px; right:12px; z-index:2; font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; padding:7px 13px; border-radius:100px; display:inline-flex; align-items:center; gap:7px; background:rgba(8,12,26,.9); box-shadow:0 6px 16px -6px rgba(0,0,0,.7); }
.tpill::before { content:""; width:7px; height:7px; border-radius:50%; }
.tpill.current { color:var(--emb); border:1px solid rgba(0,209,122,.65); }
.tpill.current::before { background:var(--em); box-shadow:0 0 0 3px rgba(0,209,122,.3); }
.tpill.archived { color:#FF8A95; border:1px solid rgba(248,113,113,.65); }
.tpill.archived::before { background:#FF8A95; }
.tpill.upcoming { color:#F2C14E; border:1px solid rgba(242,193,78,.65); }
.tpill.upcoming::before { background:#F2C14E; box-shadow:0 0 0 3px rgba(242,193,78,.3); }

/* BODY */
.tcard-body { display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; gap:10px; }
.tcard-title { font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:21px; line-height:1.05; letter-spacing:.01em; color:var(--text); text-transform:uppercase; }
.tcard-text { font-size:13.5px; line-height:1.5; color:var(--muted); margin:0; }

/* BUTTONS */
.tbtn { margin-top:auto; font-family:"Saira Condensed",sans-serif; font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:14px; padding:12px 18px; border-radius:11px; border:1px solid transparent; cursor:pointer; text-align:center; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .15s ease, transform .12s ease, border-color .15s ease, color .15s ease; }
.tbtn.primary { background:var(--em); color:#06210F; box-shadow:0 0 0 1px rgba(29,239,147,.25), 0 10px 26px -12px rgba(0,209,122,.6); }
.tbtn.primary:hover { background:var(--emb); transform:translateY(-1px); }
.tbtn.ghost { background:transparent; color:var(--text); border-color:var(--line-strong); }
.tbtn.ghost:hover { border-color:var(--em); color:var(--emb); background:var(--em-dim); transform:translateY(-1px); }
/* Teaser button for an upcoming season — looks like a button but does nothing yet. */
.tbtn.disabled { background:transparent; color:var(--muted); border-color:var(--line); cursor:default; }

@media (max-width:720px) {
  .pwrap { padding-left:18px; padding-right:18px; }
  .ph-inner { align-items:flex-start; }
  .tgrid { grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px; }
}
@media (max-width:430px) {
  /* one full-width card per row on phones — cleaner than two cramped ones */
  .tgrid { grid-template-columns:1fr; }
  .tcard-media { height:170px; }
}