/**
 * Prime Club Reserve — ticker strip styling
 *
 * Companion styles for `[pc_reserve_ticker campaign="ID"]`
 * (includes/class-pcr-shortcodes.php, task 2.2). Enqueued only when that
 * shortcode renders. Class prefix `pcr-ticker`.
 *
 * Design tokens taken directly from Figma 12976:6897 (count variant) /
 * 13017:10983 (amount variant), a 1440x44 desktop frame:
 *   - strip background #ffeede, full width, 12px/150px desktop padding;
 *   - headline: Plus Jakarta Sans 15px #161616, -0.15px letter-spacing,
 *     the "X more" lead is Bold, the remainder is Medium;
 *   - countdown: number Plus Jakarta Sans Bold 16px #161616 0.32px
 *     letter-spacing, label Medium 10px #7b7b7b, 5px number/label gap,
 *     8px between groups, 20px-tall 1px #e0e0e0 hairlines around every
 *     segment (including before the first and after the last);
 *   - 20px gap between the headline and the countdown block.
 *
 * The Figma frame is desktop-only; the 150px horizontal padding is turned
 * into a responsive clamp() here and the strip wraps to two rows (headline
 * above countdown) on narrow viewports — a sensible default, not specified
 * in the source file.
 *
 * @package PrimeClubReserve
 */

.pcr-ticker {
    box-sizing: border-box;
    width: 100%;
    background-color: #ffeede;
    /* 150px is the desktop token at the Figma frame's 1440px width
       (150 / 1440 = 10.4167vw) — the clamp() hits exactly 150px at 1440px
       and scales down toward 16px on narrower viewports. */
    padding: 12px clamp(16px, 10.4167vw, 150px);
}

.pcr-ticker[hidden] {
    display: none;
}

/*
 * State fragments (task 2.5): build_ticker_markup() (includes/class-pcr-shortcodes.php)
 * server-renders both headline states (live/unlocked) plus the countdown
 * block in the SAME markup, each carrying a bare `hidden` attribute except
 * the one matching the current state — assets/js/reserve-ticker.js toggles
 * `hidden` between polls. `.pcr-ticker__countdown` sets its own `display:
 * flex` below, which — being an author rule — would otherwise beat the
 * browser's default `[hidden] { display: none }` UA rule. This override
 * guarantees `hidden` always wins inside a ticker strip.
 */
.pcr-ticker [hidden] {
    display: none !important;
}

.pcr-ticker__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.pcr-ticker__headline {
    margin: 0;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #161616;
    letter-spacing: -0.15px;
    text-align: center;
}

.pcr-ticker__lead {
    font-weight: 700;
    white-space: nowrap;
}

.pcr-ticker__rest {
    font-weight: 500;
}

.pcr-ticker__countdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pcr-ticker__divider {
    display: inline-block;
    width: 1px;
    height: 20px;
    background-color: #e0e0e0;
    flex-shrink: 0;
}

.pcr-ticker__segment {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.pcr-ticker__segment-value {
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #161616;
    letter-spacing: 0.32px;
}

.pcr-ticker__segment-label {
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: #7b7b7b;
}

@media (max-width: 640px) {
    .pcr-ticker {
        padding: 12px 16px;
    }

    .pcr-ticker__inner {
        flex-direction: column;
        gap: 12px;
    }

    .pcr-ticker__countdown {
        flex-wrap: wrap;
        justify-content: center;
    }
}