/* ============================================
   AGHA Corporate Website - Responsive Design
   Mobile-First Approach with All Breakpoints (Meta-inspired)
   ============================================ */

/* ============================================
   Base Mobile Optimizations
   ============================================ */

/* Ensure proper viewport behavior */
@viewport {
    width: device-width;
    initial-scale: 1;
    maximum-scale: 5;
    user-scalable: yes;
}

/* ============================================
   Extra Small Devices (phones, 480px and down)
   ============================================ */

@media (max-width: 479.98px) {
    /* Base */
    html {
        font-size: 13px;
    }
    
    body {
        overflow-x: hidden;
        width: 100%;
        min-width: 320px;
    }
    
    * {
        max-width: 100%;
    }
    
    /* Container */
    .container,
    .container--content {
        padding: 0 var(--space-2);
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Civil Master Section - Extra small mobile fix */
    #civil-master {
        overflow-x: hidden !important;
        width: 100% !important;
        padding: var(--space-4) 0 !important;
        max-width: 100vw !important;
    }
    
    #civil-master .container,
    #civil-master .container--content {
        padding: 0 var(--space-3) !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #civil-master .grid--2 {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    #civil-master .grid--2 > div {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        text-align: left !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    #civil-master .grid--2 > div:first-child {
        padding: 0 !important;
    }
    
    #civil-master .section__subtitle,
    #civil-master .section__title,
    #civil-master .section__description,
    #civil-master h4,
    #civil-master p,
    #civil-master ul,
    #civil-master li {
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    #civil-master .card {
        padding: var(--space-3) !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    #civil-master .card__image {
        width: 45px !important;
        height: 45px !important;
    }
    
    #civil-master .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    #civil-master div[style*="display: flex; gap: var(--space-2)"] {
        justify-content: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    
    #civil-master .mb-4 {
        margin-bottom: var(--space-3) !important;
    }
    
    /* Typography */
    h1 {
        font-size: 1.5rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.25rem;
        line-height: 1.2;
    }
    
    h3 {
        font-size: 1.125rem;
        line-height: 1.3;
    }
    
    h4 {
        font-size: 1rem;
        line-height: 1.3;
    }
    
    p {
        font-size: 0.875rem;
        line-height: 1.5;
    }
    
    /* Grid */
    .grid--12,
    .grid--6,
    .grid--4,
    .grid--3,
    .grid--2 {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    /* Flex */
    .flex--center {
        flex-direction: column;
    }
    
    .flex--wrap {
        flex-direction: column;
        width: 100%;
    }
    
    /* Section */
    .section {
        padding: var(--space-6) 0;
    }
    
    .section--hero {
        padding: calc(var(--space-5) + var(--navbar-height-mobile)) 0 var(--space-5);
        min-height: auto;
    }
    
    .section__header {
        margin-bottom: var(--space-4);
    }
    
    /* Hero */
    .hero__wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .hero__content {
        text-align: center;
        max-width: 100%;
    }
    
    .hero__image {
        order: -1;
        margin-bottom: var(--space-3);
    }
    
    .hero__graphic-img {
        max-width: 220px;
    }
    
    .hero__description {
        font-size: 0.875rem;
        margin-bottom: var(--space-4);
    }
    
    .hero__buttons {
        flex-direction: column;
        width: 100%;
        gap: var(--space-2);
    }
    
    .hero__buttons .btn {
        width: 100%;
    }

    /* Buttons */
    .btn {
        padding: var(--space-2) var(--space-3);
        font-size: 0.875rem;
    }
    
    .btn--large {
        padding: var(--space-2) var(--space-4);
        font-size: 0.9375rem;
    }
    
    /* Cards */
    .card {
        padding: var(--space-3);
    }
    
    .card__icon {
        width: 40px;
        height: 40px;
    }
    
    .card__image {
        width: 50px;
        height: 50px;
    }
    
    .card__title {
        font-size: 1rem;
    }
    
    /* Navigation */
    .navbar__container {
        padding: var(--space-2) var(--space-3);
        min-height: 60px;
    }
    
    .navbar__logo {
        font-size: 1rem;
    }
    
    /* Navigation */
    .navbar__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 300px;
        height: 100vh;
        background: var(--color-surface);
        flex-direction: column;
        justify-content: center;
        gap: var(--space-3);
        padding: var(--space-4);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        transition: right var(--transition-base);
        overflow-y: auto;
        margin-left: 0;
    }
    
    .navbar__menu--open {
        right: 0;
    }
    
    .navbar__toggle {
        display: flex;
        z-index: var(--z-fixed);
    }
    
    .navbar__overlay--active {
        display: block;
    }
    
    /* Footer */
    .footer {
        padding: var(--space-6) 0 var(--space-3);
    }
    
    .footer__container {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .footer__bottom {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }
}

/* ============================================
   Small Devices (landscape phones, 480px to 639px)
   ============================================ */

@media (min-width: 480px) and (max-width: 639.98px) {
    /* Base */
    html {
        font-size: 14px;
    }
    
    /* Container */
    .container,
    .container--content {
        padding: 0 var(--space-3);
    }
    
    /* Typography */
    h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.2;
    }
    
    h3 {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    
    h4 {
        font-size: 1.125rem;
        line-height: 1.3;
    }
    
    p {
        font-size: 0.9375rem;
        line-height: 1.5;
    }
    
    /* Grid */
    .grid--12,
    .grid--6,
    .grid--4,
    .grid--3 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    /* Section */
    .section {
        padding: var(--space-8) 0;
    }
    
    .section--hero {
        padding: calc(var(--space-5) + var(--navbar-height-mobile)) 0 var(--space-5);
        min-height: auto;
    }
    
    .section__header {
        margin-bottom: var(--space-5);
    }
    
    /* Hero */
    .hero__wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .hero__content {
        text-align: center;
        max-width: 100%;
    }
    
    .hero__image {
        order: -1;
        margin-bottom: var(--space-4);
    }
    
    .hero__graphic-img {
        max-width: 280px;
    }
    
    .hero__buttons {
        flex-direction: column;
        width: 100%;
        gap: var(--space-2);
    }
    
    .hero__buttons .btn {
        width: 100%;
    }

    /* Buttons */
    .btn {
        padding: var(--space-2) var(--space-4);
        font-size: 0.9375rem;
    }
    
    .btn--large {
        padding: var(--space-3) var(--space-5);
        font-size: 1rem;
    }
    
    /* Cards */
    .card {
        padding: var(--space-4);
    }
    
    .card__icon {
        width: 48px;
        height: 48px;
    }
    
    .card__image {
        width: 60px;
        height: 60px;
    }
    
    /* Navigation */
    .navbar__menu {
        width: 75%;
        max-width: 320px;
        margin-left: 0;
        gap: var(--space-3);
        padding: var(--space-5);
    }
    
    /* Footer */
    .footer {
        padding: var(--space-8) 0 var(--space-4);
    }
    
    .footer__container {
        gap: var(--space-5);
    }
}

