/* SASSUK responsive layout rules */

@media (max-width: 1180px) {
    .feature-grid,
    .service-grid,
    .event-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-registration__panel {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
        gap: var(--space-8);
    }

    .community {
        grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.75fr);
    }

    .donation-shell {
        grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    }
}

@media (max-width: 1024px) {
    .hero {
        min-height: 500px;
    }

    .hero-content {
        max-width: 670px;
        margin-inline: 0;
    }

    .event-registration__panel,
    .community,
    .two-column,
    .contact-layout,
    .donation-hero,
    .donation-shell {
        grid-template-columns: 1fr;
    }

    .event-registration__visual {
        width: min(100%, 560px);
        justify-self: center;
    }

    .mission-card,
    .donate-card {
        min-height: auto;
    }

    .donate-image {
        min-height: 70px;
    }

    .text-block {
        max-width: none;
    }

    .contact-shloka-panel {
        min-height: 440px;
    }

    .impact-panel {
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        max-width: 760px;
        text-align: left;
    }

    .donation-sidebar {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
        align-items: start;
    }

    .footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand {
        justify-self: end;
    }
}

@media (max-width: 860px) {
    .brand-bar {
        min-height: 92px;
        justify-content: space-between;
    }

    .brand-logo {
        width: 64px;
        height: 64px;
    }

    .site-title {
        font-size: clamp(1.4rem, 3.4vw, 2rem);
    }

    .navbar {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .navbar a {
        flex: 0 0 auto;
        padding-inline: var(--space-4);
    }

    .hero {
        width: 100%;
        margin-top: 0;
    }

    .hero-content {
        margin-inline: 0;
        padding: 0;
    }

    .event-registration,
    .community {
        width: calc(100% - 1.5rem);
    }

    .subpage-hero,
    .donation-hero {
        padding-inline: var(--space-10);
    }

    .content-section,
    .donation-page {
        padding-inline: var(--space-10);
    }

    .search-layout {
        grid-template-columns: 1fr;
    }

    .donation-form-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .trust-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .brand-bar {
        min-height: 82px;
        padding: var(--space-3) var(--space-4);
    }

    .brand {
        gap: var(--space-3);
    }

    .brand-logo {
        width: 56px;
        height: 56px;
    }

    .brand .site-title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .brand::after {
        content: "SASSUK";
        color: #fff5df;
        font-family: "Samarkan", Georgia, serif;
        font-size: 1.45rem;
        letter-spacing: 0.04em;
    }

    .menu-toggle {
        display: flex;
    }

    .navbar {
        display: none;
        width: calc(100% - 1.5rem);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        margin: var(--space-3) auto;
        overflow: visible;
        padding: var(--space-2);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-top: 3px solid var(--saffron-500);
        border-radius: var(--radius-md);
        background: linear-gradient(135deg, var(--saffron-600), var(--saffron-700) 58%, var(--accent-700));
        box-shadow: var(--shadow-md);
    }

    .navbar.is-open {
        display: flex;
        animation: mobile-menu-enter 220ms var(--ease-out) both;
    }

    .navbar a,
    .navbar a[href="donations.html"] {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
        margin: 0;
        padding-inline: var(--space-4);
        border-radius: var(--radius-sm);
        font-size: var(--text-sm);
    }

    .navbar a::after {
        top: 10px;
        right: auto;
        bottom: 10px;
        left: 0;
        width: 3px;
        height: auto;
        transform: scaleY(0);
    }

    .navbar a:hover::after,
    .navbar a:focus-visible::after,
    .navbar a.active::after {
        transform: scaleY(1);
    }

    .hero {
        min-height: min(70vh, 560px);
        justify-items: center;
        padding: 42px 18px 56px;
        border-radius: 0;
    }

    .hero::before {
        background:
            linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.12) 43%, rgba(0, 0, 0, 0.5) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.14) 100%);
    }

    .hero-image {
        object-position: center center;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        justify-items: center;
        align-self: center;
        margin: 0;
        padding: 0 2px;
        border-radius: 0;
        text-align: center;
    }

    .hero h1 {
        max-width: 680px;
        font-size: clamp(1.7rem, 7.2vw, 2.35rem);
    }

    .hero-content p {
        font-size: var(--text-base);
    }

    .slider-dots {
        display: none;
    }

    .event-registration {
        margin-block: var(--space-10);
    }

    .event-registration__panel {
        gap: var(--space-8);
        padding: var(--space-6);
        border-radius: var(--radius-lg);
    }

    .event-registration__markers,
    .feature-grid,
    .service-grid,
    .event-showcase,
    .field-grid,
    .donation-sidebar {
        grid-template-columns: 1fr;
    }

    .community {
        gap: var(--space-5);
        margin-bottom: var(--space-12);
    }

    .mission-card,
    .donate-card {
        padding: var(--space-6);
        border-radius: var(--radius-lg);
    }

    .mission-copy {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .mission-mark {
        width: 84px;
        height: 84px;
    }

    .subpage-hero {
        min-height: 350px;
    }

    .subpage-hero,
    .donation-hero,
    .content-section,
    .donation-page {
        padding: var(--space-12) var(--space-4);
    }

    .subpage-hero h1,
    .donation-hero h1 {
        font-size: clamp(2.25rem, 10vw, 3.5rem);
    }

    .subpage-hero p,
    .donation-hero-copy p {
        font-size: var(--text-base);
    }

    .section-heading {
        margin-bottom: var(--space-8);
    }

    .text-card,
    .feature-card,
    .service-card,
    .event-tile,
    .search-card,
    .support-card {
        padding: var(--space-6);
        border-radius: var(--radius-lg);
    }

    .feature-card,
    .event-tile,
    .service-card {
        min-height: auto;
    }

    .contact-card,
    .donation-form {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .contact-shloka-panel {
        min-height: 370px;
        padding: var(--space-8);
        border-radius: var(--radius-lg);
    }

    .impact-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: var(--space-6);
        text-align: center;
    }

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

    .donation-submit,
    .contact-form button,
    .search-form button {
        width: 100%;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--space-6);
        padding-block: var(--space-8);
        text-align: center;
    }

    .footer-contact,
    .footer-brand {
        justify-self: center;
    }

    .status-card,
    .payment-card {
        padding: var(--space-8) var(--space-5);
        border-radius: var(--radius-lg);
    }
}

