/*
 * Clubs & Committees — Page-Specific Styles
 * ──────────────────────────────────────────
 * Shared design system: srusti-design-system.css (loaded first)
 *
 * This file contains ONLY page-specific styles:
 *   - Clubs visual (hero right)
 *   - Overview grid (reuses campustour pattern)
 *   - Impact grid cards
 *   - Club detail cards
 *   - Committee cards
 *   - Outcomes grid
 *   - Gallery / archive grid
 *   - Explore grid
 *   - Tag chip row
 *   - Page-specific responsive
 */


/* ══════════════════════════════════════════════════
   HERO RIGHT — Clubs Visual
══════════════════════════════════════════════════ */

.section-pad{
    padding: 38px 0;
}

.clubs-visual {
    position: relative;
    width: 420px;
    height: 420px;
    flex-shrink: 0;
    
}

.clubs-circle {
    width: 100%;
    height: 100%;
    background:url("https://srustiacademy.ac.in/public/img/club-hero-img.jpg");
    background-size:cover;
    background-repeat: no-repeat;
    border: 1.5px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: clubs-pulse 3s ease-in-out infinite;
}

@keyframes clubs-pulse {
    0%, 100% { box-shadow: 0 0 0 10px rgba(220,162,0,0.08), 0 0 0 22px rgba(220,162,0,0.04); }
    50%       { box-shadow: 0 0 0 18px rgba(220,162,0,0.12), 0 0 0 36px rgba(220,162,0,0.06); }
}

@media (prefers-reduced-motion: reduce) { .clubs-circle { animation: none; } }

.clubs-circle svg {
    width: 120px;
    height: 120px;
    stroke: var(--gold);
}


/* ══════════════════════════════════════════════════
   OVERVIEW (text + image placeholder)
══════════════════════════════════════════════════ */

.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
    align-items: start;
}

.overview-text-col p {
    font-size: 15px;
    color: var(--body-gray);
    line-height: 1.75;
    margin-bottom: 16px;
}

.overview-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ph-frame {
    background: linear-gradient(150deg, #dfe4f7, #c7cff0);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.ph-frame svg { width: 40px; height: 40px; stroke: rgba(55,71,153,0.4); }
.ph-frame span { font-family:"Antonio",sans-serif; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(55,71,153,0.5); }
.ph-frame img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; border-radius:var(--radius-lg); }
.ph-large { grid-column: 1 / -1; min-height: 240px; }
.ph-small { min-height: 160px; }
.ph-sm    { min-height: 100px; }


/* ══════════════════════════════════════════════════
   IMPACT GRID
══════════════════════════════════════════════════ */

.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.igrid-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 5px solid var(--gold);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.igrid-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.igrid-icon {
    width: 48px; height: 48px;
    background: var(--gold);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
}
.igrid-icon svg { width: 22px; height: 22px; stroke: var(--navy); }

.igrid-card h4 {
    font-family: "Antonio", sans-serif;
    font-size: 16px; font-weight: 700;
    color: var(--navy);
}

.igrid-stats {
    display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
}
.igs { text-align: center; }
.igs-num { display: block; font-family:"Anton",sans-serif; font-size: 22px; color: var(--gold); line-height:1; }
.igs-label { font-size: 10px; color: var(--body-gray); text-transform: uppercase; letter-spacing: 0.5px; }


/* ══════════════════════════════════════════════════
   CLUB DETAIL CARDS
══════════════════════════════════════════════════ */

.clubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.club-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.club-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.club-icon-wrap {
    width: 56px; height: 56px;
    background: var(--gold);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.club-icon-wrap svg { width: 26px; height: 26px; stroke: var(--navy); }

.club-card h4 {
    font-family: "Anton", sans-serif;
    font-size: 20px; color: var(--navy); line-height: 1.1;
}

.club-purpose { font-size: 14px; color: var(--body-gray); line-height: 1.65; }

.club-impact-row {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.cir { text-align: center; flex: 1; min-width: 70px; }
.cir-num { display: block; font-family:"Anton",sans-serif; font-size:24px; color:var(--gold); line-height:1; }
.cir-label { font-size: 10px; color: var(--body-gray); text-transform: uppercase; letter-spacing: 0.5px; }

.club-activities h5 {
    font-family: "Antonio", sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--blue); margin-bottom: 8px;
}
.club-activities ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.club-activities li {
    background: var(--off-white); border: 1px solid var(--border);
    padding: 5px 12px; border-radius: var(--radius-pill);
    font-size: 12px; color: var(--charcoal);
}

.club-outcome {
    font-size: 13.5px; color: var(--body-gray); line-height: 1.6;
    padding: 12px 16px; background: var(--off-white);
    border-radius: var(--radius-sm); border-left: 4px solid var(--gold);
}

.club-photos { display: flex; gap: 10px; }
.club-photos .ph-frame { flex: 1; }


/* ══════════════════════════════════════════════════
   COMMITTEE CARDS
══════════════════════════════════════════════════ */

.committee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.committee-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.committee-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.committee-card h4 {
    font-family: "Antonio", sans-serif;
    font-size: 17px; font-weight: 700; color: var(--navy);
}
.committee-card p { font-size: 13.5px; color: var(--body-gray); line-height: 1.6; }

.committee-meta {
    display: flex; flex-direction: column; gap: 6px;
    padding-top: 10px; border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--charcoal);
}
.committee-meta strong { color: var(--blue); }


/* ══════════════════════════════════════════════════
   OUTCOMES GRID
══════════════════════════════════════════════════ */

.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.outcome-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.outcome-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.outcome-icon {
    width: 42px; height: 42px;
    background: var(--off-white);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.outcome-icon svg { width: 22px; height: 22px; }

.outcome-card h4 {
    font-family: "Antonio", sans-serif;
    font-size: 17px; font-weight: 700; color: var(--blue);
}
.outcome-card p { font-size: 13px; color: var(--body-gray); line-height: 1.6; }


/* ══════════════════════════════════════════════════
   GALLERY / ARCHIVE GRID
══════════════════════════════════════════════════ */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.gallery-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.gallery-item img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.3s; }
.gallery-item:hover img { transform: scale(1.05); }

.gallery-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(17,26,68,0.85));
    padding: 32px 16px 16px;
}
.gallery-caption h4 { font-family:"Antonio",sans-serif; font-size:15px; font-weight:700; color:var(--white); margin-bottom:4px; }
.gallery-caption p { font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.5; }