/* ============================================
   Medium Devices (tablets, 640px to 767px)
   ============================================ */

@media (min-width: 640px) and (max-width: 767.98px) {
    /* Base */
    html {
        font-size: 15px;
    }
    
    /* Container */
    .container,
    .container--content {
        padding: 0 var(--space-4);
    }
    
    /* Typography */
    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    h3 {
        font-size: 1.375rem;
        line-height: 1.3;
    }
    
    h4 {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    
    p {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    /* Grid */
    .grid--12,
    .grid--6 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
    
    .grid--4,
    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
    
    .grid--2 {
        gap: var(--space-5);
    }
    
    /* Section */
    .section {
        padding: var(--space-10) 0;
    }
    
    .section--hero {
        padding: calc(var(--space-7) + 72px) 0 var(--space-7);
        min-height: clamp(420px, 55vh, 620px);
    }
    
    .section__header {
        margin-bottom: var(--space-6);
    }
    
    /* Hero */
    .hero__content {
        text-align: center;
    }

    .hero__image > div {
        max-width: 90% !important;
    }

    .hero__buttons {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-3);
    }
    
    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-5);
        font-size: 1rem;
    }
    
    .btn--large {
        padding: var(--space-3) var(--space-6);
        font-size: 1.0625rem;
    }
    
    /* Cards */
    .card {
        padding: var(--space-5);
    }
    
    .card__icon {
        width: 52px;
        height: 52px;
    }
    
    .card__image {
        width: 64px;
        height: 64px;
    }
    
    /* Navigation */
    .navbar__menu {
        width: 60%;
        max-width: 350px;
        gap: var(--space-3);
        padding: var(--space-5);
    }
    
    /* Footer */
    .footer {
        padding: var(--space-10) 0 var(--space-5);
    }
    
    .footer__container {
        gap: var(--space-6);
    }
}

/* ============================================
   Large Devices (landscape tablets, 768px to 1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023.98px) {
    /* Base */
    html {
        font-size: 16px;
    }
    
    /* Container */
    .container,
    .container--content {
        padding: 0 var(--space-5);
    }
    
    /* Typography */
    h1 {
        font-size: 2.25rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.875rem;
        line-height: 1.2;
    }
    
    h3 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    h4 {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    
    p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* Grid */
    .grid--12 {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--space-5);
    }
    
    .grid--6 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
    
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
    
    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
    
    .grid--2 {
        gap: var(--space-5);
    }
    
    /* Section */
    .section {
        padding: var(--space-12) 0;
    }
    
    .section--hero {
        padding: var(--space-18) 0 var(--space-12);
        padding-top: calc(var(--space-18) + 60px);
    }
    
    .section__header {
        margin-bottom: var(--space-7);
    }
    
    /* Hero */
    .hero__content {
        text-align: left;
    }
    
    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-5);
        font-size: 1rem;
    }
    
    .btn--large {
        padding: var(--space-3) var(--space-6);
        font-size: 1.0625rem;
    }
    
    /* Cards */
    .card {
        padding: var(--space-5);
    }
    
    .card__icon {
        width: 56px;
        height: 56px;
    }
    
    .card__image {
        width: 72px;
        height: 72px;
    }
    
    /* Navigation */
    .navbar__menu {
        position: static;
        width: auto;
        height: auto;
        background: transparent;
        flex-direction: row;
        justify-content: flex-end;
        gap: var(--space-4);
        padding: 0;
        box-shadow: none;
        overflow-y: visible;
    }
    
    .navbar__toggle {
        display: none;
    }
    
    .navbar__overlay {
        display: none;
    }
    
    /* Footer */
    .footer {
        padding: var(--space-12) 0 var(--space-6);
    }
    
    .footer__container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

/* ============================================
   Extra Large Devices (desktops, 1024px to 1279px)
   ============================================ */

@media (min-width: 1024px) and (max-width: 1279.98px) {
    /* Base */
    html {
        font-size: 16px;
    }
    
    /* Container */
    .container,
    .container--content {
        padding: 0 var(--space-6);
    }
    
    /* Typography */
    h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    h3 {
        font-size: 1.625rem;
        line-height: 1.3;
    }
    
    h4 {
        font-size: 1.375rem;
        line-height: 1.3;
    }
    
    p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* Grid */
    .grid--12 {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--space-6);
    }
    
    .grid--6 {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--space-6);
    }
    
    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-6);
    }
    
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }
    
    .grid--2 {
        gap: var(--space-6);
    }
    
    /* Section */
    .section {
        padding: var(--space-14) 0;
    }
    
    .section--hero {
        padding: var(--space-20) 0 var(--space-14);
        padding-top: calc(var(--space-20) + 60px);
    }
    
    .section__header {
        margin-bottom: var(--space-8);
    }
    
    /* Hero */
    .hero__content {
        text-align: left;
    }
    
    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-6);
        font-size: 1rem;
    }
    
    .btn--large {
        padding: var(--space-4) var(--space-7);
        font-size: 1.0625rem;
    }
    
    /* Cards */
    .card {
        padding: var(--space-6);
    }
    
    .card__icon {
        width: 60px;
        height: 60px;
    }
    
    .card__image {
        width: 80px;
        height: 80px;
    }
    
    /* Navigation */
    .navbar__menu {
        gap: var(--space-4);
    }
    
    /* Footer */
    .footer {
        padding: var(--space-14) 0 var(--space-7);
    }
    
    .footer__container {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-7);
    }
}

/* ============================================
   Ultra Large Devices (large desktops, 1280px and up)
   ============================================ */

@media (min-width: 1280px) {
    /* Base */
    html {
        font-size: 16px;
    }
    
    /* Container */
    .container,
    .container--content {
        padding: 0 var(--space-6);
    }
    
    /* Typography */
    h1 {
        font-size: 2.75rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 2.125rem;
        line-height: 1.2;
    }
    
    h3 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    h4 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    p {
        font-size: 1.0625rem;
        line-height: 1.6;
    }
    
    /* Grid */
    .grid--12 {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--space-6);
    }
    
    .grid--6 {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--space-6);
    }
    
    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-6);
    }
    
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }
    
    .grid--2 {
        gap: var(--space-6);
    }
    
    /* Section */
    .section {
        padding: var(--space-14) 0;
    }
    
    .section--hero {
        padding: var(--space-22) 0 var(--space-14);
        padding-top: calc(var(--space-22) + 60px);
    }
    
    .section__header {
        margin-bottom: var(--space-8);
    }
    
    /* Hero */
    .hero__content {
        text-align: left;
    }
    
    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-6);
        font-size: 1rem;
    }
    
    .btn--large {
        padding: var(--space-4) var(--space-7);
        font-size: 1.0625rem;
    }
    
    /* Cards */
    .card {
        padding: var(--space-6);
    }
    
    .card__icon {
        width: 64px;
        height: 64px;
    }
    
    .card__image {
        width: 88px;
        height: 88px;
    }
    
    /* Navigation */
    .navbar__menu {
        gap: var(--space-4);
    }
    
    /* Footer */
    .footer {
        padding: var(--space-14) 0 var(--space-7);
    }
    
    .footer__container {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-7);
    }
}

