/* =============================================================
   DEBATE / SPELLING / QUIZ CLUB — Supplemental CSS
   Extends club-sub.css with the 3-activity card strip
   ============================================================= */

/* Title accent colour */
.debate-hero__accent { color: var(--color-secondary); }

/* ── 3 Activity tiles ── */
.debate-body { padding-block: var(--space-section); }
.debate-activities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.debate-activity {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    text-align: center;
    box-shadow: 0 2px 12px rgba(11,36,117,0.04);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.debate-activity:hover { box-shadow: 0 8px 28px rgba(11,36,117,0.1); transform: translateY(-4px); }

.debate-activity__icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    color: #fff;
}
.debate-activity__icon--spelling { background: #0b2475; }
.debate-activity__icon--quiz     { background: #0d7aa8; }
.debate-activity__icon--debate   { background: var(--color-secondary); }

.debate-activity__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--color-primary);
    margin: 0 0 0.4rem;
}
.debate-activity__rule {
    display: block; width: 32px; height: 3px;
    background: var(--color-secondary);
    border-radius: 2px;
    margin: 0 auto 0.75rem;
}
.debate-activity__text {
    font-size: clamp(0.82rem, 1.2vw, 0.9rem);
    line-height: 1.75;
    color: var(--color-muted);
    margin: 0;
}

/* Body grid — wider goals column for the 12 bullet points */
.debate-body__grid {
    grid-template-columns: 1fr 320px !important;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .debate-activities { grid-template-columns: 1fr; }
    .debate-body__grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 580px) {
    .debate-activities { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .debate-activity { transition: none !important; transform: none !important; }
}