/* Panda Seasons — base styles. Most colours/spacing are driven by Elementor
   controls (see ControlsRegistrar selectors); this file establishes layout
   and the open/closed icon switching. */

.upg-ps { display: block; }

.upg-ps__season {
    display: block;
    overflow: hidden;
}

/* Hide native disclosure marker — we render our own icon. */
.upg-ps__season-summary::-webkit-details-marker { display: none; }
.upg-ps__season-summary::marker { content: ''; }

.upg-ps__season-summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.upg-ps__season-title { flex: 1 1 auto; }

.upg-ps__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Show the right icon for the current state. */
.upg-ps__season-summary .upg-ps__icon-open { display: none; }
.upg-ps__season[open] > .upg-ps__season-summary .upg-ps__icon-closed { display: none; }
.upg-ps__season[open] > .upg-ps__season-summary .upg-ps__icon-open   { display: inline-flex; }

/* Episodes lay out in a CSS grid driven by the `episodes_per_row` control
   (responsive). Default matches the control's desktop default so an
   uncustomised widget renders 3-up. The transition fires only when
   seasons.js sets an inline max-height; in the resting state max-height is
   unset so content flows naturally. `overflow: hidden` is applied inline
   only during animation, so static content (e.g. dropdowns) isn't clipped
   at rest. */
.upg-ps__season-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    transition: max-height var(--upg-ps-anim-duration, 250ms) var(--upg-ps-anim-easing, ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .upg-ps__season-body { transition: none; }
}

/* Each episode is a flex column so we can pin the air_on row to the
   bottom (margin-top: auto). The grid cell stretches to the row's tallest
   sibling via the default `align-items: stretch`, but the card itself
   needs an explicit `height: 100%` to fill that cell — without it, browsers
   size flex containers by their content, leaving short cards floating at
   the top of their cell with the Emissões line stuck just below the
   sinopse instead of pinned to the row baseline. */
.upg-ps__episode {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.upg-ps__episode-title    { font-weight: 600; }
.upg-ps__episode-sinopse  { line-height: 1.5; }

.upg-ps__episode-air-on   {
    display: block;
    margin-top: auto;  /* push to bottom of the flex column */
}
.upg-ps__air-on-label     { margin-right: 4px; font-weight: 600; }
.upg-ps__air-on-items     { display: inline; }

.upg-ps__empty { display: block; }

/* Editor-only hint when slug is missing. Visible only inside the Elementor
   editor iframe — we add the upg-ps__editor-hint element only there from PHP. */
.upg-ps__editor-hint {
    padding: 12px 16px;
    margin-bottom: 12px;
    background: #fff8e1;
    color: #6d4c00;
    border: 1px dashed #d4a017;
    border-radius: 4px;
    font: 13px/1.4 -apple-system, system-ui, sans-serif;
}