/* layout.css: page-specific blocks */
.section{padding:2rem 0}
.cta{padding:3rem 0;text-align:center}
.cta h2{font-size:clamp(1.6rem,3.6vw,2.6rem)}
.event-list{display:grid;gap:1rem}
.event{display:flex;gap:1rem;align-items:center;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.event .date{min-width:92px;text-align:center;background:#0f0f14;border:1px solid var(--border);border-radius:12px;padding:.5rem}
.event .date .month{font-weight:700;letter-spacing:.06em}
.event .right{flex:1}
.event .actions{margin-left:auto}
.placeholder{aspect-ratio:16/9;background:#0f0f14;border:1px dashed #2a2a3a;border-radius:12px;display:grid;place-items:center;color:#6b7280}
.card.article .meta{color:var(--muted);font-size:.9rem}

/* Hero photo rail sizing (desktop only) */
.hero-photos .gallery{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* Mobile hero media + CTA layout for conversion */
@media (max-width: 900px){
  .hero{ padding-top: 2.5rem; padding-bottom: 2rem }
  .hero .hero-media{ margin-top: 1rem; display:block }
  .hero .hero-media .media{ border-radius: 14px; overflow: hidden; border:1px solid var(--border); background: var(--surface) }
  .hero .hero-media img{ width:100%; height:auto; display:block }
  .hero .mt-4{ display:flex; flex-direction:column; gap:.6rem; margin-top:1rem }
  .hero .mt-4 .btn{ width:100% }
  .hero .hero-proof{ margin-top:.75rem; font-size:.9rem; opacity:.95 }
}

/* Ensure placeholder images fill container and keep rounded corners */
.placeholder{ overflow:hidden }
.placeholder img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block }

/* Hide mobile hero media on desktop */
@media (min-width: 901px){
  .hero .hero-media{ display:none }
}

/* Hero photo rails: two rows that scroll off the page (desktop only) */
@media (min-width: 901px){
  .hero-photos{ padding-top: 1.5rem; padding-bottom: 2rem; }
  .hero-photos .rails{ display:flex; flex-direction:column; gap: 1rem; overflow:hidden }
  .hero-photos .rail{ position:relative; width:100%; overflow:hidden }
  .hero-photos .rail-inner{ display:flex; width: max-content; will-change: transform; }
  .hero-photos .track{ display:flex; gap:1rem; padding-right:1rem }
  .hero-photos .ph{
    background:#0f0f14;
    border:1px dashed #2a2a3a;
    border-radius:12px;
    color:#6b7280;
    width: 260px; /* card width */
    height: 160px; /* card height */
    display:grid; place-items:center;
  }
  .hero-photos .ph img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block }

  /* marquee animations */
  .hero-photos .rail-1 .rail-inner{ animation: rail-left 35s linear infinite }
  .hero-photos .rail-2 .rail-inner{ animation: rail-right 42s linear infinite }

  @keyframes rail-left{
    0%{ transform: translateX(0) }
    100%{ transform: translateX(-50%) }
  }
  @keyframes rail-right{
    0%{ transform: translateX(-50%) }
    100%{ transform: translateX(0) }
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .hero-photos .rail-1 .rail-inner,
  .hero-photos .rail-2 .rail-inner{
    animation: none !important;
  }
}

/* Page header (compact hero for interior pages) */
.page-header.full-bleed{padding:2.5rem 0 1.25rem}
.page-header .eyebrow{font-size:.9rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin:0 0 .25rem}
.page-header h1{margin:.25rem 0 .5rem;font-size:clamp(1.8rem,3.8vw,2.4rem)}
.page-header p{color:var(--muted);max-width:60ch;margin:.25rem auto 0}

/* Filter pills row */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;justify-content:center}
.btn.pill{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:.45rem .8rem;border-radius:999px}
.btn.pill.active{background:var(--brand-2);border-color:transparent;color:#fff}

/* Tournaments page hierarchy */
.section.events{ padding-top: 1rem }
.cta.cta--subtle{ padding: 1.25rem 0 2rem; opacity:.95 }
.cta.cta--subtle h2{ font-size: clamp(1.4rem, 3vw, 1.8rem) }

/* Category pill colors (clubs) */
:root{
  --cat-bg: color-mix(in srgb, var(--brand) 12%, var(--surface));
  --cat-text: var(--text);
  --cat-active-bg: var(--brand-2);
  --cat-active-text: #fff;
}
.btn.pill{ background: var(--cat-bg); color: var(--cat-text); border-color: transparent }
.btn.pill:hover{ filter: brightness(0.98) }
.btn.pill.active{ background: var(--cat-active-bg); color: var(--cat-active-text) }

/* --- Category pills: full background on active/selected --- */
.btn.pill{
  position:relative;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}
.btn.pill:focus{ outline:none }
.btn.pill:hover{ filter:brightness(0.98) }
.btn.pill.active{
  background: var(--cat-active-bg) !important;
  color: var(--cat-active-text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Optional accessible focus style without big blue ring */
.btn.pill:focus-visible{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-active-bg) 40%, transparent);
}

/* Collapsible filters (mobile) */
.filters.collapsed{ display:none }
.filters-toggle{ display:inline-block; margin:.5rem auto 0; background:var(--surface); border:1px solid var(--border); color:var(--text); padding:.45rem .8rem; border-radius:999px }

/* Safeguard: page header spacing (idempotent) */
.page-header.full-bleed{padding:2.5rem 0 1.25rem}
.page-header .eyebrow{font-size:.9rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin:0 0 .25rem}
.page-header h1{margin:.25rem 0 .5rem;font-size:clamp(1.8rem,3.8vw,2.4rem)}
.page-header p{color:var(--muted);max-width:60ch;margin:.25rem auto 0}

/* Results: smaller CTA */
.cta.cta--subtle{ padding: 1.25rem 0 2rem; opacity:.95 }
.cta.cta--subtle h2{ font-size: clamp(1.4rem, 3vw, 1.8rem) }

/* Clubs header safeguard (idempotent) */
.page-header.full-bleed{padding:2.5rem 0 1.25rem}
.page-header .eyebrow{font-size:.9rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin:0 0 .25rem}
.page-header h1{margin:.25rem 0 .5rem;font-size:clamp(1.8rem,3.8vw,2.4rem)}
.page-header p{color:var(--muted);max-width:60ch;margin:.25rem auto 0}

/* Top Players: center the best-player feature section */
.best-player.center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}