/* Mobile-first enhancements for the shared Phase 1 shell. */

/*
 * Global Motion System V1 — mobile keeps reveals fast and subtle: shorter
 * travel distance and a tighter stagger step than desktop.
 */
@media (max-width: 47.9375rem) {
    :root {
        --motion-distance-md: 14px;
        --motion-stagger-step: 45ms;
    }
}

@media (min-width: 48rem) {
    :root {
        --container-gutter: 1.5rem;
    }

    .topbar__contact-link--email {
        display: inline-flex;
    }

    /* Header/Footer Logo Scale Fix V1 — tablet step between the mobile
       and desktop (64rem) sizes below. */
    .site-brand__logo {
        max-height: 3rem;
    }

    /*
     * Hero Alignment Polish V1 — tablet: a smaller extra inset than
     * desktop below, on top of .container's own (now 1.5rem) gutter.
     */
    .home-hero--media .home-hero__content {
        padding-inline-start: clamp(1.5rem, 4vw, 2.5rem);
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "brand nav"
            "contact contact";
        gap: var(--space-8) var(--space-10);
        padding-block: var(--space-12);
    }

    .site-footer__nav-list {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .home-capabilities__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
    }

    .home-capabilities__item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding-block: 0;
        padding-inline: var(--space-5);
        border-top: 0;
        border-left: 1px solid var(--color-border);
    }

    .home-capabilities__item:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .home-projects__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
     * Homepage Product Card Grid V1 — 2 columns from tablet through
     * "regular" desktop (48rem-74.9375rem); the 75rem tier below jumps
     * straight to 5 columns/one row, so there's no 64rem 3-column step
     * in between any more.
     */
    .home-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-detail-audience__list,
    .product-detail-features__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-media__gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }

    .project-card--feature {
        grid-column: span 2;
    }

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

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

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

    .reference-logo {
        width: 11rem;
        height: 5rem;
        padding: var(--space-4) var(--space-5);
    }

    .reference-marquee__group {
        gap: var(--space-5);
        padding-inline-end: var(--space-5);
    }

    .reference-marquee__track {
        animation-duration: 34s;
    }

    .about-process__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-principles__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-form__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-form__checklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    :root {
        --container-gutter: 2rem;
        --header-height: 5.25rem;
    }

    .topbar__inner {
        flex-wrap: nowrap;
    }

    .site-header__inner {
        flex-wrap: nowrap;
        gap: var(--space-6);
    }

    .site-brand__fallback {
        font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
    }

    .site-brand__logo {
        max-height: 3.5rem;
    }

    .site-footer__brand-logo {
        max-height: 4rem;
    }

    .site-navigation-toggle,
    .js .site-navigation-toggle {
        display: none;
    }

    .site-navigation,
    .js .site-navigation,
    .js .site-navigation.is-open {
        width: auto;
        max-height: none;
        display: flex;
        align-items: center;
        gap: var(--space-5);
        margin-left: auto;
        padding: 0;
        padding-block: 0;
        overflow: visible;
        border-top: 0;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .site-navigation__list {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .site-navigation__link {
        padding-inline: var(--space-3);
        font-size: 0.9375rem;
        font-weight: var(--font-weight-semibold);
    }

    /*
     * Corporate dropdown becomes a small floating panel on desktop instead
     * of the mobile inline expand/collapse group. Still driven purely by
     * [data-dropdown-trigger][aria-expanded] — see assets/js/main.js — so
     * hover, click/tap and keyboard focus all end up toggling the same
     * attribute regardless of breakpoint.
     */
    .site-navigation__item--dropdown {
        position: relative;
    }

    .site-navigation__dropdown-trigger {
        width: auto;
    }

    .site-navigation__dropdown-menu {
        position: absolute;
        top: calc(100% + var(--space-3));
        left: 0;
        z-index: calc(var(--z-header) + 5);
        width: max-content;
        min-width: 12rem;
        max-height: none;
        margin: 0;
        padding: var(--space-2);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background-color: var(--color-surface-elevated);
        box-shadow: var(--shadow-header);
        transform: translateY(calc(var(--motion-distance-sm) * -1));
        transition:
            opacity var(--motion-base) var(--motion-ease),
            transform var(--motion-base) var(--motion-ease),
            visibility 0s linear var(--motion-base);
    }

    [data-dropdown-trigger][aria-expanded="true"] ~ .site-navigation__dropdown-menu {
        transform: translateY(0);
        transition:
            opacity var(--motion-base) var(--motion-ease),
            transform var(--motion-base) var(--motion-ease),
            visibility 0s linear 0s;
    }

    .site-navigation__actions {
        display: flex;
        flex-shrink: 0;
        gap: var(--space-3);
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .language-control {
        font-size: 0.9375rem;
    }

    .site-navigation__cta {
        width: auto;
        padding-inline: var(--space-6);
        font-size: 0.9375rem;
    }

    .site-footer__grid {
        grid-template-columns: minmax(12rem, 0.8fr) minmax(10rem, 0.7fr) minmax(14rem, 1fr);
        grid-template-areas: "brand nav contact";
        gap: var(--space-10);
        padding-block: var(--space-12);
    }

    .site-footer__nav-list a {
        min-height: auto;
    }

    .home-hero {
        padding-block: var(--space-16) var(--space-12);
    }

    .home-hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
        align-items: center;
        gap: var(--space-12);
    }

    .home-hero__visual {
        max-width: none;
        margin-inline: 0;
        padding: var(--space-8);
    }

    /*
     * Homepage Hero Media Architecture V1 — desktop tier: fills the
     * remaining first viewport below the header/topbar (same
     * --combined-header-height formula as the base rule — it recomputes
     * automatically here since --header-height itself changes to 5.25rem
     * at this breakpoint), a gentler right-biased crop since more of the
     * frame is visible, a lighter overlay since the image reads fine at
     * this size, and the copy's own reading-width cap (only applied here
     * — mobile intentionally uses the full available container width).
     */
    .home-hero--media {
        min-height: calc(100svh - var(--combined-header-height));
    }

    .home-hero__media > img,
    .home-hero__media > video {
        object-position: 60% center;
    }

    .home-hero__overlay {
        background: linear-gradient(
            90deg,
            rgba(7, 17, 31, 0.88) 0%,
            rgba(7, 17, 31, 0.66) 38%,
            rgba(7, 17, 31, 0.20) 68%,
            rgba(7, 17, 31, 0.08) 100%
        );
    }

    .home-hero__copy {
        max-width: 40rem;
    }

    /*
     * Hero Alignment Polish V1 — desktop: +60px to +90px beyond
     * .container's own (2rem) gutter, so the copy no longer hugs the
     * viewport edge, without pushing it into the image's right-side
     * factory/forklift focal area (object-position stays 60% center,
     * unchanged). Additive only — .container's own position/gutter is
     * untouched, this is padding inside that already-positioned box.
     */
    .home-hero--media .home-hero__content {
        padding-inline-start: clamp(3.75rem, 5vw, 5.5rem);
    }

    .home-about__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
        align-items: stretch;
        gap: var(--space-12);
    }

    .home-about__visual {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: var(--space-6);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background-color: var(--color-surface);
        background-image:
            linear-gradient(var(--color-border) 1px, transparent 1px),
            linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
        background-size: 2.5rem 2.5rem;
    }

    .home-about__visual-mark {
        color: var(--color-border-strong);
        font-size: clamp(2.5rem, 4vw, 3.5rem);
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.04em;
        text-align: center;
        text-transform: uppercase;
        transform: rotate(-6deg);
        opacity: 0.55;
        white-space: nowrap;
    }

    /*
     * Site-Wide Real Image Slot Rollout V1 — the photo state drops the
     * text-mark's padding/grid-pattern background and lets the image
     * stretch to match the text column's height (.home-about__grid uses
     * align-items: stretch) instead of staying locked to the mobile 4:3
     * ratio, so it reads as a substantial, column-height photo.
     */
    .home-about__visual--photo {
        display: block;
        aspect-ratio: auto;
        padding: 0;
        background-image: none;
    }

    .home-faq__container {
        margin-inline: auto;
    }

    .home-final-cta__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-10);
        padding: var(--space-8) var(--space-10);
    }

    .home-final-cta__text {
        margin-top: var(--space-2);
    }

    .home-final-cta__button {
        width: auto;
        flex-shrink: 0;
        margin-top: 0;
    }

    .home-projects__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

    .blog-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-story {
        padding-block: var(--space-12);
    }

    .product-story__grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--space-12);
    }

    .product-story--reverse .product-story__text {
        order: 2;
    }

    .product-story--reverse .product-story__visual {
        order: 1;
    }

    .product-story__name {
        font-size: var(--font-size-2xl);
    }

    .product-story__visual {
        max-height: none;
    }

    .product-detail-overview__content {
        padding-left: var(--space-8);
        border-left: 2px solid var(--color-border-strong);
    }

    .product-detail-hero__inner {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-10);
    }

    .product-detail-hero__inner--text-only {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-detail-hero__visual {
        max-width: 30rem;
        height: clamp(360px, 30vw, 440px);
        margin-inline: 0;
        margin-left: auto;
    }

    .product-detail-summary__list {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
        gap: var(--space-4);
    }

    .product-detail-modules__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }

    /*
     * Spans a lone final card across both columns instead of leaving an
     * empty gap beside it — applies to any product's module/use-case list
     * (flat or per-category) whenever that list has an odd item count.
     */
    .product-detail-modules__list > :last-child:nth-child(odd) {
        grid-column: span 2;
    }

    .product-detail-audience__list,
    .product-detail-features__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /*
     * Fills a lone final row so it never leaves an empty gap, regardless of
     * how many audience/feature items a product supplies. If the last card
     * starts a new row alone (count % 3 == 1) it spans the full row; if
     * it's the second card of a trailing pair (count % 3 == 2) it spans
     * the remaining 2 columns — CORE's original 5-item "3+2" layout is the
     * count % 3 == 2 case, unchanged.
     */
    .product-detail-audience__list > :last-child:nth-child(3n+1),
    .product-detail-features__list > :last-child:nth-child(3n+1) {
        grid-column: span 3;
    }

    .product-detail-audience__list > :last-child:nth-child(3n+2),
    .product-detail-features__list > :last-child:nth-child(3n+2) {
        grid-column: span 2;
    }

    .video-modal__dialog {
        width: min(78vw, 64rem);
    }

    .about-editorial__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        gap: var(--space-12);
    }

    .about-editorial--reverse .about-editorial__content {
        order: 2;
    }

    .about-editorial--reverse .about-editorial__visual {
        order: 1;
    }

    .about-editorial__visual {
        max-width: none;
    }

    .contact-layout__grid {
        grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
        align-items: start;
    }

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

    .reference-logo {
        width: 13rem;
        height: 5.5rem;
    }

    .reference-marquee__track {
        animation-duration: 30s;
    }

    .solutions-request__grid,
    .demo-request__grid {
        grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
        align-items: start;
    }

    .about-process__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .about-process__connector {
        display: block;
        position: absolute;
        top: 1.85rem;
        left: 12%;
        right: 12%;
        height: 1px;
        background-image: repeating-linear-gradient(
            to right,
            var(--color-border-strong) 0 6px,
            transparent 6px 12px
        );
    }

    /*
     * Sustainability Page V1 continuous-improvement loop — only from this
     * breakpoint up does the step list become a 2x2 arrangement with its
     * decorative closed-loop connector behind it; below it the steps stay a
     * plain single-column vertical flow (see .sustainability-loop__* in
     * global.css).
     */
    .sustainability-loop__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
        max-width: 38rem;
        margin-inline: auto;
    }

    .sustainability-loop__connector {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        opacity: 0.6;
    }

    .project-modal {
        padding: var(--space-6);
    }

    .project-modal__dialog {
        width: min(92vw, 60rem);
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-areas:
            "index visual"
            "client visual"
            "title visual"
            "summary visual"
            "details visual"
            "tags visual";
        column-gap: var(--space-8);
        padding: var(--space-8);
    }
}

