/* ==========================================================================
   SHORAGES PREMIUM - RESPONSIVE STYLES
   Breakpoints: 1280 / 1024 / 768 / 640 / 480
   ========================================================================== */

/* ============ LARGE DESKTOP (max 1280px) ============ */
@media (max-width: 1280px) {
    :root {
        --space-3xl: 5rem;
        --fs-6xl: 3.25rem;
        --fs-5xl: 2.5rem;
        --fs-4xl: 2rem;
    }

    .container {
        max-width: 1140px;
    }
}

/* ============ DESKTOP (max 1024px) ============ */
@media (max-width: 1024px) {
    :root {
        --space-3xl: 4rem;
        --space-2xl: 3rem;
        --fs-6xl: 3rem;
        --fs-5xl: 2.25rem;
        --fs-4xl: 1.875rem;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .hero-visual {
        min-height: 300px;
        display: none;
    }

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

    .services-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    .steps-grid::before {
        display: none;
    }

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

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

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    .single-service-hero .container {
        grid-template-columns: 1fr;
    }

    .location-detail .container {
        grid-template-columns: 1fr;
    }

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

    .mv-grid {
        grid-template-columns: 1fr;
    }

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

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

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

    .job-card {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .job-apply-btn {
        grid-column: 1 / -1;
    }
}

/* ============ TABLET (max 768px) ============ */
@media (max-width: 768px) {
    :root {
        --space-3xl: 3rem;
        --space-2xl: 2.5rem;
        --space-xl: 2rem;
        --fs-6xl: 2.5rem;
        --fs-5xl: 2rem;
        --fs-4xl: 1.5rem;
        --fs-3xl: 1.5rem;
    }

    .container {
        padding: 0 var(--space-sm);
    }

    /* Hide top bar on mobile */
    .topbar {
        display: none;
    }

    /* Header */
    .header-inner {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .main-navigation {
        display: none;
    }

    .header-cta {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    .logo-name {
        font-size: var(--fs-lg);
    }

    .logo-mark {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }

    /* Hero */
    .hero-section {
        padding: var(--space-2xl) 0;
    }

    .hero-title {
        font-size: var(--fs-5xl);
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-wave {
        height: 40px;
    }

    /* Sections */
    .section-header {
        margin-bottom: var(--space-xl);
    }

    .section-title {
        font-size: var(--fs-3xl);
    }

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

    .stat-item {
        padding: var(--space-md);
    }

    .stat-number {
        font-size: var(--fs-3xl);
    }

    /* Steps */
    .steps-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Locations */
    .locations-grid {
        grid-template-columns: 1fr;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    /* Blog */
    .blog-grid,
    .blog-archive-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    .footer-bottom-links {
        justify-content: center;
    }

    /* Page hero */
    .page-hero-title {
        font-size: var(--fs-4xl);
    }

    .page-hero-subtitle {
        font-size: var(--fs-base);
    }

    /* Single post */
    .single-post-title {
        font-size: var(--fs-3xl);
    }

    .post-featured-image {
        height: 250px;
    }

    .post-navigation {
        grid-template-columns: 1fr;
    }

    .post-nav-item.next {
        text-align: left;
    }

    .post-author-box {
        flex-direction: column;
        text-align: center;
    }

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

    /* Team */
    .team-grid {
        grid-template-columns: 1fr;
    }

    /* Values */
    .values-grid {
        grid-template-columns: 1fr;
    }

    /* Perks */
    .perks-grid {
        grid-template-columns: 1fr;
    }

    /* Quote features */
    .quote-features {
        grid-template-columns: 1fr;
    }

    /* CTA */
    .cta-title {
        font-size: var(--fs-3xl);
    }

    .cta-subtitle {
        font-size: var(--fs-base);
    }

    /* Back to top */
    #back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
    }

    /* Job card */
    .job-card {
        grid-template-columns: 1fr;
    }

    /* Contact form */
    .contact-form-wrapper,
    .quote-form-wrapper {
        padding: var(--space-md);
    }
}

/* ============ MOBILE (max 640px) ============ */
@media (max-width: 640px) {
    :root {
        --fs-6xl: 2rem;
        --fs-5xl: 1.75rem;
        --fs-4xl: 1.375rem;
        --fs-3xl: 1.25rem;
    }

    .container {
        padding: 0 1rem;
    }

    /* Hero */
    .hero-section {
        padding: var(--space-xl) 0;
    }

    .hero-badge {
        font-size: var(--fs-xs);
        padding: 0.4rem 0.875rem;
    }

    .hero-title {
        font-size: var(--fs-4xl);
    }

    .hero-subtitle {
        font-size: var(--fs-base);
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: var(--fs-xs);
    }

    .btn-lg {
        padding: 0.875rem 1.75rem;
        font-size: var(--fs-sm);
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Service card */
    .service-card-inner {
        padding: var(--space-md);
    }

    /* Step item */
    .step-item {
        padding: var(--space-sm);
    }

    .step-icon {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    /* CTA */
    .cta-section {
        padding: var(--space-2xl) 0;
    }

    .cta-content .btn {
        width: 100%;
    }

    .cta-form-card {
        padding: 1.5rem;
    }

    /* Footer */
    .site-footer {
        padding: var(--space-2xl) 0 var(--space-sm);
    }

    /* FAQ */
    .faq-question {
        font-size: var(--fs-base);
        padding: var(--space-sm) var(--space-md);
    }

    /* Contact info card */
    .contact-info-card {
        padding: var(--space-md);
    }

    /* Search form */
    .search-form {
        flex-direction: column;
    }

    /* Breadcrumbs */
    .breadcrumbs ul {
        font-size: var(--fs-xs);
    }

    /* 404 */
    .error-404 h1 {
        font-size: 5rem;
    }
}

/* ============ SMALL MOBILE (max 480px) ============ */
@media (max-width: 480px) {
    .logo-name {
        font-size: var(--fs-base);
    }

    .logo-mark {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .hero-title {
        font-size: var(--fs-3xl);
    }

    .section-title {
        font-size: var(--fs-2xl);
    }

    .stat-number {
        font-size: var(--fs-2xl);
    }

    .service-title {
        font-size: var(--fs-lg);
    }

    .testimonial-card {
        padding: var(--space-md);
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: 0.5rem;
    }

    .pagination .page-numbers {
        width: 36px;
        height: 36px;
        font-size: var(--fs-xs);
    }
}

/* ============ PRINT STYLES ============ */
@media print {
    .topbar,
    .site-header,
    .mobile-menu,
    .hero-visual,
    .cta-decoration,
    .hero-wave,
    #back-to-top,
    .mobile-menu-toggle {
        display: none !important;
    }

    body {
        color: black;
        background: white;
    }

    .hero-section,
    .cta-section,
    .site-footer {
        background: white !important;
        color: black !important;
    }

    .hero-title,
    .cta-title,
    .footer-widget-title,
    .logo-name {
        color: black !important;
    }

    a {
        color: black;
        text-decoration: underline;
    }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-card-1,
    .hero-card-2,
    .hero-card-3,
    .hero-badge-dot,
    .sh-glass-float-a,
    .sh-glass-float-b,
    .sh-glass-float-c,
    .sh-dash-live-dot {
        animation: none !important;
    }
}

/* ============ FINAL ICON AND FOOTER CASCADE FIXES ============ */
.service-icon,
.step-icon,
.value-icon,
.service-hero-icon,
.service-hero-visual-icon,
.auth-features .feature-icon {
    overflow: hidden;
    color: var(--color-secondary);
    flex-shrink: 0;
}

.service-icon svg,
.step-icon svg,
.value-icon svg,
.service-hero-icon svg,
.service-hero-visual-icon svg,
.auth-features .feature-icon svg {
    display: block;
    width: 32px;
    height: 32px;
    max-width: 70%;
    max-height: 70%;
    stroke: currentColor;
}

.step-icon svg {
    width: 34px;
    height: 34px;
}

.value-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
    display: flex;
}

.value-icon svg,
.service-hero-icon svg {
    width: 36px;
    height: 36px;
}

.service-hero-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-lg);
    color: #FFFFFF;
    font-size: 0;
}

.service-hero-visual-icon {
    width: 104px;
    height: 104px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    color: #FFFFFF;
}

.auth-features .feature-icon svg {
    width: 22px;
    height: 22px;
}

.cta-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background-image: linear-gradient(135deg, rgba(190, 18, 60, 0.14) 0%, rgba(59, 130, 246, 0.10) 48%, rgba(2, 6, 23, 0) 100%);
}

.cta-section::after {
    content: '';
    position: absolute;
    left: max(1rem, calc((100vw - 1200px) / 2));
    right: max(1rem, calc((100vw - 1200px) / 2));
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), transparent);
    pointer-events: none;
}

.site-footer {
    position: relative;
    background: #070D1A;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: calc(var(--space-3xl) + 0.75rem);
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-accent), var(--color-secondary));
}

@media (max-width: 768px) {
    .site-footer {
        padding-top: calc(var(--space-2xl) + 0.75rem);
    }
}