/*
=============================================================
SC_WEB Version 5.0
Datei: core/css/responsive.css
Build: 001.00
Zeichensatz: UTF-8 ohne BOM

Zweck:
Responsive Anpassungen des visuellen SC_WEB-CORE.

Regeln:
- Enthält ausschließlich Anpassungen für bestehende CORE-Komponenten.
- Keine Testoberflächen.
- Keine modulbezogenen Regeln.
- Keine Regeln für entfernte oder noch nicht eingebundene Funktionen.
=============================================================
*/
/* =========================================================
   SCHNELLNAVIGATION
   Breakpoints für Seitenrahmen, Navigation/Header/Footer, Hero,
   nächsten Termin, Musik verbindet, Aktuelles, Seemannsradio und Partner.
   Grunddarstellung nicht hier ändern, sondern in components.css/layout.css.
========================================================= */



/* =========================================================
   TABLET UND KLEINERE BILDSCHIRME
========================================================= */

@media (max-width: 850px) {

    .page-shell {

        width: min(
            100% - 1rem,
            var(--page-width)
        );

    }

}


/* =========================================================
   NAVIGATION, HEADER UND FOOTER
========================================================= */

@media (max-width: 760px) {

    .site-header__brand {

        padding:
            0.9rem
            var(--space-lg);

    }


    .site-brand__logo {

        width: 62px;

        height: 62px;

        flex-basis: 62px;

    }


    .site-brand__logo:first-of-type {

        width: 68px;

        height: 68px;

        flex-basis: 68px;

    }


    .site-brand__logo:last-of-type {

        width: 62px;

        height: 62px;

        flex-basis: 62px;

    }


    .site-brand__name {

        font-size:
            clamp(
                1.35rem,
                6vw,
                1.9rem
            );

    }


    .site-brand__tagline {

        font-size: 0.75rem;

    }


    .site-navigation__toggle {

        display: block;

        width: calc(100% - 2rem);

        margin:
            0.7rem
            var(--space-lg);

        padding:
            0.65rem
            var(--space-lg);

        border:
            1px solid
            rgba(255, 255, 255, 0.45);

        border-radius:
            var(--radius-md);

        background:
            transparent;

        color:
            var(--color-text);

        cursor:
            pointer;

    }


    .site-navigation__list {

        display: none;

        align-items: stretch;

        padding-top: 0;

    }


    .site-navigation.is-open
    .site-navigation__list {

        display: grid;

    }


    .site-navigation__list a {

        text-align: center;

    }


    .site-footer__main {

        grid-template-columns: 1fr;

    }


    .site-footer__bottom {

        flex-direction: column;

    }

}


/* =========================================================
   HERO
========================================================= */

@media (max-width: 760px) {

    .hero-section {

        min-height: 520px;

        align-items: flex-end;

        padding:
            var(--space-xl);

    }


    .hero-section__content {

        width: 100%;

    }


    .hero-section__title {

        max-width: none;

    }

}


/* =========================================================
   NÄCHSTER TERMIN
========================================================= */

@media (max-width: 760px) {

    .next-event-section {
        grid-template-columns: 1fr;
    }

    .next-event-card {
        grid-template-columns: 1fr;
    }

    .next-event-card__media {
        min-width: 0;
    }

    .next-event-card__image {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .next-event-card__content {
        min-width: 0;
        padding: var(--space-xl);
    }

    .next-event-card__details div {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

}


/* =========================================================
   MUSIK VERBINDET
========================================================= */

@media (max-width: 760px) {

    .music-connects__header {

        grid-template-columns: 1fr;

        align-items: start;

    }


    .feature-card__links {

        flex-direction: column;

        align-items: flex-start;

    }


    .feature-card__links
    .feature-card__link {

        white-space: normal;

    }

}


/* =========================================================
   AKTUELLES
========================================================= */

@media (max-width: 760px) {

    .news-section {

        grid-template-columns: 1fr;

    }


    .news-section__title {

        max-width: none;

    }

}


/* =========================================================
   ZUM ANHÖREN
========================================================= */

@media (max-width: 760px) {

    .listen-section {

        grid-template-columns: 1fr;

        min-height: 760px;

    }


    .listen-section__content {

        width: 100%;

    }


    .listen-section__action {

        justify-self: center;

        transform: none;

    }


    .seemannsradio-logo img {

        width:
            min(
                238px,
                100%
            );

        height: auto;

        aspect-ratio: 4 / 3;

    }

}


/* =========================================================
   PARTNER
========================================================= */

@media (max-width: 820px) {

    .partner-section {

        grid-template-columns: 1fr;

    }


    .partner-section__buttons {

        width:
            min(
                100%,
                520px
            );

        justify-self: center;

    }

}


@media (max-width: 520px) {

    .partner-section__buttons {

        grid-template-columns: 1fr;

        width:
            min(
                100%,
                260px
            );

    }

}


/* =========================================================
   SEHR KLEINE BILDSCHIRME
========================================================= */

@media (max-width: 420px) {

    .page-shell {

        width: calc(100% - 0.5rem);

    }


    .site-header__brand {

        padding-inline:
            var(--space-sm);

    }


    .site-brand {

        gap:
            var(--space-sm);

    }


    .site-brand__logo,
    .site-brand__logo:last-of-type {

        width: 52px;

        height: 52px;

        flex-basis: 52px;

    }


    .site-brand__logo:first-of-type {

        width: 56px;

        height: 56px;

        flex-basis: 56px;

    }


    .hero-section,
    .music-connects,
    .next-event-section,
    .news-section,
    .listen-section,
    .partner-section {

        padding:
            var(--space-lg);

    }

}