/* ============================================================
   HARDTWALDBATTERIE – Responsive Breakpoints
   All media queries from all pages, organized by breakpoint
   ============================================================ */


/* ============================================================
   @media (max-width: 1024px) – Tablet
   ============================================================ */
@media (max-width: 1024px) {

    /* --- Event page: content grid stacks --- */
    .content-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .form-section {
        position: static;
    }

    /* --- Homepage: manifest values stack --- */
    .manifest-values {
        grid-template-columns: 1fr;
    }

    /* --- Homepage: event cards stack --- */
    .event-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .event-date {
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: center;
    }

    /* --- Homepage: gallery adjusts --- */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .gallery-item.large {
        grid-column: span 2;
        grid-row: span 1;
        height: 300px;
    }

    .gallery-item {
        height: 200px;
    }

    /* --- Homepage: lineup adjusts --- */
    .lineup-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Homepage: footer grid adjusts --- */
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    /* --- Artist pages: hero stacks --- */
    .hero-content {
        grid-template-columns: 1fr;
        gap: 4rem;
        text-align: center;
    }

    .artist-image-container {
        order: -1;
    }

    .artist-image {
        max-width: 350px;
        margin: 0 auto;
    }

    .artist-genres {
        justify-content: center;
    }

    .artist-socials {
        justify-content: center;
    }

    /* --- Artist pages: stats and related grids --- */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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


/* ============================================================
   @media (max-width: 768px) – Mobile
   ============================================================ */
@media (max-width: 768px) {

    /* --- Navigation --- */
    nav {
        padding: 1rem 1.5rem;
    }

    .nav-logo span {
        display: none;
    }

    .nav-links {
        display: none;
    }

    .nav-mobile-toggle {
        display: flex;
    }

    .mobile-menu {
        display: flex;
    }

    /* --- Hero --- */
    .hero {
        padding: 6rem 1.5rem 3rem;
        min-height: auto;
    }

    /* --- Sections (override page-specific padding) --- */
    section {
        padding: 4rem 1.25rem;
    }

    /* --- Main content --- */
    .main-content {
        padding: 3rem 1.25rem;
    }

    /* --- Hero runes (decorative, can overflow) --- */
    .hero-rune {
        font-size: 8rem;
    }

    /* --- Hero subtitle letter-spacing fix --- */
    .hero-subtitle {
        letter-spacing: 0.2em;
        word-break: break-word;
    }

    /* --- Nav scrolled state --- */
    nav.scrolled {
        padding: 0.75rem 1.5rem;
    }

    /* --- Countdown mobile --- */
    .countdown {
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    .countdown__separator {
        font-size: 1.2rem;
    }

    /* --- Stats bar mobile --- */
    .stats-grid {
        padding: 0 1rem;
    }

    /* --- Form --- */
    .form-section {
        padding: 2rem 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

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

    /* --- FAQ --- */
    .faq-question {
        padding: 1.25rem 1.5rem;
        font-size: 1.05rem;
    }

    .faq-answer-content {
        padding: 0 1.5rem 1.5rem;
    }

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

    .disclaimer-banner {
        padding: 1.5rem;
    }

    /* --- Homepage sections --- */
    section {
        padding: 5rem 1.5rem;
    }

    .hero-symbol {
        width: 80px;
        height: 80px;
    }

    /* --- Homepage: gallery mobile --- */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item,
    .gallery-item.large {
        height: 250px;
        grid-column: span 1;
    }

    /* --- Homepage: newsletter --- */
    .newsletter-form {
        flex-direction: column;
    }

    /* --- Homepage: footer mobile --- */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* --- Artist pages: hero mobile --- */
    .hero-content {
        padding: 7rem 1.5rem 3rem;
    }

    .artist-info h1 {
        font-size: 2.5rem;
    }

    /* --- Artist pages: track list --- */
    .track-item {
        grid-template-columns: 60px 1fr;
        gap: 1rem;
    }

    .track-meta {
        display: none;
    }

    /* --- Artist pages: event list --- */
    .event-item {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }

    /* --- Artist pages: gallery --- */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item.large {
        grid-column: span 2;
        grid-row: span 1;
    }

    /* --- Artist pages: related artists --- */
    .related-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    /* --- Artist pages: footer --- */
    .footer-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
}


/* ============================================================
   @media (max-width: 480px) – Small Mobile
   ============================================================ */
@media (max-width: 480px) {

    /* --- Global width safety --- */
    section {
        padding: 3rem 1rem;
    }

    .main-content {
        padding: 2rem 1rem;
    }

    /* --- Hero --- */
    .hero {
        padding: 5rem 1rem 2rem;
    }

    .hero-title {
        font-size: 1.8rem;
        letter-spacing: 0.05em;
    }

    .hero-subtitle {
        font-size: 0.85rem;
        letter-spacing: 0.15em;
    }

    .hero-rune {
        font-size: 5rem;
    }

    /* --- Countdown --- */
    .countdown__value {
        font-size: 1.8rem;
    }

    .countdown__separator {
        font-size: 1rem;
        margin-top: -0.5rem;
    }

    /* --- Stats --- */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 0.5rem;
    }

    /* --- Related artists --- */
    .related-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    /* --- Grids --- */
    .tldr-grid {
        grid-template-columns: 1fr;
    }

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

    /* --- Lineup --- */
    .lineup-grid {
        grid-template-columns: 1fr;
    }

    /* --- Footer --- */
    footer {
        padding: 2rem 1rem;
    }

    /* --- Cookie consent --- */
    .cookie-consent__inner {
        padding: 1rem;
        gap: 1rem;
    }

    .cookie-consent__content {
        min-width: 0;
    }

    /* --- Form --- */
    .form-section {
        padding: 1.5rem 1rem;
    }

    /* --- Event gallery --- */
    .event-gallery {
        padding: 2rem 1rem;
    }
}