/* ==========================================================================
   VLab-4000 — Responsive Breakpoints
   Breakpoints: 576px (sm), 768px (md), 1024px (lg), 1200px (xl)
   Strategy: mobile-first (min-width)
   ========================================================================== */

/* =========================================================================
   RESPONSIVE DISPLAY UTILITIES
   ========================================================================= */

/* Show only at specific breakpoints */
.show-sm  { display: none; }
.show-md  { display: none; }
.show-lg  { display: none; }
.show-xl  { display: none; }

/* Hide at specific breakpoints (visible by default, hidden above) */
.hide-sm  {}
.hide-md  {}
.hide-lg  {}

@media (min-width: 576px) {
    .show-sm  { display: revert; }
    .hide-sm  { display: none !important; }
}

@media (min-width: 768px) {
    .show-md  { display: revert; }
    .hide-md  { display: none !important; }
}

@media (min-width: 1024px) {
    .show-lg  { display: revert; }
    .hide-lg  { display: none !important; }
}

@media (min-width: 1200px) {
    .show-xl  { display: revert; }
    .hide-xl  { display: none !important; }
}

/* =========================================================================
   SM — 576px (small phones landscape / large phones)
   ========================================================================= */

@media (min-width: 576px) {

    /* Container */
    .container {
        padding-right: var(--space-32);
        padding-left: var(--space-32);
    }

    /* Typography */
    p {
        font-size: var(--text-body);
    }

    /* Hero */
    .hero__ctas {
        flex-direction: row;
    }

    /* Stats / metrics */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grid: 2-col at sm */
    .sm\:grid-2 { grid-template-columns: repeat(2, 1fr); }

    /* Buttons full-width override */
    .btn--sm-full {
        width: 100%;
    }

    /* Footer grid 2-col at sm */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Text alignment responsive */
    .sm\:text-center { text-align: center; }
    .sm\:text-left   { text-align: left; }

    /* Flex responsive */
    .sm\:flex-row { flex-direction: row; }

}

/* =========================================================================
   MD — 768px (tablets portrait)
   ========================================================================= */

@media (min-width: 768px) {

    /* Container */
    .container {
        padding-right: var(--space-32);
        padding-left: var(--space-32);
    }

    /* Header */
    .site-header {
        height: 72px;
    }

    .site-header__actions {
        display: flex;
    }

    .lang-switcher {
        display: flex;
    }

    /* Hero layout */
    .hero {
        padding-top: calc(72px + var(--space-96));
        padding-bottom: var(--space-96);
    }

    .hero__title {
        font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    }

    .hero__ctas {
        flex-direction: row;
        align-items: center;
    }

    .hero__trust {
        flex-wrap: nowrap;
    }

    /* Section */
    .section {
        padding-top: var(--space-96);
        padding-bottom: var(--space-96);
    }

    /* Grid 2-col at md */
    .grid-2,
    .md\:grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4,
    .md\:grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-6,
    .md\:grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Steps — horizontal on tablet */
    .steps--md-horizontal {
        flex-direction: row;
        align-items: flex-start;
    }

    .steps--md-horizontal .step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1;
    }

    /* Steps connector — horizontal variant */
    .steps--md-horizontal .step:not(:last-child) {
        position: relative;
    }

    .steps--md-horizontal .step:not(:last-child)::after {
        left: calc(50% + 28px);
        right: calc(-50% + 28px);
        top: 19px;
        bottom: auto;
        height: 2px;
        width: auto;
        background: linear-gradient(to right, var(--color-border), transparent);
    }

    /* Metrics */
    .metrics-row {
        flex-wrap: nowrap;
    }

    /* CTA strip */
    .cta-strip__inner {
        flex-direction: row;
        text-align: left;
    }

    /* Footer */
    .footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Forms */
    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    .form-row--3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    /* Text alignment responsive */
    .md\:text-center { text-align: center; }
    .md\:text-left   { text-align: left; }

    /* Flex responsive */
    .md\:flex-row { flex-direction: row; }
    .md\:flex-col { flex-direction: column; }

}

/* =========================================================================
   LG — 1024px (tablets landscape / small laptops)
   ========================================================================= */

