/*
 * UPTimePress — only what Salient's own theme classes (row/col/span_X, theater-show-card) don't
 * already cover, plus explicit overrides (card body background/text color, title size, ticket
 * button) where the theme's own defaults fight the fixed-height card design (see
 * .uptimepress-card-body's own comment for why it's a fixed height, not a square). Enqueued only
 * when a shortcode/block actually renders (see UPTimePress_Shortcode::render()).
 */

.uptimepress-panel {
    margin-bottom: 2em;
}

.uptimepress-heading {
    margin-bottom: 0.75em;
}

/* gap: our own flex-wrap (not Salient's own float-based row/col gutter, which this overrides for
 * the purposes of vertical spacing) — without it, wrapped rows on narrow/mobile viewports (where
 * span_X collapses to one card per row) render with zero space between cards. */
.uptimepress-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 20px;
}

/* Salient's own float-grid clearfix (`.row::before,::after { content:" "; display:table; }`)
 * targets any element with the `.row` class, which this element also carries. On a float-based
 * layout that pseudo-element is invisible/harmless, but once we force display:flex above, it
 * becomes a real (zero-width) flex item — and since it only ever exists once, at the very start
 * of the child list, it silently consumes one column-gap's worth of space before the actual
 * first card, on the first row only (confirmed: every other row renders correctly, and the
 * offset exactly matches the gap value). Flex containers never needed float-clearfix in the
 * first place, so simply switching it off here is correct, not a workaround. */
.uptimepress-grid::before,
.uptimepress-grid::after {
    display: none;
}

/* Salient's grid only applies real span_X percentage widths at 691px and up — below that,
 * .col falls back to its own unconditional width:100% base rule, so every panel (regardless of
 * its configured `columns` attribute) would otherwise render as one full-width, edge-to-edge
 * column on any phone. Force 2 columns instead, matching the website preview's own tile grid,
 * which never drops below 2 either. 690px (not 691px) so there's no overlap with Salient's own
 * breakpoint. */
@media (max-width: 690px) {
    .uptimepress-grid > .col {
        /* 50% minus half the column-gap (20px/2), not a plain 50% — otherwise two full 50%-wide
         * items plus the 20px gap between them exceed the container's width, and flex-wrap
         * (which breaks lines based on each item's own declared size, not post-shrink) puts
         * each item on its own line instead of shrinking them to fit two per line. */
        width: calc(50% - 10px) !important;
    }
}
/* Image is cropped 5:2 (landscape), regardless of the source image's actual aspect ratio — the
 * CDN helpers only support a width transform, not a height, so cropping happens here instead
 * (docs/Wordpress-plugin-plan.md Part C1). Still width-relative like before, so it keeps scaling
 * proportionally with column width (narrower on mobile, wider on desktop) — only the body below
 * stopped being width-relative (see its own comment): cards are no longer forced into a perfect
 * square, since that's what was crowding out card text on narrow mobile columns. */
.uptimepress-card-image {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 2;
    background: rgba(0, 0, 0, 0.04);
}

/* !important throughout: Salient's own `.row .col img { height: auto; max-width: 100%;
 * margin-bottom: 15px; }` (theme style.css) has higher specificity than a plain
 * `.uptimepress-card-image img` selector (two theme classes matched vs. our one) and so wins
 * without !important even though it loads first — `height: auto` there overrides our own
 * `height: 100%`, letting the image fall back to its native aspect ratio instead of being
 * cropped to the 5:2 box above, which is what caused wildly different card-image heights across
 * cards depending on each source image's own dimensions. `margin: 0` also cancels that same
 * theme rule's stray `margin-bottom: 15px`, which would otherwise open an unwanted gap between
 * the image and the card body below it. */
.uptimepress-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

.uptimepress-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 3px;
}

/* Day-of-week badge (show panel, `show_date_badge` — docs/Wordpress-plugin-plan.md's dated
 * entry on this). Same position as .uptimepress-badge above, but two lines (day abbreviation +
 * M/D date, stacked via flex-column) and colored per day-of-week via inline `style` from
 * tile-card.php's PHP color array, rather than a fixed background — mirrors the website
 * preview's own day badge (WebsitePublishingPane.jsx's DAY_COLORS/DAY_ABBREVS). */
.uptimepress-daybadge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    padding: 4px 7px;
    border-radius: 3px;
}

/* Fixed pixel height — deliberately NOT width-relative (was `aspect-ratio: 5/3`, which made the
 * card a perfect square together with the image above). On the mobile 2-column layout that tied
 * the text body's absolute pixel budget to a ~162px-wide card, leaving ~37px for title+date+
 * summary combined — title alone at 2 lines already exceeded that. A fixed height decouples the
 * text budget from column width entirely, while `max-height` at the same value (belt-and-braces
 * alongside the existing `overflow:hidden`) keeps the actual goal the square design existed for
 * intact: every card in a layout is exactly the same height regardless of content length or
 * column width. 190px is sized for the show card's worst case — 2-line title + 1-line date +
 * 3-line summary — plus the CTA row at the reduced font sizes below, with some margin; see
 * docs/Wordpress-plugin-plan.md for the math this was budgeted against. Class cards' heavier
 * field list (schedule/venue/teacher/prereq) already relies on .uptimepress-card-content's
 * fade-mask below rather than fitting everything within this budget — that's unchanged.
 * .uptimepress-card-content is the part that gets clipped/line-clamped when a card has more text
 * than fits; .uptimepress-card-cta never shrinks, so the button always shows. Explicit white
 * background + dark text: the section this shortcode is placed in is often a dark theme background
 * (e.g. the red banding around the show panel), and the card needs to read as its own white panel
 * regardless of what it's sitting on. */
