/* ==========================================================
   BARCO WIDE LANDSCAPE LAYOUT
   Loaded after the original Barco theme.
   ========================================================== */

body {
    padding-top: 34px !important;
    padding-right: 10px !important;
    padding-bottom: 60px !important;
    padding-left: 10px !important;
}

/* Make the complete wooden cabinet substantially wider. */

#barcoRealCabinet {
    width: min(1680px, calc(100vw - 28px)) !important;
    max-width: none !important;
    margin-top: 64px !important;
    margin-right: auto !important;
    margin-bottom: 34px !important;
    margin-left: auto !important;

    padding-top: 46px !important;
    padding-right: clamp(22px, 2.7vw, 48px) !important;
    padding-bottom: 80px !important;
    padding-left: clamp(22px, 2.7vw, 48px) !important;

    border-radius: 22px 22px 14px 14px !important;
}

/* Make the decorative upper lid broader and shallower. */

#barcoRealCabinet::before {
    right: 2% !important;
    left: 2% !important;
    height: 74px !important;
}

/* Smaller nameplate so it does not force extra height. */

#barcoRealNameplate {
    top: 12px !important;
    min-width: min(570px, 52%) !important;
    padding: 7px 22px 6px !important;
}

#barcoRealNameplate strong {
    font-size: clamp(21px, 2vw, 31px) !important;
}

#barcoRealNameplate span {
    margin-top: 3px !important;
    font-size: 8px !important;
}

/* Reduce unused space around the inner radio. */

#barcoRealInner {
    padding: 14px !important;
}

/* Shorter speaker-cloth area across the upper cabinet. */

#barcoRealSpeakerCloth {
    top: 68px !important;
    right: 4% !important;
    left: 4% !important;
    height: 108px !important;
}

/* Bring the working interface upward. */

#barcoRealContent {
    width: 100% !important;
    max-width: none !important;
    margin-top: 126px !important;
    padding: 15px !important;
}

/*
 * Remove the old narrow page-width restrictions from everything
 * that was moved inside the Barco cabinet.
 */

#barcoRealContent > *,
#barcoRealContent main,
#barcoRealContent .page,
#barcoRealContent .wrapper,
#barcoRealContent .site-wrapper,
#barcoRealContent .container,
#barcoRealContent .content,
#barcoRealContent .site-header,
#barcoRealContent header {
    width: 100% !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Widen the actual receiver enclosure. */

#barcoRealContent .radio-shell,
#barcoRealContent .radio-console,
#barcoRealContent .receiver,
#barcoRealContent .receiver-shell,
#barcoRealContent .console,
#barcoRealContent .radio-body,
#barcoRealContent .radio,
#barcoRealContent main > section:first-of-type {
    width: 100% !important;
    max-width: none !important;
}

/*
 * Existing center receiver grid:
 * give the speaker enough room while making the station,
 * spectrum, captions and controls much wider.
 */

#barcoRealContent .radio-grid,
#barcoRealContent .receiver-grid,
#barcoRealContent .console-grid,
#barcoRealContent .radio-inner,
#barcoRealContent .receiver-inner {
    width: 100% !important;
    max-width: none !important;
}

/* Make the left speaker column less dominant. */

#barcoRealContent .speaker,
#barcoRealContent .speaker-panel,
#barcoRealContent .left-column,
#barcoRealContent .radio-speaker {
    min-width: 180px !important;
    max-width: 235px !important;
}

/* Let the center controls use available width. */

#barcoRealContent .station-panel,
#barcoRealContent .main-panel,
#barcoRealContent .receiver-main,
#barcoRealContent .center-column,
#barcoRealContent .radio-main {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Give the right control column more usable room. */

#barcoRealContent .control-panel,
#barcoRealContent .right-column,
#barcoRealContent .station-controls,
#barcoRealContent .receiver-controls {
    min-width: 215px !important;
    max-width: 280px !important;
}

/* Station display and spectrum should stretch horizontally. */

#barcoRealContent .station-display,
#barcoRealContent .display,
#barcoRealContent .digital-display,
#barcoRealContent .now-playing,
#barcoRealContent .tuner-display,
#barcoRealContent .frequency-display,
#barcoRealContent .spectrum,
#barcoRealContent .waveform,
#barcoRealContent .visualizer,
#barcoRealContent canvas {
    width: 100% !important;
    max-width: none !important;
}

/* Keep captions broad but reduce unnecessary vertical space. */

#barcoRealContent .caption-panel,
#barcoRealContent .captions-panel,
#barcoRealContent #captions,
#barcoRealContent .caption-box {
    width: 100% !important;
    max-width: none !important;
}

#barcoRealContent .caption-output,
#barcoRealContent .captions-output,
#barcoRealContent .caption-text,
#barcoRealContent #captionOutput {
    min-height: 90px !important;
    max-height: 180px !important;
}

/* Spread region buttons across the landscape cabinet. */

#barcoRealContent .region-grid,
#barcoRealContent .regions-grid,
#barcoRealContent .region-buttons,
#barcoRealContent .monitoring-bank,
#barcoRealContent .region-bank {
    width: 100% !important;
    max-width: none !important;
}

#barcoRealContent .region-grid,
#barcoRealContent .regions-grid,
#barcoRealContent .region-buttons {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

#barcoRealContent .region-card,
#barcoRealContent .region-button,
#barcoRealContent .region-option,
#barcoRealContent .monitor-card,
#barcoRealContent .country-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
}

/* Slightly wider meter while keeping the speaker compact. */

#la911FinalSignalMeter {
    width: 100% !important;
    max-width: 220px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Make the bottom decorative controls fit the wide cabinet. */

#barcoRealKeys {
    gap: 8px !important;
}

#barcoRealKeys span {
    width: 46px !important;
}

/* Large desktop landscape layout. */

@media (min-width: 1200px) {
    #barcoRealContent .radio-grid,
    #barcoRealContent .receiver-grid,
    #barcoRealContent .console-grid {
        grid-template-columns:
            minmax(185px, 0.72fr)
            minmax(620px, 3.15fr)
            minmax(220px, 0.95fr) !important;
    }
}

/* Medium desktop and laptop layout. */

@media (min-width: 850px) and (max-width: 1199px) {
    #barcoRealCabinet {
        width: calc(100vw - 18px) !important;
    }

    #barcoRealContent .region-grid,
    #barcoRealContent .regions-grid,
    #barcoRealContent .region-buttons {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Tablet layout. */

@media (max-width: 849px) {
    #barcoRealCabinet {
        width: calc(100vw - 10px) !important;
        margin-top: 52px !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    #barcoRealSpeakerCloth {
        height: 88px !important;
    }

    #barcoRealContent {
        margin-top: 103px !important;
        padding: 8px !important;
    }

    #barcoRealContent .region-grid,
    #barcoRealContent .regions-grid,
    #barcoRealContent .region-buttons {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    #barcoRealContent .speaker,
    #barcoRealContent .speaker-panel,
    #barcoRealContent .left-column,
    #barcoRealContent .radio-speaker {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Phone layout. */

@media (max-width: 520px) {
    #barcoRealNameplate {
        min-width: 82% !important;
    }

    #barcoRealNameplate strong {
        font-size: 20px !important;
    }

    #barcoRealKeys span {
        width: 23px !important;
    }
}