/* ============================================
   ELLS — ENGLISH LITERATURE & LINGUISTICS SOCIETY
   HOMEPAGE-ONLY STYLES
   Load this AFTER style.css, only on index.html:
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="home.css" />

   NOTE: the hero form-tabs, stat strip and the
   "Get Involved" grid below are the SAME dynamic
   mechanism as before (populated by main.js from
   the Worker API) — only restyled and, in the case
   of "Get Involved", the only part of this page
   that isn't static content. Everything else below
   (Intro, What We Do, Disciplines, Events, Voices,
   Journal, Gallery, Join CTA) is new, ELLS-specific
   content sections.
   ============================================ */

/* ---------- Generic <section> rhythm (only homepage uses raw <section>) ---------- */

section {
    padding: var(--space-6) var(--space-3);
}

section>* {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--brick) 0%, var(--brick-deep) 48%, var(--ink) 100%);
    padding-top: var(--space-7);
    padding-bottom: var(--space-6);
    text-align: center;
}

.hero-watermark {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-watermark svg {
    position: absolute;
    top: 0;
    right: -4%;
    width: 60%;
    max-width: 560px;
    height: auto;
}

.hero-inner {
    position: relative;
    max-width: 46rem;
    margin: 0 auto;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--marigold);
    margin-bottom: var(--space-2);
    animation: rise 0.7s ease both;
}

.hero h1 {
    color: var(--paper);
    font-size: clamp(2.2rem, 4.6vw, 3.5rem);
    animation: rise 0.7s ease 0.08s both;
}

.hero-sub {
    margin: var(--space-3) auto 0;
    margin-bottom: var(--space-4);
    max-width: 46ch;
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.82);
    animation: rise 0.7s ease 0.16s both;
}

.hero-actions {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    animation: rise 0.7s ease 0.24s both;
    margin-bottom: 1pc;
}

/* Dynamic pills populated by main.js — same mechanism as before (each
   published "Get Involved" form gets a pill), kept small and secondary
   here since the page has its own primary CTAs above. */
.hero-form-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.6rem;
    row-gap: 0.6rem;
    max-width: 40rem;
    margin: var(--space-3) auto 0;
    animation: rise 0.7s ease 0.3s both;
}

.hero-form-tab {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: var(--paper);
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.hero-form-tab:hover,
.hero-form-tab:focus-visible {
    background: var(--paper);
    color: var(--brick-deep);
    border-color: var(--paper);
}

@media (max-width: 600px) {
    .hero-form-tabs {
        flex-direction: column;
        align-items: stretch;
        row-gap: 0.6rem;
    }

    .hero-form-tab {
        white-space: normal;
        text-align: center;
    }
}

.hero-form-tabs-loading,
.hero-form-tabs-empty {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.82rem;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Stat strip (overlaps hero seam) ---------- */

.stat-strip-wrap {
    position: relative;
    z-index: 5;
    padding: 0 var(--space-3);
    margin-top: calc(var(--space-6) * -1);
}

.stat-strip {
    max-width: var(--max-width);
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 40px rgba(17, 17, 17, 0.16);
    padding: var(--space-3);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: var(--space-2);
    border-left: 1px solid var(--line);
}

.stat-item:first-child {
    border-left: none;
}

.stat-item svg {
    width: 24px;
    height: 24px;
    color: var(--brick);
    margin-bottom: 0.2rem;
}

.stat-item strong {
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: var(--ink);
    line-height: 1;
}

.stat-item span {
    font-size: 0.85rem;
    color: var(--ink-soft);
}

/* ---------- Introduction ---------- */

.intro {
    padding-top: var(--space-7);
    text-align: center;
}

.intro-inner {
    max-width: 46rem;
}

.intro h2 {
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    margin-bottom: var(--space-2);
}

.intro p {
    font-size: 1.05rem;
    margin-bottom: var(--space-2);
}

/* ---------- What We Do (activity cards) ---------- */

.activities-grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.activity-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(28, 18, 16, 0.10);
    border-color: var(--brick-tint-strong);
}

.activity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: var(--space-2);
    background: var(--brick-tint);
    color: var(--brick);
}

.activity-card:nth-child(2n) .activity-icon {
    background: rgba(31, 78, 74, 0.12);
    color: var(--teal);
}

.activity-card:nth-child(3n) .activity-icon {
    background: rgba(201, 162, 39, 0.16);
    color: var(--marigold);
}

.activity-icon svg {
    width: 24px;
    height: 24px;
}

.activity-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.activity-card p {
    font-size: 0.92rem;
}

/* ---------- Get involved (dynamic — powered by main.js/Worker API,
   unchanged mechanism from before) ---------- */

