/* =========================================================
   JOHN HAY HOTELS
   WEATHER + ROAD CONDITIONS — ONE-SCREEN DASHBOARD
   FULL SCREEN / KIOSK VERSION

   REDESIGN NOTE:
   Previous version tiled the 5 panels as bordered cards on
   a hard grid (visible gap lines, white card boxes, shadows).
   This pass drops that "5 screenshots taped together" look
   for one continuous page: a single cream canvas, quiet rule
   lines standing in for hard borders, and a small brand mark
   repeated in every panel rather than a big lockup in one
   place. The pine-green / highland-gold palette and the DPWH
   + PAGASA status classes (dpwh-status-card.dpwh-*, etc.) are
   untouched — the JS still targets those exact class names.
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    /* core brand — same hues as the main kiosk, refined */

    --green: #1f4a43;

    --green-dark: #123430;

    --green-light: #3c8a72;

    --gold: #c79a54;

    --gold-light: #e0c084;


    /* canvas — warm highland-mist cream instead of stark white */

    --cream: #f6f3ec;

    --cream-deep: #ece5d4;

    --ink: #1d2420;


    /* quiet structural rules, not hard borders */

    --line: rgba(31, 74, 67, .16);

    --line-soft: rgba(31, 74, 67, .09);

    --soft-green:
        rgba(31, 74, 67, .055);

    --soft-gold:
        rgba(199, 154, 84, .14);

}


/* =========================================================
   GLOBAL
   ========================================================= */

* {

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

}


body {

    display: flex;

    flex-direction: column;

    background: var(--cream);

    color: var(--ink);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

}


/*
   Fraunces carries the hospitality/editorial voice on
   headings; Inter stays for data, labels and body copy,
   since numbers need to stay legible from across a lobby.
*/

h1,
.brand-word {

    font-family:
        "Fraunces",
        Georgia,
        serif;

}


/* =========================================================
   FULL SCREEN DECK
   ========================================================= */

.deck {

    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    /*
       Row split is NOT 50/50.

       It's tied to the tile scale math below (top row is
       3-across so each tile is scaled to 1/3 width; bottom
       row is 2-across so each tile is scaled to 1/2 width).
       For a tile to exactly fill its cell in BOTH directions
       —no letterboxing gap, no leftover strip— the row's
       height share has to match that same scale, and a
       uniform vertical "stretch" of 1.2x on every tile is
       what makes both rows land on a height share that adds
       up to exactly 100%. See the .slide comment below for
       the full derivation. Don't change this ratio without
       also updating the scale() values on the tile-placement
       rules, or the gap comes back.
    */

    grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);

    /*
       No visible gap between cells — the panels should read
       as one continuous page, not five bordered tiles. The
       row/column rules below are drawn on .deck's OWN
       background instead of a grid gap, precisely at the same
       33.33% / 66.67% / 50% / 40% marks used by the row/scale
       math above, so they line up with the panel edges without
       being scaled down along with the panels themselves (a
       border drawn on a .slide would shrink to a near-invisible
       sliver once that .slide's own scale(.3334, .4) is
       applied — these lines skip that problem entirely by
       living one level up, on .deck).
    */

    gap: 0;

    position: relative;

    width: 100vw;

    /*
       .deck no longer owns the full 100vh — the footer bar
       now sits below it in normal flow (see FOOTER further
       down), and .deck simply flexes to fill whatever height
       that leaves. Every .slide inside still assumes it's
       scaling down from a true 100vh canvas (see the .slide
       comment below), so shaving a slim footer bar off the
       bottom means the tiles land a few percent short of a
       perfect edge-to-edge fit. That's a deliberate trade for
       a footer that doesn't float on top of the panels — treat
       it the same as the other zoom/crop values here: fine as
       a starting point, worth a look on the real screen.
    */

    flex: 1 1 auto;

    min-width: 100vw;

    min-height: 0;

    overflow: hidden;

    background:

        /* vertical rule between weather + map (top row) */
        linear-gradient(var(--line), var(--line))
            no-repeat 33.333% 0 / 1px 40%,

        /* vertical rule between map + forecast (top row) */
        linear-gradient(var(--line), var(--line))
            no-repeat 66.666% 0 / 1px 40%,

        /* vertical rule between road + weather condition (bottom row) */
        linear-gradient(var(--line), var(--line))
            no-repeat 50% 100% / 1px 60%,

        /* horizontal rule between the two rows */
        linear-gradient(var(--line), var(--line))
            no-repeat 0 40% / 100% 1px,

        /* quiet highland wash — the one bit of atmosphere on the page */
        radial-gradient(
            ellipse at 12% 8%,
            var(--soft-green),
            transparent 42%
        ),

        radial-gradient(
            ellipse at 88% 96%,
            var(--soft-gold),
            transparent 46%
        ),

        var(--cream);

}


/* =========================================================
   SLIDES
   ========================================================= */

/*
   Each slide keeps the exact 100vw x 100vh "canvas" it was
   designed for (all its internal header/content positioning
   is percentage-based against this canvas). To show all 5 on
   one TV screen at once, every slide is placed into a grid
   cell (see the tile placement rules below) and then scaled
   down to fit that cell. This reuses all the existing
   internal CSS untouched.

   IMPORTANT — why the scale isn't the same on both axes:

   A tile scaled by the SAME factor both directions only
   fills its cell exactly if the cell's own aspect ratio
   matches the full-screen canvas's aspect ratio. It doesn't
   here: the top row's cells are 1/3 of the width but (with a
   plain 50/50 row split) 1/2 of the height, so a uniform
   scale that fills the width leaves a visible empty band
   above and below every top-row tile — and the same mismatch
   happens on the bottom row. Splitting scaleX/scaleY lets
   each axis fill its own cell exactly instead.

   The row heights above (2fr/3fr = 40%/60%) and the
   scale(scaleX, scaleY) values below are solved together so
   every tile fills its cell completely with a single,
   consistent 1.2x vertical stretch applied everywhere (mild
   and uniform, so nothing in one panel looks stretched
   differently than another). If you ever change how many
   tiles sit in a row, these numbers need to be re-solved
   together, not tweaked independently.
*/

.slide {

    position: relative;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

    background: #fff;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform-origin: center;

    justify-self: center;

    align-self: center;

}


/* =========================================================
   TILE PLACEMENT — TOP ROW (3 equal panels, 1/3 width each)
   ========================================================= */

.weather-slide {

    grid-column: 1 / 3;

    grid-row: 1;

    transform: scale(.3334, .4);

}


.map-slide {

    grid-column: 3 / 5;

    grid-row: 1;

    transform: scale(.3334, .4);

}


.windy-forecast-slide {

    grid-column: 5 / 7;

    grid-row: 1;

    transform: scale(.3334, .4);

}


/* =========================================================
   TILE PLACEMENT — BOTTOM ROW (2 equal panels, 1/2 width each)
   ========================================================= */

.road-update-slide {

    grid-column: 1 / 4;

    grid-row: 2;

    transform: scale(.5, .6);

}


.weather-cond-slide {

    grid-column: 4 / 7;

    grid-row: 2;

    transform: scale(.5, .6);

}


/* =========================================================
   ABSTRACT BACKGROUND
   ========================================================= */

.abstract-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(33, 79, 72, .025),
            rgba(255, 255, 255, .98) 45%,
            rgba(33, 79, 72, .018)
        );

}


.abstract-bg::before {

    content: "";

    position: absolute;

    width: 42vw;

    height: 42vw;

    left: -12vw;

    top: -17vw;

    border:
        1px solid
        rgba(33, 79, 72, .07);

    border-radius: 50%;

}


.abstract-bg::after {

    content: "";

    position: absolute;

    width: 35vw;

    height: 35vw;

    right: -13vw;

    bottom: -18vw;

    border:
        1px solid
        rgba(212, 173, 100, .08);

    border-radius: 50%;

}


/* =========================================================
   HEADER
   ========================================================= */

.header {

    position: absolute;

    z-index: 10;

    top: 4%;

    left: 4%;

    right: 4%;

    height: 10%;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

}


.header .eyebrow {

    color: var(--green);

    font-size:
        clamp(
            9px,
            .7vw,
            13px
        );

    font-weight: 600;

    letter-spacing: 2.5px;

    line-height: 1;

    margin-bottom: 7px;

}


.header h1 {

    margin: 0;

    color: var(--green);

    font-size:
        clamp(
            24px,
            2.7vw,
            48px
        );

    line-height: .95;

    font-weight: 700;

    letter-spacing: -1px;

}


/*
   A small, identical mark repeated in every panel's header —
   not one big lockup in a single panel. Sized to read as a
   quiet corner mark rather than a competing headline.
*/

.john-logo {

    width:
        clamp(
            34px,
            2.6vw,
            48px
        );

    height: auto;

    object-fit: contain;

    opacity: .88;

}


/* =========================================================
   TITLE TRANSITION
   ========================================================= */

