/* ==========================================================================
   ELLS — responsive.css
   All media queries live here. Base (desktop-first) styles are defined in
   style.css and components.css; this file adjusts them for smaller screens.
   Breakpoints: 1024px (tablet), 768px (small tablet / large phone),
   480px (phone).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet and below (<=1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    .container {
        padding-inline: var(--space-md);
    }

    /* --- Navigation switches to a mobile panel --- */
    .nav-toggle {
        display: flex;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-lg);
        background: var(--color-ivory);
        border-bottom: 1px solid var(--color-line);
        padding: var(--space-lg);
    }

    .main-nav.is-open {
        display: flex;
    }

    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        width: 100%;
    }

    .nav-link {
        display: block;
        width: 100%;
        font-size: var(--fs-md);
    }

    .nav-cta {
        align-self: flex-start;
    }

    /* --- Hero stacks, visual panel shrinks and centers --- */
    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        max-width: 360px;
        width: 100%;
        margin-inline: auto;
    }

    .hero-title {
        font-size: var(--fs-3xl);
        max-width: 100%;
    }

    /* --- Grids collapse to two columns --- */
    .activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

    /* --- Literature & Linguistics stack --- */
    .disciplines-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .discipline-panel {
        padding-right: 0;
    }

    .discipline-panel-ling {
        padding-left: 0;
        padding-top: var(--space-xl);
        border-left: none;
        border-top: 1px solid var(--color-line-strong);
    }

    /* --- Journal section stacks --- */
    .journal-inner {
        grid-template-columns: 1fr;
    }

    .journal-cover {
        max-width: 320px;
    }

    /* --- Footer narrows to two columns --- */
    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* --------------------------------------------------------------------------
   Small tablet / large phone (<=768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

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

    .hero {
        padding-top: var(--space-2xl);
    }

    .hero-title {
        font-size: var(--fs-2xl);
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

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

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

    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* --------------------------------------------------------------------------
   Phone (<=480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

    .container {
        padding-inline: var(--space-sm);
    }

    .brand-sub {
        display: none;
    }

    .hero-title {
        font-size: var(--fs-xl);
    }

    .hero-text {
        font-size: var(--fs-base);
    }

    .hero-visual {
        aspect-ratio: 16 / 10;
        padding: var(--space-lg);
    }

    .hero-visual-symbol {
        font-size: 3.5rem;
    }

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

    /* Event cards stack the date above the details */
    .event-card {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .event-date {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--space-2xs);
        border-right: none;
        border-bottom: 1px solid var(--color-line);
        padding-right: 0;
        padding-bottom: var(--space-sm);
    }

    .join-inner .btn {
        width: 100%;
    }
}