/* css/Views/Support/support-responsive.css */
/* =============================================================================
   DONATION SUPPORT PAGE - RESPONSIVE STYLES
   Path: /css/views/donation/support-responsive.css
   
   Purpose: All media queries, breakpoint-specific overrides
   Dependencies: 
   - /css/_shared/_typography.css (load first)
   - /css/views/donation/support-base.css (load second)
   - /css/views/donation/support-theme.css (load third)
   
   DO NOT include:
   - Any styles outside of @media queries
   ========================================================================== */

/* =============================================================================
   DESKTOP - Default (no media query needed)
   Header donate button hidden on desktop
   ========================================================================== */

/* Hide donate button on desktop - form is always visible */
.header-donate-btn {
    display: none;
}

/* Hide horizontal marquee on desktop - vertical feed in sidebar instead */
.donation-marquee {
    display: none;
}

/* =============================================================================
   LARGE TABLETS / SMALL LAPTOPS (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .donation-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .donation-sidebar {
        position: static;
    }

    /* Hide vertical donation feed when sidebar stacks */
    .donation-feed {
        display: none;
    }
}

/* =============================================================================
   TABLETS (max-width: 768px)
   ========================================================================== */

@media (max-width: 767.98px) {
    .donation-container {
        padding: 1rem;
    }

    /* -------------------------------------------------------------------------
       Header
       ------------------------------------------------------------------------- */

    .header-content {
        padding: 1.5rem 1.25rem;
        grid-template-columns: 120px 1fr auto;
        gap: 1rem;
    }

    .org-logo {
        width: 100px;
        height: 100px;
    }

    .event-title {
        font-size: var(--font-lg);
    }

    .header-center .org-name {
        font-size: var(--font-sm);
    }

    /* Show donate button on mobile */
    .header-donate-btn {
        display: flex;
    }

    /* -------------------------------------------------------------------------
       Advocate Card
       ------------------------------------------------------------------------- */

    .advocate-photo {
        width: 120px;
        height: 120px;
    }

    .advocate-card h2 {
        font-size: var(--font-lg);
    }

    /* -------------------------------------------------------------------------
       Donation Form
       ------------------------------------------------------------------------- */

    .donation-form-card {
        padding: 1.5rem;
    }

        .donation-form-card h3 {
            font-size: var(--font-lg);
        }

    /* Amount Buttons - 2 columns */
    .amount-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Form rows stack on mobile */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Card field rows stack on mobile */
    .card-field-row {
        grid-template-columns: 1fr;
    }

    /* -------------------------------------------------------------------------
       CRITICAL: Keep inputs at 16px to prevent iOS zoom
       ------------------------------------------------------------------------- */

    input,
    textarea,
    select,
    .card-input,
    .custom-amount-input {
        font-size: 16px;
    }
}

/* =============================================================================
   SMALL MOBILE (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
    .donation-marquee {
        margin-bottom: 1rem;
        border-radius: var(--radius-sm);
    }

    .donation-container {
        padding: 0.75rem;
    }

    /* -------------------------------------------------------------------------
       Header - Stack vertically
       ------------------------------------------------------------------------- */

    .header-content {
        padding: 1.25rem 1rem;
        grid-template-columns: 1fr;
        text-align: center;
        row-gap: 0.75rem;
    }

    .header-left {
        justify-content: center;
    }

    .org-logo {
        width: 90px;
        height: 90px;
        margin: 0 auto;
    }

    .event-title {
        font-size: var(--font-md);
    }

    .header-center .org-name {
        font-size: var(--font-sm);
    }

    .header-right {
        justify-content: center;
    }

    .header-donate-btn {
        font-size: var(--font-xs);
        padding: 0.45rem 1rem;
    }

    /* -------------------------------------------------------------------------
       Advocate Card
       ------------------------------------------------------------------------- */

    .advocate-card {
        padding: 1.5rem;
    }

    .advocate-photo {
        width: 100px;
        height: 100px;
    }

    .advocate-card h2 {
        font-size: var(--font-md);
    }

    .placeholder-initials {
        font-size: var(--font-xl);
    }

    /* -------------------------------------------------------------------------
       Progress Card
       ------------------------------------------------------------------------- */

    .progress-card {
        padding: 1.5rem;
    }

    .amount-raised {
        font-size: var(--font-xl);
    }

    .progress-percentage {
        font-size: var(--font-lg);
    }

    /* -------------------------------------------------------------------------
       Donation Form
       ------------------------------------------------------------------------- */

    .donation-form-card {
        padding: 1.25rem;
    }

        .donation-form-card h3 {
            font-size: var(--font-md);
        }

    .form-subtitle {
        font-size: var(--font-sm);
    }

    /* Amount buttons */
    .amount-btn {
        padding: 0.75rem;
    }

        .amount-btn .amount {
            font-size: var(--font-base);
        }

    /* Form inputs */
    .form-group input,
    .form-group textarea {
        padding: 0.75rem 0.875rem;
    }

    /* Cover fees */
    .cover-fees-card {
        padding: 1rem;
    }

    .cover-fees-text strong {
        font-size: var(--font-sm);
    }

    .cover-fees-description {
        font-size: var(--font-xs);
    }

    /* Donate button */
    .btn-donate {
        font-size: var(--font-base);
        padding: 0.875rem 1.25rem;
    }

    /* -------------------------------------------------------------------------
       Success Modal
       ------------------------------------------------------------------------- */

    .success-modal {
        padding: 2rem;
    }

        .success-modal h2 {
            font-size: var(--font-lg);
        }

    .success-icon {
        width: 60px;
        height: 60px;
    }
}

