/*
 * Solvertrix — Mobile-First Overrides v2
 * Applies ONLY at max-width: 767px
 * Desktop layouts are completely untouched.
 * Changes from v1:
 *   • Reduced section padding from 52px → 40px
 *   • Page heroes (interior pages) tightened: 68px top, 24px bottom
 *   • .page-hero added (was missing entirely — now matches .page-header)
 *   • Hero bottom padding 36px → 28px
 *   • reviews-grid, area-grid, faq-preview spacing tightened
 *   • Process steps gap reduced
 *   • Footer bottom padding reduced (sticky bar clearance preserved)
 *   • section-sub max-width 100% to prevent orphans
 *   • Added .booking-layout top padding fix (was 48px — now 28px on mobile)
 *   • Emoji icons replaced guidance added in comments
 * ──────────────────────────────────────────
 */

/* ── 1. MOBILE DRAWER — calmer, smaller, premium ── */
@media(max-width:767px){
  .mobile-drawer {
    padding: 80px 20px 32px;
  }
  .mobile-drawer a {
    font-size: 22px;
    padding: 13px 0;
    letter-spacing: -0.01em;
  }
  .drawer-cta {
    margin-top: 24px;
    gap: 10px;
  }
  .drawer-cta .btn {
    font-size: 15px;
    padding: 14px;
    color: #fff;
  }
  .drawer-cta .btn-primary {
    color: #ffffff !important;
  }
}

/* ── 2. NAV ── */
@media(max-width:767px){
  nav.site-nav {
    padding: 10px 0;
  }
}

/* ── 3. HERO (index) — compressed ── */
@media(max-width:767px){
  .hero {
    padding: 72px 0 28px;   /* was 76/36 — tighter bottom */
    min-height: unset;
    align-items: flex-start;
  }
  .hero-inner {
    gap: 24px;              /* was 28px */
  }
  .hero-pill {
    font-size: 11px;
    padding: 5px 12px 5px 7px;
    margin-bottom: 12px;    /* was 14px */
  }
  .hero-title {
    font-size: clamp(28px, 9.5vw, 42px);
    margin-bottom: 10px;    /* was 12px */
    line-height: 1.08;
  }
  .hero-sub {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;    /* was 22px */
    max-width: 100%;
  }
  .hero-actions {
    gap: 10px;
    margin-bottom: 20px;    /* was 24px */
  }
  .hero-actions .btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
    font-size: 14px;
    padding: 13px 16px;
  }
  .hero-trust {
    gap: 12px;              /* was 14px */
    flex-wrap: wrap;
  }
  .hero-trust-item {
    font-size: 12px;
  }
  .hero-visual {
    margin-top: 0;          /* was 4px — remove extra gap */
  }
  .hero-img-wrap,
  .hero-img-placeholder {
    border-radius: 16px;
    aspect-ratio: 16/9;
  }
}

/* ── 4. SECTION SPACING — tighter on mobile ── */
@media(max-width:767px){
  .section {
    padding: 40px 0;        /* was 52px — saves 24px per section */
  }
  .section-title {
    font-size: clamp(22px, 6.5vw, 30px);
    margin-bottom: 8px;     /* was 10px */
  }
  .section-sub {
    font-size: 14px;
    line-height: 1.65;
    max-width: 100%;        /* prevent awkward orphan lines */
  }
  .section-label {
    font-size: 11px;
    padding: 4px 12px;
    margin-bottom: 10px;    /* was 12px */
  }
}

