/* ============================================
   RESPONSIVE DESIGN
   Scarlett Davies Advanced Skincare Clinic
   ============================================ */

/* Large Screens */
@media (max-width: 1400px) {
    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr 1fr;
    }
}

/* Laptops & Small Desktops */
@media (max-width: 1200px) {
    .nav-list {
        gap: 16px;
    }

    .dropdown-inner {
        min-width: 480px;
        gap: 24px;
        padding: 24px;
    }

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

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

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

    .grid-5-method {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablets */
@media (max-width: 1024px) {
    .header-nav {
        display: none;
    }

    .header-cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .grid-2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .timeline::before { left: 20px; }
    .timeline-dot { left: 20px; }
    .timeline-content { width: calc(100% - 60px); margin-left: 60px !important; }
    .timeline-item:nth-child(even) { flex-direction: row; }

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

    .page-hero {
        padding: 120px 0 50px;
    }

    .grid-5-method {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Force inline 2-col grids to stack */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns:1fr 1fr"][style*="min-height"] {
        min-height: auto !important;
    }
    [style*="order:1"], [style*="order: 1"],
    [style*="order:2"], [style*="order: 2"] {
        order: unset !important;
    }
}

/* ============================================
   MOBILE — 768px and below
   ============================================ */
@media (max-width: 768px) {
    :root {
        --section-padding: clamp(36px, 6vw, 56px);
    }

    /* --- Global mobile text alignment --- */
    .container {
        padding: 0 16px;
    }

    .header-inner {
        padding: 0 16px;
    }

    /* --- Hero mobile --- */
    .hero {
        min-height: 100svh;
    }

    .hero-content {
        padding: 100px 0 50px;
    }

    .hero .display-heading {
        font-size: clamp(1.5rem, 6.5vw, 2.2rem);
    }

    .hero .lead-text {
        font-size: 0.82rem;
        margin-top: 10px;
    }

    .hero-label {
        font-size: 0.6rem;
        margin-bottom: 12px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 260px;
        margin-top: 20px;
    }

    .hero-actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* --- Specialities pills mobile --- */
    .specialities-strip {
        padding: 16px 0;
    }

    .specialities-row {
        gap: 6px;
        justify-content: center;
    }

    .speciality-pill {
        padding: 7px 12px;
        font-size: 0.52rem;
        letter-spacing: 0.08em;
    }

    /* --- Trust banner mobile --- */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-card {
        padding: 18px 12px;
    }

    .trust-card:nth-child(2)::after {
        display: none;
    }

    .trust-card:nth-child(1),
    .trust-card:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .trust-number {
        font-size: 1.3rem;
    }

    .trust-label {
        font-size: 0.5rem;
    }

    /* --- Page hero mobile --- */
    .page-hero {
        padding: 100px 0 36px;
    }

    .page-hero .section-heading {
        font-size: clamp(1.3rem, 5vw, 1.8rem);
    }

    .page-hero .lead-text {
        font-size: 0.8rem;
    }

    /* --- Grids mobile --- */
    .grid-3 {
        grid-template-columns: 1fr;
    }

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

    .grid-5-method {
        grid-template-columns: 1fr !important;
    }

    /* --- Section content left-align on mobile --- */
    .section-heading {
        text-align: left;
    }

    .text-center .section-heading {
        text-align: center;
    }

    .section-dark .section-heading {
        text-align: left;
    }

    .section-dark .text-center .section-heading {
        text-align: center;
    }

    /* --- Editorial split mobile --- */
    .editorial-split {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .editorial-split .parallax-container {
        height: 240px;
    }

    .editorial-split > div[style*="padding"] {
        padding: 28px 16px !important;
    }

    /* --- Buttons mobile alignment --- */
    .d-flex {
        justify-content: flex-start;
    }

    .d-flex[style*="justify-content:center"] {
        justify-content: center !important;
    }

    /* --- Tool cards mobile --- */
    .tool-card {
        padding: 24px 20px;
    }

    .tool-card-number {
        font-size: 1.6rem;
        margin-bottom: 10px;
    }

    .tool-card-title {
        font-size: 1rem;
    }

    .tool-card-desc {
        font-size: 0.8rem;
    }

    /* --- Method steps mobile --- */
    .method-steps li {
        font-size: 0.82rem;
        padding: 10px 0;
        gap: 10px;
    }

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

    .stat-item {
        padding: 18px 12px;
    }

    .stat-number {
        font-size: clamp(1.6rem, 5vw, 2rem);
    }

    /* --- Cards mobile --- */
    .glass-card {
        padding: 18px;
    }

    .card-body {
        padding: 14px;
    }

    .treatment-card-body {
        padding: 14px;
    }

    .treatment-card-actions {
        flex-direction: column;
    }

    .treatment-card-actions .btn {
        width: 100%;
        text-align: center;
    }

    /* --- Testimonials mobile --- */
    .testimonial-card {
        padding: 18px;
    }

    .testimonial-text {
        font-size: 0.9rem;
    }

    /* --- Accordion mobile --- */
    .accordion-header {
        font-size: 0.92rem;
        padding: 16px 0;
    }

    /* --- Footer mobile --- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-top {
        padding: 40px 0 24px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    /* --- Instagram mobile --- */
    .insta-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* --- Various mobile --- */
    .concerns-grid { grid-template-columns: 1fr; }
    .steps-indicator { flex-wrap: wrap; gap: 4px; }
    .step-line { width: 20px; }
    .step-dot { width: 30px; height: 30px; font-size: 0.6rem; }
    .face-map-container { max-width: 240px; }
    .face-zone { width: 34px; height: 34px; }
    .divider { margin: 14px 0; }
    .mb-6 { margin-bottom: 36px; }
    .mb-5 { margin-bottom: 28px; }
    .mb-4 { margin-bottom: 20px; }
    .ba-slider { max-width: 100%; }
    .concern-detail { padding: 20px; }
    .concern-detail .grid-2 { gap: 16px !important; }

    /* --- Mobile menu --- */
    .mobile-menu-inner { width: 100%; max-width: 100%; padding: 20px; }
    .mobile-link { font-size: 1rem; padding: 11px 0; }

    /* --- Cart drawer mobile --- */
    .cart-drawer-panel { width: 100%; max-width: 100%; }
    .cart-drawer-header, .cart-drawer-body, .cart-drawer-footer { padding: 16px; }

    /* --- Wizard mobile --- */
    .wizard-nav { flex-direction: column; gap: 8px; }
    .wizard-nav .btn { width: 100%; }

    /* --- Floating buttons mobile --- */
    .floating-consult { right: 12px; bottom: 12px; padding: 10px 16px; font-size: 0.58rem; }
    .floating-whatsapp { right: 12px; bottom: 66px; width: 42px; height: 42px; }

    /* --- Marquee mobile (legacy) --- */
    .marquee-item { font-size: clamp(1rem, 3vw, 1.4rem); padding: 0 12px; }
    .marquee-container { padding: 12px 0; }

    /* --- Filter tabs mobile --- */
    .filter-tabs { gap: 5px; }
    .filter-tab { padding: 7px 12px; font-size: 0.55rem; }

    /* --- Search bar mobile --- */
    .search-bar input { padding: 12px 16px 12px 40px; font-size: 0.8rem; }

    /* --- Quiz mobile --- */
    .quiz-option { padding: 12px 16px; font-size: 0.8rem; }
}

/* ============================================
   SMALL PHONES — 480px and below
   ============================================ */
@media (max-width: 480px) {
    .display-heading {
        font-size: clamp(1.35rem, 7vw, 1.8rem);
    }

    .section-heading {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
    }

    .subsection-heading {
        font-size: clamp(1rem, 4vw, 1.2rem);
    }

    .lead-text { font-size: 0.82rem; }
    .body-text { font-size: 0.82rem; }
    .eyebrow { font-size: 0.55rem; margin-bottom: 0.6rem; }

    .btn { padding: 11px 20px; font-size: 0.58rem; }
    .btn-lg { padding: 13px 24px; font-size: 0.6rem; }
    .btn-sm { padding: 9px 16px; font-size: 0.55rem; }

    .insta-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-item { padding: 14px 8px; }
    .stat-number { font-size: 1.4rem; }
    .stat-label { font-size: 0.5rem; }

    .membership-tier { padding: 20px 14px; }
    .face-info-panel { padding: 16px; }

    .article-card-body { padding: 14px; }
    .article-card-title { font-size: 0.92rem; }
    .article-card-excerpt { font-size: 0.78rem; }
    .card-title { font-size: 0.95rem; }
    .treatment-card-title { font-size: 0.95rem; }
    .treatment-card-desc { font-size: 0.78rem; }

    .timeline::before { left: 14px; }
    .timeline-dot { left: 14px; width: 10px; height: 10px; }
    .timeline-content { width: calc(100% - 44px); margin-left: 44px !important; padding: 16px; }
    .timeline-title { font-size: 0.92rem; }
    .timeline-text { font-size: 0.78rem; }

    .footer-logo { height: 32px; width: 32px; }
    .footer-heading { font-size: 0.55rem; margin-bottom: 12px; }
    .footer-links a { font-size: 0.78rem; }
    .footer-bottom p, .footer-credit, .footer-legal a { font-size: 0.62rem; }

    .trust-number { font-size: 1.1rem; }
    .trust-label { font-size: 0.48rem; }
    .trust-card { padding: 14px 10px; }
}

/* Very Small Phones */
@media (max-width: 360px) {
    .display-heading { font-size: 1.25rem; }
    .section-heading { font-size: 1.1rem; }
    .hero-content { padding: 90px 0 36px; }
    .btn { padding: 10px 16px; font-size: 0.52rem; }
    .stats-grid { grid-template-columns: 1fr; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
    .stagger-grid > *, .stagger-children > * { opacity: 1; transform: none; }
    .loader-logo img { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* Print */
@media print {
    .main-header, .mobile-menu, .cart-drawer, .floating-whatsapp,
    .floating-consult, .custom-cursor, .luxury-loader, .scroll-progress { display: none !important; }
    body { color: #000; background: #fff; }
    .section-dark { background: #fff; color: #000; }
}

/* Touch Devices */
@media (hover: none) {
    .card:hover, .treatment-card:hover, .article-card:hover { transform: none; box-shadow: none; }
    .nav-link::after, .treatment-card::before { display: none; }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: auto; padding: 80px 0 40px; }
    .page-hero { padding: 100px 0 40px; }
}