/* Panda Programação — base styles. Brand-tunable via Elementor controls (selectors injected per-widget). */

/* Spacing between the heading, strip and carousel is split into per-element
   margins so the Elementor `space_strip_carousel` control can tune the
   strip→carousel distance independently from the heading→strip distance. */
.upg-pp {
    display: flex;
    flex-direction: column;
    font-family: inherit;
}

.upg-pp__heading {
    margin: 0 0 24px;
    font-weight: 700;
}

.upg-pp__strip-wrap {
    margin-bottom: 24px;
}

.upg-pp--unconfigured {
    padding: 24px;
    border: 1px dashed currentColor;
    border-radius: 8px;
    color: #888;
    text-align: center;
}

/* "Voltar a hoje" button — always rendered between the day strip and the
   carousel so the layout stays stable regardless of whether the selected
   day is today. The button is hidden via `visibility: hidden` (NOT `display:
   none`) when on today: the row keeps its dimensions, the carousel never
   shifts up or down. Smooth fade in/out via opacity. Clicking it routes
   back to today's schedule (handler in programacao.js).
   Visual styling here is just a sensible default; the Elementor "Botão
   'Hoje'" controls override colour/typography/padding/radius/etc. */
.upg-pp__today-btn-wrap {
    margin-bottom: 16px;
    text-align: center;
}

.upg-pp__today-btn {
    display: inline-block;
    cursor: pointer;
    background: #d6312f;
    color: #fff;
    border: 0 solid transparent;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    line-height: 1.2;
    /* `visibility` is included in the transition so the property change is
       deferred to the END of the fade-out — without it the button would
       become un-clickable instantly when transitioning OUT, but un-clickable
       AFTER the fade-in finishes when transitioning IN (because both
       `opacity: 0 → 1` and `visibility: hidden → visible` would apply at
       t=0). The transition delay on visibility is handled implicitly by
       browser logic for `visibility`. */
    transition:
        opacity .25s ease,
        visibility .25s ease,
        background-color .15s ease,
        color .15s ease,
        border-color .15s ease;
}

/* Default state (.upg-pp does NOT have .is-today): button visible. */
.upg-pp__today-btn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Hidden when viewing today's schedule: still in flow, just invisible. */
.upg-pp.is-today .upg-pp__today-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Reset theme/Elementor `button:hover` background bleed-through, the same
   pattern we use for the day-strip / carousel buttons. */
button[type="button"].upg-pp__today-btn:hover,
button[type="button"].upg-pp__today-btn:focus,
button[type="button"].upg-pp__today-btn:active,
button[type="button"].upg-pp__today-btn:visited {
    background-image: none;
}

.upg-pp__today-btn:focus {
    outline: 0;
}

.upg-pp__today-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Day strip */
.upg-pp__strip-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    /* Smooth dim/restore when day-fetch toggles `.is-loading`. Same duration
       as the carousel below so both layers fade together — masks the harsh
       label rewrite on the day buttons (textContent doesn't itself trigger
       any CSS transition, so we cover it by dimming the whole strip while
       the swap happens). */
    transition: opacity .25s ease;
}

.upg-pp__strip-wrap.is-loading {
    opacity: .4;
    /* Block clicks on prev/next arrows + day pills while a fetch is in
       flight; clicking another day mid-fetch would queue a second request
       and the user would land on whichever resolved last. */
    pointer-events: none;
}

.upg-pp__strip {
    display: flex;
    gap: 24px;
    align-items: flex-end;
}

.upg-pp__strip-arrow {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
    font-size: 28px;
    line-height: 1;
    color: currentColor;
}

.upg-pp__strip-arrow .fas {
    display: inline-block;
}

.upg-pp__strip-arrow[disabled] {
    opacity: .3;
    cursor: not-allowed;
}

.upg-pp__day {
    background: none;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
    /* Uniform column width — without it, "Hoje" (4 chars) and two-digit day
       numbers (10/11) make individual cells wider than their 3-char/1-digit
       neighbours, so the strip's centre of mass drifts off the heading axis
       even though the wrap is `justify-content: center`. min-width keeps every
       cell on the same grid step. */
    min-width: 56px;
}