/* ============================================
   Ultra Large Devices (1440px and up)
   ============================================ */

@media (min-width: 1440px) {
    /* Base */
    html {
        font-size: 16px;
    }
    
    .container,
    .container--content {
        padding: 0 var(--space-6);
    }
    
    /* Typography */
    h1 {
        font-size: 3rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 2.25rem;
        line-height: 1.2;
    }
    
    h3 {
        font-size: 1.875rem;
        line-height: 1.3;
    }
    
    h4 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    p {
        font-size: 1.0625rem;
        line-height: 1.6;
    }
    
    /* Grid */
    .grid--12,
    .grid--6,
    .grid--4,
    .grid--3,
    .grid--2 {
        gap: var(--space-6);
    }
    
    /* Section */
    .section {
        padding: var(--space-14) 0;
    }
    
    .section--hero {
        padding: var(--space-24) 0 var(--space-14);
        padding-top: calc(var(--space-24) + 60px);
    }
    
    .section__header {
        margin-bottom: var(--space-8);
    }
    
    /* Hero */
    .hero__blob {
        width: 500px;
        height: 500px;
    }
    
    /* Stats */
    .stat-number {
        font-size: 3rem !important;
    }
    
    /* SVG Illustrations */
    .hero__illustration svg {
        max-height: 450px;
    }
    
    .floating svg {
        max-height: 400px;
    }
    
    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-6);
        font-size: 1rem;
    }
    
    .btn--large {
        padding: var(--space-4) var(--space-7);
        font-size: 1.0625rem;
    }
    
    /* Cards */
    .card {
        padding: var(--space-6);
    }
    
    .card__icon {
        width: 64px;
        height: 64px;
    }
    
    .card__image {
        width: 88px;
        height: 88px;
    }
    
    /* Navigation */
    .navbar__menu {
        gap: var(--space-4);
    }
    
    /* Footer */
    .footer {
        padding: var(--space-14) 0 var(--space-7);
    }
    
    .footer__container {
        gap: var(--space-7);
    }
}

/* ============================================
   Additional Mobile Spacing Optimizations
   ============================================ */

@media (max-width: 768px) {
    /* Reduce section padding for mobile */
    .section {
        padding: var(--space-6) 0 !important;
    }
    
    .section--hero {
        padding: calc(var(--space-4) + var(--navbar-height-mobile)) 0 var(--space-4) !important;
        min-height: auto !important;
    }
    
    .section--compact {
        padding: var(--space-4) 0 !important;
    }
    
    /* Reduce header spacing */
    .section__header {
        margin-bottom: var(--space-4) !important;
    }
    
    /* Reduce card padding */
    .card {
        padding: var(--space-3) !important;
    }
    
    /* Reduce gaps in grids */
    .grid--3,
    .grid--4,
    .grid--6 {
        gap: var(--space-3) !important;
    }
    
    /* Reduce form spacing */
    .form__group {
        margin-bottom: var(--space-3) !important;
    }
    
    /* Reduce button spacing */
    .btn {
        padding: var(--space-2) var(--space-3) !important;
    }
    
    .btn--large {
        padding: var(--space-3) var(--space-4) !important;
    }
    
    /* Reduce footer padding */
    .footer {
        padding: var(--space-6) 0 var(--space-3) !important;
    }
    
    .footer__container {
        gap: var(--space-4) !important;
    }
    
    /* Reduce navbar padding */
    .navbar__container {
        padding: var(--space-2) var(--space-3) !important;
    }
    
    /* Logo placeholder mobile optimization */
    .logo-placeholder {
        height: 80px !important;
    }
    
    /* Partnership cards mobile optimization */
    #partnership-form .card[style*="max-height: 280px"] {
        max-height: 350px !important;
    }
    
    /* Volunteer coordinator card mobile optimization */
    #volunteer-form .card[style*="max-height: 280px"] {
        max-height: 350px !important;
    }
    
    /* Volunteer benefits card mobile optimization */
    #volunteer .card[style*="max-height: 280px"] {
        max-height: 350px !important;
    }
}

/* ============================================
   Mobile Menu Overlay
   ============================================ */

.navbar__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    z-index: 999;
}