@media (min-width: 1025px) and (max-height: 850px) {
    .contact-card,
    .donation-form {
        gap: var(--space-3);
        padding: var(--space-5) var(--space-6);
    }

    .contact-card-heading,
    .amount-section,
    .amount-heading {
        gap: var(--space-2);
        margin-bottom: 0;
    }

    .contact-form .field,
    .donation-form .field {
        gap: var(--space-1);
    }

    .contact-form .field input,
    .contact-form .field select,
    .donation-form .field input,
    .donation-form .field select {
        min-height: 46px;
    }

    .contact-form .field textarea {
        min-height: 96px;
    }

    .contact-shloka-panel {
        min-height: 500px;
    }

    .donation-form-header {
        padding-bottom: var(--space-3);
    }

    .donation-form-header h2 {
        margin-top: var(--space-2);
    }

    .amount-grid {
        gap: var(--space-2);
    }

    .amount-option,
    .donation-submit {
        min-height: 50px;
    }
}

@media (max-width: 480px) {
    .hero {
        width: 100%;
        min-height: 520px;
        margin-top: 0;
        padding: 34px 14px 46px;
        border-radius: 0;
    }

    .hero-content {
        gap: var(--space-4);
        margin: 0;
        padding: 0 2px;
        border-radius: 0;
    }

    .hero h1 {
        font-size: clamp(1.5rem, 8vw, 1.95rem);
    }

    .hero .join-button {
        width: min(100%, 280px);
    }

    .event-registration,
    .community {
        width: calc(100% - 1rem);
    }

    .event-registration__panel,
    .mission-card,
    .donate-card {
        padding: var(--space-5);
    }

    .subpage-hero,
    .donation-hero,
    .content-section,
    .donation-page {
        padding-inline: var(--space-4);
    }

    .subpage-hero h1,
    .donation-hero h1 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .amount-grid {
        gap: var(--space-2);
    }

    .amount-option {
        min-height: 56px;
    }

    .field input,
    .field select,
    .field textarea,
    .search-form input {
        font-size: 16px;
    }

    .support-list li {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: var(--space-3);
    }

    .support-list li > span {
        width: 34px;
        height: 34px;
    }

    .actions,
    .payment-actions {
        flex-direction: column;
    }

    .actions a,
    .payment-actions a {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .recaptcha-widget {
        width: 125%;
        margin-bottom: -16px;
        transform: scale(0.8);
    }
}

@keyframes mobile-menu-enter {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}