/* Hover applies to ALL non-disabled days, including the currently selected/today
   one — without this, the selected day's hover state had no rule and inherited
   the theme/Elementor default link colour (pink). The corresponding Elementor
   hover-tab controls now use the same selector so the user-set colour wins. */
.upg-pp__day:not([disabled]):hover {
    border-color: currentColor;
}

.upg-pp__day.is-selected {
    border-color: currentColor;
    font-weight: 700;
}

/* State resets for our buttons + card link. Elementor and many themes ship
   default `:hover` / `:focus` / `:visited` rules (often a pink link colour
   and/or a coloured background) that win over our 1-class rules. Explicit,
   equally-specific selectors here stop that bleed-through. The Elementor
   hover-tab controls use a higher-specificity selector ({{WRAPPER}} prefix)
   so user colours still take effect when set. */
.upg-pp__day,
.upg-pp__day:hover,
.upg-pp__day:focus,
.upg-pp__day:active,
.upg-pp__day:visited,
.upg-pp__strip-arrow,
.upg-pp__strip-arrow:hover,
.upg-pp__strip-arrow:focus,
.upg-pp__strip-arrow:active,
.upg-pp__strip-arrow:visited,
.upg-pp__carousel-arrow,
.upg-pp__carousel-arrow:hover,
.upg-pp__carousel-arrow:focus,
.upg-pp__carousel-arrow:active,
.upg-pp__carousel-arrow:visited,
.upg-pp__card,
.upg-pp__card:hover,
.upg-pp__card:focus,
.upg-pp__card:active,
.upg-pp__card:visited {
    text-decoration: none;
    box-shadow: none;
}

/* Higher-specificity background reset for our <button> elements. Elementor (and
   many themes) ship `[type="button"]:hover/:focus/:active` rules that paint a
   pink background. Plain class-only selectors (0,1,1) tie with that selector
   and lose whichever stylesheet WP enqueues last. Tying element + attribute +
   class together — `button[type="button"].upg-pp__day` etc. — gives (0,3,1),
   which beats Elementor regardless of cascade order.

   We deliberately do NOT set `color` here: the Elementor "Cor" / "Cor (Hover)"
   controls live at (0,2,0) / (0,4,0) and would either get clobbered or would
   need their own specificity bump. The Elementor focus-pink the user reported
   is a background bleed, not a colour bleed, so this surgical reset is enough. */
button[type="button"].upg-pp__day:hover,
button[type="button"].upg-pp__day:focus,
button[type="button"].upg-pp__day:active,
button[type="button"].upg-pp__day:visited,
button[type="button"].upg-pp__strip-arrow:hover,
button[type="button"].upg-pp__strip-arrow:focus,
button[type="button"].upg-pp__strip-arrow:active,
button[type="button"].upg-pp__strip-arrow:visited,
button[type="button"].upg-pp__carousel-arrow:hover,
button[type="button"].upg-pp__carousel-arrow:focus,
button[type="button"].upg-pp__carousel-arrow:active,
button[type="button"].upg-pp__carousel-arrow:visited {
    background-color: transparent;
    background-image: none;
}

.upg-pp__card,
.upg-pp__card:hover,
.upg-pp__card:focus,
.upg-pp__card:active,
.upg-pp__card:visited {
    color: inherit;
}

/* Hide the default focus ring (often pink) but restore a visible one for
   keyboard users via :focus-visible — accessibility kept, mouse-clicks clean. */
.upg-pp__day:focus,
.upg-pp__strip-arrow:focus,
.upg-pp__carousel-arrow:focus,
.upg-pp__card:focus {
    outline: 0;
}

.upg-pp__day:focus-visible,
.upg-pp__strip-arrow:focus-visible,
.upg-pp__carousel-arrow:focus-visible,
.upg-pp__card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.upg-pp__day-num {
    font-size: 28px;
    font-weight: 700;
}

.upg-pp__day-label {
    font-size: 14px;
}

.upg-pp__day[disabled],
.upg-pp__day.is-disabled {
    opacity: .25;
    cursor: not-allowed;
    pointer-events: none;
}