.title-transition {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            110deg,
            rgba(231, 233, 232, .97),
            rgba(250, 250, 250, .97) 50%,
            rgba(255, 255, 255, .97)
        );

    color: var(--green);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: scale(1.02);

    transition:
        opacity .42s ease,
        transform .65s
        cubic-bezier(.2, .8, .2, 1);

}


.title-transition.show {

    opacity: 1;

    visibility: visible;

    transform: scale(1);

}


.transition-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


.transition-line {

    width: 42px;

    height: 2px;

    margin-bottom: 18px;

    background: var(--gold);

}


.transition-eyebrow {

    margin-bottom: 12px;

    color: var(--green);

    font-size:
        clamp(
            12px,
            1.5vw,
            22px
        );

    letter-spacing: 3px;

    font-weight: 600;

}


.transition-title {

    color: var(--green);

    font-size:
        clamp(
            32px,
            5vw,
            76px
        );

    line-height: .95;

    font-weight: 700;

    letter-spacing: -1px;

}


.transition-subtitle {

    margin-top: 12px;

    color: #777;

    font-size:
        clamp(
            8px,
            .8vw,
            13px
        );

    letter-spacing: 2px;

}


/* =========================================================
   SLIDE 1
   WEATHER WIDGET
   ========================================================= */

.weather-slide .header {

    top: 4%;

}


/*
   IMPORTANT:
   The old version used a large transform scale on the
   weather widget. That caused it to extend outside the
   container and appear cut off at the sides.

   This version keeps the widget centered and contained.
*/

.weather-widget-box {

    position: absolute;

    z-index: 4;

    left: 3%;

    right: 3%;

    top: 14%;

    bottom: 8%;

    width: auto;

    height: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: transparent;

}


/*
   Main WeatherWidget container.

   weatherwidget.org's embed is width-responsive but its
   HEIGHT is fixed to its own natural content size — it
   never stretches to fill a taller box the way a normal
   block element would (the same limitation as the Windy
   forecast embed elsewhere in this file). width:100% on
   its own just left it small and centered with empty
   space above/below.

   "zoom" (unlike "transform: scale") makes the browser
   re-layout the widget at a larger effective size, so it
   actually grows to occupy more of .weather-widget-box
   instead of only being drawn bigger on top of the same
   reserved space — which is what caused the old
   transform-based attempt to spill outside the container
   and get cut off at the sides.

   This value may need a small nudge up or down once it's
   seen on the actual kiosk screen, the same way the Windy
   forecast crop needed a couple of rounds of tuning.
*/

.weather-widget-box >
#ww_131c5e2bb4e64 {

    position: relative;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    height: auto;

    margin: 0 auto;

    display: block;

    overflow: hidden;

    transform: none !important;

    transform-origin: center center;

    zoom: 2.25;

}


/*
   Keep the generated widget inside the slide.
*/

.weather-widget-box
#ww_131c5e2bb4e64 > * {

    max-width: 100% !important;

}


/*
   Prevent the fallback hyperlink from being the only
   visible part during loading.
*/

.weather-widget-box
#ww_131c5e2bb4e64_u {

    display: inline-block;

    max-width: 100%;

}


/* =========================================================
   SLIDE 1 SOURCE LABEL
   ========================================================= */

.weather-slide .source-label {

    bottom: 4.5%;

}


/* =========================================================
   SLIDE 2
   WINDY WEATHER MAP
   ========================================================= */

.map-slide .header {

    z-index: 10;

}


/*
   Large Windy map.

   The map now occupies almost the complete usable
   screen instead of leaving large empty areas.
*/

.map-wrap {

    position: absolute;

    z-index: 1;

    left: 1%;

    right: 1%;

    top: 0.5%;

    bottom: 0.5%;

    width: auto;

    height: auto;

    overflow: hidden;

    background: #777;

    border:
        1px solid
        rgba(33, 79, 72, .15);

}


/*
   Windy iframe must fill the complete container.
*/

.map-wrap iframe {

    display: block;

    width: 80% !important;

    height: 80% !important;

    min-width: 80%;

    min-height: 80%;

    border: 0;

}


/* =========================================================
   SLIDE 3
   WINDY FORECAST
   ========================================================= */


/*
   The forecast wrapper is intentionally shorter than
   the iframe's own rendered content.

   This crops the gray unused section underneath the
   actual Windy forecast and keeps the important forecast
   information centered.

   NOTE: the iframe MUST stay tied to the wrapper via
   height:100% for this crop to work — decoupling them
   (giving the iframe its own fixed/centered height
   inside a taller wrapper) stops anything from actually
   overflowing the wrapper, so the gray section renders
   in full instead of being cropped. Keep them tied.

   "zoom" enlarges Windy's own rendered content (the same
   fix used for the Slide 1 weather widget), so the graph
   and labels are actually bigger and easier to read at a
   distance, rather than just occupying more empty space.
   Since the wrapper below is now also taller (the road
   condition panel that used to share this slide is gone),
   this crop ratio is an estimate and may need a small
   nudge once seen on the real kiosk screen — the same
   caveat that applied the last few times this slide's
   crop offsets were tuned.
*/

.forecast-wrap {

    position: absolute;

    z-index: 3;

    left: 2%;

    right: 2%;

    top: 15%;

    bottom: 8%;

    width: auto;

    overflow: hidden;

    background: transparent;

}


/*
   Make the Windy forecast fill the width, and zoom its
   own content larger so it actually occupies the taller
   space now that the road panel is gone.
*/

.forecast-wrap iframe {

    position: absolute;

    left: 0;

    top: 0;

    display: block;

    width: 100% !important;

    height: 100% !important;

    min-width: 100%;

    min-height: 100%;

    border: 0;

    zoom: 1.8;

}


/* =========================================================
   SOURCE LABEL
   ========================================================= */

.source-label {

    position: absolute;

    z-index: 20;

    left: 2.5%;

    bottom: 2.5%;

    color: var(--green);

    opacity: .62;

    font-size:
        clamp(
            8px,
            .65vw,
            12px
        );

    letter-spacing: 1.5px;

}


/* =========================================================
   SLIDE 4
   DPWH ROAD ADVISORY
   ========================================================= */

.dpwh-road-wrap {

    position: absolute;

    z-index: 4;

    left: 2.5%;

    right: 2.5%;

    top: 16%;

    bottom: 10%;

    width: auto;

    height: auto;

    display: flex;

    align-items: stretch;

    justify-content: center;

}


/*
   Used to be its own bordered, shadowed, blurred-backdrop
   card — exactly the "5 screenshots taped together" look the
   rest of this page moved away from. Flattened to sit directly
   on the shared cream canvas like every other panel; the road
   status/route cards further down still carry their own colored
   left-rule accent, so the panel doesn't lose its identity.
*/

#dpwh-widget {

    width: 100%;

    max-width: none;

    height: 100%;

    min-height: 0;

    padding:
        14px 20px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    background: transparent;

}


.dpwh-widget-header {

    flex: none;

}


/*
   The actual fix for the dead space under the road-status
   card: #dpwh-status is the container the script drops its
   markup into, and it had no flex rules at all — so the
   status card inside it (and the loading/error/no-update
   states) just sized to their own content and left everything
   below them blank. Making this a flex column that grows lets
   whichever state is inside actually fill the panel.
*/

#dpwh-status {

    flex: 1 1 auto;

    min-height: 0;

    display: flex;

    flex-direction: column;

}


/* =========================================================
   DPWH HEADER
   ========================================================= */

.dpwh-widget-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 8px;

    border-bottom:
        1px solid
        var(--line-soft);

}


.dpwh-widget-label {

    color: var(--green);

    font-size:
        clamp(
            9px,
            .75vw,
            14px
        );

    font-weight: 700;

    letter-spacing: 2px;

}


.dpwh-widget-source {

    color: #888;

    font-size:
        clamp(
            8px,
            .65vw,
            12px
        );

    letter-spacing: 1.5px;

}


/* =========================================================
   DPWH MANUAL REFRESH BUTTON
   ========================================================= */

.dpwh-widget-header-right {

    display: flex;

    align-items: center;

    gap: 12px;

}


.dpwh-refresh-btn {

    display: flex;

    align-items: center;

    gap: 5px;

    padding:
        5px 11px;

    border:
        1px solid
        rgba(
            33,
            79,
            72,
            .3
        );

    border-radius: 999px;

    background:
        rgba(
            33,
            79,
            72,
            .05
        );

    color: var(--green);

    font-family: inherit;

    font-size:
        clamp(
            8px,
            .65vw,
            12px
        );

    font-weight: 700;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        background .2s ease,
        opacity .2s ease;

}


.dpwh-refresh-btn:hover {

    background:
        rgba(
            33,
            79,
            72,
            .12
        );

}


.dpwh-refresh-btn:disabled {

    cursor: default;

    opacity: .6;

}


.dpwh-refresh-icon {

    display: inline-block;

    font-size:
        clamp(
            10px,
            .85vw,
            15px
        );

    line-height: 1;

}


