/**
 * Mobile Compact Spacing CSS
 * ===========================
 * Global mobile styles for all landing pages
 * Reference: STYLE-GUIDE.md
 *
 * Last updated: December 2024
 */

/* Hero eyebrow text default (desktop) */
.hero-eyebrow-text {
    font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE COMPACT SPACING - 768px
   Tablets & larger phones
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Reduce section padding */
    section {
        padding: 40px 1.5rem !important;
    }

    /* Reduce section heading margins */
    section h2 {
        margin-bottom: 1.5rem !important;
        font-size: 1.8rem !important;
    }

    /* Reduce paragraph spacing */
    section p {
        margin-bottom: 1rem !important;
    }

    /* Reduce grid gaps */
    .benefits-grid,
    .problem-list,
    .process-steps,
    .results-gallery,
    .trust-indicators {
        gap: 1.5rem !important;
        margin-top: 2rem !important;
    }

    /* Reduce card padding */
    .problem-item,
    .benefit,
    .step,
    .feature,
    .faq-item {
        padding: 1.5rem !important;
    }

    /* Reduce FAQ item margins */
    .faq-item {
        margin-bottom: 1rem !important;
    }

    /* Problem item and FAQ item typography */
    .problem-item h3,
    .faq-item h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }

    .problem-item p,
    .faq-item p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    /* Reduce section CTA margins and padding */
    .section-cta {
        margin: 2rem 1rem !important;
        padding: 1.5rem !important;
        width: auto !important;
        max-width: calc(100% - 2rem) !important;
    }

    .section-cta h3 {
        font-size: 1.4rem !important;
        margin-bottom: 0.8rem !important;
    }

    .section-cta p {
        margin-bottom: 1rem !important;
    }

    /* Reduce hero section spacing */
    #hero {
        padding: 30px 1.5rem 40px !important;
        min-height: auto !important;
        gap: 0 !important;
    }

    /* Hero eyebrow text - make smaller and subtle */
    .hero-eyebrow {
        padding: 0.3rem 0.8rem !important;
        margin-bottom: 0 !important;
        border-radius: 15px !important;
    }

    /* Main headline - make larger and prominent */
    .hero-content h1,
    .hero-content .hero-title {
        font-size: 2.375rem !important;
        margin-top: 2rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.15 !important;
    }

    .hero-content p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Hero eyebrow text - must come AFTER .hero-content p to override */
    .hero-content .hero-eyebrow p,
    .hero-content .hero-eyebrow-text,
    p.hero-eyebrow-text {
        font-size: 0.75rem !important;
        letter-spacing: 0.2px !important;
        margin-bottom: 0 !important;
    }

    /* Subheadlines under main title */
    .hero-content .hero-subheadline-1,
    p.hero-subheadline-1 {
        font-size: 1.1rem !important;
        margin-bottom: 2rem !important;
    }

    .hero-content .hero-subheadline-2,
    p.hero-subheadline-2 {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Reduce offer/pricing section spacing */
    .offer {
        padding: 2rem !important;
    }

    .offer h3 {
        font-size: 1.6rem !important;
        margin-bottom: 0.8rem !important;
    }

    .offer p {
        font-size: 1.2rem !important;
        margin-bottom: 1.5rem !important;
    }

    .offer ul {
        margin-bottom: 1.5rem !important;
    }

    .offer ul li {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Reduce final CTA spacing */
    #final-cta {
        padding: 2.5rem 1.5rem !important;
    }

    #final-cta h2 {
        font-size: 1.8rem !important;
    }

    #final-cta .primary-cta {
        font-size: 1rem !important;
        padding: 1rem 2rem !important;
        margin: 1.5rem 0 !important;
    }

    /* Reduce step number size */
    .step-number {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
    }

    /* Reduce video wrapper margins */
    .video-wrapper {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Team section spacing */
    .team-member video {
        margin-top: 1.5rem !important;
    }

    /* Trust indicators */
    #trust {
        padding: 30px 1.5rem !important;
    }

    #trust h2 {
        font-size: 1.8rem !important;
    }

    /* Testimonials section */
    #testimonials {
        padding: 30px 1.5rem !important;
    }

    /* Journey section */
    #journey {
        padding: 30px 1.5rem !important;
    }

    /* Patient stories section */
    #patient-stories {
        padding: 40px 1.5rem !important;
    }

    /* Open day experience section */
    #open-day-experience {
        padding: 30px 1.5rem !important;
    }

    /* Reduce event badge margins */
    .event-badge {
        margin: 0.5rem 0 !important;
        padding: 0.5rem 1.2rem !important;
        font-size: 0.75rem !important;
    }

    /* Compact CTA buttons */
    .primary-cta {
        font-size: 1rem !important;
        padding: 1rem 2rem !important;
    }

    /* Reduce footer spacing */
    footer {
        padding: 2.5rem 1.5rem 2rem !important;
        margin-top: 2rem !important;
    }

    /* Adjust spacing for specific section backgrounds */
    #problem,
    #3d-solution,
    #open-day-benefits,
    #results,
    #team {
        padding: 35px 1.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   EXTRA COMPACT - 480px
   Smaller phones
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    section {
        padding: 30px 1rem !important;
    }

    section h2 {
        font-size: 1.625rem !important;
    }

    .hero-content h1 {
        font-size: 1.7rem !important;
    }

    #hero {
        padding: 20px 1rem 30px !important;
    }

    .problem-item,
    .benefit,
    .step,
    .faq-item {
        padding: 1.2rem !important;
    }

    .section-cta {
        margin: 2rem 1rem !important;
        padding: 1.2rem !important;
        max-width: calc(100% - 2rem) !important;
    }

    .offer {
        padding: 1.5rem !important;
    }

    #final-cta {
        padding: 2rem 1rem !important;
        margin: 0 1rem !important;
    }

    #final-cta h2 {
        font-size: 1.625rem !important;
    }

    #trust h2 {
        font-size: 1.625rem !important;
    }

    footer {
        padding: 2rem 1rem 1.5rem !important;
    }

    /* Keep location name together on its own line */
    .location-name {
        display: block;
        white-space: nowrap;
    }

    /* Keep treatment duration together on its own line */
    .treatment-duration {
        display: block;
        white-space: nowrap;
    }
}