/* Carousel */
.upg-pp__carousel-wrap {
    position: relative;
    /* Hidden until init() finishes (root gets `.is-ready`). Avoids the brief
       flash where slides render as a stacked column before Swiper kicks in. */
    opacity: 0;
    transition: opacity .2s ease;
    /* Reserve fixed slots above and below the cards for the on-air "frame":
       top (badge, 40px) and bottom (16px). Always reserved — even when no
       card is on-air — so switching to a day without a live show doesn't
       collapse the row and shift the cards. Sides aren't reserved here:
       the side red strips are painted INSIDE the on-air thumb (image inset
       on the sides) rather than projected outside, because `overflow-x: clip`
       on the carousel would clip outward horizontal projections. Only the
       bottom strip uses `box-shadow` (vertical projection isn't clipped). */
    --upg-pp-badge-h: 50px;
    --upg-pp-frame-bottom: 16px;
    padding: var(--upg-pp-badge-h) 0 var(--upg-pp-frame-bottom);
}

.upg-pp.is-ready .upg-pp__carousel-wrap {
    opacity: 1;
}

/* `clip + visible` lets the absolutely-positioned on-air badge peek above the
   cards (vertical) while still preventing the off-screen Swiper slides from
   leaking sideways (horizontal). `overflow: hidden` clipped both axes — the
   badge would have been chopped off if we'd kept it. */
.upg-pp__carousel {
    overflow-x: clip;
    overflow-y: visible;
    /* Smooth dim/restore when day-fetch toggles `.is-loading`; matches the
       initial wrap fade-in duration so first paint and day-switches feel
       like the same animation. */
    transition: opacity .25s ease;
}

.upg-pp__carousel.is-loading {
    opacity: .4;
    /* Block clicks/swipes on stale slides while the new day is loading — the
       opacity dim already signals "in progress" but disabling pointer events
       prevents accidental navigation against to-be-replaced content. */
    pointer-events: none;
}

/* Spinner overlay during day-fetch. Lives on the wrap (not the carousel) so
   it stays at full opacity while the carousel beneath dims. The
   `pointer-events: none` is defensive — even if the user clicks through it,
   the carousel underneath has its own `pointer-events: none` while loading. */
.upg-pp__carousel-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
    z-index: 10;
}

.upg-pp__carousel-wrap:has(.upg-pp__carousel.is-loading)::after {
    opacity: .7;
    animation: upg-pp-spin .8s linear infinite;
}

@keyframes upg-pp-spin {
    to {
        transform: rotate(360deg);
    }
}

.upg-pp__carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 12px;
    font-size: 36px;
    line-height: 1;
}

.upg-pp__carousel-arrow .fas {
    display: inline-block;
}

.upg-pp__carousel-arrow--prev {
    left: -32px;
}

.upg-pp__carousel-arrow--next {
    right: -32px;
}

.upg-pp__card-slide {
    display: flex;
}

.upg-pp__card,
.upg-pp .upg-pp__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* No `overflow: hidden` here — the on-air badge sits at `bottom: 100%` of
       the card and would be clipped by the card's own overflow before it ever
       reached the carousel's `overflow-y: visible`. Image-corner clipping is
       handled on the thumb instead, which has its own `overflow: hidden` and
       receives the same border-radius from the Elementor controls. */
    text-decoration: none;
    color: inherit;
}

.upg-pp__card-thumb,
.upg-pp .upg-pp__card-thumb {
    position: relative;
    /* Thumb fills the slide top-to-bottom now (no inset margins). For on-air
       cards, the red "frame" is painted as the thumb's background and the
       inner image/overlay are inset via `inset: 0 8px 16px 8px` so the red
       shows around them. This keeps every card's outer dimensions identical
       and pins image tops to the same Y line. */
    height: 400px;
    background: #222;
    overflow: hidden;
}

/* Defensive overrides: many themes set `img { height: auto !important }` (or scope it
   under `.entry-content img`) which would otherwise win over our 1-class rule and
   collapse the image to its intrinsic height — leaving the overlay in normal flow
   below the image. !important is justified here because the layout requires the
   image to fill the thumb. */