.dpwh-refresh-btn.is-refreshing
.dpwh-refresh-icon {

    animation:
        dpwh-refresh-spin
        .8s
        linear
        infinite;

}


@keyframes dpwh-refresh-spin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


@media(max-width: 800px) {

    .dpwh-refresh-label {

        display: none;

    }


    .dpwh-refresh-btn {

        padding: 5px 8px;

    }

}


/* =========================================================
   DPWH LOADING
   ========================================================= */

.dpwh-loading {

    flex: 1 1 auto;

    min-height: 200px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #777;

    font-size: 12px;

}


.dpwh-loading-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--gold);

    animation:
        dpwh-loading-pulse
        1.1s
        infinite
        ease-in-out;

}


@keyframes dpwh-loading-pulse {

    0%,
    100% {

        opacity: .35;

        transform: scale(.8);

    }

    50% {

        opacity: 1;

        transform: scale(1);

    }

}


/* =========================================================
   DPWH CURRENT ROAD STATUS
   ========================================================= */


/*
   Used to be locked to a fixed 185px so it matched the
   alternative-route card next to it — but .dpwh-route (below)
   was already updated at some point to min-height:185px /
   flex:1 1 auto instead of that fixed height, and this one
   never got the matching update. That mismatch is exactly why
   a short status ("LIGHT VEHICLES ONLY" + one line of summary)
   left a big dead gap under it instead of the card growing to
   fill the panel the way the route card already does. Content
   stays vertically centered (justify-content:center), it's
   just the box itself that now grows.
*/

.dpwh-status-card {

    width: 100%;

    height: auto;

    min-height: 185px;

    max-height: none;

    flex: 1 1 auto;

    margin-top: 10px;

    padding:
        16px 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

    border-left:
        5px solid
        #999;

    border-radius: 8px;

    background: #fff;

    box-shadow:
        0 7px 20px
        rgba(
            33,
            79,
            72,
            .045
        );

}


.dpwh-status-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.dpwh-status-row {

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;

}


.dpwh-status-caption {

    margin-bottom: 5px;

    color: #888;

    font-size:
        clamp(
            8px,
            .6vw,
            11px
        );

    font-weight: 700;

    letter-spacing: 1.5px;

}


.dpwh-status-icon {

    width:
        clamp(
            38px,
            3vw,
            50px
        );

    height:
        clamp(
            38px,
            3vw,
            50px
        );

    flex: none;

    display: grid;

    place-items: center;

    border-radius: 50%;

    font-size:
        clamp(
            18px,
            1.5vw,
            25px
        );

    font-weight: 700;

}


.dpwh-status-word {

    color: #111;

    font-size:
        clamp(
            26px,
            3vw,
            50px
        );

    line-height: .95;

    font-weight: 700;

    letter-spacing: -1.5px;

}


.dpwh-status-pill {

    flex: none;

    padding:
        8px 13px;

    border-radius: 999px;

    font-size:
        clamp(
            8px,
            .7vw,
            13px
        );

    font-weight: 800;

    letter-spacing: 1px;

    white-space: nowrap;

}


.dpwh-road-name {

    margin-top: 12px;

    color: var(--green);

    font-size:
        clamp(
            20px,
            2vw,
            34px
        );

    line-height: 1;

    font-weight: 700;

}


.dpwh-hazard {

    margin-top: 7px;

    color: #a46d00;

    font-size:
        clamp(
            8px,
            .65vw,
            12px
        );

    font-weight: 700;

    letter-spacing: 1px;

}


.dpwh-summary {

    margin-top: 7px;

    color: #666;

    font-size:
        clamp(
            9px,
            .7vw,
            13px
        );

    line-height: 1.3;

}


/* =========================================================
   STATUS COLORS
   ========================================================= */

.dpwh-status-card.dpwh-unknown {

    border-left-color: #999;

}


.dpwh-status-card.dpwh-unknown
.dpwh-status-icon {

    background:
        rgba(
            120,
            120,
            120,
            .08
        );

    color: #777;

}


.dpwh-status-card.dpwh-unknown
.dpwh-status-word {

    color: #111;

}


.dpwh-status-card.dpwh-closed {

    border-left-color: #c62828;

}


.dpwh-status-card.dpwh-closed
.dpwh-status-icon {

    background:
        rgba(
            198,
            40,
            40,
            .1
        );

    color: #c62828;

}


.dpwh-status-card.dpwh-closed
.dpwh-status-word {

    color: #c62828;

}


.dpwh-status-card.dpwh-one-lane {

    border-left-color: #d28c00;

}


.dpwh-status-card.dpwh-one-lane
.dpwh-status-icon {

    background:
        rgba(
            210,
            140,
            0,
            .12
        );

    color: #b06d00;

}


.dpwh-status-card.dpwh-one-lane
.dpwh-status-word {

    color: #b06d00;

}


.dpwh-status-card.dpwh-passable {

    border-left-color: #2e7d32;

}


.dpwh-status-card.dpwh-passable
.dpwh-status-icon {

    background:
        rgba(
            46,
            125,
            50,
            .1
        );

    color: #2e7d32;

}


.dpwh-status-card.dpwh-passable
.dpwh-status-word {

    color: #2e7d32;

}


/* =========================================================
   DPWH ALTERNATIVE ROUTE
   ========================================================= */


/*
   EXACT SAME DIMENSIONS AS CURRENT ROAD STATUS.
*/

.dpwh-route {

    position: relative;

    width: 100%;

    height: auto;

    min-height: 185px;

    max-height: none;

    flex: 1 1 auto;

    margin-top: 10px;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(
            46,
            125,
            50,
            .18
        );

    border-left:
        5px solid
        #2e7d32;

    border-radius: 8px;

    background:
        linear-gradient(
            105deg,
            rgba(
                46,
                125,
                50,
                .075
            ),
            rgba(
                255,
                255,
                255,
                .95
            )
        );

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


/* =========================================================
   ROUTE GLOW
   ========================================================= */

.dpwh-route-glow {

    position: absolute;

    right: -55px;

    top: -65px;

    width: 210px;

    height: 210px;

    border-radius: 50%;

    background:
        rgba(
            46,
            125,
            50,
            .07
        );

    pointer-events: none;

}


/* =========================================================
   ROUTE HEADER
   ========================================================= */

.dpwh-route-head {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    width: 100%;

    padding:
        20px 24px 14px;

}


.dpwh-route-heading {

    display: flex;

    align-items: center;

    gap: 16px;

    min-width: 0;

}


.dpwh-route-icon {

    width: 54px;

    height: 54px;

    flex: none;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(
            46,
            125,
            50,
            .1
        );

    color: #2e7d32;

    font-size: 27px;

    font-weight: 800;

}


.dpwh-route-label {

    color: #287737;

    font-size:
        clamp(
            13px,
            1.15vw,
            21px
        );

    font-weight: 800;

    letter-spacing: 1.5px;

}


.dpwh-route-subtitle {

    margin-top: 4px;

    color: #777;

    font-size:
        clamp(
            10px,
            .85vw,
            15px
        );

}


.dpwh-route-status {

    flex: none;

    padding:
        11px 19px;

    border-radius: 999px;

    font-size:
        clamp(
            11px,
            .95vw,
            17px
        );

    font-weight: 800;

    letter-spacing: .8px;

    white-space: nowrap;

}


.route-status-open {

    color: #2e7d32;

    background:
        rgba(
            46,
            125,
            50,
            .11
        );

}


.route-status-advised {

    color: #8a671d;

    background:
        rgba(
            212,
            173,
            100,
            .18
        );

}


/* =========================================================
   ROUTE LIST
   ========================================================= */

.dpwh-route-list {

    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 14px;

    margin:
        0 24px;

    flex: 1;

    align-content: center;

}


.dpwh-route-item {

    min-width: 0;

    min-height: 68px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        14px 18px;

    border:
        1px solid
        rgba(
            33,
            79,
            72,
            .10
        );

    border-radius: 8px;

    background:
        rgba(
            255,
            255,
            255,
            .78
        );

}


.dpwh-route-item-icon {

    width: 38px;

    height: 38px;

    flex: none;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(
            46,
            125,
            50,
            .09
        );

    color: #2e7d32;

    font-size: 18px;

    font-weight: 700;

}


.dpwh-route-item-content {

    min-width: 0;

}


.dpwh-route-item-name {

    color: var(--green);

    font-size:
        clamp(
            13px,
            1.05vw,
            19px
        );

    font-weight: 700;

    line-height: 1.15;

}


.dpwh-route-item-condition {

    margin-top: 3px;

    color: #777;

    font-size:
        clamp(
            9px,
            .75vw,
            13px
        );

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   ROUTE FOOTER
   ========================================================= */

.dpwh-route-footer {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    gap: 9px;

    margin:
        0 24px 12px;

    padding-top: 9px;

    border-top:
        1px solid
        rgba(
            33,
            79,
            72,
            .09
        );

    color: #777;

    font-size:
        clamp(
            9px,
            .75vw,
            13px
        );

    line-height: 1.3;

}


.dpwh-route-footer-icon {

    width: 19px;

    height: 19px;

    flex: none;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            33,
            79,
            72,
            .25
        );

    border-radius: 50%;

    color: var(--green);

    font-size: 11px;

    font-weight: 700;

}


/* =========================================================
   LAST UPDATED
   ========================================================= */


/*
   LAST UPDATED is intentionally much larger.
*/

#dpwh-time {

    flex: none;

    margin-top: 7px;

    padding-top: 6px;

    border-top:
        1px solid
        rgba(
            33,
            79,
            72,
            .10
        );

    color: #888;

    font-size:
        clamp(
            13px,
            1vw,
            19px
        );

    line-height: 1.25;

    letter-spacing: .5px;

}


