/* =============================================================================
   Tierhilfe Wolfsburg e.V. – Charity-Auktion
   Responsive Overrides – Version 1.1.0
   Mobile-first approach
   ============================================================================= */

/* =============================================================================
   Base mobile styles (< 768px)
   ============================================================================= */

/* --- Topbar --- */
@media (max-width: 767.98px) {
    .topbar {
        height: auto;
        padding-block: var(--space-2);
    }

    .topbar .container {
        justify-content: center;
    }

    .topbar__right {
        display: none;
    }

    .topbar__left {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .topbar__separator {
        display: none;
    }
}

/* --- Navbar --- */
@media (max-width: 991.98px) {
    .navbar {
        height: auto;
        padding-block: var(--space-3);
    }

    .navbar .container {
        flex-wrap: wrap;
        height: auto;
    }

    .navbar-brand {
        flex: 1;
    }

    .navbar-toggler {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-md);
        cursor: pointer;
        color: var(--color-text);
        font-size: var(--fs-lg);
        padding: 0;
        transition: background-color var(--transition-fast), border-color var(--transition-fast);
    }

    .navbar-toggler:hover {
        background-color: var(--color-accent-light);
        border-color: var(--color-accent);
    }

    .navbar-collapse {
        display: none;
        width: 100%;
        padding-block: var(--space-3);
        border-top: 1px solid var(--color-border);
        margin-top: var(--space-3);
    }

    .navbar-collapse.show {
        display: block;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-link {
        padding: var(--space-3) var(--space-4);
        font-size: var(--fs-base);
        border-radius: var(--radius-md);
        display: block;
    }

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

    .nav-link:hover,
    .nav-link.active {
        background-color: var(--color-accent-light);
        color: var(--color-accent-dark);
    }

    .navbar-actions {
        padding-top: var(--space-3);
        padding-inline: var(--space-4);
        border-top: 1px solid var(--color-border);
        margin-top: var(--space-3);
        width: 100%;
    }

    .navbar-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 992px) {
    .navbar-toggler {
        display: none;
    }

    .navbar-collapse {
        display: flex !important;
        flex: 1;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-5);
    }
}

