/* ==========================================================================
   Acephal — Responsive recomposition and motion preferences
   Breakpoints: 1440 (5 cards) / 1024 (hero stacks) / 900 (2 cards) / 600 (mobile)
   ========================================================================== */

/* ---- Small desktop / landscape tablet: 3 + 2 centered cards ------------- */
@media (max-width: 1439px) {
    .eco-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .eco-grid > li {
        grid-column: span 2;
    }

    .eco-grid > li:nth-child(4) {
        grid-column: 2 / 4;
    }

    .eco-grid > li:nth-child(5) {
        grid-column: 4 / 6;
    }

    /* Footer: the five themes stay on one line between the brand and the motto. */
    .site-footer .themes {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: var(--space-4);
        padding-inline: var(--space-3);
    }

    .site-footer__motto {
        padding-left: var(--space-5);
    }
}

/* ---- Narrow desktop: keep the keyword row on a single line --------------- */
@media (max-width: 1279px) {
    .hero__keywords {
        font-size: 0.72rem;
        letter-spacing: 0.16em;
    }
}

/* ---- Below 1200px: footer stacks (brand, themes, motto) instead of wrapping */
@media (max-width: 1199px) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: var(--space-6);
        text-align: center;
    }

    .site-footer .brand {
        text-align: left;
    }

    .site-footer .themes {
        flex-wrap: wrap;
        justify-content: space-around;
        width: 100%;
        padding-inline: 0;
    }

    .site-footer__motto {
        padding: var(--space-5) 0 0;
        border-left: 0;
        border-top: 1px solid var(--acephal-line);
    }
}

/* ---- Tablet: hero stacks, footer centers --------------------------------- */
@media (max-width: 1023px) {
    .hero {
        min-height: 0;
        padding-bottom: var(--space-7);
    }

    .hero__bg {
        object-position: 83% bottom;
    }

    .hero::after {
        background:
            linear-gradient(to bottom, transparent 75%, var(--acephal-night-deep) 100%),
            linear-gradient(to bottom,
                color-mix(in srgb, var(--acephal-night-deep) 55%, transparent) 0%,
                color-mix(in srgb, var(--acephal-night-deep) 25%, transparent) 60%,
                transparent 80%);
    }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-7);
    }

    .hero__aside {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-6) var(--space-7);
    }

    .hero__statement {
        flex: 1 1 100%;
    }

    .hero__pillars {
        margin-right: 0;
    }
}

/* ---- Portrait tablet: 2 columns, last card centered ---------------------- */
@media (max-width: 899px) {
    .eco-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .eco-grid > li:nth-child(4) {
        grid-column: span 2;
    }

    .eco-grid > li:nth-child(5) {
        grid-column: 2 / 4;
    }
}

/* ---- Mobile: single column, simplified hero ----------------------------- */
@media (max-width: 599px) {
    .hero {
        padding-top: var(--space-6);
    }

    .hero .brand {
        --brand-mark-size: 3.4rem;
        --brand-name-size: 2.3rem;
        --brand-tagline-size: 0.56rem;
        gap: 0.9rem;
    }

    .brand__tagline {
        letter-spacing: 0.2em;
    }

    .hero__title {
        margin-top: var(--space-6);
        font-size: 1.3rem;
    }

    /* Keywords become a 2 x 2 grid; separators only between pairs. */
    .hero__keywords {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: start;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
    }

    .hero__keywords li:nth-child(odd)::before {
        display: none;
    }

    .hero__aside {
        gap: var(--space-5) var(--space-6);
    }

    .hero__statement {
        font-size: 0.85rem;
        letter-spacing: 0.2em;
    }

    /* Simplified mobile hero: the second list would sit on the summit mark. */
    .hero__pillars {
        display: none;
    }

    .eco-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .eco-grid > li,
    .eco-grid > li:nth-child(4),
    .eco-grid > li:nth-child(5) {
        grid-column: auto;
    }

    .eco-card__media {
        aspect-ratio: 16 / 10;
    }

    .site-footer .brand {
        --brand-mark-size: 2.6rem;
        --brand-name-size: 1.6rem;
    }

    .site-footer .themes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-5) var(--space-2);
    }

    .themes li {
        font-size: 0.66rem;
        letter-spacing: 0.14em;
    }

    .site-footer__motto {
        white-space: normal;
    }
}

/* ---- Motion preferences ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .eco-card:hover,
    .eco-card:focus-within,
    .button:hover .icon {
        transform: none;
    }
}