#dpwh-time .updated-label {

    margin-right: 7px;

    color: #999;

    font-size:
        clamp(
            12px,
            .9vw,
            17px
        );

    font-weight: 500;

    letter-spacing: .8px;

}


#dpwh-time strong {

    color: var(--green);

    font-size:
        clamp(
            16px,
            1.25vw,
            23px
        );

    font-weight: 700;

}


#dpwh-time span {

    color: #999;

}


/* =========================================================
   LAST CHECKED
   ========================================================= */


/*
   Smaller than LAST UPDATED by design.
*/

#dpwh-checked {

    flex: none;

    margin-top: 2px;

    color: #aaa;

    font-size:
        clamp(
            8px,
            .55vw,
            11px
        );

    line-height: 1.2;

    letter-spacing: .3px;

}


.dpwh-stale-notice {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 10px;

    padding:
        10px 14px;

    border-radius: 8px;

    background:
        rgba(
            212,
            173,
            100,
            .14
        );

    color: #8a671d;

    font-size:
        clamp(
            9px,
            .75vw,
            13px
        );

    line-height: 1.4;

}


.dpwh-stale-icon {

    flex: none;

    width: 18px;

    height: 18px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(
            212,
            173,
            100,
            .3
        );

    color: #8a671d;

    font-size: 11px;

    font-weight: 700;

    font-style: italic;

}


/* =========================================================
   NO UPDATE
   ========================================================= */

.dpwh-no-update {

    flex: 1 1 auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    margin-top: 10px;

    padding: 18px;

    border-left:
        5px solid
        #999;

    background: #fff;

}


.dpwh-no-update-icon {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    margin-bottom: 8px;

    border-radius: 50%;

    background:
        rgba(
            46,
            125,
            50,
            .10
        );

    color: #2e7d32;

    font-size: 21px;

    font-weight: 700;

}


.dpwh-no-update-status {

    color: var(--green);

    font-size: 21px;

    font-weight: 700;

}


.dpwh-no-update-text {

    margin-top: 7px;

    color: #666;

    font-size: 12px;

}


/* =========================================================
   ERROR
   ========================================================= */

.dpwh-error {

    flex: 1 1 auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    margin-top: 10px;

    padding: 18px;

    border-left:
        5px solid
        #c62828;

    background: #fff;

}


.dpwh-error-icon {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    margin-bottom: 8px;

    border-radius: 50%;

    background:
        rgba(
            198,
            40,
            40,
            .1
        );

    color: #c62828;

    font-size: 21px;

    font-weight: 700;

}


.dpwh-error-status {

    color: #c62828;

    font-size: 21px;

    font-weight: 700;

}


.dpwh-error-text {

    margin-top: 7px;

    color: #666;

    font-size: 12px;

}


/* =========================================================
   SLIDE 5
   PAG-ASA WEATHER CONDITION
   ========================================================= */

.wx-wrap {

    position: absolute;

    z-index: 4;

    left: 2%;

    right: 2%;

    top: 13%;

    bottom: 6%;

    width: auto;

    height: auto;

    display: flex;

    align-items: stretch;

    justify-content: center;

}


/* Same flattening as #dpwh-widget above — see that comment. */

#wx-widget {

    width: 100%;

    max-width: none;

    height: 100%;

    min-height: 0;

    padding:
        14px 20px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    background: transparent;

}


/* =========================================================
   WX HEADER
   ========================================================= */

.wx-widget-header {

    flex: none;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 8px;

    border-bottom:
        1px solid
        var(--line-soft);

}


/* Same fix as #dpwh-status above — see that comment. */

#wx-status {

    flex: 1 1 auto;

    min-height: 0;

    display: flex;

    flex-direction: column;

}


.wx-widget-label {

    color: var(--green);

    font-size:
        clamp(
            9px,
            .75vw,
            14px
        );

    font-weight: 700;

    letter-spacing: 2px;

}


.wx-widget-source {

    color: #888;

    font-size:
        clamp(
            8px,
            .65vw,
            12px
        );

    letter-spacing: 1.5px;

}


/* =========================================================
   WX LOADING
   ========================================================= */

.wx-loading {

    flex: 1 1 auto;

    min-height: 200px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #777;

    font-size: 12px;

}


.wx-loading-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--gold);

    animation:
        dpwh-loading-pulse
        1.1s
        infinite
        ease-in-out;

}


/* =========================================================
   WX CONDITION CARD
   ========================================================= */

.wx-card {

    flex: 1;

    margin-top: 10px;

    padding:
        22px 26px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

    border-left:
        5px solid
        var(--gold);

    border-radius: 8px;

    background:
        linear-gradient(
            105deg,
            rgba(
                212,
                173,
                100,
                .09
            ),
            rgba(
                255,
                255,
                255,
                .96
            )
        );

    box-shadow:
        0 7px 20px
        rgba(
            33,
            79,
            72,
            .045
        );

}


.wx-region-label {

    color: #888;

    font-size:
        clamp(
            8px,
            .6vw,
            11px
        );

    font-weight: 700;

    letter-spacing: 1.5px;

}


.wx-condition-word {

    margin-top: 8px;

    color: var(--green);

    font-size:
        clamp(
            24px,
            2.6vw,
            44px
        );

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -.5px;

}


.wx-caused-pill {

    align-self: flex-start;

    margin-top: 12px;

    padding:
        8px 14px;

    border-radius: 999px;

    background:
        rgba(
            212,
            173,
            100,
            .18
        );

    color: #8a671d;

    font-size:
        clamp(
            8px,
            .7vw,
            13px
        );

    font-weight: 800;

    letter-spacing: 1px;

    white-space: nowrap;

}


.wx-impacts-label {

    margin-top: 16px;

    color: #888;

    font-size:
        clamp(
            8px,
            .6vw,
            11px
        );

    font-weight: 700;

    letter-spacing: 1.5px;

}


.wx-impacts {

    margin-top: 5px;

    color: #555;

    font-size:
        clamp(
            10px,
            .95vw,
            16px
        );

    line-height: 1.4;

}


.wx-synopsis-text {

    margin-top: 14px;

    color: #444;

    font-size:
        clamp(
            15px,
            1.7vw,
            27px
        );

    line-height: 1.65;

}


/* =========================================================
   WX SYNOPSIS CARD
   ========================================================= */

/*
    The synopsis card gets its own bigger, top-aligned
    layout instead of reusing .wx-card's centered/hidden
    overflow behavior. A PAGASA synopsis is a full
    paragraph — often much longer than the short table
    condition word — so it needs room to actually read,
    and a scrollbar as a safety net instead of getting
    silently clipped if it runs long.
*/

.wx-card-synopsis {

    justify-content: flex-start;

    overflow-y: auto;

    padding:
        32px 38px;

}


.wx-synopsis-label {

    color: var(--green);

    font-size:
        clamp(
            10px,
            .85vw,
            15px
        );

    font-weight: 700;

    letter-spacing: 2px;

}


/* =========================================================
   WX NO UPDATE
   ========================================================= */

.wx-no-update {

    margin-top: 10px;

    padding: 18px;

    border-left:
        5px solid
        #999;

    background: #fff;

}


.wx-no-update-status {

    color: var(--green);

    font-size: 21px;

    font-weight: 700;

}


.wx-no-update-text {

    margin-top: 7px;

    color: #666;

    font-size: 12px;

}


/* =========================================================
   WX ERROR
   ========================================================= */

.wx-error {

    margin-top: 10px;

    padding: 18px;

    border-left:
        5px solid
        #c62828;

    background: #fff;

}


.wx-error-status {

    color: #c62828;

    font-size: 21px;

    font-weight: 700;

}


.wx-error-text {

    margin-top: 7px;

    color: #666;

    font-size: 12px;

}


/* =========================================================
   WX LAST UPDATED / CHECKED
   ========================================================= */

#wx-time {

    flex: none;

    margin-top: 7px;

    padding-top: 6px;

    border-top:
        1px solid
        rgba(
            33,
            79,
            72,
            .10
        );

    color: #888;

    font-size:
        clamp(
            13px,
            1vw,
            19px
        );

    line-height: 1.25;

    letter-spacing: .5px;

}


#wx-time .updated-label {

    margin-right: 7px;

    color: #999;

    font-size:
        clamp(
            12px,
            .9vw,
            17px
        );

    font-weight: 500;

    letter-spacing: .8px;

}


