/**
 * Muathemewpgiare About Experience - Responsive Styles
 * Version: 1.3.0
 *
 * Dedicated Breakpoints: 1440px, 1280px, 1024px, 768px, 414px, 390px, 375px, 320px
 * Scope: Strictly within .mtwg-about and prefixed with .mtwg-
 */

/* ==========================================================================
   1440px Breakpoint (Large Desktop Fine-tuning)
   ========================================================================== */
@media (max-width: 1440px) {
    .mtwg-shell {
        width: min(1160px, calc(100% - 64px));
    }
}

/* ==========================================================================
   1280px Breakpoint (Standard Laptop / Desktop)
   ========================================================================== */
@media (max-width: 1280px) {
    .mtwg-shell {
        width: min(1080px, calc(100% - 48px));
    }

    .mtwg-story-layout,
    .mtwg-vision-inner,
    .mtwg-split-layout {
        gap: 60px;
    }

    .mtwg-values-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

/* ==========================================================================
   1024px Breakpoint (Tablet Landscape & Small Laptop)
   ========================================================================== */
@media (max-width: 1024px) {
    .mtwg-hero {
        min-height: 720px;
        padding: 100px 0 60px;
    }

    .mtwg-section {
        padding: 90px 0;
    }

    .mtwg-cards-grid,
    .mtwg-tech-grid,
    .mtwg-perf-pillars,
    .mtwg-workflow-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .mtwg-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mtwg-security-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mtwg-split-head {
        position: static;
        margin-bottom: 40px;
    }

    .mtwg-split-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mtwg-story-layout,
    .mtwg-vision-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .mtwg-cursor-glow {
        display: none !important;
    }
}

/* ==========================================================================
   768px Breakpoint (Tablet Portrait & Large Mobile)
   ========================================================================== */
@media (max-width: 768px) {
    .mtwg-shell {
        width: min(100% - 36px, 1160px);
    }

    .mtwg-hero {
        min-height: auto;
        padding: 85px 0 55px;
    }

    .mtwg-section {
        padding: 75px 0;
    }

    .mtwg-section-head {
        margin-bottom: 40px;
    }

    .mtwg-section-head-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 32px;
    }

    .mtwg-slider-controls {
        align-self: flex-end;
    }

    .mtwg-title {
        font-size: clamp(42px, 11vw, 76px);
        margin-bottom: 22px;
    }

    .mtwg-lead {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 32px;
    }

    .mtwg-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .mtwg-btn {
        width: 100%;
        text-align: center;
        padding: 15px 24px;
    }

    .mtwg-nav-inner {
        height: 52px;
    }

    .mtwg-nav-links {
        gap: 4px;
    }

    .mtwg-nav-link {
        font-size: 12px;
        padding: 6px 10px;
    }

    .mtwg-cards-grid,
    .mtwg-tech-grid,
    .mtwg-seo-grid,
    .mtwg-why-grid,
    .mtwg-workflow-steps {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mtwg-perf-pillars {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mtwg-values-grid {
        grid-template-columns: 1fr;
    }

    .mtwg-security-grid {
        grid-template-columns: 1fr;
    }

    .mtwg-timeline-track {
        margin-top: 24px;
    }

    .mtwg-timeline-item {
        grid-template-columns: 48px 1fr;
        gap: 16px;
        margin-bottom: 30px;
    }

    .mtwg-timeline-track::before,
    .mtwg-timeline-line-fill {
        left: 23px;
    }

    .mtwg-timeline-card {
        padding: 22px 20px;
    }

    .mtwg-cap-item {
        grid-template-columns: 36px 1fr 24px;
        gap: 14px;
        padding: 20px 8px;
    }

    .mtwg-showcase-card {
        padding: 28px 22px;
    }

    .mtwg-testi-card {
        padding: 28px 22px;
    }

    .mtwg-closing {
        padding: 90px 0;
    }

    .mtwg-closing-actions {
        flex-direction: column;
        width: 100%;
    }

    .mtwg-closing-actions .mtwg-btn {
        width: 100%;
    }
}

/* ==========================================================================
   414px Breakpoint (Large Phone / iPhone Plus/Max)
   ========================================================================== */
@media (max-width: 414px) {
    .mtwg-shell {
        width: calc(100% - 28px);
    }

    .mtwg-eyebrow {
        font-size: 11px;
        padding: 6px 12px;
        margin-bottom: 20px;
    }

    .mtwg-title {
        font-size: clamp(38px, 12vw, 56px);
        line-height: 0.98;
    }

    .mtwg-badge-pill {
        font-size: 12px;
        padding: 6px 12px;
    }

    .mtwg-section {
        padding: 60px 0;
    }

    .mtwg-section-head h2 {
        font-size: clamp(28px, 8vw, 38px);
    }

    .mtwg-section-desc {
        font-size: 15px;
    }

    .mtwg-card {
        padding: 26px 20px;
        border-radius: var(--mtwg-radius-md);
    }

    .mtwg-glass-panel {
        padding: 30px 22px;
        border-radius: var(--mtwg-radius-lg);
    }

    .mtwg-perf-card {
        padding: 28px 20px;
    }

    .mtwg-slider-btn {
        width: 42px;
        height: 42px;
    }

    .mtwg-closing-brand {
        font-size: clamp(34px, 10vw, 48px);
    }

    .mtwg-closing-headline {
        font-size: 20px;
    }

    .mtwg-closing-desc {
        font-size: 15px;
        margin-bottom: 30px;
    }
}

/* ==========================================================================
   390px Breakpoint (Modern Standard iPhone 12/13/14/15)
   ========================================================================== */
@media (max-width: 390px) {
    .mtwg-nav-brand span {
        display: none;
    }

    .mtwg-card h3 {
        font-size: 18px;
    }

    .mtwg-card p {
        font-size: 14px;
    }

    .mtwg-step-num {
        font-size: 28px;
    }
}

/* ==========================================================================
   375px Breakpoint (Compact Smartphone / iPhone SE)
   ========================================================================== */
@media (max-width: 375px) {
    .mtwg-shell {
        width: calc(100% - 24px);
    }

    .mtwg-hero-badges {
        gap: 8px;
    }

    .mtwg-badge-pill {
        padding: 5px 10px;
        font-size: 11px;
    }

    .mtwg-timeline-item {
        grid-template-columns: 36px 1fr;
        gap: 12px;
    }

    .mtwg-timeline-track::before,
    .mtwg-timeline-line-fill {
        left: 17px;
    }

    .mtwg-timeline-dot {
        width: 14px;
        height: 14px;
        border-width: 3px;
    }

    .mtwg-timeline-year {
        font-size: 11px;
    }

    .mtwg-timeline-card {
        padding: 18px 16px;
    }

    .mtwg-timeline-card h3 {
        font-size: 17px;
    }

    .mtwg-story-quote {
        padding: 18px 16px;
    }

    .mtwg-showcase-card {
        padding: 22px 16px;
    }

    .mtwg-testi-card {
        padding: 22px 16px;
    }
}

/* ==========================================================================
   320px Breakpoint (Ultra-compact / Galaxy Fold outer screen)
   ========================================================================== */
@media (max-width: 320px) {
    .mtwg-shell {
        width: calc(100% - 16px);
    }

    .mtwg-title {
        font-size: 34px;
    }

    .mtwg-btn {
        padding: 13px 18px;
        font-size: 13px;
        gap: 8px;
    }

    .mtwg-section-head h2 {
        font-size: 24px;
    }

    .mtwg-kicker {
        font-size: 11px;
    }

    .mtwg-card {
        padding: 20px 14px;
    }

    .mtwg-card-icon {
        width: 40px;
        height: 40px;
    }

    .mtwg-card-icon .mtwg-icon-svg {
        width: 20px;
        height: 20px;
    }

    .mtwg-perf-word {
        font-size: 22px;
    }

    .mtwg-closing-brand {
        font-size: 28px;
    }

    .mtwg-slider-btn {
        width: 38px;
        height: 38px;
    }
}