/* ==========================================================
   RESPONSIVE - loaded last, overrides all other stylesheets
   Breakpoints: 1024 (tablet) / 768 (touch) / 480 (phone) / 320 (small phone)
   ========================================================== */

/* ----------------------------------------------------------
   TABLET  (max-width: 1024px)
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Grids collapse to 2-col or 1-col */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .help-card {
        padding: var(--space-xl);
    }

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

    .about-features {
        grid-template-columns: 1fr;
    }

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

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

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

    .contact-info-wrap {
        position: static;
    }

    .pet-detail {
        grid-template-columns: 1fr;
    }

}

/* ----------------------------------------------------------
   TOUCH / MOBILE MENU  (max-width: 768px)
   ---------------------------------------------------------- */
@media (max-width: 768px) {

    /* --- Mobile navigation --- */
    .nav-desktop {
        display: none;
    }

    .mobile-menu {
        display: block;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        cursor: pointer;
        list-style: none;
        -webkit-tap-highlight-color: transparent;
    }

    .hamburger::-webkit-details-marker {
        display: none;
    }

    .hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--color-text);
        border-radius: 2px;
        transition: all var(--transition-base);
    }

    .mobile-menu[open] .hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu[open] .hamburger span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu[open] .hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .nav-mobile {
        position: absolute;
        top: var(--header-height);
        right: 0;
        left: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        padding: var(--space-sm) var(--space-base);
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        z-index: 99;
    }

    .nav-mobile .nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: var(--space-sm) var(--space-base);
        border-radius: var(--radius-md);
    }

    .nav-mobile .nav-link::after {
        display: none;
    }

    .nav-mobile .nav-link:hover {
        background: var(--color-gray-50);
    }

    .nav-mobile .btn {
        margin-top: var(--space-sm);
        min-height: 44px;
    }

    /* --- Touch targets (44px minimum) --- */
    .btn {
        min-height: 44px;
        padding: 10px 20px;
    }

    .btn-sm {
        min-height: 40px;
        padding: 8px 16px;
    }

    .btn-xs {
        min-height: 36px;
        padding: 6px 12px;
    }

    .form-input,
    .form-select,
    .form-textarea,
    .filter-select,
    .filter-input {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 16px; /* prevents iOS auto-zoom on focus */
    }

    .checkbox-label {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* --- Spacing reductions --- */
    .section {
        padding: var(--space-3xl) 0;
    }

    .section-header {
        margin-bottom: var(--space-2xl);
    }

    .page-hero {
        padding: var(--space-3xl) 0 var(--space-2xl);
    }

    .hero {
        padding: var(--space-3xl) 0;
    }

    .site-footer {
        padding: var(--space-3xl) 0 var(--space-lg);
    }
}

/* ----------------------------------------------------------
   PHONE  (max-width: 480px)
   ---------------------------------------------------------- */
@media (max-width: 480px) {

    /* --- Font & spacing scale --- */
    :root {
        --font-size-5xl: 2.25rem;
        --font-size-4xl: 1.875rem;
        --font-size-3xl: 1.5rem;
    }

    .container {
        padding: 0 var(--space-base);
    }

    .section {
        padding: var(--space-2xl) 0;
    }

    .section-header {
        margin-bottom: var(--space-xl);
    }

    .page-hero {
        padding: var(--space-2xl) 0;
    }

    .hero {
        padding: var(--space-2xl) 0;
    }

    /* --- Hero --- */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-eyebrow {
        font-size: var(--font-size-xs);
    }

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

    .stat-card {
        padding: var(--space-md);
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .stat-icon svg {
        width: 18px;
        height: 18px;
    }

    .stat-number {
        font-size: var(--font-size-2xl);
    }

    /* --- Grids to single column --- */
    .help-grid {
        grid-template-columns: 1fr;
    }

    .help-card {
        padding: var(--space-lg);
    }

    .stories-grid-home {
        grid-template-columns: 1fr;
    }

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

    .included-list {
        grid-template-columns: 1fr;
    }

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

    /* --- Filter bar --- */
    .filter-bar {
        flex-direction: column;
    }

    .filter-group {
        min-width: 100%;
    }

    .filter-actions {
        width: 100%;
    }

    .filter-actions .btn {
        flex: 1;
    }

    /* --- Pet detail --- */
    .pet-detail-cta {
        flex-direction: column;
    }

    .pet-detail-facts {
        grid-template-columns: 1fr;
    }

    .pet-detail-description {
        padding: var(--space-lg);
    }

    /* --- CTA --- */
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* --- Footer --- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .site-footer {
        padding: var(--space-2xl) 0 var(--space-base);
    }

    /* --- Donate --- */
    .impact-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* --- Forms --- */
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    /* --- About --- */
    .about-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .about-cta {
        padding: var(--space-xl);
    }

}

/* ----------------------------------------------------------
   SMALL PHONE  (max-width: 320px)
   ---------------------------------------------------------- */
@media (max-width: 320px) {
    :root {
        --font-size-5xl: 1.625rem;
        --font-size-4xl: 1.375rem;
        --font-size-3xl: 1.25rem;
    }

    .container {
        padding: 0 var(--space-sm);
    }

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

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

    .pet-card-body {
        padding: var(--space-base);
    }

    .filter-bar {
        padding: var(--space-base);
    }

    .help-card {
        padding: var(--space-base);
    }

    .story-card {
        padding: var(--space-base);
    }

    .btn-lg {
        padding: 12px 20px;
        font-size: var(--font-size-sm);
    }

}