#wx-time strong {

    color: var(--green);

    font-size:
        clamp(
            16px,
            1.25vw,
            23px
        );

    font-weight: 700;

}


#wx-time span {

    color: #999;

}


#wx-checked {

    flex: none;

    margin-top: 2px;

    color: #aaa;

    font-size:
        clamp(
            8px,
            .55vw,
            11px
        );

    line-height: 1.2;

    letter-spacing: .3px;

}


/* =========================================================
   FOOTER
   ========================================================= */

/*
   Used to be an absolutely-positioned pill floating on top
   of whatever content sat at the very bottom of a full-screen
   slide. Now that 5 panels share one screen, that overlapped
   the bottom-row panels outright. It's a normal in-flow bar
   below .deck now (see the body/.deck flex change above) —
   full width, no shadow, no pill — so it reads as the page's
   own footer rather than a badge sitting on top of the content.
*/

.footer {

    position: relative;

    flex: 0 0 auto;

    width: 100%;

    padding:
        clamp(6px, 1vh, 12px) 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--cream);

    border-top:
        1px solid
        var(--line-soft);

}


.footer > img {

    width:
        clamp(
            110px,
            9vw,
            160px
        );

    height: auto;

    opacity: .82;

}


.controls {

    position: absolute;

    right: 2.5%;

    display: flex;

    align-items: center;

    gap: 7px;

    pointer-events: auto;

}


.controls button {

    border: 0;

    background: transparent;

    color: var(--green);

    font-size:
        clamp(
            24px,
            2vw,
            34px
        );

    line-height: 1;

    cursor: pointer;

}


.dot {

    display: inline-block;

    width: 6px;

    height: 6px;

    margin: 0 3px;

    border-radius: 50%;

    background: #aab6b3;

    transition:
        transform .25s ease,
        background .25s ease;

}


.dot.active {

    background: var(--green);

    transform: scale(1.35);

}


/* =========================================================
   PROGRESS BAR
   ========================================================= */

.progress {

    position: absolute;

    z-index: 50;

    left: 0;

    right: 0;

    bottom: 0;

    height: 3px;

    background:
        rgba(
            33,
            79,
            72,
            .10
        );

}


.progress span {

    display: block;

    width: 25%;

    height: 100%;

    background: var(--gold);

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media(min-width: 1400px) {


    .weather-widget-box {

        left: 4%;

        right: 4%;

        top: 12%;

        bottom: 6%;

    }


    .map-wrap {

        left: 1%;

        right: 1%;

        top: 14%;

        bottom: 9%;

    }


    .forecast-wrap {

        left: 1.5%;

        right: 1.5%;

        top: 14%;

        bottom: 6%;

    }


    .dpwh-road-wrap {

        left: 2%;

        right: 2%;

        top: 15%;

        bottom: 9%;

    }


    .wx-wrap {

        left: 2%;

        right: 2%;

        top: 15%;

        bottom: 9%;

    }

}


/* =========================================================
   SHORT DESKTOP SCREENS
   ========================================================= */

@media(
    max-height: 700px
)
and
(
    min-width: 801px
) {


    .header {

        top: 3%;

    }


    .weather-widget-box {

        top: 13%;

        bottom: 7%;

    }


    .map-wrap {

        top: 13%;

        bottom: 9%;

    }


    .forecast-wrap {

        top: 13%;

        bottom: 6%;

    }


    .dpwh-road-wrap {

        top: 14%;

        bottom: 9%;

    }


    .wx-wrap {

        top: 14%;

        bottom: 9%;

    }


    .dpwh-status-card {

        height: 165px;

        min-height: 165px;

        max-height: 165px;

    }


    .dpwh-route {

        height: auto;

        min-height: 165px;

        max-height: none;

    }


    #dpwh-time {

        margin-top: 5px;

        padding-top: 5px;

    }


    #dpwh-checked {

        margin-top: 1px;

    }


    #wx-time {

        margin-top: 5px;

        padding-top: 5px;

    }


    #wx-checked {

        margin-top: 1px;

    }

}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media(max-width: 800px) {


    .header {

        left: 5%;

        right: 5%;

        top: 4%;

    }


    .john-logo {

        width: 27%;

    }


    /* ---------------------------------------------
       SLIDE 1
       --------------------------------------------- */

    .weather-widget-box {

        left: 4%;

        right: 4%;

        top: 55%;

        bottom: 8%;

    }


    .weather-widget-box >
    #ww_131c5e2bb4e64 {

        /*
           A screen this narrow doesn't have the spare
           width to safely support the desktop zoom level
           without the sides getting clipped by
           overflow:hidden.
        */

        zoom: 1.15;

    }


    /* ---------------------------------------------
       SLIDE 2
       --------------------------------------------- */

    .map-wrap {

        left: 2%;

        right: 2%;

        top: 17%;

        bottom: 11%;

    }


    /* ---------------------------------------------
       SLIDE 3
       --------------------------------------------- */

    .forecast-wrap {

        left: 2%;

        right: 2%;

        top: 18%;

        bottom: 8%;

    }


    .forecast-wrap iframe {

        /*
           A screen this narrow doesn't have the spare
           width to safely support the desktop zoom level
           without the sides getting clipped by
           overflow:hidden.
        */

        zoom: 1.15;

    }


    /* ---------------------------------------------
       SLIDE 4
       --------------------------------------------- */

    .dpwh-road-wrap {

        left: 4%;

        right: 4%;

        top: 19%;

        bottom: 11%;

    }


    #dpwh-widget {

        padding:
            12px 14px;

    }


    .dpwh-status-card {

        height: 155px;

        min-height: 155px;

        max-height: 155px;

    }


    .dpwh-route {

        height: auto;

        min-height: 155px;

        max-height: none;

    }


    .dpwh-status-word {

        font-size: 25px;

    }


    .dpwh-road-name {

        font-size: 20px;

    }


    .dpwh-status-pill {

        display: none;

    }


    .dpwh-route-head {

        padding:
            10px 12px 6px;

    }


    .dpwh-route-list {

        grid-template-columns: 1fr;

        margin:
            0 12px;

        gap: 5px;

    }


    .dpwh-route-item {

        min-height: 32px;

        padding:
            5px 7px;

    }


    .dpwh-route-footer {

        margin:
            0 12px 6px;

    }


    #dpwh-time {

        font-size: 12px;

    }


    #dpwh-time .updated-label {

        font-size: 11px;

    }


    #dpwh-time strong {

        font-size: 15px;

    }


    #dpwh-checked {

        font-size: 8px;

    }


    /* ---------------------------------------------
       SLIDE 5
       --------------------------------------------- */

    .wx-wrap {

        left: 4%;

        right: 4%;

        top: 19%;

        bottom: 11%;

    }


    #wx-widget {

        padding:
            12px 14px;

    }


    .wx-card {

        padding:
            16px 18px;

    }


    .wx-condition-word {

        font-size: 22px;

    }


    #wx-time {

        font-size: 12px;

    }


    #wx-time .updated-label {

        font-size: 11px;

    }


    #wx-time strong {

        font-size: 15px;

    }


    #wx-checked {

        font-size: 8px;

    }


    .source-label {

        left: 4%;

        bottom: 3%;

    }


    .footer {

        height: 10%;

    }


    .footer > img {

        width:
            clamp(
                110px,
                24vw,
                170px
            );

        padding:
            7px 16px;

    }


    .controls {

        right: 4%;

    }


    .transition-title {

        font-size:
            clamp(
                34px,
                8vw,
                55px
            );

    }


    .transition-eyebrow {

        font-size: 14px;

    }


    .transition-subtitle {

        font-size: 8px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media(max-width: 500px) {


    .header h1 {

        font-size: 24px;

    }


    .weather-widget-box {

        left: 2%;

        right: 2%;

    }


    .weather-widget-box >
    #ww_131c5e2bb4e64 {

        zoom: 1;

    }


    .map-wrap {

        left: 1%;

        right: 1%;

    }


    .forecast-wrap {

        left: 1%;

        right: 1%;

    }


    .forecast-wrap iframe {

        zoom: 1;

    }


    .dpwh-road-wrap {

        left: 3%;

        right: 3%;

    }


    .dpwh-status-card {

        height: 145px;

        min-height: 145px;

        max-height: 145px;

    }


    .dpwh-route {

        height: auto;

        min-height: 145px;

        max-height: none;

    }


    .dpwh-status-word {

        font-size: 22px;

    }


    .dpwh-road-name {

        font-size: 18px;

    }


    .wx-wrap {

        left: 3%;

        right: 3%;

    }


    .wx-condition-word {

        font-size: 20px;

    }

}
/* =========================================================
   FINAL TV WEATHER REPORT LAYOUT — V4
   Keeps the original HTML + JS + PHP functionality intact.
   The five sections are composed as ONE editorial report,
   not five equal boxes.
   ========================================================= */