.navbar__overlay--active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   Touch Device Optimizations
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    .hover-lift:hover,
    .card:hover {
        transform: none;
    }
    
    .btn:hover {
        transform: none;
    }
    
    /* Larger touch targets */
    .btn {
        min-height: 48px;
        min-width: 48px;
    }
    
    .theme-toggle {
        width: 52px;
        height: 52px;
    }
    
    .navbar__link {
        padding: var(--space-2) 0;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .navbar,
    .footer,
    .back-to-top,
    .theme-toggle,
    .scroll-progress,
    .hero__blob,
    .loading-screen {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .section {
        page-break-inside: avoid;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ============================================
   Landscape Orientation
   ============================================ */

@media (orientation: landscape) and (max-height: 500px) {
    .section--hero {
        padding: var(--space-5) 0;
        padding-top: calc(var(--space-4) + var(--navbar-height-mobile));
    }
    
    .navbar__container {
        padding: var(--space-2) var(--space-4);
    }
}

/* ============================================
   High DPI Displays
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimize images for retina displays */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   Container Queries (Future-Proof)
   ============================================ */

@container (min-width: 400px) {
    .card {
        padding: var(--space-5);
    }
}

/* ============================================
   Specific Component Responsive Styles
   ============================================ */

/* Hero Section */
@media (max-width: 768px) {
    .hero__content {
        text-align: center;
    }
    
    .hero__buttons {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .hero__buttons .btn {
        width: 100%;
    }
}

/* Products Page Specific */
@media (max-width: 575.98px) {
    /* Civil Master Section - Fix mobile overflow */
    #civil-master {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: var(--space-4) 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    #civil-master .container,
    #civil-master .container--content {
        padding: 0 var(--space-3) !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    #civil-master .grid--2 {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    #civil-master .grid--2 > div {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    #civil-master .section__subtitle,
    #civil-master .section__title,
    #civil-master .section__description,
    #civil-master h4,
    #civil-master p,
    #civil-master ul,
    #civil-master li {
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    #civil-master .card {
        padding: var(--space-3) !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    #civil-master .card__image {
        width: 50px !important;
        height: 50px !important;
    }
    
    #civil-master .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    #civil-master .mb-4 {
        margin-bottom: var(--space-3) !important;
    }
    
    /* Dashboard preview grid */
    #civil-master .card[style*="background: var(--gradient-primary)"] .grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-2) !important;
    }
    
    /* Social media links */
    #civil-master div[style*="display: flex; gap: var(--space-2)"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: var(--space-3) !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    #civil-master div[style*="display: flex; gap: var(--space-2)"] a {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Feature lists */
    #civil-master ul {
        padding-left: var(--space-2) !important;
        max-width: 100% !important;
    }
    
    #civil-master li {
        margin-bottom: var(--space-2) !important;
        font-size: 0.9375rem !important;
    }
    
    /* TalkTrade Section - Similar mobile overflow fixes */
    #talktrade {
        overflow-x: hidden;
        width: 100%;
        padding: var(--space-6) 0;
    }
    
    #talktrade .container,
    #talktrade .container--content {
        padding: 0 var(--space-3);
        max-width: 100%;
        overflow-x: hidden;
    }
    
    #talktrade .grid--2 {
        grid-template-columns: 1fr !important;
        gap: var(--space-6);
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    #talktrade .grid--2 > div {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        transform: none;
        left: auto;
        right: auto;
    }
    
    #talktrade .section__subtitle,
    #talktrade .section__title,
    #talktrade .section__description,
    #talktrade h4,
    #talktrade p,
    #talktrade ul,
    #talktrade li {
        max-width: 100%;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
    }
    
    #talktrade .card {
        padding: var(--space-4);
        max-width: 100%;
        overflow: hidden;
    }
    
    #talktrade .card__image {
        width: 50px;
        height: 50px;
    }
    
    /* TalkTrade platform preview */
    #talktrade .card[style*="background: var(--gradient-primary)"] .grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-2);
    }
    
    /* TalkTrade social media links */
    #talktrade div[style*="display: flex; gap: var(--space-2)"] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
        max-width: 100%;
    }
    
    #talktrade div[style*="display: flex; gap: var(--space-2)"] a {
        width: 40px;
        height: 40px;
    }
    
    /* TalkTrade feature lists */
    #talktrade ul {
        padding-left: var(--space-3);
        max-width: 100%;
    }
    
    #talktrade li {
        margin-bottom: var(--space-2);
        font-size: 0.9375rem;
    }
    
    /* Future Products grid */
    #future .grid--3 {
        grid-template-columns: 1fr !important;
    }
    
    #future .card {
        padding: var(--space-4);
    }
    
    #future .card h3 {
        font-size: 1.125rem;
    }
    
    #future .card p {
        font-size: 0.9375rem;
    }
    
    #future .card div[style*="display: flex; gap: var(--space-2)"] {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    #future .card .btn {
        width: 100%;
    }
    
    /* Contact Page Map Section */
    #location {
        overflow-x: hidden;
        width: 100%;
    }
    
    #location .container,
    #location .container--content {
        padding: 0 var(--space-3);
        max-width: 100%;
        overflow-x: hidden;
    }
    
    #location .card {
        border-radius: var(--radius-md) !important;
        overflow: hidden;
    }
    
    #location .card > div[style*="position: relative"] {
        padding-bottom: 75% !important;
    }
    
    #location iframe {
        border-radius: var(--radius-md) !important;
    }
    
    #location .card > div:last-child {
        padding: var(--space-3) !important;
    }
    
    #location .card > div:last-child > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-2) !important;
    }
    
    #location .card .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Marketplace Preview */
    #marketplace-preview .grid--3 {
        grid-template-columns: 1fr !important;
    }
    
    #marketplace-preview .card {
        padding: var(--space-4);
    }
    
    #marketplace-preview .card h3 {
        font-size: 1.125rem;
    }
    
    #marketplace-preview .card p {
        font-size: 0.9375rem;
    }
}

/* Product Cards */
@media (max-width: 576px) {
    .product-card {
        grid-column: span 1;
    }
}

/* Service Cards */
@media (min-width: 576px) and (max-width: 992px) {
    .service-card {
        grid-column: span 1;
    }
}

/* Impact Statistics */
@media (max-width: 768px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact Form */
@media (max-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

/* Career Cards */
@media (max-width: 768px) {
    .career-card {
        grid-column: span 1;
    }
}

/* News Cards */
@media (max-width: 768px) {
    .news-card {
        grid-column: span 1;
    }
}

/* Timeline */
@media (max-width: 768px) {
    .timeline {
        padding-left: var(--space-3);
    }
    
    .timeline__item::before {
        left: 0;
    }
}

/* ============================================
   Partnership Page Specific Responsive Styles
   ============================================ */

/* Partnership Process - 4 column grid */
@media (max-width: 576px) {
    .grid--4 {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .grid--4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Partnership Types - 3 column grid */
@media (max-width: 576px) {
    .grid--3 {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 576px) and (max-width: 992px) {
    .grid--3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Volunteer Opportunities - 2 column grid */
@media (max-width: 576px) {
    .grid--2 {
        grid-template-columns: 1fr !important;
    }
}

/* Language Toggle Button */
@media (max-width: 768px) {
    #langToggle {
        padding: var(--space-2) var(--space-3);
        font-size: 0.875rem;
    }
}

/* Partnership Forms */
@media (max-width: 768px) {
    #partnership-form .grid--2,
    #volunteer-form .grid--2 {
        grid-template-columns: 1fr !important;
    }
}

/* Sponsorship Package Cards */
@media (max-width: 576px) {
    #packages .card {
        padding: var(--space-4);
    }
    
    #packages .card h3 {
        font-size: 1.25rem;
    }
    
    #packages .card .btn {
        width: 100%;
    }
}

/* Volunteer Role Cards */
@media (max-width: 576px) {
    #volunteer .card {
        flex-direction: column;
    }
    
    #volunteer .card .card__icon {
        margin-bottom: var(--space-3);
    }
    
    #volunteer .card .btn {
        width: 100%;
    }
}

/* FAQ Cards */
@media (max-width: 576px) {
    #volunteer-faqs .grid--2 {
        grid-template-columns: 1fr !important;
    }
}

/* Partnership Process Steps */
@media (max-width: 768px) {
    #process .card {
        padding: var(--space-4);
    }
    
    #process .card div[style*="width: 60px"] {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.25rem !important;
    }
}