/* =============================================================================
   EVENT CLOSED - Responsive (mirrors Account responsive breakpoints)
   ========================================================================== */

/* Tablet (768px - 991.98px) — stacked single column */
@media (min-width: 768px) and (max-width: 991.98px) {
    .closed-container {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
        max-width: 600px;
    }

    .closed-page .form-card.hero-card {
        min-height: 460px;
        border-radius: 1.25rem;
        padding: 2.25rem;
    }

    .closed-page .form-card.hero-card[style*="background-image"]::before {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.3) 100%);
    }

    .closed-page .form-card.closed-card {
        border-radius: 1.25rem;
    }

    .closed-page .hero-header {
        padding: 1.5rem 1.75rem;
    }

    .closed-page .hero-header h1 {
        font-size: 1.875rem;
    }
}

/* Mobile (< 768px) — hide hero card, full-width closed card */
@media (max-width: 767.98px) {
    .closed-page {
        padding: 0;
        min-height: 100dvh;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .closed-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 100dvh;
    }

    /* Hide hero card on mobile (same as Account page) */
    .closed-page .form-card.hero-card {
        display: none !important;
    }

    /* Closed card — full screen on mobile */
    .closed-page .form-card.closed-card {
        border-radius: 0;
        border: none;
        box-shadow: none;
        min-height: 100dvh;
        padding: 1.5rem 1.25rem;
    }
}

/* =============================================================================
   EXTRA SMALL MOBILE (max-width: 360px)
   ========================================================================== */

@media (max-width: 359px) {
    .donation-container {
        padding: 0.5rem;
    }

    /* Header */
    .header-content {
        padding: 1rem;
    }

    .org-logo {
        width: 80px;
        height: 80px;
    }

    .event-title {
        font-size: var(--font-base);
    }

    .header-donate-btn {
        padding: 0.375rem 0.75rem;
    }

    /* Advocate photo */
    .advocate-photo {
        width: 80px;
        height: 80px;
    }

    .placeholder-initials {
        font-size: var(--font-lg);
    }

    /* Progress */
    .amount-raised {
        font-size: var(--font-lg);
    }

    /* Form */
    .donation-form-card {
        padding: 1rem;
    }

        .donation-form-card h3 {
            font-size: var(--font-base);
        }

    /* Amount buttons tighter */
    .amount-buttons {
        gap: 0.5rem;
    }

    .amount-btn {
        padding: 0.625rem;
    }

        .amount-btn .amount {
            font-size: var(--font-sm);
        }

    /* -------------------------------------------------------------------------
       Absolute floor - never below 12px (var(--font-xs))
       ------------------------------------------------------------------------- */

    .section-label,
    .card-field-label,
    .cover-fees-description,
    .secure-notice,
    .field-error {
        font-size: var(--font-xs);
    }
}

/* =============================================================================
   LANDSCAPE PHONES
   ========================================================================== */

@media (max-width: 767.98px) and (orientation: landscape) {
    .header-donate-btn {
        display: flex;
        font-size: var(--font-xs);
        padding: 0.375rem 0.875rem;
    }

    .advocate-photo {
        width: 100px;
        height: 100px;
    }

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

    .donation-sidebar {
        position: static;
    }
}

/* =============================================================================
   TOUCH DEVICES
   ========================================================================== */

@media (pointer: coarse) {
    /* Ensure minimum 44px touch targets */
    .amount-btn {
        min-height: 44px;
    }

    .header-donate-btn {
        min-height: 44px;
    }

    .btn-donate {
        min-height: 48px;
    }

    .btn-primary {
        min-height: 44px;
    }

    .checkbox-label input[type="checkbox"],
    .cover-fees-label input[type="checkbox"] {
        min-width: 24px;
        min-height: 24px;
    }
}

/* =============================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .donation-wrapper {
        opacity: 1 !important;
    }

    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    .progress-fill {
        transition: none;
    }

    .amount-btn,
    .header-donate-btn,
    .btn-donate,
    .btn-primary,
    .card-input,
    .custom-amount-input,
    .form-group input,
    .form-group textarea {
        transition: none;
    }

    .success-modal {
        animation: none;
    }

    .fee-breakdown {
        animation: none;
    }

    .marquee-track {
        animation: none;
    }

    .donation-feed-track {
        animation: none;
    }
}

/* =============================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {
    .amount-btn {
        border-width: 3px;
    }

    .form-group input,
    .form-group textarea,
    .card-input,
    .custom-amount-input {
        border-width: 3px;
    }

    .cover-fees-card {
        border-width: 3px;
    }

    .btn-donate,
    .btn-primary {
        border: 3px solid currentColor;
    }
}

/* =============================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .donation-header,
    .header-donate-btn,
    .donation-marquee,
    .donation-feed,
    .btn-donate,
    .secure-notice,
    .modal {
        display: none !important;
    }

    .donation-wrapper {
        background: white;
    }

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

    .donation-container {
        max-width: 100%;
        padding: 0;
    }

    .advocate-card,
    .progress-card,
    .donation-form-container {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    .donation-form-card {
        padding: 1rem;
    }

    /* Hide interactive elements */
    .amount-buttons,
    .custom-amount-wrapper,
    .form-section,
    .cover-fees-section {
        display: none;
    }
}