.archive-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--body-gray);
    background: var(--off-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}
.archive-empty svg { width: 48px; height: 48px; margin: 0 auto 18px; display: block; }
.archive-empty p { font-size: 14px; max-width: 600px; margin: 0 auto; line-height: 1.7; }

/* Archive filter bar */
.archive-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

/* Archive extra filters (dropdowns) */
.archive-extra-filters {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.archive-select {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    padding: 10px 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--navy);
    background: var(--white);
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: auto;
}
.archive-select:focus { border-color: var(--blue); }

/* Impact grid icon with image */
.igrid-icon-img {
    background: transparent;
    overflow: hidden;
}
.igrid-icon-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Impact grid description text */
.igrid-desc {
    font-size: 12px;
    color: var(--body-gray);
    line-height: 1.5;
}


/* ══════════════════════════════════════════════════
   TAG CHIP ROW
══════════════════════════════════════════════════ */

.tag-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}


/* ══════════════════════════════════════════════════
   EXPLORE GRID
══════════════════════════════════════════════════ */

.explore-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.explore-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.explore-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.explore-icon {
    width: 48px; height: 48px;
    background: var(--off-white);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.explore-icon svg { width: 24px; height: 24px; }

.explore-card h4 { font-family:"Antonio",sans-serif; font-size:19px; font-weight:700; color:var(--navy); }
.explore-card p { font-size: 13.5px; color: var(--body-gray); line-height: 1.65; flex: 1; }


/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .overview-grid  { grid-template-columns: 1fr; }
    .outcomes-grid  { grid-template-columns: 1fr 1fr; }
    .explore-grid   { grid-template-columns: 1fr 1fr; }
    .clubs-grid     { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .outcomes-grid  { grid-template-columns: 1fr; }
    .explore-grid   { grid-template-columns: 1fr; }
    .gallery-grid   { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .gallery-item img { height: 180px; }
}

@media (max-width: 480px) {
    .gallery-grid   { grid-template-columns: 1fr; }
    .impact-grid    { grid-template-columns: 1fr; }
}