/* css/responsive.css
   Cluster Responsive: Die einzigen breiten Breakpoints der Seite –
   Tablet (min-width: 700px) und Desktop (min-width: 1100px).
   Mobile-first: Die Basis-Styles sitzen in den anderen Dateien, hier
   kommen nur min-width-Queries, die einzelne Werte anpassen
   (Spalten, Anzahl Vögel/Wellen, Abstände). */

/* Kleine Displays: Ein Teil der Hintergrund-Animationen entfällt und
   die Kachelabstände schrumpfen. Die Basisraster sind bereits einspaltig;
   Player und Footer skalieren ihre Höhe mit der dynamischen Viewport-Höhe. */
@media (max-width: 699px) {
    .container {
        margin-bottom: clamp(150px, 30dvh, 240px);
        /* 78 px oben, damit die gedrehte Überschrift nicht in den
           diagonalen clip-path (links 80 px) hineinragt. Unten bleibt
           der kompakte Abstand. */
        padding-block: 78px clamp(42px, 7vw, 60px);
    }

    /* Kontakt: Auf dem Smartphone wirkt der Desktop-Rhythmus von 45 px
       zu luftig. Fluid auf ca. 28–38 px verringern. */
    .lead,
    .streaming li {
        line-height: clamp(28px, 7.6vw, 38px);
    }

    .waves-layer:nth-child(n + 4) {
        display: none;
    }

    .birds-layer {
        --birds-count: 2;
    }

    /* Logo und Player sitzen auf kleinen Displays gemeinsam bei 8 px. */
    .site-header {
        --header-offset: 8px;
    }

    /* In der größten Zoom-Variante (vor dem Scrollen) nimmt das Logo
       90 % der Bildschirmbreite ein. Der Parallax-Faktor --logo-scale
       bleibt unverändert; Tablet und Desktop behalten 45 vw. */
    .site-logo {
        width: 90vw;
    }

    /* Cover und Tickets auf dem Smartphone: kleinere Karten, damit mehr
       als eine vollständige Karte in die Reihe passt (ca. 50–60 % der
       Desktop-Größe). Vinylscheibe und Auswurfwege skalieren über die
       Variablen in layout.css automatisch mit. */
    .album {
        --album-size: clamp(140px, 40vw, 190px);
    }

    .ticket {
        --ticket-width: clamp(155px, 41vw, 200px);
    }

    /* Im schmalen Ticket stehen Ort, Adresse und Datum untereinander:
       Für die alte Zweispalten-Anordnung ist neben der kleineren Karte
       kein Platz mehr. */
    .ticket__content {
        display: flex;
        flex-direction: column;
        padding: 6px;
    }

    .ticket__location {
        font-size: 18px;
        line-height: 1.1;
    }

    .ticket__date,
    .ticket__address {
        position: static;
        font-size: 12px;
        line-height: 1.3;
        text-align: left;
    }

    .ticket__address {
        order: 2;
        margin-top: auto;
    }

    .ticket__date {
        order: 3;
        margin-top: 4px;
    }

    /* Der „SOLD OUT“-Stempel gehört zur verkleinerten Karte. */
    .ticket--soldout::after {
        width: 150px;
        height: 70px;
        padding: 4px;
        border-width: 5px;
        font-size: 30px;
    }

    .player {
        top: 8px;
        left: 8px;
        width: min(140px, calc(50vw - 40px));
        padding: 8px;
        padding-block: clamp(6px, 1.5dvh, 12px);
        gap: 6px;
    }

    .player__artwork {
        width: 70px;
        height: 58px;
    }

    .player__cover {
        width: 56px;
        height: 56px;
    }

    .player__record {
        top: 4px;
        left: 27px;
        width: 50px;
        height: 50px;
    }

    .player__controls {
        gap: 6px;
    }

    .player__button {
        width: 30px;
        height: 30px;
    }

    .player__button--prev::before,
    .player__button--prev::after,
    .player__button--next::before,
    .player__button--next::after {
        top: 8px;
        border-top-width: 6px;
        border-bottom-width: 6px;
        border-right-width: 9px;
    }

    .player__button--prev::before { right: 15px; }
    .player__button--prev::after  { right: 7px; }
    .player__button--next::before { left: 15px; }
    .player__button--next::after  { left: 7px; }

    .player__button--play::after {
        top: 8px;
        left: 11px;
        border-top-width: 7px;
        border-bottom-width: 7px;
        border-left-width: 11px;
    }

    .player__button--pause::before,
    .player__button--pause::after {
        top: 8px;
        height: 14px;
    }

    .player__button--pause::before { left: 10px; }
    .player__button--pause::after  { right: 10px; }

    .footer {
        padding: 8px 10px;
        padding: clamp(8px, 2dvh, 18px) 10px;
    }
}

/* Tablet: die horizontalen Reihen behalten ihre Kartenbreiten. Der volle
   Wellenbestand bleibt sichtbar und sechs Möwen fliegen. */
@media (min-width: 700px) {
    .ticket__date,
    .ticket__address {
        font-size: clamp(16px, 2.15vw, 20px);
        line-height: 1.1;
    }

    .birds-layer {
        --birds-count: 6;
    }
}