/* ── 5. SERVICE CARDS ── */
@media(max-width:767px){
  .services-grid {
    gap: 8px;               /* was 10px */
    margin-top: 22px;       /* was 28px */
  }
  .service-card {
    padding: 18px 18px 14px; /* was 20/20/16 */
    border-radius: 16px;
  }
  .service-icon {
    width: 38px;
    height: 38px;
    font-size: 20px;
    margin-bottom: 10px;    /* was 12px */
    border-radius: 8px;
  }
  .service-card h3 {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .service-card p {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── 6. SERVICES PAGE — svc-cards ── */
@media(max-width:767px){
  .svc-card {
    padding: 18px 18px 14px;
    border-radius: 16px;
  }
  .svc-icon {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .svc-card h2 {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .svc-card p {
    font-size: 13px;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── 7. WHY SECTION ── */
@media(max-width:767px){
  .why-section {
    padding: 32px 18px;     /* was 40/20 */
    margin: 0 12px;         /* was 16px */
    border-radius: 20px;
  }
  .why-grid {
    gap: 24px;              /* was 32px */
  }
  .why-right .why-img {
    display: none;
  }
  .why-stats {
    gap: 6px;               /* was 8px */
  }
  .stat-box {
    padding: 10px 8px;      /* was 12/10 */
    border-radius: 12px;
  }
  .stat-num {
    font-size: 20px;        /* was 22px */
    margin-bottom: 2px;
  }
  .stat-label {
    font-size: 10px;
  }
  .features-list {
    gap: 8px;
    grid-template-columns: 1fr 1fr;
  }
  .feature-item {
    padding: 12px;          /* was 14px */
    border-radius: 12px;
  }
  .feature-item :is(h3,h4) {
    font-size: 13px;
    margin-bottom: 3px;
  }
  .feature-item p {
    font-size: 12px;
    line-height: 1.5;
  }
}

/* ── 8. PROCESS STEPS ── */
@media(max-width:767px){
  .process-steps {
    margin-top: 22px;       /* was 28px */
    gap: 8px;
  }
  .process-step {
    padding: 18px 16px;     /* was 20/18 */
    border-radius: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }
  .step-num {
    font-size: 26px;        /* was 28px */
    margin-bottom: 0;
    flex-shrink: 0;
    line-height: 1.1;
    color: var(--paper-2);
  }
  .process-step :is(h3,h4) {
    font-size: 15px;
    margin-bottom: 3px;
  }
  .process-step p {
    font-size: 12px;
    line-height: 1.55;
  }
}

/* ── 9. CTA BAND ── */
@media(max-width:767px){
  .cta-band {
    padding: 32px 18px;     /* was 40/20 */
    margin: 0 12px;
    border-radius: 20px;
  }
  .cta-band h2 {
    font-size: clamp(20px, 6vw, 28px);
    margin-bottom: 8px;
  }
  .cta-band p {
    font-size: 14px;
    margin-bottom: 20px;    /* was 24px */
  }
  .cta-actions {
    gap: 10px;
    flex-direction: column;
  }
  .cta-actions .btn {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 14px 20px;
  }
}

/* ── 10. TRUST SECTION (services page) ── */
@media(max-width:767px){
  .trust-section {
    padding: 32px 18px;
    margin: 0 12px;
    border-radius: 20px;
  }
  .trust-grid {
    gap: 8px;
  }
  .trust-card {
    padding: 14px;
    border-radius: 12px;
  }
  .trust-card h3 {
    font-size: 14px;
    margin-bottom: 3px;
  }
  .trust-card p {
    font-size: 12px;
  }
}

/* ── 11. PAGE HEADERS — interior pages ── */
/* Covers both .page-header (services, faq, contact) and .page-hero (how-it-works, book-repair) */
@media(max-width:767px){
  .page-header,
  .page-hero {
    padding: 68px 0 24px;   /* was 110/64 — massive saving */
  }
  .page-title {
    font-size: clamp(24px, 7.5vw, 34px);
    margin-bottom: 8px;
    line-height: 1.1;
  }
  .page-sub {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 20px;    /* was 28-32px */
  }
  .page-badge {
    font-size: 10px;
    padding: 4px 10px;
    margin-bottom: 10px;
  }
  .header-actions {
    gap: 8px;
    flex-direction: column;
  }
  .header-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .breadcrumb {
    font-size: 12px;
    margin-bottom: 14px;    /* was 24px */
  }
}

/* ── 12. FAQ PAGE ── */
@media(max-width:767px){
  .faq-sidebar {
    display: none;
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 20px;              /* was 24px */
  }
  .faq-group {
    margin-bottom: 22px;    /* was 28px */
  }
  .faq-group-label {
    font-size: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .faq-item {
    border-radius: 12px;
    margin-bottom: 5px;     /* was 6px */
  }
  .faq-question {
    padding: 13px 14px;     /* was 14/16 */
    gap: 12px;
  }
  .faq-q-text {
    font-size: 14px;
    line-height: 1.35;
  }
  .faq-chevron {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  .faq-answer {
    padding: 0 14px;
  }
  .faq-answer.open {
    padding: 0 14px 14px;
  }
  .faq-answer p {
    font-size: 13px;
    line-height: 1.65;
  }
  .faq-group.mobile-hidden {
    display: none;
  }
  .faq-show-more-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 100px;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    margin: 8px 0 20px;
    transition: transform 160ms cubic-bezier(0.23,1,0.32,1), background-color 140ms ease;
  }
  .faq-show-more-btn:hover {
    border-color: var(--ink);
    background: var(--paper);
  }
}
@media(min-width:768px){
  .faq-show-more-btn { display: none !important; }
}

/* ── 13. BOOK REPAIR FORM ── */
@media(max-width:767px){
  .booking-layout {
    gap: 20px;              /* was 28px */
    padding-top: 0 !important; /* remove the 48px gap inherited from desktop */
  }
  .booking-form-wrap {
    padding: 20px 16px;     /* was 24/18 */
    border-radius: 20px;
  }
  .form-section {
    margin-bottom: 18px;    /* was 20px */
  }
  .form-section-title {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .device-grid {
    gap: 8px;
  }
  .device-label {
    padding: 11px 8px;      /* was 12/10 */
    border-radius: 12px;
    font-size: 13px;
  }
  .device-icon {
    font-size: 20px;
    margin-bottom: 5px;
  }
  .form-row {
    gap: 10px;
  }
  .form-group label {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px;        /* critical: prevents iOS zoom */
    padding: 11px 14px;
    border-radius: 10px;
  }
  .booking-sidebar {
    order: -1;
  }
  .trust-box {
    padding: 18px 16px;     /* was 20/18 */
    border-radius: 16px;
  }
  .trust-point {
    padding: 10px;          /* was 12px */
    gap: 10px;
    border-radius: 10px;
  }
  .trust-point :is(h3,h4) {
    font-size: 13px;
  }
  .trust-point p {
    font-size: 12px;
  }
  .wa-direct {
    padding: 18px 16px;
    border-radius: 16px;
    margin-top: 12px;
  }
  .wa-direct :is(h3,h4) {
    font-size: 15px;
  }
  .wa-direct p {
    font-size: 13px;
    margin-bottom: 12px;
  }
}

/* ── 14. HOW IT WORKS PAGE ── */
@media(max-width:767px){
  .steps-section {
    gap: 8px;
    margin-top: 22px;       /* was 28px */
  }
  .step-card {
    padding: 18px 16px;     /* was 20/18 */
    border-radius: 16px;
  }
  .step-card .step-num {
    font-size: 26px;
  }
  .step-card h3 {
    font-size: 16px;
  }
  .step-card p {
    font-size: 13px;
  }
}

/* ── 15. CONTACT PAGE ── */
@media(max-width:767px){
  .contact-layout {
    gap: 20px;              /* was 24px */
  }
  .contact-card {
    padding: 18px 16px;     /* was 20/18 */
    border-radius: 16px;
  }
  .contact-method {
    padding: 12px 14px;     /* was 14/16 */
    gap: 12px;
    border-radius: 12px;
  }
  .contact-method-icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
    border-radius: 8px;
  }
}

/* ── 16. REVIEWS GRID ── */
@media(max-width:767px){
  .reviews-grid {
    margin-top: 22px;       /* was inherited 48px from desktop */
    gap: 10px;
  }
  .review-card {
    padding: 18px;
  }
  .review-text {
    font-size: 13px;
    margin-bottom: 12px;
  }
}

/* ── 17. AREA GRID ── */
@media(max-width:767px){
  .area-grid {
    margin-top: 20px;       /* was 40px */
    gap: 8px;
    grid-template-columns: 1fr 1fr; /* 2-col on mobile, less scroll */
  }
  .area-card {
    padding: 14px 14px;
    border-radius: 12px;
  }
  .area-card h3 {
    font-size: 14px;
    margin-bottom: 3px;
  }
  .area-card p {
    font-size: 12px;
    line-height: 1.5;
  }
}

/* ── 18. FAQ PREVIEW (index page inline FAQ) ── */
@media(max-width:767px){
  .faq-preview {
    margin-top: 20px;       /* was 48px */
  }
  .faq-item {
    padding: 16px 18px;     /* was 20/24 */
    margin-bottom: 8px;
    border-radius: 12px;
  }
  .faq-q {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .faq-a {
    font-size: 13px;
  }
}

/* ── 19. FOOTER — mobile compact ── */
@media(max-width:767px){
  footer {
    padding: 36px 0 76px;   /* 76px bottom = room for sticky CTA bar */
    margin-top: 40px;       /* was 48px */
  }
  .footer-grid {
    gap: 24px;              /* was 28px */
    margin-bottom: 24px;    /* was 32px */
  }
  .footer-brand h2 {
    font-size: 20px;        /* was 22px */
  }
  .footer-brand p {
    font-size: 13px;
    max-width: 240px;
  }
  .footer-col :is(h3,h4) {
    font-size: 11px;
    margin-bottom: 8px;     /* was 10px */
  }
  .footer-col a,
  .footer-col p {
    font-size: 13px;
    margin-bottom: 7px;
  }
}

/* ── 20. FAB — repositioned on mobile, above sticky bar ── */
/* (actual overrides live in section 24 below) */

/* ── 21. STICKY BOTTOM CTA BAR — mobile only ── */
.sticky-mobile-cta {
  display: none;
}
@media(max-width:767px){
  .sticky-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    background: rgba(245,244,240,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
    align-items: center;
  }
  .sticky-mobile-cta a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    padding: 11px 12px;
    transition: transform 160ms cubic-bezier(0.23,1,0.32,1), background-color 140ms ease, color 140ms ease;
    white-space: nowrap;
  }
  .sticky-mobile-cta a:active { transform: scale(0.97); }
  .sticky-mobile-cta .smc-book {
    background: var(--ink);
    color: #fff;
  }
  .sticky-mobile-cta .smc-wa {
    background: #25D366;
    color: #fff;
  }
  .sticky-mobile-cta .smc-call {
    width: 42px;
    flex: none;
    background: var(--white);
    color: var(--ink);
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 50%;
    height: 42px;
    padding: 0;
    font-size: 18px;
  }
}

/* ── 22. ANIMATIONS — slightly faster on mobile ── */
@media(max-width:767px){
  .fade-up {
    transition-duration: 0.5s;
  }
}

/* ── 23. BASE TYPOGRAPHY ── */
@media(max-width:767px){
  body {
    font-size: 15px;
  }
}

/* ── 24. FAB — lift above sticky CTA bar on mobile (index page) ── */
@media(max-width:767px){
  .fab-wrap {
    display: flex !important;   /* show FAB on mobile */
    bottom: 80px;               /* sits above the 64px sticky bar */
    right: 14px;
  }
  .fab-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .fab-item {
    font-size: 12px;
    padding: 8px 14px 8px 10px;
  }
  .fab-icon {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}