:root {
    --report-cream: #f6f3ec;
    --report-green: #1f4a43;
    --report-gold: #c79a54;
    --report-rule: rgba(31,74,67,.14);
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--report-cream);
}

body {
    display: block;
}

/* One continuous 16:9 composition */
.deck {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr) !important;
    grid-template-rows: minmax(0, 3.7fr) minmax(0, 1.05fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(31,74,67,.055), transparent 28%),
        radial-gradient(circle at 95% 100%, rgba(199,154,84,.08), transparent 30%),
        var(--report-cream) !important;
}

/* All five sections are rendered at the same time. */
.slide {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    inset: auto !important;
    transform: none !important;
    transform-origin: initial !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    background: transparent !important;
    justify-self: stretch !important;
    align-self: stretch !important;
}

/* Hero: the map gets most of the screen. */
.map-slide {
    grid-column: 1 !important;
    grid-row: 1 !important;
    border-right: 1px solid var(--report-rule) !important;
    border-bottom: 1px solid var(--report-rule) !important;
}

/* Smaller but useful forecast report beside the map. */
.weather-slide {
    grid-column: 2 !important;
    grid-row: 1 !important;
    border-bottom: 1px solid var(--report-rule) !important;
}

.windy-forecast-slide {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

/* Compact information band underneath the hero area. */
.road-update-slide {
    grid-column: 1 !important;
    grid-row: 2 !important;
    border-right: 1px solid var(--report-rule) !important;
}

.weather-cond-slide {
    display: none !important;
}

/* Use the right side's lower half for the PAGASA condition instead.
   The road section remains the primary bottom-left information strip. */

/* Headers become report headings, not card titles. */
.header,
.weather-slide .header,
.map-slide .header,
.road-update-slide .header,
.windy-forecast-slide .header,
.weather-cond-slide .header {
    position: absolute !important;
    top: clamp(16px, 1.5vw, 30px) !important;
    left: clamp(18px, 1.7vw, 34px) !important;
    right: clamp(18px, 1.7vw, 34px) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 20 !important;
}

.header .eyebrow {
    font-size: clamp(8px, .55vw, 12px) !important;
    letter-spacing: 2px !important;
    margin-bottom: 5px !important;
}

.header h1 {
    font-size: clamp(25px, 2.1vw, 48px) !important;
    line-height: .9 !important;
    letter-spacing: -1.3px !important;
}

.john-logo {
    width: clamp(38px, 2.6vw, 54px) !important;
    max-height: 40px !important;
}

/* =========================================================
   HERO MAP
   ========================================================= */
.map-slide .map-wrap {
    position: absolute !important;
    left: clamp(16px, 1.5vw, 30px) !important;
    right: clamp(16px, 1.5vw, 30px) !important;
    top: clamp(86px, 7.2vw, 128px) !important;
    bottom: clamp(18px, 1.8vw, 32px) !important;
    width: auto !important;
    height: auto !important;
    background: #596967 !important;
    border: 0 !important;
    box-shadow: 0 10px 28px rgba(20,45,40,.10) !important;
}

.map-slide .map-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

.map-slide .source-label {
    left: clamp(18px, 1.7vw, 34px) !important;
    bottom: 7px !important;
    font-size: clamp(7px, .48vw, 10px) !important;
}

/* =========================================================
   LOCAL FORECAST — RIGHT TOP
   ========================================================= */
.weather-slide .weather-widget-box {
    position: absolute !important;
    left: clamp(16px, 1.5vw, 30px) !important;
    right: clamp(16px, 1.5vw, 30px) !important;
    top: clamp(78px, 6.5vw, 116px) !important;
    bottom: clamp(18px, 1.8vw, 32px) !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: transparent !important;
}

.weather-slide .weather-widget-box > #ww_131c5e2bb4e64 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    transform: none !important;
    zoom: 1 !important;
}

.weather-slide .weather-widget-box #ww_131c5e2bb4e64_u {
    display: inline-block !important;
}

.weather-slide .source-label {
    left: clamp(16px, 1.5vw, 30px) !important;
    bottom: 5px !important;
    font-size: clamp(7px, .45vw, 9px) !important;
}

/* =========================================================
   EXTENDED FORECAST — SMALL RIGHT PANEL
   ========================================================= */
.windy-forecast-slide .forecast-wrap {
    position: absolute !important;
    left: clamp(14px, 1.3vw, 26px) !important;
    right: clamp(14px, 1.3vw, 26px) !important;
    top: clamp(66px, 5.3vw, 92px) !important;
    bottom: clamp(10px, 1vw, 18px) !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
    background: transparent !important;
}

.windy-forecast-slide .forecast-wrap iframe {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    zoom: 1 !important;
    border: 0 !important;
}

.windy-forecast-slide .header h1 {
    font-size: clamp(18px, 1.55vw, 30px) !important;
}

.windy-forecast-slide .john-logo {
    width: clamp(30px, 2vw, 42px) !important;
}

.windy-forecast-slide .source-label {
    display: none !important;
}

/* =========================================================
   ROAD CONDITIONS — COMPACT BOTTOM REPORT
   ========================================================= */
.road-update-slide .header h1 {
    font-size: clamp(17px, 1.45vw, 29px) !important;
}

.road-update-slide .john-logo {
    width: clamp(30px, 2vw, 42px) !important;
}

.road-update-slide .dpwh-road-wrap {
    position: absolute !important;
    left: clamp(16px, 1.5vw, 30px) !important;
    right: clamp(16px, 1.5vw, 30px) !important;
    top: clamp(58px, 4.8vw, 84px) !important;
    bottom: 7px !important;
    width: auto !important;
    height: auto !important;
}

.road-update-slide #dpwh-widget {
    padding: 0 !important;
    background: transparent !important;
}

.road-update-slide .dpwh-widget-header {
    padding-bottom: 4px !important;
    border-bottom: 1px solid var(--report-rule) !important;
}

.road-update-slide .dpwh-widget-label {
    font-size: clamp(7px, .48vw, 10px) !important;
    letter-spacing: 1.5px !important;
}

.road-update-slide .dpwh-refresh-btn,
.road-update-slide .dpwh-widget-source {
    transform: scale(.82);
    transform-origin: right center;
}

.road-update-slide #dpwh-status {
    min-height: 0 !important;
}

.road-update-slide .dpwh-status-card {
    min-height: 0 !important;
    margin-top: 4px !important;
    padding: 5px 10px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    justify-content: center !important;
}

.road-update-slide .dpwh-status-caption {
    margin-bottom: 1px !important;
    font-size: 7px !important;
    letter-spacing: 1px !important;
}

.road-update-slide .dpwh-status-word {
    font-size: clamp(17px, 1.45vw, 28px) !important;
    line-height: .9 !important;
}

.road-update-slide .dpwh-status-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
}

.road-update-slide .dpwh-road-name {
    margin-top: 4px !important;
    font-size: clamp(14px, 1.2vw, 22px) !important;
}

.road-update-slide .dpwh-hazard,
.road-update-slide .dpwh-summary {
    margin-top: 2px !important;
    font-size: clamp(7px, .45vw, 9px) !important;
    line-height: 1.15 !important;
}

.road-update-slide .dpwh-route {
    min-height: 0 !important;
    margin-top: 4px !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.road-update-slide .dpwh-route-head {
    padding: 4px 7px !important;
}

.road-update-slide .dpwh-route-icon {
    width: 26px !important;
    height: 26px !important;
}

.road-update-slide .dpwh-route-heading {
    gap: 7px !important;
}

.road-update-slide .dpwh-route-heading,
.road-update-slide .dpwh-route-list,
.road-update-slide .dpwh-route-footer {
    font-size: 8px !important;
}

.road-update-slide #dpwh-time,
.road-update-slide #dpwh-checked {
    font-size: 7px !important;
}

.road-update-slide .source-label {
    display: none !important;
}

/* =========================================================
   PAGASA — keep the existing function/content but make it
   a compact report strip. It lives as a narrow overlay on
   the lower-right of the map so the map remains the hero.
   ========================================================= */
.weather-cond-slide {
    display: block !important;
    position: absolute !important;
    z-index: 30 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 46% !important;
    height: 18.5% !important;
    background: rgba(246,243,236,.97) !important;
    border-top: 1px solid var(--report-rule) !important;
    border-left: 1px solid var(--report-rule) !important;
    padding: 0 !important;
}

.weather-cond-slide .abstract-bg,
.weather-cond-slide .header,
.weather-cond-slide .source-label {
    display: none !important;
}

.weather-cond-slide .wx-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 10px 16px !important;
}

.weather-cond-slide #wx-widget {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.weather-cond-slide .wx-widget-header {
    padding-bottom: 4px !important;
}

.weather-cond-slide .wx-widget-label {
    font-size: clamp(7px, .45vw, 9px) !important;
    letter-spacing: 1.1px !important;
}

.weather-cond-slide #wx-status {
    min-height: 0 !important;
}

