/* BESTAND: styles/20-mobile-landscape.css
 * Compacte layout voor telefoons in landscape.
 * Alleen vormgeving: geen project-, player- of fullscreenlogica.
 * Wordt na de hoofdstyles geladen; 21-mobile-explore.css volgt voor Explore further.
 */

/* ==========================================================================
   20. MOBILE LANDSCAPE — LAGE VIEWPORTS
   ========================================================================== */

@media (orientation: landscape) and (max-width: 1080px) and (max-height: 600px) {
    /* Algemene schaal -------------------------------------------------------- */
    .container {
        width: min(1320px, calc(100vw - 24px));
    }

    .section {
        padding: 24px 0;
    }

    .display-title,
    .display-title.compact {
        font-size: clamp(2.4rem, 8.5vw, 4.8rem);
        line-height: 0.9;
    }

    .copy {
        font-size: 0.92rem;
        line-height: 1.62;
    }

    .metric-card,
    .contact-form-card,
    .audio-card,
    .hero-panel {
        padding: 16px;
    }

    /* Header --------------------------------------------------------------- */
    .header-inner {
        min-height: 56px;
        gap: 10px;
    }

    .brand {
        gap: 10px;
    }

    .brand-name {
        font-size: 1rem;
    }

    .header-raven {
        width: 30px;
        margin-left: -9px;
    }

    .header-controls {
        gap: 6px;
    }

    .language-button {
        min-width: 30px;
        min-height: 44px;
        padding: 6px 3px;
        font-size: 11px;
    }

    .header-menu-button {
        width: 44px;
        height: 44px;
    }

    /* Geopend menu moet ook bruikbaar blijven op 350–500px schermhoogte. */
    .menu-inner {
        min-height: 100svh;
        padding: 10px 0;
    }

    .menu-top {
        padding-bottom: 8px;
    }

    .menu-content {
        gap: 14px;
        padding: 16px 0;
        align-items: center;
    }

    .menu-links {
        gap: 6px;
    }

    .menu-link {
        font-size: clamp(1.55rem, 8vh, 2.5rem);
        line-height: 0.94;
    }

    .menu-meta {
        padding-top: 10px;
        font-size: 0.84rem;
        line-height: 1.5;
    }

    /* Hero ----------------------------------------------------------------- */
    .hero-fullscreen {
        min-height: calc(100svh - 57px);
    }

    .hero-content {
        width: min(1320px, calc(100vw - 24px));
        padding: 18px 0 20px;
    }

    .hero-top-label {
        margin-bottom: 10px;
        font-size: 9px;
    }

    .hero-title {
        max-width: 11ch;
        font-size: clamp(2.35rem, 8vw, 4.2rem);
    }

    .hero-subline {
        max-width: 62ch;
        margin-top: 12px;
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .hero-actions {
        gap: 10px;
        margin-top: 16px;
    }

    /* Services ------------------------------------------------------------- */
    .sb-audio-services-inline {
        --sb-services-sticky-top: 56px;
    }

    .sb-audio-services-inline-heading {
        min-height: 50px;
        margin-bottom: 10px;
        padding-block: 3px;
    }

    /* Mobile Projects ------------------------------------------------------ */
    .sb-mobile-project-inner {
        max-width: none;
        padding: 18px 8px 24px;
    }

    .sb-mobile-project-inner > .eyebrow,
    .sb-mobile-project-detail > .eyebrow {
        margin-bottom: 8px;
    }

    .sb-mobile-project-heading {
        margin-bottom: 14px;
        font-size: clamp(1.7rem, 5vw, 2.45rem);
    }

    .sb-mobile-project-rail {
        gap: 12px;
        padding-bottom: 10px;
    }

    /* In portrait is 82vw prettig. In landscape wordt dat veel te breed;
       hier tonen we bewust ongeveer 1,5–2 projecten tegelijk. */
    .sb-mobile-project-rail > li {
        flex-basis: clamp(300px, 52vw, 520px);
    }

    .sb-mobile-project-preview {
        aspect-ratio: 16 / 9;
        border-radius: 14px;
    }

    .sb-mobile-project-name {
        margin-top: 8px;
        font-size: 0.92rem;
    }

    .sb-mobile-project-category {
        margin-top: 4px;
        font-size: 0.7rem;
        line-height: 1.35;
    }

    .sb-mobile-project-rail-status {
        gap: 10px;
    }

    .sb-mobile-project-detail {
        margin-top: 20px;
        padding-top: 20px;
        scroll-margin-top: 70px;
    }

    .sb-mobile-project-back {
        min-height: 44px;
        margin-bottom: 10px;
        padding: 6px 0;
    }

    .sb-mobile-project-description {
        margin: 18px 0;
        font-size: 0.92rem;
        line-height: 1.65;
    }

    /* Inline projectmedia: in landscape is schermhoogte schaars. Fullscreen
       media wordt bewust niet geraakt; dit geldt alleen voor de speler in de pagina. */
    .sb-mobile-projects
        .sb-integrated-slab:not(.is-overlay-view):not(.is-audio-mode)
        .sb-integrated-media-frame {
        height: min(52svh, 340px);
        min-height: 180px;
        aspect-ratio: auto;
    }

    .sb-mobile-projects
        .sb-integrated-slab:not(.is-overlay-view)
        .sb-integrated-control-row {
        min-height: 50px;
        gap: 6px;
        padding-inline: 10px;
    }

    /* Volume blijft beschikbaar in landscape, maar neemt minder ruimte in dan
       in portrait. De touchzone blijft groot genoeg om bruikbaar te blijven. */
    .sb-mobile-projects
        .sb-integrated-slab:not(.is-overlay-view)
        button.sb-integrated-volume {
        display: block;
        flex: 0 0 46px;
        width: 46px;
        height: 40px;
    }

    .sb-mobile-projects
        .sb-integrated-slab:not(.is-overlay-view)
        .sb-integrated-control-row > span.sb-integrated-control-icon {
        display: inline-flex;
    }

    .sb-mobile-projects
        .sb-integrated-slab:not(.is-overlay-view)
        .sb-integrated-control-icon svg {
        width: 18px;
        height: 18px;
    }

    .sb-mobile-projects
        .sb-integrated-slab:not(.is-overlay-view)
        .sb-integrated-tabs {
        min-height: 46px;
        gap: 16px;
        padding-inline: 10px;
    }

    .sb-mobile-projects
        .sb-integrated-slab:not(.is-overlay-view)
        .sb-integrated-tab {
        min-height: 44px;
        font-size: 12px;
    }

    /* De generieke compacte player gebruikt twee captionregels (98px).
       In landscape zetten we teller, titel en pijlen weer op één regel. */
    .sb-mobile-projects
        .sb-integrated-slab:not(.is-overlay-view)
        .sb-integrated-caption-row {
        min-height: 54px;
        padding: 0 10px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto;
        gap: 8px;
    }

    .sb-mobile-projects
        .sb-integrated-slab:not(.is-overlay-view)
        .sb-integrated-media-count {
        grid-column: 1;
        grid-row: 1;
    }

    .sb-mobile-projects
        .sb-integrated-slab:not(.is-overlay-view)
        .sb-integrated-caption-title {
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
        padding-block: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sb-mobile-projects
        .sb-integrated-slab:not(.is-overlay-view)
        .sb-integrated-arrows {
        grid-column: 3;
        grid-row: 1;
        gap: 4px;
    }
}