@media (min-width: 75rem) {
    .site-header__inner {
        gap: var(--space-8);
    }

    .site-navigation {
        gap: var(--space-6);
    }

    .site-navigation__list {
        gap: var(--space-2);
    }

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

    /*
     * Homepage Product Grid — Five-Column Row V1 — all 5 cards on one row
     * at large desktop widths instead of wrapping to 3+2. A local
     * --container-max-width override (only inside .home-products, the
     * global :root value is untouched) lets this section's own .container
     * grow past the sitewide 75rem cap on wide viewports — still bounded
     * by the container's usual "100% minus gutter" term on narrower ones,
     * so nothing changes right at 1200px, only above it. Gap and card
     * padding are trimmed slightly, and the thumbnail moves from 4:3 to a
     * shorter 16:10, giving the text area a bit more breathing room now
     * that each card is meaningfully narrower.
     */
    .home-products {
        --container-max-width: 90rem;
    }

    .home-products__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-4);
    }

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

    .home-product-card__body {
        padding: var(--space-4);
    }
}

@media (hover: hover) {
    .button--primary:hover {
        background-color: var(--color-primary-hover);
        box-shadow: var(--shadow-button-hover);
        transform: translateY(-1px);
    }

    .button--secondary:hover,
    .language-control:hover,
    .theme-toggle:hover,
    .site-navigation-toggle:hover {
        border-color: var(--color-accent);
        background-color: var(--color-accent-soft);
        color: var(--color-text);
    }

    .site-navigation__link:hover {
        background-color: var(--color-accent-soft);
        color: var(--color-text);
    }

    .site-footer__nav-list a:hover,
    .site-footer__contact-list a:hover {
        color: var(--color-accent);
    }

    .home-product-card:hover {
        border-color: var(--color-accent);
        transform: translateY(-3px);
    }

    .home-product-card:hover .home-product-card__media img {
        transform: scale(1.04);
    }

    .home-product-card:hover .home-product-card__arrow {
        transform: translateX(0.25rem);
    }

    .home-project-card:hover {
        border-color: var(--color-accent);
        transform: translateY(-3px);
    }

    .home-project-card:hover .project-card__visual img,
    .home-project-card:hover .project-card__visual svg {
        transform: scale(1.03);
    }

    .home-project-card:hover .home-project-card__arrow {
        color: var(--color-accent);
        transform: translateX(0.25rem);
    }

    .home-faq__question:hover {
        color: var(--color-accent);
    }

    .breadcrumb__list a:hover {
        color: var(--color-accent);
    }

    .product-module-card:hover {
        border-color: var(--color-accent);
        box-shadow: inset 0 0 0 1px var(--color-accent);
        transform: translateY(-3px);
    }

    .product-module-card:hover .product-module-card__index {
        color: var(--color-primary-hover);
    }

    .product-module-card:hover .product-module-card__corner {
        width: 1.75rem;
        height: 1.75rem;
        border-color: var(--color-accent);
    }

    .product-audience-card:hover,
    .product-feature-card:hover {
        border-color: var(--color-accent);
        background-color: var(--color-surface-elevated);
    }

    .product-audience-card:hover .product-audience-card__marker,
    .product-feature-card:hover .product-audience-card__marker {
        color: var(--color-accent);
    }

    .product-media__video-trigger:hover {
        border-color: var(--color-accent);
    }

    .product-media__video-trigger:hover .product-media__play {
        background-color: var(--color-media-overlay-hover);
        transform: translate(-50%, -50%) scale(1.05);
    }

    .product-media__image:hover {
        border-color: var(--color-accent);
    }

    .product-media__image:hover .product-media__image-frame img {
        transform: scale(1.03);
    }

    .video-modal__close:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

    .gallery-lightbox__close:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

    .project-modal__close:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

    .project-card:hover {
        border-color: var(--color-accent);
        transform: translateY(-3px);
    }

    .project-card:hover .project-card__corner {
        width: 1.75rem;
        height: 1.75rem;
        border-color: var(--color-accent);
    }

    .project-card:hover .project-card__tag {
        color: var(--color-text);
        border-color: var(--color-accent);
    }

    .blog-card:hover,
    .blog-card:focus-within {
        border-color: var(--color-accent);
        transform: translateY(-3px);
    }

    .blog-card:hover .blog-card__media img,
    .blog-card:focus-within .blog-card__media img {
        transform: scale(1.03);
    }

    .about-principle-card:hover {
        border-color: var(--color-accent);
        transform: translateY(-3px);
    }

    .about-principle-card:hover .about-principle-card__index {
        color: var(--color-primary-hover);
    }

    .about-principle-card:hover .about-principle-card__corner {
        width: 1.75rem;
        height: 1.75rem;
        border-color: var(--color-accent);
    }

    .button[aria-disabled="true"]:hover {
        border-color: var(--color-border-strong);
        background-color: transparent;
        color: var(--color-text);
    }
}

@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;
    }
}