/* Hero Section - Partnership */
@media (max-width: 768px) {
    .section--hero .grid--2 {
        grid-template-columns: 1fr !important;
    }
    
    .section--hero .floating {
        display: none;
    }
    
    .section--hero .flex--wrap {
        flex-direction: column;
    }
    
    .section--hero .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================
   FINAL RESPONSIVE SAFETY OVERRIDES
   Targeted final pass: content-first responsiveness
   ============================================ */

/* Never clip important content while making the layout responsive. */
.section--hero,
.section--hero .container,
.section--hero .hero__wrapper,
.section--hero .hero__content {
    box-sizing: border-box;
}

.section--hero {
    min-height: clamp(420px, 52vh, 720px);
    padding-top: calc(var(--navbar-height) + clamp(88px, 11vh, 148px));
    padding-bottom: clamp(56px, 7vh, 96px);
    overflow-x: hidden;
    overflow-y: visible;
}

.section--hero .hero__content,
.section--hero .section__title,
.section--hero h1,
.section--hero h2,
.section--hero p,
.section--hero .hero__description {
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.section--hero .hero__content h1,
.section--hero .hero__content .section__title {
    margin-top: 0 !important;
    line-height: 1.2;
}

.section--hero .hero__buttons,
.section--hero > .container .flex--wrap {
    min-width: 0;
    flex-wrap: wrap;
}

.section--hero .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Navbar: keep desktop layout until the navigation no longer has enough room. */
@media (max-width: 1023.98px) {
    .navbar__container {
        min-height: var(--navbar-height-mobile);
        padding: var(--space-2) var(--container-padding);
        gap: var(--space-3);
    }

    .navbar__toggle {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        z-index: calc(var(--z-fixed) + 1);
    }

    .navbar__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(86vw, 360px);
        height: 100dvh;
        max-height: 100dvh;
        margin-left: 0;
        padding: calc(var(--navbar-height-mobile) + var(--space-6)) var(--space-5) var(--space-6);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-2);
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--color-surface);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
        z-index: var(--z-fixed);
        transition: right var(--transition-base);
    }

    .navbar__menu--open {
        right: 0;
    }

    .navbar__link {
        display: block;
        width: 100%;
        padding: var(--space-3);
        line-height: 1.35;
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .navbar__overlay {
        z-index: calc(var(--z-fixed) - 1);
    }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
    .navbar__container {
        min-height: var(--navbar-height-mobile);
        padding: var(--space-2) var(--container-padding);
        gap: var(--space-3);
    }

    .navbar__toggle {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        z-index: calc(var(--z-fixed) + 1);
    }

    .navbar__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(86vw, 360px);
        height: 100dvh;
        max-height: 100dvh;
        margin-left: 0;
        padding: calc(var(--navbar-height-mobile) + var(--space-6)) var(--space-5) var(--space-6);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-2);
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--color-surface);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
        z-index: var(--z-fixed);
        transition: right var(--transition-base);
    }

    .navbar__menu--open {
        right: 0;
    }

    .navbar__link {
        display: block;
        width: 100%;
        padding: var(--space-3);
        line-height: 1.35;
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .navbar__overlay {
        z-index: calc(var(--z-fixed) - 1);
    }
}

/* Hero: compact/mobile content must be allowed to grow naturally. */
@media (max-width: 1023.98px) {
    .section--hero {
        min-height: auto;
        display: block;
        padding-top: calc(var(--navbar-height-mobile) + clamp(110px, 18vw, 138px));
        padding-right: var(--space-3);
        padding-bottom: clamp(48px, 8vw, 72px);
        padding-left: var(--space-3);
    }

    .section--hero > .container {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    .section--hero .hero__wrapper,
    .section--hero > .container > .grid--2 {
        grid-template-columns: 1fr !important;
        gap: clamp(24px, 5vw, 48px);
        align-items: center;
    }

    .section--hero .hero__content {
        width: 100%;
        text-align: center;
        padding-top: 0;
    }

    .section--hero .hero__image {
        order: 0;
        width: 100%;
        margin: 0 auto;
    }

    .section--hero .hero__graphic-img,
    .section--hero .floating svg {
        width: min(100%, 420px);
        max-width: 100%;
        height: auto;
        margin-inline: auto;
    }

    .section--hero .hero__buttons,
    .section--hero .flex--wrap {
        width: 100%;
        justify-content: center;
        align-items: stretch;
    }

    .section--hero .hero__buttons .btn,
    .section--hero .flex--wrap .btn {
        flex: 1 1 220px;
        min-width: 0;
    }
}

/* Tablet/mobile: long copy gets breathing room rather than being clipped. */
@media (max-width: 767.98px) {
    .section--hero {
        padding-top: calc(var(--navbar-height-mobile) + 150px) !important;
        padding-bottom: 64px;
    }

    .section--hero h1,
    .section--hero .section__title {
        font-size: clamp(1.85rem, 7vw, 2.5rem);
        line-height: 1.2;
    }

    .section--hero .hero__description,
    .section--hero .section__description {
        font-size: clamp(0.98rem, 3.8vw, 1.12rem);
        line-height: 1.65;
    }

    .section--hero .hero__buttons .btn,
    .section--hero .flex--wrap .btn {
        width: 100%;
        flex-basis: 100%;
    }

    /* Prevent decoration from creating a cramped content area. */
    .section--hero .hero__background {
        pointer-events: none;
    }

    /* Founder section: portrait and copy stack cleanly on smaller screens. */
    #founder .grid--2 {
        grid-template-columns: 1fr !important;
        gap: var(--space-6);
    }

    #founder .card {
        width: 100%;
        box-sizing: border-box;
    }

    #founder .founder__portrait {
        width: clamp(110px, 34vw, 150px) !important;
        height: clamp(110px, 34vw, 150px) !important;
        max-width: 100%;
    }

    #founder .founder__portrait-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* General responsive buttons on small screens. */
    .btn,
    .admin-btn {
        max-width: 100%;
        min-height: 44px;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
        box-sizing: border-box;
    }

    .btn {
        text-align: center;
    }
}

@media (max-width: 479.98px) {
    .navbar__container {
        padding-inline: var(--space-3);
    }

    .navbar__logo .logo-image,
    .navbar__logo .logo-container img {
        width: 72px;
        height: 72px;
    }

    .navbar__menu {
        width: min(88vw, 320px);
        padding-inline: var(--space-4);
    }

    .section--hero {
        padding-top: calc(var(--navbar-height-mobile) + 120px) !important;
        padding-bottom: 56px;
    }

    .section--hero h1,
    .section--hero .section__title {
        font-size: clamp(1.7rem, 8vw, 2.1rem);
    }

    .section--hero .hero__description,
    .section--hero .section__description {
        font-size: 0.98rem;
    }
}

@media (width: 447px) and (height: 809px) {
    .section--hero {
        padding-top: calc(var(--navbar-height-mobile) + 170px) !important;
    }
}

