/* ===========================================================================
   News-ticker overlay — TV-style two-row breaking-news ticker + cut-in widgets
   pinned to the bottom of kocke.html and search.html. Content is data-driven
   (see newsticker.js + the `ticker` Mongo collection / GET /api/ticker).
   =========================================================================== */

/* Reserve space so the fixed overlay doesn't cover page content (pagination). */
/* --ticker-h is updated by newsticker.js to the real rendered ticker height,
   so the page padding + cut-in anchors follow whichever bars are shown.
   When the ticker is disabled JS sets it to 0, so there's no effect. */
:root { --ticker-h: 70px; }

/* Reserve room so the fixed ticker never covers page content. The pages set
   html,body{height:100%}, which makes body padding-bottom useless for pushing
   overflowing content up — so we pad the actual content container instead. The
   body rule is a harmless fallback for any page without .page-container. */
body { padding-bottom: var(--ticker-h); }
.page-container { padding-bottom: var(--ticker-h); }

.opca-ticker {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35);
    user-select: none;
}

.ot-row { display: flex; align-items: stretch; height: 34px; }

/* --- Top row (stationary) --- */
.ot-top .ot-breaking {
    background: #ffd400;
    color: #000;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 15px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 0 14px;
}
.ot-top .ot-headline {
    background: #000;
    color: #fff;
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 14px;
}

/* --- Bottom row: stationary brand + scrolling message --- */
.ot-bottom .ot-brand {
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-size: 14px;
    white-space: nowrap;
}
.ot-brand-name { font-weight: 800; font-style: italic; }
.ot-brand-news {
    background: #e00000;
    color: #fff;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 2px;
}
.ot-time { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 4px; }

.ot-bottom .ot-scroll-wrap {
    background: #ffd400;
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}
.ot-scroll {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;          /* start off the right edge */
    color: #000;
    font-size: 14px;
    font-weight: 600;
    animation: ot-scrollx 38s linear infinite;
}
.ot-scroll-wrap:hover .ot-scroll { animation-play-state: paused; }

@keyframes ot-scrollx {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* --- Right-hand "cut-in" widget (rises from the top ticker to mid-screen) --- */
.opca-widget {
    --ow-w: clamp(200px, 22vw, 270px); /* shared so stacked cut-ins line up */
    --ow-i: 0;                          /* stacking index: 0 = rightmost */
    position: fixed;
    right: calc(var(--ow-i) * (var(--ow-w) + 3px));
    bottom: var(--ticker-h);            /* sits just above whatever ticker shows */
    height: calc(50vh - var(--ticker-h)); /* top edge reaches mid-screen */
    width: var(--ow-w);
    z-index: 9998;                      /* behind the ticker, so it "rises" from it */
    background: #ffd400;
    color: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -2px -2px 10px rgba(0, 0, 0, 0.35);
}
.ow-breaking {
    flex: 0 0 auto;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 15px;
    padding: 6px 10px;
}
.ow-photo { flex: 1 1 auto; min-height: 0; }
.ow-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;        /* keep the face in frame when cropped */
    display: block;
}
/* widget marked fit:"contain" — show the whole image, no cropping */
.ow-photo.ow-contain img {
    object-fit: contain;
    object-position: center;
}
.ow-caption {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.25;
    padding: 8px 10px;
}

@media screen and (max-width: 700px) {
    /* padding-bottom comes from --ticker-h (JS measures the real height) */
    .ot-row { height: 28px; }
    .ot-top .ot-breaking,
    .ot-top .ot-headline,
    .ot-bottom .ot-brand,
    .ot-scroll { font-size: 12px; }
    /* Hide the cut-in on phones — it would cover the table. */
    .opca-widget { display: none; }
}