.weather-cond-slide .wx-status-card {
    min-height: 0 !important;
    margin-top: 4px !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.weather-cond-slide .wx-condition-word,
.weather-cond-slide .wx-status-title {
    font-size: clamp(14px, 1.1vw, 22px) !important;
}

.weather-cond-slide #wx-time,
.weather-cond-slide #wx-checked {
    font-size: 7px !important;
}

/* =========================================================
   FOOTER — very quiet brand mark only
   ========================================================= */
.footer {
    position: absolute !important;
    z-index: 100 !important;
    left: auto !important;
    right: clamp(14px, 1.4vw, 28px) !important;
    bottom: clamp(7px, .7vw, 12px) !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

.footer > img {
    width: clamp(70px, 6vw, 115px) !important;
    max-width: none !important;
    opacity: .72;
}

.footer .controls {
    display: none !important;
}

.progress {
    z-index: 200 !important;
    height: 2px !important;
}

/* Never show the transition card over the report. */
.title-transition {
    display: none !important;
}

/* =========================================================
   RESPONSIVE FALLBACKS
   ========================================================= */
@media (max-width: 1000px) {
    .deck {
        grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr) !important;
    }

    .weather-cond-slide {
        width: 52% !important;
        height: 20% !important;
    }
}

@media (max-width: 700px) {
    .deck {
        grid-template-columns: 1fr !important;
        grid-template-rows: 46% 27% 27% !important;
    }

    .map-slide {
        grid-column: 1 !important;
        grid-row: 1 !important;
        border-right: 0 !important;
    }

    .weather-slide {
        grid-column: 1 !important;
        grid-row: 2 !important;
        border-right: 0 !important;
    }

    .windy-forecast-slide {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .road-update-slide {
        display: none !important;
    }

    .weather-cond-slide {
        display: none !important;
    }
}

/* =========================================================
   V5 RESPONSIVE REPORT LAYOUT
   One composition, no cropped 100vw/100vh tiles.
   The entire report adapts to the available viewport.
   ========================================================= */

html, body {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
}

body {
    margin: 0 !important;
    display: block !important;
}

.deck {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr) !important;
    grid-template-rows: minmax(0, 3.25fr) minmax(0, 1fr) !important;
    gap: 0 !important;
}

.deck .slide {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    transform-origin: center !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Hero map */
.deck .map-slide {
    grid-column: 1 !important;
    grid-row: 1 !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
}

/* Right-hand report column */
.deck .weather-slide {
    grid-column: 2 !important;
    grid-row: 1 !important;
    border-bottom: 1px solid var(--line) !important;
    display: block !important;
}

.deck .windy-forecast-slide {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 42% !important;
    align-self: end !important;
    border-top: 1px solid var(--line) !important;
}

/* Bottom information strip */
.deck .road-update-slide {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    border-right: 1px solid var(--line) !important;
}

.deck .weather-cond-slide {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
}

/* The right column contains two stacked report modules. */
.weather-slide .header,
.windy-forecast-slide .header,
.map-slide .header,
.road-update-slide .header,
.weather-cond-slide .header {
    top: clamp(10px, 1.4vh, 22px) !important;
    left: clamp(12px, 1.3vw, 24px) !important;
    right: clamp(12px, 1.3vw, 24px) !important;
    height: auto !important;
}

.header h1 {
    font-size: clamp(17px, 2.15vw, 42px) !important;
    line-height: .92 !important;
    letter-spacing: -0.6px !important;
}

.header .eyebrow {
    font-size: clamp(7px, .62vw, 12px) !important;
    margin-bottom: clamp(3px, .45vh, 7px) !important;
}

.john-logo {
    width: clamp(28px, 2vw, 46px) !important;
}

/* Large map: use all available hero space. */
.map-wrap {
    left: 1.2% !important;
    right: 1.2% !important;
    top: 13% !important;
    bottom: 4% !important;
    border: 0 !important;
    background: #777 !important;
}

.map-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
}

/* Local forecast module: compact, readable and contained. */
.weather-widget-box {
    left: 3% !important;
    right: 3% !important;
    top: 22% !important;
    bottom: 5% !important;
    align-items: flex-start !important;
    overflow: hidden !important;
}

.weather-widget-box > #ww_131c5e2bb4e64 {
    width: 100% !important;
    max-width: 100% !important;
    zoom: 1 !important;
}

.weather-widget-box #ww_131c5e2bb4e64_u {
    font-size: 11px !important;
}

/* Windy forecast in the lower part of the right column. */
.windy-forecast-slide .header {
    top: 8% !important;
}

.windy-forecast-slide .forecast-wrap {
    left: 2% !important;
    right: 2% !important;
    top: 28% !important;
    bottom: 5% !important;
}

.windy-forecast-slide .forecast-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    zoom: 1 !important;
}

/* Bottom modules: information density, not giant cards. */
.dpwh-road-wrap {
    left: 2% !important;
    right: 2% !important;
    top: 20% !important;
    bottom: 5% !important;
}

#dpwh-widget {
    padding: 4px 8px !important;
}

.dpwh-widget-header {
    padding-bottom: 4px !important;
}

.dpwh-widget-label,
.dpwh-widget-source,
.dpwh-refresh-btn {
    font-size: clamp(7px, .55vw, 11px) !important;
}

.weather-cond-slide .wx-wrap {
    left: 2% !important;
    right: 2% !important;
    top: 20% !important;
    bottom: 5% !important;
    width: auto !important;
    height: auto !important;
}

.weather-cond-slide #wx-widget {
    width: 100% !important;
    height: 100% !important;
    padding: 4px 8px !important;
}

.weather-cond-slide .wx-widget-header {
    padding-bottom: 4px !important;
}

.weather-cond-slide .wx-widget-label,
.weather-cond-slide .wx-widget-source {
    font-size: clamp(7px, .55vw, 11px) !important;
}

.weather-cond-slide .wx-condition-word,
.weather-cond-slide .wx-status-title {
    font-size: clamp(14px, 1.2vw, 25px) !important;
}

.source-label {
    left: 2% !important;
    bottom: 1.5% !important;
    font-size: clamp(6px, .48vw, 10px) !important;
}

.footer {
    right: clamp(8px, 1vw, 18px) !important;
    bottom: clamp(5px, .5vh, 9px) !important;
}

.footer > img {
    width: clamp(55px, 5vw, 100px) !important;
}

/* Medium laptop / tablet: give the hero a little more room. */
@media (max-width: 1100px) {
    .deck {
        grid-template-columns: minmax(0, 1.55fr) minmax(220px, 1fr) !important;
        grid-template-rows: minmax(0, 3fr) minmax(0, 1fr) !important;
    }

    .deck .windy-forecast-slide {
        height: 40% !important;
    }

    .header h1 {
        font-size: clamp(15px, 2vw, 30px) !important;
    }

    .weather-widget-box {
        top: 24% !important;
    }
}

/* Narrow screens: keep all five sections visible instead of hiding them. */
@media (max-width: 760px) {
    .deck {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: minmax(0, 58%) minmax(0, 42%) !important;
    }

    .deck .map-slide {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--line) !important;
    }

    .deck .weather-slide {
        grid-column: 1 !important;
        grid-row: 2 !important;
        height: 58% !important;
        align-self: start !important;
        border-right: 1px solid var(--line) !important;
        border-bottom: 0 !important;
    }

    .deck .windy-forecast-slide {
        grid-column: 2 !important;
        grid-row: 2 !important;
        height: 58% !important;
        align-self: start !important;
        border-bottom: 0 !important;
    }

    .deck .road-update-slide {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: end !important;
        height: 42% !important;
        width: 50% !important;
        border-right: 1px solid var(--line) !important;
    }

    .deck .weather-cond-slide {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: end !important;
        height: 42% !important;
        width: 50% !important;
    }

    .map-wrap {
        top: 17% !important;
        bottom: 3% !important;
    }

    .weather-widget-box {
        top: 27% !important;
        bottom: 3% !important;
    }

    .windy-forecast-slide .forecast-wrap {
        top: 31% !important;
        bottom: 3% !important;
    }

    .header h1 {
        font-size: clamp(13px, 3vw, 22px) !important;
    }

    .header .eyebrow {
        font-size: 6px !important;
        letter-spacing: 1.4px !important;
    }
}

/* Very narrow / portrait: stack the report without ever overflowing. */
@media (max-width: 500px) {
    .deck {
        grid-template-columns: 1fr !important;
        grid-template-rows: 42% 17% 17% 12% 12% !important;
    }

    .deck .map-slide,
    .deck .weather-slide,
    .deck .windy-forecast-slide,
    .deck .road-update-slide,
    .deck .weather-cond-slide {
        grid-column: 1 !important;
        width: 100% !important;
        height: 100% !important;
        align-self: stretch !important;
        border-right: 0 !important;
    }

    .deck .map-slide { grid-row: 1 !important; }
    .deck .weather-slide { grid-row: 2 !important; }
    .deck .windy-forecast-slide { grid-row: 3 !important; }
    .deck .road-update-slide { grid-row: 4 !important; }
    .deck .weather-cond-slide { grid-row: 5 !important; }

    .map-wrap { top: 22% !important; bottom: 3% !important; }
    .weather-widget-box { top: 28% !important; bottom: 2% !important; }
    .windy-forecast-slide .forecast-wrap { top: 30% !important; bottom: 2% !important; }
    .dpwh-road-wrap { top: 25% !important; bottom: 2% !important; }
    .weather-cond-slide .wx-wrap { top: 25% !important; bottom: 2% !important; }
}