/* Admin: buttons, action groups, forms and content must not overflow on phones. */
@media (max-width: 767.98px) {
    .admin-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .admin-header {
        width: 100%;
        min-width: 0;
    }

    .admin-header > *,
    .admin-header .admin-btn,
    .admin-header .btn {
        max-width: 100%;
    }

    .admin-btn {
        margin-right: 0;
        margin-bottom: var(--space-2);
        padding: var(--space-3) var(--space-4);
        min-height: 44px;
    }

    .admin-table td .admin-btn,
    .admin-table td .btn {
        display: inline-flex;
        max-width: 100%;
        margin: 0 var(--space-2) var(--space-2) 0;
        white-space: normal;
    }

    .admin-table td:has(.admin-btn),
    .admin-table td:has(.btn) {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        align-items: flex-start;
    }

    .admin-table td:has(.admin-btn) .admin-btn,
    .admin-table td:has(.btn) .btn {
        margin: 0;
        flex: 1 1 130px;
    }

    .admin-modal {
        padding: var(--space-3);
        box-sizing: border-box;
    }

    .admin-modal-content {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        box-sizing: border-box;
    }

    .admin-form-group,
    .admin-form-group input,
    .admin-form-group textarea,
    .admin-form-group select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* ============================================
   FINAL CONTENT-FIRST RESPONSIVE PASS
   Keep the approved AGHA design; only improve
   layout, readability, and available space.
   ============================================ */

/* Public non-home heroes: let content determine height instead of clipping. */
.hero--responsive {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: max(460px, calc(100vh - var(--navbar-height)));
    padding-top: clamp(118px, 13vh, 168px);
    padding-bottom: clamp(72px, 8vh, 104px);
    overflow: visible;
}

.hero--responsive > .container,
.hero--responsive .container--content {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.hero--responsive .hero__content,
.hero--responsive .section__title,
.hero--responsive h1,
.hero--responsive h2,
.hero--responsive p {
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.hero--responsive .hero__content {
    width: 100%;
    margin-inline: auto;
    padding-top: 0;
}

.hero--responsive .hero__content > h1,
.hero--responsive .hero__content > .section__title {
    margin-top: 0;
    margin-bottom: clamp(18px, 2vw, 28px);
    line-height: 1.18;
}

.hero--responsive .hero__content > p,
.hero--responsive .hero__description,
.hero--responsive .section__description {
    line-height: 1.65;
    margin-left: auto;
    margin-right: auto;
}

/* Two-column hero variants (partnerships / marketplace / volunteer). */
.hero--responsive .grid--2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    width: 100%;
}

.hero--responsive .grid--2 > * {
    min-width: 0;
}

.hero--responsive .floating,
.hero--responsive .floating svg {
    max-width: 100%;
}

.hero--responsive .floating svg {
    width: min(500px, 100%);
    height: auto;
    display: block;
    margin-inline: auto;
}

.hero--responsive .flex--wrap {
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
}

.hero--responsive .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

/* Keep non-home hero reveals visible and stable; their existing reveal system
   still controls the rest of the page. This prevents important hero copy from
   starting outside the viewport while waiting for scroll intersection. */
.hero--responsive .reveal {
    min-width: 0;
}

/* General responsive safety for the public site. */
img,
svg,
video,
canvas {
    max-width: 100%;
}

.container,
.container--content {
    min-width: 0;
}

.grid > *,
.flex > * {
    min-width: 0;
}

button,
.btn,
input,
select,
textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* Buttons should wrap instead of forcing page width. */
.btn {
    overflow-wrap: anywhere;
}

/* Founder portrait stays proportional and fully contained. */
#founder .founder__portrait {
    width: clamp(150px, 28vw, 220px) !important;
    height: clamp(150px, 28vw, 220px) !important;
    max-width: 100%;
    overflow: hidden;
    flex: 0 0 auto;
}

#founder .founder__portrait-image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* ---------------- Mobile / small tablet ---------------- */
@media (max-width: 1023.98px) {
    .hero--responsive {
        min-height: auto;
        padding-top: clamp(108px, 16vw, 140px);
        padding-right: 0;
        padding-bottom: clamp(72px, 12vw, 96px);
        padding-left: 0;
    }

    .hero--responsive > .container,
    .hero--responsive .container--content {
        padding-inline: clamp(16px, 4vw, 32px);
    }

    .hero--responsive .grid--2 {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(32px, 7vw, 56px);
    }

    .hero--responsive .grid--2 > :first-child {
        width: 100%;
    }

    .hero--responsive .grid--2 > :last-child {
        width: 100%;
    }

    .hero--responsive .hero__content,
    .hero--responsive .grid--2 > :first-child {
        text-align: center;
    }

    .hero--responsive h1,
    .hero--responsive .section__title {
        font-size: clamp(2rem, 8vw, 2.75rem);
        line-height: 1.18;
    }

    .hero--responsive .hero__content > p,
    .hero--responsive .hero__description,
    .hero--responsive .section__description {
        font-size: clamp(1rem, 3.2vw, 1.125rem);
        line-height: 1.65;
    }

    .hero--responsive .hero__buttons,
    .hero--responsive .flex--wrap {
        width: 100%;
        justify-content: center;
        align-items: stretch;
    }

    .hero--responsive .hero__buttons .btn,
    .hero--responsive .flex--wrap .btn {
        flex: 1 1 240px;
        min-width: min(240px, 100%);
        max-width: 100%;
    }

    #founder .grid--2 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #founder .founder__portrait {
        width: clamp(150px, 38vw, 190px) !important;
        height: clamp(150px, 38vw, 190px) !important;
    }

    /* Public content sections: prevent narrow cards and controls from overflowing. */
    .section .container,
    .section .container--content {
        min-width: 0;
    }

    .grid--12,
    .grid--6,
    .grid--4,
    .grid--3,
    .grid--2 {
        min-width: 0;
    }

    .card {
        min-width: 0;
        max-width: 100%;
    }

    .form__group,
    .form__input,
    .form__textarea,
    .form__select {
        min-width: 0;
        width: 100%;
    }
}