@media (min-width: 1024px) {

    /* Header — desktop nav visible */
    .main-nav {
        display: flex;
    }

    .hamburger {
        display: none;
    }

    .mobile-nav,
    .mobile-nav-overlay {
        display: none !important;
    }

    /* Hero — 2-col layout */
    .hero__inner {
        grid-template-columns: 1fr 1fr;
    }

    .hero__title {
        font-size: var(--text-hero);
    }

    /* Section padding */
    .section {
        padding-top: var(--space-96);
        padding-bottom: var(--space-96);
    }

    .section--lg {
        padding-top: var(--space-128);
        padding-bottom: var(--space-128);
    }

    /* Grids */
    .grid-3,
    .lg\:grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-4,
    .lg\:grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-6,
    .lg\:grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Sidebar layout */
    .sidebar-layout {
        grid-template-columns: 280px 1fr;
    }

    .sidebar-layout--right {
        grid-template-columns: 1fr 280px;
    }

    /* Feature block 2-col */
    .feature-block {
        grid-template-columns: 1fr 1fr;
    }

    /* Footer 4-col */
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    /* Steps — always horizontal on desktop */
    .steps--horizontal {
        flex-direction: row;
        align-items: flex-start;
    }

    .steps--horizontal .step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1;
    }

    .steps--horizontal .step:not(:last-child) {
        position: relative;
    }

    .steps--horizontal .step:not(:last-child)::after {
        left: calc(50% + 28px);
        right: calc(-50% + 28px);
        top: 19px;
        bottom: auto;
        height: 2px;
        width: auto;
        background: linear-gradient(to right, var(--color-border), transparent);
    }

    /* Stats grid 4-col on desktop */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Text alignment */
    .lg\:text-center { text-align: center; }
    .lg\:text-left   { text-align: left; }

}

/* =========================================================================
   XL — 1200px (desktop)
   ========================================================================= */

@media (min-width: 1200px) {

    /* Container reaches max-width */
    .container {
        padding-right: var(--space-24);
        padding-left: var(--space-24);
    }

    /* Hero gets extra breathing room */
    .hero {
        padding-top: calc(72px + var(--space-128));
        padding-bottom: var(--space-128);
    }

    /* Nav has more spacing */
    .main-nav {
        gap: var(--space-4);
    }

    .main-nav__link {
        padding: var(--space-8) var(--space-16);
    }

    /* Metrics row — all on one line */
    .metrics-row .metric {
        flex: 1;
    }

    /* Text alignment */
    .xl\:text-center { text-align: center; }
    .xl\:text-left   { text-align: left; }

    /* Grid */
    .xl\:grid-5 { grid-template-columns: repeat(5, 1fr); }
    .xl\:grid-6 { grid-template-columns: repeat(6, 1fr); }

}

/* =========================================================================
   PRINT
   ========================================================================= */

@media print {
    .site-header,
    .mobile-nav,
    .mobile-nav-overlay,
    .hamburger,
    .cta-strip,
    .footer-newsletter,
    .footer-legal,
    .skip-to-content {
        display: none !important;
    }

    body {
        font-size: 11pt;
        color: #000;
        background: #fff;
    }

    .container {
        max-width: none;
        padding: 0;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    p, blockquote {
        orphans: 3;
        widows: 3;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    .btn {
        border: 1px solid #000;
        background: none;
        color: #000;
        box-shadow: none;
    }
}

/* =========================================================================
   HIGH CONTRAST MODE
   ========================================================================= */

@media (forced-colors: active) {
    .btn-primary,
    .btn-secondary,
    .btn-accent {
        border: 2px solid ButtonText;
    }

    .badge {
        border: 1px solid ButtonText;
    }

    .card {
        border: 1px solid ButtonText;
    }

    :focus-visible {
        outline: 3px solid Highlight;
    }
}

/* =========================================================================
   REDUCED MOTION — Overrides
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .card,
    .main-nav__link,
    .accordion__trigger,
    .nav-dropdown,
    .lang-dropdown,
    .hero__metric-card {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .btn:hover,
    .card:hover,
    .pricing-card:hover {
        transform: none !important;
    }

    .spinner {
        animation: none;
        border-top-color: transparent;
    }

    .skeleton {
        animation: none;
    }
}

/* =========================================================================
   DARK MODE — Opt-in (add .dark-mode to <html> or use system preference)
   ========================================================================= */

@media (prefers-color-scheme: dark) {
    /* Uncomment to enable automatic dark mode:

    :root {
        --color-bg:           #0F1117;
        --color-bg-alt:       #1A1B2E;
        --color-text:         #EDF2F4;
        --color-border:       rgba(255, 255, 255, 0.1);
        --color-border-light: rgba(255, 255, 255, 0.06);
        --ink-900:            #EDF2F4;
        --ink-700:            #C8CCE0;
        --ink-500:            #8D8FA3;
        --ink-300:            #555770;
        --white:              #0F1117;
    }

    */
}