/* =========================================================
   V6 LAYOUT — smaller map, fully visible road + PAGASA panels
   ---------------------------------------------------------
   Grid is now 3 rows so the two columns can split differently:

     left  column : MAP (row 1)            | ROAD (rows 2-3)
     right column : WEATHER + FORECAST (rows 1-2) | PAGASA (row 3)

   The right-hand forecast stack keeps the same pixel sizes it
   had before; only the empty gaps around it were trimmed.
   Wrapped in min-width so the phone/portrait fallbacks above
   keep working untouched.
   ========================================================= */
@media (min-width: 761px) {

    .deck {
        grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr) !important;
        grid-template-rows:
            minmax(0, 50fr)
            minmax(0, 18fr)
            minmax(0, 32fr) !important;
    }

    /* ---------- MAP: smaller ---------- */
    .deck .map-slide {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .map-slide .map-wrap {
        top: 14% !important;
        bottom: 5% !important;
    }

    /* ---------- FORECAST STACK (right, top) ---------- */
    .deck .weather-slide {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
    }

    .weather-slide .weather-widget-box {
        top: 11% !important;
        bottom: 45.5% !important;
    }

    .deck .windy-forecast-slide {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
        height: 44% !important;
        align-self: end !important;
    }

    .windy-forecast-slide .header {
        top: 5% !important;
    }

    .windy-forecast-slide .forecast-wrap {
        top: 23% !important;
        bottom: 4% !important;
    }

    /* ---------- ROAD CONDITIONS (left, bottom) ---------- */
    .deck .road-update-slide {
        grid-column: 1 !important;
        grid-row: 2 / 4 !important;
    }

    .road-update-slide .dpwh-road-wrap {
        top: clamp(58px, 4.6vw, 84px) !important;
        bottom: 12px !important;
    }

    .road-update-slide #dpwh-widget {
        padding: 0 !important;
        overflow: hidden !important;
    }

    .road-update-slide #dpwh-status {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    .road-update-slide .dpwh-status-card {
        flex: 1 0 auto !important;
        min-height: 110px !important;
        padding: 12px 18px !important;
        overflow: visible !important;
    }

    .road-update-slide .dpwh-route {
        flex: none !important;
    }

    .road-update-slide #dpwh-time,
    .road-update-slide #dpwh-checked {
        flex: none !important;
        height: auto !important;
    }

    .road-update-slide #dpwh-checked {
        font-size: 9px !important;
    }

    /* ---------- PAGASA WEATHER CONDITION (right, bottom) ---------- */
    .deck .weather-cond-slide {
        grid-column: 2 !important;
        grid-row: 3 !important;
        background: rgba(246, 243, 236, .97) !important;
        border-top: 1px solid var(--line) !important;
        border-left: 0 !important;
    }

    .weather-cond-slide .header {
        display: block !important;
    }

    .weather-cond-slide .wx-wrap {
        position: absolute !important;
        inset: auto !important;
        left: 3% !important;
        right: 3% !important;
        top: clamp(58px, 4.6vw, 84px) !important;
        bottom: 12px !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }

    .weather-cond-slide #wx-widget {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .weather-cond-slide .wx-widget-header {
        flex: none !important;
    }

    .weather-cond-slide #wx-status {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    .weather-cond-slide #wx-status .wx-card,
    .weather-cond-slide #wx-status .wx-status-card {
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .weather-cond-slide #wx-time,
    .weather-cond-slide #wx-checked {
        flex: none !important;
        height: auto !important;
    }

    .weather-cond-slide #wx-checked {
        font-size: 9px !important;
    }

    /* ---------- readable type inside the roomier panels ---------- */
    .road-update-slide .dpwh-status-caption {
        font-size: clamp(9px, .6vw, 12px) !important;
        margin-bottom: 4px !important;
    }

    .road-update-slide .dpwh-status-word {
        font-size: clamp(24px, 2.3vw, 44px) !important;
        line-height: 1 !important;
    }

    .road-update-slide .dpwh-status-icon {
        width: clamp(34px, 2.6vw, 50px) !important;
        height: clamp(34px, 2.6vw, 50px) !important;
        font-size: clamp(16px, 1.3vw, 24px) !important;
    }

    .road-update-slide .dpwh-status-pill {
        font-size: clamp(11px, .85vw, 16px) !important;
    }

    .road-update-slide .dpwh-road-name {
        margin-top: 10px !important;
        font-size: clamp(19px, 1.8vw, 34px) !important;
    }

    .road-update-slide .dpwh-hazard {
        margin-top: 6px !important;
        font-size: clamp(11px, .85vw, 16px) !important;
        line-height: 1.25 !important;
    }

    .road-update-slide .dpwh-summary {
        margin-top: 4px !important;
        font-size: clamp(12px, .95vw, 18px) !important;
        line-height: 1.35 !important;
    }

    .road-update-slide #dpwh-time,
    .road-update-slide #wx-time {
        margin-top: 6px !important;
    }

    /* PAGASA card: compact padding + text that fits the panel */
    .weather-cond-slide .wx-card {
        margin-top: 6px !important;
        padding: 10px 20px !important;
    }

    .weather-cond-slide .wx-card-synopsis {
        padding: 10px 20px !important;
    }

    .weather-cond-slide .wx-synopsis-text {
        margin-top: 6px !important;
        font-size: clamp(13px, 1.1vw, 21px) !important;
        line-height: 1.4 !important;
    }

    .weather-cond-slide .wx-impacts {
        font-size: clamp(10px, .8vw, 15px) !important;
    }

    .weather-cond-slide #wx-time {
        margin-top: 5px !important;
        padding-top: 4px !important;
    }

    .weather-cond-slide #wx-time strong {
        font-size: clamp(14px, 1.05vw, 20px) !important;
    }

    .weather-cond-slide #wx-time .updated-label {
        font-size: clamp(11px, .8vw, 15px) !important;
    }

    /* ---------- PAGASA: tighter so a full Cordillera entry fits ---------- */
    .weather-cond-slide .header h1 {
        font-size: clamp(17px, 1.8vw, 34px) !important;
    }

    .weather-cond-slide .wx-wrap {
        top: clamp(50px, 3.8vw, 70px) !important;
        bottom: 8px !important;
    }

    .weather-cond-slide .wx-card {
        padding: 8px 18px !important;
    }

    .weather-cond-slide .wx-condition-word {
        margin-top: 4px !important;
        font-size: clamp(14px, 1.05vw, 20px) !important;
    }

    .weather-cond-slide .wx-caused-pill {
        margin-top: 6px !important;
        padding: 4px 12px !important;
        font-size: clamp(9px, .65vw, 12px) !important;
    }

    .weather-cond-slide .wx-impacts-label {
        margin-top: 8px !important;
    }

    .weather-cond-slide .wx-impacts {
        margin-top: 2px !important;
        line-height: 1.3 !important;
    }

    .weather-cond-slide #wx-time {
        margin-top: 4px !important;
        padding-top: 3px !important;
    }

    /* ---------- ROAD: when an alternative-route card is showing,
       put status (left) and route (right) side by side so neither
       gets squashed ---------- */
    .road-update-slide #dpwh-widget:has(#dpwh-route:not([style*="display:none"]):not([style*="display: none"])) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        column-gap: 16px !important;
    }

    .road-update-slide #dpwh-widget:has(#dpwh-route:not([style*="display:none"]):not([style*="display: none"])) > .dpwh-widget-header,
    .road-update-slide #dpwh-widget:has(#dpwh-route:not([style*="display:none"]):not([style*="display: none"])) > #dpwh-time,
    .road-update-slide #dpwh-widget:has(#dpwh-route:not([style*="display:none"]):not([style*="display: none"])) > #dpwh-checked {
        grid-column: 1 / -1 !important;
    }

    .road-update-slide #dpwh-widget:has(#dpwh-route:not([style*="display:none"]):not([style*="display: none"])) > #dpwh-status {
        grid-column: 1 !important;
        grid-row: 2 !important;
        overflow: hidden !important;
    }

    .road-update-slide #dpwh-widget:has(#dpwh-route:not([style*="display:none"]):not([style*="display: none"])) > #dpwh-route {
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin-top: 4px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .road-update-slide #dpwh-widget:has(#dpwh-route:not([style*="display:none"]):not([style*="display: none"])) .dpwh-status-word {
        font-size: clamp(20px, 1.8vw, 34px) !important;
    }

    .road-update-slide #dpwh-widget:has(#dpwh-route:not([style*="display:none"]):not([style*="display: none"])) .dpwh-status-top {
        gap: 10px !important;
    }
}