/* Clubs (clubs.php): placeholder page until the Clubs directory is built. Same dark + red look as the Advertise pages. */
.cb-page { position: relative; background: #0a0a0f; color: #e9eaee; padding-bottom: 90px; font-size: 15px; overflow: hidden; }
.cb-page * { box-sizing: border-box; }
.cb-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 40% at 80% 0%, rgba(221, 26, 34, .35), transparent 70%), radial-gradient(50% 30% at 0% 30%, rgba(255, 120, 60, .12), transparent 70%); }
.cb-hero { position: relative; z-index: 1; min-height: 540px; display: flex; align-items: flex-end; }
.cb-hero::after { content: ""; position: absolute; z-index: 0; top: 40px; bottom: 0; inset-inline-end: 0; width: min(760px, 62%); background: url(../images/bg/ads-hero.jpg?v=1) center bottom / contain no-repeat; opacity: .92; pointer-events: none; -webkit-mask: radial-gradient(closest-side, #000 52%, transparent 100%); mask: radial-gradient(closest-side, #000 52%, transparent 100%); }
.cb-hero .in { position: relative; z-index: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 16px 40px; }
.cb-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 90, 97, .5); color: #ff8a90; background: rgba(221, 26, 34, .12); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.cb-hero h1 { color: #fff !important; font-size: clamp(30px, 4.6vw, 54px); font-weight: 800; margin: 16px 0 12px; max-width: 580px; text-transform: none; letter-spacing: -.01em; line-height: 1.08; }
.cb-hero p { color: #a9acb6; font-size: 16.5px; margin: 0 0 20px; max-width: 540px; text-align: start; }
.cb-btn { display: inline-flex; align-items: center; gap: 9px; background: #dd1a22; color: #fff !important; font-weight: 800; font-size: 14.5px; padding: 12px 24px; border-radius: 12px; text-decoration: none !important; box-shadow: 0 12px 24px -10px rgba(221, 26, 34, .85); transition: background .2s, transform .2s; }
.cb-btn:hover { background: #b9141b; transform: translateY(-1px); }
.cb-wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 8px 16px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cb-card { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .13); border-radius: 22px; padding: 24px; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9); }
.cb-ico { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #ff5a3d, #dd1a22); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 14px; }
.cb-card h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #fff; text-transform: none; letter-spacing: 0; }
.cb-card p { margin: 0; color: #9a9da8; text-align: start; }
@media (max-width: 991px) { .cb-wrap { grid-template-columns: minmax(0, 1fr); } .cb-hero::after { width: 82%; top: 70px; opacity: .55; } }
@media (max-width: 767px) { .cb-hero { min-height: 440px; } .cb-hero p { font-size: 15px; } }
@media (max-width: 575px) { .cb-hero::after { width: 120%; top: 120px; opacity: .4; inset-inline-end: -30%; } }
@media (min-width: 768px) and (max-width: 1199px) { .cb-hero { min-height: 580px; } }
@media (prefers-reduced-motion: reduce) { .cb-btn { transition: none; } }