/* ==========================================================
   BARCO EXTRA-WIDE LANDSCAPE OVERRIDE
   Approximately 150 percent wider than the prior cabinet.
   ========================================================== */

body {
    padding-top: 24px !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
}

/* Use nearly the complete browser width. */

#barcoRealCabinet {
    width: calc(100vw - 18px) !important;
    max-width: 2200px !important;

    margin-top: 52px !important;
    margin-right: auto !important;
    margin-left: auto !important;

    padding-top: 42px !important;
    padding-right: clamp(18px, 2vw, 42px) !important;
    padding-bottom: 76px !important;
    padding-left: clamp(18px, 2vw, 42px) !important;
}

/* Wider and flatter lid. */

#barcoRealCabinet::before {
    right: 1.25% !important;
    left: 1.25% !important;
    height: 66px !important;
}

/* Stretch the inner face across the cabinet. */

#barcoRealInner {
    width: 100% !important;
    max-width: none !important;
    padding: 12px !important;
}

/* Make decorative speaker section wider but shallower. */

#barcoRealSpeakerCloth {
    top: 62px !important;
    right: 2.5% !important;
    left: 2.5% !important;
    height: 88px !important;
}

/* Pull the actual interface upward. */

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

/* Remove every inherited narrow maximum width. */

#barcoRealContent,
#barcoRealContent > *,
#barcoRealContent main,
#barcoRealContent section,
#barcoRealContent header,
#barcoRealContent footer,
#barcoRealContent .page,
#barcoRealContent .wrapper,
#barcoRealContent .site-wrapper,
#barcoRealContent .container,
#barcoRealContent .content,
#barcoRealContent .radio-shell,
#barcoRealContent .radio-console,
#barcoRealContent .receiver,
#barcoRealContent .receiver-shell,
#barcoRealContent .console,
#barcoRealContent .radio-body,
#barcoRealContent .radio,
#barcoRealContent .radio-inner,
#barcoRealContent .receiver-inner {
    width: 100% !important;
    max-width: none !important;
}

/*
 * Force the working receiver into a broad three-column layout:
 * speaker and meter, main tuning area, station controls.
 */

#barcoRealContent .radio-grid,
#barcoRealContent .receiver-grid,
#barcoRealContent .console-grid,
#barcoRealContent .radio-layout,
#barcoRealContent .receiver-layout {
    display: grid !important;
    grid-template-columns:
        minmax(190px, 0.68fr)
        minmax(760px, 4.4fr)
        minmax(235px, 1.05fr) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: none !important;
}

/* Compact left column. */

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

/* Main tuning section takes most of the new width. */

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

/* Right control area remains readable. */

#barcoRealContent .control-panel,
#barcoRealContent .right-column,
#barcoRealContent .station-controls,
#barcoRealContent .receiver-controls {
    width: 100% !important;
    min-width: 235px !important;
    max-width: 325px !important;
}

/* Stretch display, graph, player and captions. */

#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,
#barcoRealContent .caption-panel,
#barcoRealContent .captions-panel,
#barcoRealContent .caption-box,
#barcoRealContent #captions {
    width: 100% !important;
    max-width: none !important;
}

/* Reduce excess vertical height. */

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

/* Display all country keys across one broad bank where possible. */

#barcoRealContent .region-grid,
#barcoRealContent .regions-grid,
#barcoRealContent .region-buttons {
    display: grid !important;
    grid-template-columns:
        repeat(8, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !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: 54px !important;
}

/* Slightly enlarge the real signal meter. */

#la911FinalSignalMeter {
    width: 100% !important;
    max-width: 238px !important;
}

/* Broader decorative dial keys. */

#barcoRealKeys {
    gap: 9px !important;
}

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

/* Keep the nameplate proportional. */

#barcoRealNameplate {
    min-width: min(640px, 44%) !important;
}

/* Standard desktop screens. */

@media (max-width: 1450px) {
    #barcoRealContent .radio-grid,
    #barcoRealContent .receiver-grid,
    #barcoRealContent .console-grid,
    #barcoRealContent .radio-layout,
    #barcoRealContent .receiver-layout {
        grid-template-columns:
            minmax(175px, 0.7fr)
            minmax(540px, 3.7fr)
            minmax(210px, 1fr) !important;
    }

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

/* Laptop and tablet. */

@media (max-width: 1000px) {
    #barcoRealContent .radio-grid,
    #barcoRealContent .receiver-grid,
    #barcoRealContent .console-grid,
    #barcoRealContent .radio-layout,
    #barcoRealContent .receiver-layout {
        grid-template-columns:
            minmax(155px, 0.8fr)
            minmax(390px, 3fr)
            minmax(190px, 1fr) !important;
        gap: 9px !important;
    }

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

/* Mobile stacks normally. */

@media (max-width: 760px) {
    #barcoRealCabinet {
        width: calc(100vw - 8px) !important;
    }

    #barcoRealContent .radio-grid,
    #barcoRealContent .receiver-grid,
    #barcoRealContent .console-grid,
    #barcoRealContent .radio-layout,
    #barcoRealContent .receiver-layout {
        display: block !important;
    }

    #barcoRealContent .speaker,
    #barcoRealContent .speaker-panel,
    #barcoRealContent .left-column,
    #barcoRealContent .radio-speaker,
    #barcoRealContent .control-panel,
    #barcoRealContent .right-column,
    #barcoRealContent .station-controls,
    #barcoRealContent .receiver-controls {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

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