/* ============================================
   Shravanam Speech & Hearing Center
   Responsive Stylesheet
   Breakpoints:
   - Large Desktop: 1200px+
   - Desktop: 992px - 1199px
   - Tablet: 768px - 991px
   - Mobile Large: 480px - 767px
   - Mobile: < 480px
   ============================================ */

/* ============================================
   Large Desktop (max 1199px)
   ============================================ */
@media (max-width: 1199px) {
    :root {
        --font-size-6xl: 3.25rem;
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
    }

    .container {
        max-width: 960px;
    }

    .hero-title {
        font-size: 3rem;
    }

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

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

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

    .footer-inner {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
    }
}

/* ============================================
   Tablet (max 991px)
   ============================================ */
@media (max-width: 991px) {
    :root {
        --space-9: 5rem;
        --space-8: 4rem;
        --space-7: 3.5rem;
    }

    .container {
        max-width: 720px;
    }

    /* Navbar - Mobile Menu */
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        max-width: 85vw;
        height: 100vh;
        background: var(--bg-white);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 5rem 2rem 2rem;
        gap: 1.5rem;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        overflow-y: auto;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        font-size: 1.125rem;
        width: 100%;
        padding: 0.5rem 0;
    }

    .nav-cta {
        margin-left: 0;
        margin-top: 1rem;
        width: 100%;
        text-align: center;
    }

    /* Body lock when menu open */
    body.menu-open {
        overflow: hidden;
    }

    /* Menu Overlay */
    .menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 41, 66, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 3rem 0 4rem;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .hero-content {
        order: 2;
    }

    .hero-image {
        order: 1;
        max-width: 500px;
        margin: 0 auto;
    }

    .hero-image-main img {
        height: 420px;
    }

    .hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    /* Welcome */
    .welcome-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .welcome-image {
        max-width: 500px;
        margin: 0 auto;
    }

    .welcome-image img {
        height: 450px;
    }

    .welcome-content {
        text-align: center;
    }

    /* Features */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Conditions */
    .conditions-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Story */
    .story-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .story-image {
        max-width: 500px;
        margin: 0 auto;
    }

    .story-image img {
        height: 450px;
    }

    .story-content {
        text-align: center;
    }

    .story-features {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    /* Mission Vision */
    .mv-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

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

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

    /* Large Service Cards */
    .large-service-card,
    .large-service-card.reverse {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .large-service-card.reverse .large-service-image {
        order: 0;
    }

    .large-service-image {
        height: 300px;
    }

    .large-service-body,
    .large-service-card.reverse .large-service-body {
        padding: 2.5rem;
    }

    /* Contact */
    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-form-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Footer */
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    .footer-about {
        grid-column: 1 / -1;
    }
}

/* ============================================
   Mobile Large (max 767px)
   ============================================ */
@media (max-width: 767px) {
    :root {
        --space-9: 4rem;
        --space-8: 3.5rem;
        --space-7: 3rem;
        --font-size-6xl: 2.5rem;
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
    }

    .container {
        padding: 0 1rem;
    }

    .section {
        padding: 4rem 0;
    }

    .section-head {
        margin-bottom: 2.5rem;
    }

    /* Top Bar */
    .top-bar {
        display: none;
    }

    /* Hero */
    .hero-title {
        font-size: 2.25rem;
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }

    .hero-desc {
        font-size: 0.95rem;
    }

    .hero-image-main img {
        height: 350px;
    }

    /* Welcome */
    .welcome-image img,
    .story-image img {
        height: 380px;
    }

    /* Features */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Spacing overrides for benefits-grid cards on mobile screens */
    .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin-top: 1.5rem !important;
    }

    .benefit-item {
        padding: 1.25rem 1rem !important; /* Reduced internal padding to increase reading space [INDEX] */
        border-radius: var(--radius-md) !important;
    }

    .benefit-title-row {
        gap: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    .benefit-desc {
        padding-left: 0 !important; /* Removed severe left-indentation on smaller screens [INDEX] */
        margin-top: 0.25rem !important;
        font-size: var(--font-size-sm) !important;
        line-height: 1.5 !important;
        color: var(--text-secondary);
    }

    /* Conditions */
    .conditions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* CTA */
    .cta-title {
        font-size: 2rem;
    }

    .cta-text {
        font-size: 1rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

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

    /* Page Banner */
    .page-banner {
        padding: 3.5rem 0 3rem;
    }

    .page-banner-title {
        font-size: 2rem;
    }

    /* Story Features */
    .story-features {
        grid-template-columns: 1fr;
    }

    /* Trust & Values */
    .trust-grid,
    .values-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

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

    .stat-number {
        font-size: 2.25rem;
    }

    /* Large Service Cards */
    .large-service-body,
    .large-service-card.reverse .large-service-body {
        padding: 2rem 1.5rem;
    }

    .large-service-meta {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .large-service-title {
        font-size: 1.5rem;
    }

    /* Contact */
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .contact-form-wrap {
        padding: 2rem 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Footer */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: left;
    }

    .footer-about {
        grid-column: auto;
    }

    .footer-bottom-inner p {
        font-size: 0.8rem;
    }

    /* Back to top */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }
}

/* ============================================
   Mobile (max 479px)
   ============================================ */
@media (max-width: 479px) {
    :root {
        --font-size-6xl: 2rem;
        --font-size-5xl: 1.75rem;
        --font-size-4xl: 1.5rem;
    }

    .container {
        padding: 0 1rem;
    }

    .section {
        padding: 3rem 0;
    }

    .section-head {
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .section-subtitle {
        font-size: 0.95rem;
    }

    /* Navbar / Logo Scaling */
    .logo-mark {
        width: 44px !important; /* Proportional scaling down for compact mobile views [INDEX] */
        height: 44px !important;
    }

    .logo-text {
        font-size: 1.15rem !important;
    }

    /* Hero */
    .hero {
        padding: 2rem 0 3rem;
    }

    .hero-title {
        font-size: 1.875rem;
    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

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

    .hero-image-main img {
        height: 280px;
    }

    /* Welcome / Story */
    .welcome-image img,
    .story-image img {
        height: 320px;
    }

    /* Buttons */
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    /* CTA */
    .cta-title {
        font-size: 1.75rem;
    }

    /* Page Banner */
    .page-banner-title {
        font-size: 1.75rem;
    }

    .breadcrumb {
        font-size: 0.875rem;
    }

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

    /* Large Service */
    .large-service-image {
        height: 220px;
    }

    .large-service-icon {
        width: 52px;
        height: 52px;
        bottom: 1rem;
        left: 1rem;
    }

    /* Contact Form */
    .contact-form-wrap {
        padding: 1.5rem 1.25rem;
    }

    /* Popup */
    .popup {
        padding: 2rem 1.5rem;
    }

    .popup h3 {
        font-size: 1.5rem;
    }

    /* Footer */
    .footer-social a {
        width: 36px;
        height: 36px;
    }
}

/* ============================================
   Small Mobile (max 359px)
   ============================================ */
@media (max-width: 359px) {
    .hero-title {
        font-size: 1.625rem;
    }

    .section-title {
        font-size: 1.375rem;
    }

    .logo-text {
        font-size: 1.125rem;
    }

    .logo-mark {
        width: 38px;
        height: 38px;
    }

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