.upg-pp .upg-pp__card-thumb .upg-pp__card-image {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

.upg-pp .upg-pp__card-thumb .upg-pp__card-overlay {
    position: absolute !important;
    inset: 0 !important;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Concentrate the darkening to the lower third so the image stays clear behind
       the title; matches the reference design. */
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .55) 25%, rgba(0, 0, 0, 0) 50%);
    color: #fff;
    z-index: 2;
}

.upg-pp__card-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.upg-pp__card-subtitle {
    margin: 0 0 8px;
    font-size: 14px;
    opacity: .9;
}

.upg-pp__airings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    font-size: 12px;
}

.upg-pp__airing {
    padding: 2px 0;
    opacity: .85;
}

.upg-pp__airing.is-on-air {
    font-weight: 700;
    opacity: 1;
}

/* Airings beyond `max_timestamps` (or when timestamps display is disabled) are
   still rendered into the DOM — invisible — so JS's recomputeOnAir can detect a
   live slot anywhere in the schedule, not just within the visible 6. */
.upg-pp__airing.is-extra {
    display: none;
}

/* Badge — floats absolutely above the on-air card in the slot reserved by
   `.upg-pp__carousel-wrap` padding-top. Only rendered for on-air cards.
   Because it's out of flow, it doesn't add to the card's height and every
   card stays the same outer size — image tops align across the row. */
.upg-pp__badge {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    /* Match the slot reserved on `.upg-pp__carousel-wrap` so the badge sits
       flush against the cards' top edge (and against the strip above) without
       any half-padding gaps. */
    height: var(--upg-pp-badge-h, 40px);
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    background: #d6312f;
    color: #fff;
    pointer-events: none;
}

.upg-pp__card.is-on-air .upg-pp__badge {
    display: block;
}

/* On-air "frame":
   - Top: floating badge in the reserved slot above the card.
   - Sides (8px each): painted as the THUMB's background with the inner image
     and overlay inset 8px on each side. Has to be done internally — pushing
     side strips outward via box-shadow gets clipped by the carousel's
     `overflow-x: clip` whenever the on-air slide sits at an edge (e.g. in
     "Início" position mode).
   - Bottom (16px): projected OUTWARD via box-shadow so the image's bottom
     edge stays at the thumb floor and aligns with regular cards' images.
     Vertical projection isn't clipped (`overflow-y: visible` on the
     carousel + reserved padding-bottom on the wrap).
   Image height stays at 100% so all images line up top AND bottom; image
   width is `100% - 16px` because of the side insets — slightly narrower
   than regulars, but `object-fit: cover` keeps the visible content close. */
.upg-pp__card.is-on-air {
    box-shadow: 0 var(--upg-pp-frame-bottom, 16px) 0 0 var(--upg-pp-on-air-color, #d6312f);
}

.upg-pp__card.is-on-air .upg-pp__card-thumb {
    background-color: var(--upg-pp-on-air-color, #d6312f);
}

.upg-pp .upg-pp__card.is-on-air .upg-pp__card-thumb .upg-pp__card-image {
    inset: 0 8px 0 8px !important;
    width: calc(100% - 16px) !important;
    height: 100% !important;
}

.upg-pp .upg-pp__card.is-on-air .upg-pp__card-thumb .upg-pp__card-overlay {
    inset: 0 8px 0 8px !important;
}

/* Empty state */
.upg-pp__empty {
    padding: 48px 16px;
    text-align: center;
    opacity: .6;
}

/* Responsive */
@media (max-width: 768px) {
    .upg-pp__strip {
        gap: 12px;
    }

    .upg-pp__day-num {
        font-size: 22px;
    }

    .upg-pp__day-label {
        font-size: 12px;
    }

    .upg-pp__carousel-arrow--prev {
        left: -8px;
    }

    .upg-pp__carousel-arrow--next {
        right: -8px;
    }

    /* The server always emits 7 day buttons (offsets −3..+3 around the selected
       day). Hiding the outer two on each side leaves three visible — previous,
       selected/today, next — which fits comfortably on a phone alongside the
       caret buttons. The 7-button DOM stays intact so `rerenderStrip` in JS
       continues to update labels/dates without needing a mobile-specific path. */
    .upg-pp__strip>.upg-pp__day:nth-child(-n+2),
    .upg-pp__strip>.upg-pp__day:nth-last-child(-n+2) {
        display: none;
    }
}