/* ==========================================================================
   Kytran Empowerment — Responsive Breakpoints
   480px / 768px / 1024px
   ========================================================================== */

/* ==========================================================================
   1024px — Tablet
   ========================================================================== */
@media (max-width: 1024px) {
    :root {
        --space-section: 5rem;
    }

    /* --- Nav: reduce brand text, tighten links --- */
    .nav__brand-text { font-size: 1rem; }
    .nav__links { gap: var(--space-md); }
    .nav__link { font-size: 0.75rem; letter-spacing: 0.1em; }

    /* --- Nav mobile panel: 60vw on tablet --- */
    .nav-mobile { width: 60vw; }

    .hero__stats {
        gap: 1.5rem;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    /* Pricing: 2 columns + last card stacked centered */
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 480px;
        margin-inline: auto;
    }
}

/* ==========================================================================
   768px — Mobile Landscape
   ========================================================================== */
@media (max-width: 768px) {
    /* --- Navigation: hide desktop links, show hamburger --- */
    .nav__links { display: none; }
    .nav__link--cta { display: none; }
    .nav__menu-btn { display: flex; }

    /* --- Nav mobile panel: 85vw on mobile landscape --- */
    .nav-mobile { width: 85vw; }

    /* --- Hero --- */
    .hero__title {
        font-size: clamp(1.5rem, 7vw, 2.5rem);
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        letter-spacing: 0.05em;
    }

    .hero__stats {
        flex-direction: column;
        align-items: center;
    }

    .hero__cta {
        flex-direction: column;
        align-items: center;
    }

    /* --- Card grid: 2 columns at tablet --- */
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .card-grid .card {
        max-width: 100%;
        width: 100%;
    }

    /* --- Hero centering --- */
    .hero {
        text-align: center;
    }

    .hero__stats {
        justify-content: center;
    }

    /* --- Directory --- */
    .directory-filters {
        flex-direction: column;
        align-items: stretch;
    }

    /* --- Headings --- */
    h1 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }

    h2 {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }

    h3 {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
    }

    /* --- Comparison table --- */
    .comparison-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comparison-table th:nth-child(n+4),
    .comparison-table td:nth-child(n+4) {
        display: none;
    }

    /* --- Contact form --- */
    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-form .form-group--half {
        grid-column: 1;
    }

    /* --- Pricing --- */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-grid > *:last-child:nth-child(odd) {
        grid-column: 1;
        max-width: 100%;
    }
}

/* ==========================================================================
   480px — Mobile Portrait
   ========================================================================== */
@media (max-width: 480px) {
    :root {
        --space-section: 3rem;
        --space-lg: 1.5rem;
    }

    .container {
        padding-inline: 1rem;
    }

    /* --- Single column for all grids --- */
    .card-grid,
    .grid,
    [class*="grid"] {
        grid-template-columns: 1fr;
    }

    /* --- Prevent media overflow --- */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }

    /* --- Section padding --- */
    section {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    /* --- Footer --- */
    .footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* --- Language overlay grid --- */
    .lang-overlay__grid {
        grid-template-columns: 1fr;
    }

    /* --- Font sizes further reduced --- */
    h1 {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    h2 {
        font-size: clamp(1.25rem, 6vw, 1.6rem);
    }

    h3 {
        font-size: clamp(1rem, 5vw, 1.25rem);
    }

    p, li {
        font-size: clamp(0.875rem, 4vw, 1rem);
    }

    /* --- Nav: smaller brand, full-width mobile panel --- */
    .nav__brand-text { font-size: 0.9rem; }
    .nav__logo-img { height: 30px; }
    .nav-mobile { width: 100vw; max-width: 100vw; border-radius: 0; border-left: none; }

    /* --- Buttons --- */
    .btn {
        width: 100%;
        text-align: center;
    }

    /* --- Hero stats individual items --- */
    .hero__stat {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   344px — Fold5 Folded / Extra Narrow
   ========================================================================== */
@media (max-width: 400px) {
    h1, .hero__title {
        font-size: clamp(0.95rem, 7vw, 1.3rem);
        letter-spacing: -0.02em;
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    .container {
        padding-inline: 0.75rem;
    }

    .hero__stat-number {
        font-size: 2rem;
    }

    .nav__brand-text {
        font-size: 0.8rem;
        letter-spacing: 0.05em;
    }
}