.uptimepress-card-body {
    box-sizing: border-box;
    height: 190px;
    max-height: 190px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    color: #1a1a1a;
}

.uptimepress-card-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    /* Class cards in particular (schedule/date/venue/teacher/prereq) can still add up to more
     * lines than the fixed box has room for even with title/summary line-clamped above — fade
     * instead of a hard clip so an overflowing line trails off rather than slicing mid-character. */
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

.uptimepress-card-cta {
    flex: 0 0 auto;
    padding-top: 8px;
}

/* !important throughout: Salient's own heading styles (h1-h6) are sized for full-width page
 * headlines and easily beat a plain class selector's specificity/cascade order once loaded from
 * the parent theme — without this the title renders at the theme's default h4 size, which is far
 * too large for the card and pushes everything else below it out of the clipped content box. */
.uptimepress-card-title {
    margin: 0 0 4px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* line-height explicitly set (these had none before) — without it, this inherits whatever
 * Salient's theme sets on a generic div (commonly 1.5-1.8), which made the fixed card body's
 * text budget non-deterministic. */
.uptimepress-card-date,
.uptimepress-card-venue,
.uptimepress-card-schedule,
.uptimepress-card-teacher {
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #1a1a1a !important;
    opacity: 0.8;
    margin: 0 0 4px !important;
}

/* Show cards only have title+date+summary (no schedule/venue/teacher/prereq), so they have room
 * for a 3rd summary line that class cards' more crowded field list doesn't — split out from
 * .uptimepress-card-prereq (which stays at 2) rather than sharing one clamp value. */
.uptimepress-card-summary {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #1a1a1a !important;
    margin: 6px 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.uptimepress-card-prereq {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #1a1a1a !important;
    margin: 6px 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "+N more dates" (show panel, `dedupe` — docs/Wordpress-plugin-plan.md's dated entry on this),
 * shown under a deduped row's date line. Deliberately muted/small — it's a secondary hint, not
 * something competing visually with the date or summary above it. */
.uptimepress-card-more-dates {
    font-size: 11px !important;
    color: #1a1a1a !important;
    opacity: 0.5;
    margin: 0 0 4px !important;
}

/* Small red pill, matching the website preview's tile CTA (WebsitePublishingPane.jsx's TileCard) —
 * deliberately not Salient's own `nectar-button` (too large/heavy for the card's fixed CTA row). */
.uptimepress-ticket-button {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #dc2626 !important;
    color: #fff !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: background-color 0.15s ease;
}

.uptimepress-ticket-button:hover {
    background: #b91c1c !important;
}

.uptimepress-waitlist {
    background: rgba(220, 38, 38, 0.5) !important;
    opacity: 0.8;
    cursor: default;
    pointer-events: none;
}

.uptimepress-error {
    color: #b32d2e;
    font-size: 13px;
    padding: 8px 12px;
    background: #fbeaea;
    border-radius: 3px;
}

.uptimepress-empty {
    opacity: 0.6;
    font-style: italic;
}

.uptimepress-stale-notice {
    font-size: 11px;
    opacity: 0.5;
    margin-top: 8px;
}

/* Clickable-card affordance: a subtle lift on hover/focus makes it clear the whole card (not just
 * the ticket button) is interactive, without competing visually with the CTA button's own hover. */
.theater-show-card[data-uptimepress-card] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.theater-show-card[data-uptimepress-card]:hover,
.theater-show-card[data-uptimepress-card]:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    outline: none;
}

/* Card-click overlay (modal). Built once by uptimepress-frontend.js and appended to <body>, so it
 * sits outside any card/grid stacking context and Salient theme chrome. `[hidden]` (the native
 * attribute, toggled by JS) controls visibility rather than a class, to avoid specificity fights
 * with the theme. z-index is deliberately very high for the same reason. */
.uptimepress-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.75);
}

.uptimepress-overlay[hidden] {
    display: none;
}

.uptimepress-modal {
    position: relative;
    box-sizing: border-box;
    width: 92%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    color: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.uptimepress-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.uptimepress-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.uptimepress-modal-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
    background: rgba(0, 0, 0, 0.04);
}

.uptimepress-modal-body {
    padding: 24px 28px 28px;
}

.uptimepress-modal-title {
    margin: 0 0 10px !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.uptimepress-modal-meta {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #1a1a1a !important;
    opacity: 0.8;
    margin: 0 0 6px !important;
}

.uptimepress-modal-description {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #1a1a1a !important;
    margin: 16px 0 !important;
    white-space: pre-line;
}

.uptimepress-modal-cta-row {
    margin-top: 20px;
}

.uptimepress-modal-cta {
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #dc2626 !important;
    color: #fff !important;
    padding: 14px 32px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: background-color 0.15s ease;
}

.uptimepress-modal-cta:hover {
    background: #b91c1c !important;
}

.uptimepress-modal-cta.uptimepress-waitlist {
    background: rgba(220, 38, 38, 0.5) !important;
    opacity: 0.8;
    cursor: default;
    pointer-events: none;
}

/* Body scroll-lock while the overlay is open — toggled on <html> by uptimepress-frontend.js. */
.uptimepress-modal-open {
    overflow: hidden;
}

@media (max-width: 690px) {
    .uptimepress-modal {
        width: 100%;
        height: 100%;
        max-height: 100%;
        max-width: 100%;
        border-radius: 0;
    }

    .uptimepress-modal-image {
        max-height: 260px;
    }

    .uptimepress-modal-title {
        font-size: 22px !important;
    }
}