/**
 * Phase 17 — responsive & accessibility hardening.
 * Fixes overflow, touch targets, focus, and small-screen layout without redesign.
 */

html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

/* --- Header: fit 320–375 without horizontal scroll --- */
@media (max-width: 419px) {
    .site-header__demo {
        display: none;
    }

    .site-logo__text {
        font-size: 1rem;
    }

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

    .container {
        width: min(100% - 1.5rem, var(--container-max));
    }
}

@media (max-width: 359px) {
    .site-logo__text {
        max-width: 11.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.nav-toggle {
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.nav-toggle:focus-visible,
.nav-mobile__close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- Clip decorative overflow --- */
.company-hero__visual {
    overflow: hidden;
}

.home-hero__glow,
.company-hero__glow {
    max-width: 100%;
    overflow: hidden;
}

/* --- Readable type on narrow phones --- */
@media (max-width: 374px) {
    .home-hero__title,
    .company-hero__title,
    .pricing-hero__title {
        font-size: clamp(1.625rem, 8vw, 1.875rem);
        word-break: break-word;
    }

    .home-hero__description,
    .company-hero__desc,
    .pricing-hero__desc {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* --- Lifecycle / process stacks --- */
@media (max-width: 430px) {
    .home-hero-lifecycle__list {
        justify-content: flex-start;
    }

    .home-hero-lifecycle__link {
        min-height: 2.75rem;
    }

    .problem-solution__fragments {
        grid-template-columns: 1fr 1fr;
    }

    .about-audience__grid {
        grid-template-columns: 1fr;
    }
}

/* --- Tables: keep page from expanding --- */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Screenshots / media --- */
.screenshot-frame,
.screenshot-frame img,
.home-showcase__media img,
.about-problem__figure img,
.about-lifecycle__visual img {
    max-width: 100%;
    height: auto;
}

/* --- Card stacks remain single-column on small screens --- */
@media (max-width: 639px) {
    .home-showcase__inner,
    .pricing-showcase__grid,
    .about-problem__grid,
    .about-media__grid {
        grid-template-columns: 1fr;
    }

    .additional-capabilities__grid,
    .team-solutions__grid,
    .about-commitments__grid,
    .pricing-tiers {
        grid-template-columns: 1fr;
    }
}

/* --- CTA groups full-width on phones --- */
@media (max-width: 479px) {
    .home-hero__actions,
    .company-hero__actions,
    .pricing-hero__actions,
    .home-final-cta__actions,
    .cta-band__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home-hero__actions .btn,
    .company-hero__actions .btn,
    .pricing-hero__actions .btn,
    .home-final-cta__actions .btn,
    .cta-band__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .home-blog__featured,
    .home-blog__card-inner,
    .blog-index__featured,
    .blog-index__card {
        padding-inline: 0.85rem;
    }

    .home-blog__featured-body,
    .home-blog__card-body,
    .blog-index__featured-body,
    .blog-index__card-body {
        padding-inline: 0.85rem;
    }
}

/* --- Focus visibility on interactive chrome --- */
.skip-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.nav-mobile__sublink:focus-visible,
.nav-mobile__overview:focus-visible,
.nav-mobile__link:focus-visible,
.nav-mobile__summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Dark surfaces: on-dark secondary buttons need clear focus */
.btn--on-dark:focus-visible,
.cta-band .btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* --- Reduced motion: disable path draws already handled; harden reveals --- */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .home-hero-lifecycle__connector,
    .lifecycle.is-enhanced .lifecycle__stages::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* --- Mobile nav: keep drawer above dimmed backdrop (clickable, not faded) --- */
.nav-mobile__backdrop {
    z-index: 0;
}

.nav-mobile__panel {
    z-index: 1;
}

.nav-mobile__panel:focus {
    outline: none;
}

@media (max-width: 359px) {
    .nav-mobile__brand-text {
        max-width: 10.5rem;
    }

    .nav-mobile__sublink-desc {
        display: none;
    }
}

/* Wide desktop: keep content from over-stretching */
@media (min-width: 1600px) {
    .home-hero__description,
    .section-heading__description {
        max-width: 42rem;
    }
}