/* --- Hero Section --- */
@media (max-width: 767.98px) {
    .auction-hero {
        padding-block: var(--space-8) var(--space-9);
    }

    .auction-hero__title {
        font-size: 1.875rem;
    }

    .auction-hero__description {
        font-size: var(--fs-base);
    }

    .auction-hero__stats {
        gap: var(--space-5);
        padding: var(--space-4) var(--space-5);
        width: 100%;
        justify-content: space-around;
    }

    .auction-hero__stat-divider {
        display: none;
    }

    .auction-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .auction-hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .countdown--hero .countdown__block {
        min-width: 60px;
    }

    .countdown--hero .countdown__number {
        font-size: 1.5rem;
    }

    /* Hero-Buttons auf volle Breite stapeln */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- How It Works --- */
@media (max-width: 767.98px) {
    .steps-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .step-card {
        padding: var(--space-5);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .step-card__icon-wrap {
        margin-bottom: var(--space-4);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .steps-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
    }
}

/* --- Trust / Donation Section --- */
@media (max-width: 767.98px) {
    .donation-card {
        padding: var(--space-5) var(--space-5);
    }

    .donation-card__row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .trust-badges {
        gap: var(--space-5);
    }
}

/* --- CTA Section --- */
@media (max-width: 767.98px) {
    .cta-section {
        padding-block: var(--space-8);
    }

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

    .cta-section__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- Footer --- */
@media (max-width: 767.98px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .footer-brand {
        padding-right: 0;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-bottom__links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }
}

/* =============================================================================
   Auction Grid – Mobile (< 768px)
   ============================================================================= */

@media (max-width: 767.98px) {
    .auction-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .archive-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .filter-bar {
        gap: var(--space-2);
    }

    .filter-bar__sort {
        margin-left: 0;
        width: 100%;
    }

    .filter-bar__select {
        flex: 1;
    }

    .filter-pills {
        order: 2;
        width: 100%;
    }

    .filter-bar__label {
        display: none;
    }

    /* Artikelkarten: Preis und Countdown untereinander statt nebeneinander */
    .auction-card__meta > .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--space-2);
    }

    .auction-card__meta > .d-flex > .text-end {
        text-align: left !important;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }
}

/* =============================================================================
   Auction Grid – Tablet (768px – 991px)
   ============================================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {
    .auction-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }

    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

/* =============================================================================
   Auction Grid – Desktop (>= 992px)
   ============================================================================= */

@media (min-width: 992px) {
    .auction-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

/* =============================================================================
   Item Detail Layout – Mobile (< 768px)
   ============================================================================= */

@media (max-width: 767.98px) {
    .item-layout {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    /* Bid box below gallery on mobile */
    .item-layout .item-info-col {
        order: 1;
    }

    .item-layout .item-bid-col {
        order: 2;
    }

    .bid-box {
        position: static;
        border-top-width: 4px;
    }

    .item-gallery__thumbs {
        gap: var(--space-2);
    }

    .item-gallery__thumb {
        width: 64px;
        height: 64px;
    }

    .item-info__title {
        font-size: var(--fs-2xl);
    }

    .bid-box__name-email {
        grid-template-columns: 1fr;
    }

    .bid-box__price {
        font-size: 2rem;
    }

    .bid-box__amount-input {
        font-size: var(--fs-xl);
    }

    .bid-history__table {
        font-size: var(--fs-xs);
    }

    .bid-history__table th,
    .bid-history__table td {
        padding: var(--space-2) var(--space-3);
    }
}

/* =============================================================================
   Item Detail Layout – Tablet (768px – 991px)
   ============================================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {
    .item-layout {
        grid-template-columns: 1fr 320px;
        gap: var(--space-6);
    }

    /* Bid box: sticky only if enough vertical space */
    .bid-box {
        position: sticky;
        top: calc(var(--navbar-height) + var(--space-4));
    }

    .bid-box__name-email {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Item Detail Layout – Desktop (>= 992px)
   ============================================================================= */

@media (min-width: 992px) {
    .item-layout {
        grid-template-columns: 1fr 400px;
    }

    .bid-box {
        position: sticky;
        top: calc(var(--navbar-height) + var(--space-5));
    }
}

/* =============================================================================
   Countdown Timer – Responsive
   ============================================================================= */

@media (max-width: 479.98px) {
    .countdown__block {
        min-width: 52px;
        padding: var(--space-2);
    }

    .countdown__number {
        font-size: 1.375rem;
    }

    .countdown__label {
        font-size: 0.6rem;
    }
}

/* =============================================================================
   Section spacing – Mobile
   ============================================================================= */

@media (max-width: 767.98px) {
    .section {
        padding-block: var(--space-8);
    }

    .section--lg {
        padding-block: var(--space-9);
    }

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

    .section-header__title {
        font-size: var(--fs-2xl);
    }

    .page-header {
        padding-block: var(--space-6) var(--space-7);
    }

    .page-header__title {
        font-size: var(--fs-2xl);
    }

    .how-it-works {
        padding-block: var(--space-8);
    }
}

/* =============================================================================
   Touch-friendly overrides
   ============================================================================= */

@media (max-width: 991.98px) {
    /* Larger tap targets */
    .btn {
        min-height: 44px;
        padding-block: 0.75rem;
    }

    .btn-sm {
        min-height: 38px;
    }

    .filter-pill {
        min-height: 38px;
        padding: 0.5rem 1rem;
        font-size: var(--fs-sm);
    }

    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .auction-card__cta {
        padding-block: 0.875rem;
        font-size: var(--fs-base);
    }

    /* More comfortable form inputs on touch */
    .form-control,
    .bid-box__amount-input,
    .filter-bar__select {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    .bid-box__submit {
        min-height: 56px;
        font-size: var(--fs-md);
    }
}

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

@media print {
    .topbar,
    .navbar,
    .site-footer,
    .cta-section,
    .filter-bar,
    .bid-box,
    .scroll-top {
        display: none !important;
    }

    body {
        background-color: #ffffff;
        color: #000000;
    }

    .auction-hero {
        background: none;
        padding-block: var(--space-5);
    }

    .auction-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #cccccc;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

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

/* =============================================================================
   High-DPI / Retina
   ============================================================================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .auction-card__image,
    .item-gallery__main img,
    .item-gallery__thumb img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

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

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

    html {
        scroll-behavior: auto;
    }
}

/* =============================================================================
   Dark Mode (respects OS preference)
   ============================================================================= */

@media (prefers-color-scheme: dark) {
    /* Currently not implemented – placeholder for future dark mode */
    /* Uncomment and adjust if dark mode is desired:
    :root {
        --color-bg: #1a1a18;
        --color-bg-white: #242420;
        --color-text: #f0ede8;
        --color-border: #3a3a36;
    }
    */
}