.involved {
    position: relative;
    overflow: hidden;
    background: var(--spotlight);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.involved::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    width: 720px;
    height: 720px;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--brick-glow) 0%, transparent 68%);
    pointer-events: none;
}

.involved .section-head,
.involved .involved-grid {
    position: relative;
    z-index: 1;
}

.involved-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brick);
    color: var(--paper);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    margin-bottom: var(--space-2);
}

.involved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3);
}

.involved-loading {
    text-align: center;
    grid-column: 1 / -1;
}

.form-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--brick);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.form-card:hover,
.form-card:focus-visible {
    border-color: var(--brick);
    transform: translateY(-6px);
    box-shadow: 0 22px 40px rgba(122, 23, 48, 0.2);
}

.form-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--space-2);
    border-radius: 50%;
    background: var(--brick);
    color: #fff;
}

.form-card-icon svg {
    width: 22px;
    height: 22px;
}

.form-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}

.form-card p {
    font-size: 0.93rem;
}

.form-card .form-card-open {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--space-3);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--paper);
    background: var(--brick);
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    transition: background-color 0.18s ease, gap 0.18s ease;
}

.form-card .form-card-open::after {
    content: "\2192";
    transition: transform 0.18s ease;
}

.form-card:hover .form-card-open {
    background: var(--brick-deep);
}

.form-card:hover .form-card-open::after {
    transform: translateX(3px);
}

/* ---------- Literature & Linguistics (disciplines) ---------- */

.disciplines-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.discipline-panel {
    background: var(--paper-deep);
    border-top: 4px solid var(--brick);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-3);
}

.discipline-panel-ling {
    border-top-color: var(--teal);
}

.discipline-panel h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.discipline-panel p {
    font-size: 0.98rem;
    margin-bottom: var(--space-2);
}

/* ---------- Upcoming Events (static preview cards) ---------- */

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.event-card {
    display: flex;
    gap: var(--space-2);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(28, 18, 16, 0.10);
}

.event-date {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: var(--brick);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.event-day {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.event-month {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.event-title {
    font-size: 1.02rem;
    margin-bottom: 0.3rem;
}

.event-desc {
    font-size: 0.88rem;
    margin-bottom: 0.35rem;
}

.event-venue {
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin-bottom: 0.4rem;
}

/* ---------- Student Voices (static preview cards) ---------- */

.voices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.pub-card {
    background: var(--paper-deep);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pub-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(28, 18, 16, 0.08);
}

.pub-category {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brick);
    background: var(--brick-tint);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-bottom: var(--space-2);
}

.pub-title {
    font-size: 1.08rem;
    margin-bottom: 0.25rem;
}

.pub-author {
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin-bottom: 0.5rem;
}

.pub-excerpt {
    font-size: 0.92rem;
    margin-bottom: 0.6rem;
}

/* ---------- Featured Publication / Journal (dark band) ---------- */

.journal {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-deep) 60%, #000000 100%);
}

.journal-inner {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-5);
    align-items: center;
}

.journal-cover {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, var(--brick) 0%, var(--brick-deep) 100%);
    border: 1px solid var(--line-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-3);
    gap: var(--space-2);
}

.journal-cover-label {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--paper);
    line-height: 1.3;
}

.journal-cover-volume {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--marigold);
}

.journal-content h2 {
    color: var(--paper);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    margin-bottom: var(--space-2);
}

.journal-content p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    margin-bottom: var(--space-3);
}

/* ---------- Gallery preview ---------- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.gallery-item {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    background: var(--paper-deep);
    aspect-ratio: 4 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.gallery-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(0deg, rgba(15, 13, 23, 0.75) 0%, transparent 100%);
}

/* ---------- Join CTA (final call to action) ---------- */

.join-cta {
    text-align: center;
    background: var(--paper-deep);
}

.join-inner {
    max-width: 40rem;
}

.join-cta h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    margin-bottom: var(--space-2);
}

.join-cta p {
    font-size: 1.02rem;
    margin-bottom: var(--space-3);
}

/* ---------- Responsive (homepage-only sections) ---------- */

@media (max-width: 960px) {
    .activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .events-grid,
    .voices-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .disciplines-grid {
        grid-template-columns: 1fr;
    }

    .journal-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .journal-cover {
        max-width: 260px;
        margin: 0 auto;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-strip {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--space-2);
    }

    .stat-item:nth-child(3) {
        border-left: none;
    }
}

@media (max-width: 600px) {

    .activities-grid,
    .events-grid,
    .voices-grid,
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .stat-strip {
        grid-template-columns: 1fr 1fr;
    }

    .stat-item:nth-child(2n+1) {
        border-left: none;
    }

    section {
        padding: var(--space-5) var(--space-2);
    }

    .stat-strip-wrap {
        margin-top: calc(var(--space-5) * -1);
    }
}