/* ============================================================
   Ferrari Metals — responsive rules
   ============================================================ */

/* ---------- Tablet ---------- */
@media (max-width: 992px) {
    /* --tl-pad reserves the ends of the rail. The rail is gone from here down,
       so the inset has nothing left to hold and only narrows the cards — which
       on one column is what makes the whole band grow taller. */
    .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; column-gap: 24px;
                --tl-pad: var(--container-pad); }
    .timeline::before { display: none; }
    .timeline__item { grid-template-rows: auto 1fr; row-gap: 18px; }
    .timeline__node { grid-row: 1; }
    .timeline__item.is-up .timeline__text,
    .timeline__item.is-down .timeline__text { grid-row: 2; align-self: stretch; }
    .timeline__text { width: 100%; max-width: 420px; }
    .timeline__item::after { display: none; }

    .site-footer__grid { row-gap: 32px; }
    :root { --section-pad: 76px; }

    .feature-grid,
    .feature-grid--4,
    .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .category-spread { grid-template-columns: 1fr; row-gap: 36px; }
    .category-spread .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .stats-strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }

    .feature-grid--steps .feature-card__title { min-height: 0; }

    .substrate-mosaic { min-height: clamp(260px, 30vw, 380px); }

    .gallery-grid--crops,
    .gallery-grid--videos,
    .gallery-grid--project { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid--film-logistics .gallery-card,
    .gallery-grid--film-logistics .gallery-card:nth-child(-n+4) { grid-column: span 6; }

    .about-intro,
    .contact-grid { grid-template-columns: 1fr; gap: 30px; }
    .bender__detail { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
    .bender__aside { padding-left: 0; border-left: none; }
    .film-band { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
    .substrate-band { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
    .engineering { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
    .field-steps { margin-top: 76px; }
    .about-intro__media { order: -1; }
    .about-intro--brief { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
    .about-intro--brief .about-intro__frame { order: -1; aspect-ratio: 16 / 10; }
    .spec-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spec-row--4 .spec-row__item:nth-child(n) { border-left: none; }
    .spec-row--4 .spec-row__item:nth-child(even) { border-left: var(--rule); }
    .spec-row--4 .spec-row__item:nth-child(n+3) { border-top: var(--rule); }

    .band-head { grid-template-columns: minmax(0, 1fr); row-gap: 22px; align-items: start; }
    .spec-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spec-row--3 .spec-row__item:nth-child(n) { border-left: none; }
    .spec-row--3 .spec-row__item:nth-child(even) { border-left: var(--rule); }
    .spec-row--3 .spec-row__item:nth-child(n+3) { border-top: var(--rule); }

    .service-run { grid-template-columns: minmax(0, 1fr); margin-inline: 0; }

}

/* ---------- Mobile — collapse nav into a CSS-only slide-down menu ---------- */
@media (max-width: 768px) {
    .site-footer__links li { margin-bottom: 0; }
    .site-footer__links a,
    .site-footer__contact a,
    .site-footer__legal a { padding-block: 9px; }
    .site-footer__contact a { display: inline-block; }
    .contact-info__item a { display: inline-block; padding-block: 11px; }

    .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .site-footer__brand { grid-column: 1 / -1; }
    .site-footer__col { padding-left: 0; border-left: none; }
    .site-footer__col + .site-footer__col { padding-left: 24px; border-left: 1px solid var(--border-subtle); }

    /* Vertical rhythm. The desktop bands are set by --section-pad and by the
       margin each run keeps above itself; on one column those add up to whole
       screens of empty ground between a title and the thing it introduces. */
    :root { --section-pad: 72px; }
    .spec-row { margin-top: 40px; }
    .project-grid { margin-top: 36px; }
    .service-run { margin-top: 40px; }
    .timeline { margin-top: 36px; }
    .field-steps { margin-top: 66px; }
    .section-intro .section__title { margin-bottom: 1rem; }

    /* The copy plate stops overlaying the photograph. At one column the frame
       is about 290px tall and the plate needs more than that, so the card
       clipped its own CTA and the picture was reduced to a sliver above the
       scrim. Below the photo it can never clip, and the photograph is visible
       again. */
    .project-card { background: var(--card-bg); }
    .project-card__frame,
    .project-card:first-child .project-card__frame { aspect-ratio: 16 / 9; }
    .project-card__body {
        position: static;
        padding: 22px 20px 24px;
        background: none;
    }
    .project-card__title { font-size: 1.3rem; padding-top: 16px; margin-bottom: 14px; }

    .site-footer { padding: 44px 0 24px; }
    .site-footer__mark { height: 58px; }
    .site-footer__wordmark { height: 26px; }
    .site-footer__logo { gap: 8px; margin-bottom: 12px; }
    .site-footer__grid { row-gap: 26px; }
    .site-footer__title { padding-bottom: 9px; margin-bottom: 12px; }

    .field-install__media { grid-template-columns: minmax(0, 1fr); }
    .field-steps { grid-template-columns: minmax(0, 1fr); row-gap: 58px; margin-top: 66px; }

    .substrate-mosaic { grid-template-columns: 1fr; gap: 14px; --slice: 0%; min-height: 0; margin-inline: 0; }
    .substrate-mosaic__item { aspect-ratio: 4 / 3; }
    .substrate-mosaic__item:nth-child(1),
    .substrate-mosaic__item:nth-child(3) { transform: none; }
    .substrate-mosaic__item,
    .substrate-mosaic__item:first-child { clip-path: none; }

    :root[data-nav="js"] .nav-burger { display: flex; }

    .site-nav {
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: var(--bg-surface-2);
        box-shadow: var(--shadow-menu);
    }
    :root[data-nav="js"] .site-nav {
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height .3s ease, visibility 0s linear .3s;
    }
    :root[data-nav="js"] .nav-burger[aria-expanded="true"] ~ .site-nav {
        max-height: 400px;
        visibility: visible;
        transition: max-height .3s ease, visibility 0s;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 20px 16px;
    }
    .site-nav__link {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--border-default);
    }
    .site-nav__link:hover { border-bottom-color: var(--accent); }
    .site-nav__link--active { border-bottom-color: var(--accent); }

    .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .bender { --bender-overlap: 28px; }
    .bender__video { height: clamp(300px, 72vw, 440px); }
}

/* ---------- Small phone ---------- */
@media (max-width: 560px) {
    .category-spread .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .timeline { grid-template-columns: 1fr; row-gap: 40px; }
    .timeline__text { max-width: none; }


    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__col + .site-footer__col { padding-left: 0; border-left: none; }

    :root {
        --header-height: 68px;
        --header-height-scrolled: 56px;
        --logo-height: 46px;
        --logo-height-scrolled: 36px;
    }
    :root { --section-pad: 52px; }

    .site-footer__links { columns: 2; column-gap: 20px; }

    /* Phone and fax are short and belong together; at full width they were two
       near-empty rows. The rest of the list keeps the full measure. */
    .site-footer__contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }
    .site-footer__contact > dt:nth-of-type(1) { grid-area: 1 / 1; }
    .site-footer__contact > dd:nth-of-type(1) { grid-area: 2 / 1; }
    .site-footer__contact > dt:nth-of-type(2) { grid-area: 1 / 2; }
    .site-footer__contact > dd:nth-of-type(2) { grid-area: 2 / 2; }
    .site-footer__contact > dt:nth-of-type(n+3),
    .site-footer__contact > dd:nth-of-type(n+3) { grid-column: 1 / -1; }
    .site-footer__links a,
    .site-footer__contact a,
    .site-footer__legal a { padding-block: 7px; }

    .feature-grid,
    .feature-grid--4,
    .project-grid,
    .testimonial-grid { grid-template-columns: 1fr; }
    .project-card__specs { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 4px 28px; }

    .stats-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-intro--reverse .about-intro__media { order: -1; }
    .about-intro--brief .about-intro__frame { aspect-ratio: 3 / 2; }
    .spec-row--4,
    .spec-row--3,
    .spec-row--2,
    .spec-row--plates { grid-template-columns: minmax(0, 1fr); }
    .spec-row--4 .spec-row__item:nth-child(n),
    .spec-row--3 .spec-row__item:nth-child(n),
    .spec-row--2 .spec-row__item:nth-child(n) { border-left: none; }
    .spec-row--4 .spec-row__item:not(:first-child),
    .spec-row--3 .spec-row__item:not(:first-child),
    .spec-row--2 .spec-row__item:not(:first-child) { border-top: var(--rule); }

    .gallery-grid--projects,
    .gallery-grid--installation,
    .gallery-grid--crops,
    .gallery-grid--videos,
    .gallery-grid--project { grid-template-columns: 1fr; }
    .gallery-grid--film-logistics .gallery-card,
    .gallery-grid--film-logistics .gallery-card:nth-child(-n+4) { grid-column: span 12; }
    .gallery-grid--projects .gallery-card:first-child .gallery-card__media,
    .gallery-grid--film-logistics .gallery-card:first-child .gallery-card__media { aspect-ratio: 16 / 9; }
    .gallery-section__head { display: block; }
    .gallery-section__count { display: block; margin-top: 8px; }
    .lightbox__prev { left: 10px; }
    .lightbox__next { right: 10px; }
    .contact-form__row { grid-template-columns: 1fr; }
}

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

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

    .project-card:hover .project-card__img,
    .category-card:hover .category-card__img,
    .gallery-card__link:hover img,
    .gallery-card__link:focus-visible img { transform: none; }

    .site-header__mark,
    .site-footer__mark { content: url("/images/content/logo-mark-static.svg"); }

    .contact-form[data-sending] .contact-form__submit::after { display: none; }
}