/* ---------------- Phones ---------------- */
@media (max-width: 600px) {
    .hero--responsive {
        padding-top: clamp(104px, 19vw, 132px);
        padding-bottom: clamp(72px, 14vw, 92px);
    }

    .hero--responsive > .container,
    .hero--responsive .container--content {
        padding-inline: 18px;
    }

    .hero--responsive h1,
    .hero--responsive .section__title {
        font-size: clamp(1.85rem, 9vw, 2.35rem);
        line-height: 1.2;
        letter-spacing: -0.025em;
    }

    .hero--responsive .hero__content > p,
    .hero--responsive .hero__description,
    .hero--responsive .section__description {
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero--responsive .hero__buttons,
    .hero--responsive .flex--wrap {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .hero--responsive .hero__buttons .btn,
    .hero--responsive .flex--wrap .btn,
    .hero--responsive .btn {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        min-height: 48px;
        padding: var(--space-3) var(--space-4);
    }

    /* Founder card: comfortable portrait + readable text. */
    #founder .card {
        padding: var(--space-4) !important;
    }

    #founder .founder__portrait {
        width: clamp(140px, 45vw, 180px) !important;
        height: clamp(140px, 45vw, 180px) !important;
        margin-bottom: var(--space-4);
    }

    #founder h3 {
        font-size: clamp(1.05rem, 5vw, 1.35rem);
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    /* General mobile button safety for every public page. */
    .btn,
    button {
        min-height: 48px;
        max-width: 100%;
        white-space: normal;
    }

    .section__header {
        max-width: 100%;
        min-width: 0;
    }

    .section__title,
    .section__description,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* Very small phones: add vertical breathing room instead of shrinking copy. */
@media (max-width: 380px) {
    .hero--responsive {
        padding-top: 104px;
        padding-bottom: 80px;
    }

    .hero--responsive > .container,
    .hero--responsive .container--content {
        padding-inline: 16px;
    }

    .hero--responsive h1,
    .hero--responsive .section__title {
        font-size: clamp(1.75rem, 9.5vw, 2.1rem);
    }

    .hero--responsive .hero__description,
    .hero--responsive .section__description {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .hero--responsive .btn {
        min-height: 50px;
    }
}

/* Admin responsive pass: keep controls usable without changing their design. */
@media (max-width: 767.98px) {
    .admin-content,
    .admin-main,
    .admin-header,
    .admin-section,
    .admin-card,
    .admin-table-container,
    .admin-modal-content {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .admin-header {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .admin-header .admin-actions,
    .admin-header .actions,
    .admin-header .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        width: 100%;
    }

    .admin-header .admin-btn,
    .admin-header .btn,
    .admin-btn,
    .admin-actions .admin-btn,
    .admin-actions .btn {
        min-height: 48px;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .admin-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        min-width: 620px;
    }

    .admin-table td,
    .admin-table th {
        vertical-align: top;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .admin-table td:has(.admin-btn),
    .admin-table td:has(.btn) {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        align-items: flex-start;
    }

    .admin-table td:has(.admin-btn) .admin-btn,
    .admin-table td:has(.btn) .btn {
        flex: 1 1 120px;
        min-width: 100px;
        margin: 0;
    }

    .admin-modal {
        padding: 12px;
    }

    .admin-modal-content {
        width: 100%;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .admin-modal-content form,
    .admin-form {
        min-width: 0;
    }

    .admin-form-actions,
    .admin-modal-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .admin-form-actions .admin-btn,
    .admin-form-actions .btn,
    .admin-modal-actions .admin-btn,
    .admin-modal-actions .btn {
        flex: 1 1 140px;
        min-width: 120px;
    }
}

@media (max-width: 420px) {
    .admin-form-actions,
    .admin-modal-actions {
        flex-direction: column;
    }

    .admin-form-actions .admin-btn,
    .admin-form-actions .btn,
    .admin-modal-actions .admin-btn,
    .admin-modal-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ============================================
   PRECISION RESPONSIVE PASS
   Content must remain fully visible at every size.
   Existing AGHA visual design is preserved.
   ============================================ */

/* Never let the document establish a minimum width larger than the viewport. */
html,
body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Keep common layout children shrinkable. */
.container,
.container--content,
.section,
.grid,
.flex,
.grid > *,
.flex > *,
.card,
.hero__content,
.hero__wrapper,
.form,
.form__group {
    min-width: 0;
    box-sizing: border-box;
}

/* Public copy: never clip meaningful text or force it into one line. */
.section__title,
.section__description,
.card__title,
.card__description,
.form__label,
.form__error,
.hero__content,
.hero__content h1,
.hero__content h2,
.hero__content p,
main p,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    max-width: 100%;
    height: auto;
    max-height: none;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Long links/URLs can break safely inside their container. */
main a,
footer a,
.navbar a {
    overflow-wrap: anywhere;
}

/* Hero content itself is always allowed to grow with the text. */
.hero--responsive {
    height: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

.hero--responsive .hero__content {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

.hero--responsive .hero__content h1,
.hero--responsive .hero__content .section__title {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 0 !important;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    text-wrap: balance;
}

.hero--responsive .hero__content > p,
.hero--responsive .hero__description,
.hero--responsive .section__description {
    width: 100%;
    max-width: min(700px, 100%);
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.hero--responsive .hero__buttons,
.hero--responsive .flex--wrap {
    max-width: 100%;
    min-width: 0;
}

.hero--responsive .hero__buttons .btn,
.hero--responsive .flex--wrap .btn {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Images and media never exceed their containing block. */
main img,
main svg,
main video,
main canvas,
footer img,
footer svg {
    max-width: 100%;
}

/* Keep founder portrait fully visible without changing its intended appearance. */
#founder .founder__portrait {
    width: min(220px, 100%) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    margin-right: auto;
    margin-left: auto;
}

#founder .founder__portrait-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Prevent flex children from forcing their parents wider than the viewport. */
.flex,
.flex--wrap,
.hero__buttons,
.navbar__container {
    min-width: 0;
}

/* -------------------- Tablet and below -------------------- */
@media (max-width: 1023.98px) {
    .hero--responsive {
        display: block;
        width: 100%;
        padding-top: clamp(280px, 40vw, 420px);
        padding-right: 0;
        padding-bottom: clamp(72px, 11vw, 104px);
        padding-left: 0;
    }

    .hero--responsive > .container,
    .hero--responsive .container--content {
        width: 100%;
        max-width: 100%;
        padding-right: clamp(16px, 4vw, 32px);
        padding-left: clamp(16px, 4vw, 32px);
        margin-right: auto;
        margin-left: auto;
    }

    .hero--responsive .hero__content,
    .hero--responsive .grid--2 > :first-child,
    .hero--responsive .grid--2 > :last-child {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .hero--responsive .grid--2 {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: clamp(32px, 7vw, 56px);
        align-items: center;
    }

    .hero--responsive .hero__image,
    .hero--responsive .floating,
    .hero--responsive .floating svg,
    .hero--responsive .hero__graphic-img {
        width: 100%;
        max-width: 420px;
        margin-right: auto;
        margin-left: auto;
    }

    .hero--responsive .hero__content > h1,
    .hero--responsive .hero__content > .section__title {
        text-align: center;
    }

    .hero--responsive .hero__buttons,
    .hero--responsive .flex--wrap {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        align-items: stretch;
        margin-right: auto;
        margin-left: auto;
    }

    /* All non-text buttons may wrap without changing their visual treatment. */
    .section .btn:not(.btn--text),
    .section button:not(.lang-btn):not(.theme-toggle),
    main .btn:not(.btn--text) {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        line-height: 1.35;
    }

    /* Common content grids become naturally stackable instead of overflowing. */
    .grid--2,
    .grid--3,
    .grid--4,
    .grid--6,
    .grid--12 {
        min-width: 0;
    }

    .card,
    .card__content,
    .card__body {
        min-width: 0;
        max-width: 100%;
    }

    /* Forms stay inside their columns. */
    .form,
    .form__group,
    .form__input,
    .form__textarea,
    .form__select,
    select,
    textarea,
    input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* -------------------- Phones -------------------- */
@media (max-width: 600px) {
    .section,
    main,
    footer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .container,
    .container--content {
        padding-right: 16px;
        padding-left: 16px;
    }

    .hero--responsive {
        padding-top: clamp(200px, 40vw, 280px);
        padding-bottom: clamp(72px, 15vw, 104px);
    }

    .hero--responsive h1,
    .hero--responsive .section__title {
        width: 100%;
        max-width: 100%;
        font-size: clamp(1.8rem, 8vw, 2.35rem);
        line-height: 1.22;
        letter-spacing: -0.02em;
        text-align: center;
        text-wrap: balance;
    }

    .hero--responsive .hero__description,
    .hero--responsive .section__description,
    .hero--responsive .hero__content > p {
        width: 100%;
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.7;
        text-align: center;
    }

    .hero--responsive .hero__buttons,
    .hero--responsive .flex--wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: var(--space-2);
        align-items: stretch;
    }

    .hero--responsive .hero__buttons .btn,
    .hero--responsive .flex--wrap .btn,
    .hero--responsive .btn:not(.btn--text) {
        display: flex;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 48px;
        padding-right: var(--space-3);
        padding-left: var(--space-3);
        white-space: normal;
        overflow-wrap: break-word;
        justify-content: center;
        text-align: center;
    }

    /* General buttons elsewhere on the public site wrap or stack cleanly. */
    .section .flex--wrap {
        min-width: 0;
        width: 100%;
    }

    .section .flex--wrap > .btn:not(.btn--text) {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    /* Text-heavy content should never create a horizontal scrollbar. */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    li,
    td,
    th,
    label {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* Founder section remains stacked and readable. */
    #founder .grid--2 {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--space-6);
    }

    #founder .founder__portrait {
        width: min(180px, 60vw) !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }

    #founder .card {
        width: 100%;
        max-width: 100%;
        padding-right: var(--space-4) !important;
        padding-left: var(--space-4) !important;
    }

    /* Newsletter/form rows and action groups stack rather than overflow. */
    .form__group,
    .form,
    .form__input,
    .form__textarea,
    .form__select,
    .form__group > * {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Keep inline icon/text controls contained. */
    .btn svg,
    button svg {
        flex: 0 0 auto;
        max-width: 20px;
    }
}

/* -------------------- Very small phones -------------------- */
@media (max-width: 380px) {
    .container,
    .container--content {
        padding-right: 14px;
        padding-left: 14px;
    }

    .hero--responsive {
        padding-top: 280px;
        padding-bottom: 88px;
    }

    .hero--responsive h1,
    .hero--responsive .section__title {
        font-size: clamp(1.7rem, 8.8vw, 2.05rem);
        line-height: 1.24;
    }

    .hero--responsive .hero__description,
    .hero--responsive .section__description,
    .hero--responsive .hero__content > p {
        font-size: 0.96rem;
        line-height: 1.72;
    }

    .hero--responsive .btn:not(.btn--text) {
        min-height: 50px;
        padding-right: 14px;
        padding-left: 14px;
    }
}

/* Prevent accidental page-level horizontal overflow without clipping content. */
@media (max-width: 767.98px) {
    .navbar,
    .navbar__container,
    .main,
    main,
    .section,
    footer {
        max-width: 100%;
    }

    /* A local scroll container is preferable to forcing the entire page wide. */
    .table-responsive,
    .table-container,
    .admin-table-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   FINAL HERO VISIBILITY + CENTERING PASS
   Only affects non-home responsive heroes.
   Keeps content below the fixed navbar and gives
   long hero copy enough vertical room at every width.
   ============================================ */
.hero--responsive {
    box-sizing: border-box;
    min-height: auto;
    padding-top: clamp(190px, 22vh, 250px);
    padding-bottom: clamp(72px, 9vh, 112px);
    overflow: visible;
}

.hero--responsive > .container,
.hero--responsive .container--content {
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
}

/* Keep every responsive hero copy block centered and fully readable. */
.hero--responsive .hero__content,
.hero--responsive .grid--2 > :first-child {
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    text-align: center;
}

.hero--responsive h1,
.hero--responsive .section__title,
.hero--responsive .section__subtitle,
.hero--responsive p,
.hero--responsive .hero__description,
.hero--responsive .section__description {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.hero--responsive h1,
.hero--responsive .section__title {
    line-height: 1.22;
    text-align: center;
}

.hero--responsive .hero__description,
.hero--responsive .section__description {
    line-height: 1.68;
    text-align: center;
}

/* Keep hero copy centered at every width while allowing the layout to grow naturally. */
.hero--responsive .hero__content > .section__subtitle,
.hero--responsive .grid--2 > :first-child > .section__subtitle,
.hero--responsive .grid--2 > :first-child > h1,
.hero--responsive .grid--2 > :first-child > .section__title,
.hero--responsive .grid--2 > :first-child > p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.hero--responsive .hero__buttons,
.hero--responsive .grid--2 > :first-child > .flex--wrap {
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-inline: auto;
}

.hero--responsive .btn {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    text-align: center;
}

@media (max-width: 1023.98px) {
    .hero--responsive {
        min-height: auto;
        padding-top: clamp(190px, 22vh, 240px);
        padding-bottom: clamp(76px, 10vh, 104px);
    }

    .hero--responsive .grid--2 {
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
    }

    .hero--responsive .grid--2 > :first-child,
    .hero--responsive .grid--2 > :last-child {
        width: 100%;
        max-width: 100%;
    }

    .hero--responsive h1,
    .hero--responsive .section__title {
        font-size: clamp(1.95rem, 7.4vw, 2.65rem);
        line-height: 1.22;
    }

    .hero--responsive .hero__description,
    .hero--responsive .section__description {
        font-size: clamp(1rem, 3.5vw, 1.125rem);
        line-height: 1.7;
    }

    .hero--responsive .hero__buttons .btn,
    .hero--responsive .flex--wrap .btn {
        flex: 1 1 240px;
        min-width: min(240px, 100%);
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .hero--responsive {
        padding-top: clamp(180px, 23vh, 220px);
        padding-bottom: clamp(72px, 12vh, 96px);
    }

    .hero--responsive > .container,
    .hero--responsive .container--content {
        padding-inline: clamp(16px, 5vw, 24px);
    }

    .hero--responsive h1,
    .hero--responsive .section__title {
        font-size: clamp(1.8rem, 8.8vw, 2.3rem);
        line-height: 1.24;
    }

    .hero--responsive .hero__description,
    .hero--responsive .section__description {
        font-size: 1rem;
        line-height: 1.72;
    }

    .hero--responsive .hero__buttons,
    .hero--responsive .flex--wrap {
        flex-direction: column;
        width: 100%;
        gap: var(--space-3);
    }

    .hero--responsive .hero__buttons .btn,
    .hero--responsive .flex--wrap .btn,
    .hero--responsive .btn {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 0 1 auto;
        min-height: 48px;
        padding-inline: var(--space-4);
    }
}

@media (max-width: 380px) {
    .hero--responsive {
        padding-top: 185px;
        padding-bottom: 88px;
    }

    .hero--responsive h1,
    .hero--responsive .section__title {
        font-size: clamp(1.7rem, 9vw, 2.05rem);
        line-height: 1.25;
    }

    .hero--responsive .hero__description,
    .hero--responsive .section__description {
        font-size: 0.96rem;
        line-height: 1.75;
    }
}

/* FINAL SMALL-SCREEN HERO POSITIONING
   Keep desktop/tablet appearance unchanged. On phones, move non-home hero
   content farther below the mobile navbar so every heading starts fully visible.
*/
@media (max-width: 600px) {
    .hero--responsive {
        padding-top: 350px;
    }
}

@media (max-width: 380px) {
    .hero--responsive {
        padding-top: 420px;
    }
}