/* TDN Live Blog 1.0.0 — dynamic live-coverage presentation */

.tdn-live-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: linear-gradient(100deg, #7d0c17 0%, #b3121f 50%, #d21a28 100%);
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 4px 16px rgba(125, 12, 23, 0.28);
}

.tdn-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #a80f1c;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 999px;
    white-space: nowrap;
    flex: none;
}

.tdn-live-pill--ended { color: #55565e; }
.tdn-live-pill--ended .tdn-live-dot { background: #9a9aa2; animation: none; }

.tdn-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d21a28;
    animation: tdnLivePulse 1.4s ease-in-out infinite;
    flex: none;
}

@keyframes tdnLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.75); }
}

.tdn-live-updated {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.92;
}

.tdn-live-sound {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: none;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.tdn-live-sound:hover { background: rgba(255, 255, 255, 0.26); }
.tdn-live-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tdn-live-sound svg { width: 17px; height: 17px; fill: #fff; }
.tdn-live-sound.is-off { opacity: 0.45; }
.tdn-live-sound.is-off svg { fill: #ffd9de; }

/* Timeline feed */
.tdn-live-feed {
    position: relative;
    padding-left: 28px;
    margin: 0 0 10px;
}

.tdn-live-feed::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, #d21a28, rgba(210, 26, 40, 0.12));
}

.tdn-live-update {
    position: relative;
    background: #ffffff;
    border: 1px solid #e9e9ee;
    border-radius: 10px;
    padding: 16px 20px 18px;
    margin: 0 0 16px;
    box-shadow: 0 2px 12px rgba(20, 20, 30, 0.06);
}

.tdn-live-update::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 24px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d21a28;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #d21a28;
}

.tdn-live-update > p:first-child { margin: 0 0 8px; }

.tdn-live-update > p:first-child strong {
    display: inline-block;
    background: #fdeef0;
    color: #a80f1c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 999px;
}

.tdn-live-update h3 {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 1.35;
}

.tdn-live-update > p:last-child { margin-bottom: 0; }

/* New-update arrival flash */
@keyframes tdnLiveFlash {
    0% { background: #fff1f3; box-shadow: 0 0 0 3px rgba(210, 26, 40, 0.5); }
    100% { background: #ffffff; box-shadow: 0 2px 12px rgba(20, 20, 30, 0.06); }
}

.tdn-live-update.tdn-live-new { animation: tdnLiveFlash 2.6s ease-out; }

/* "Coverage ended" notice placed by liveblog.py close */
.tdn-live-ended {
    background: #f4f4f6;
    border: 1px solid #e2e2e8;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 0 0 20px;
}

/* Dark mode follows the theme toggle */
html[data-theme="dark"] .tdn-live-update {
    background: #17171d;
    border-color: #2b2b34;
    box-shadow: none;
}

html[data-theme="dark"] .tdn-live-update > p:first-child strong {
    background: #3a1420;
    color: #ff8fa0;
}

html[data-theme="dark"] .tdn-live-ended {
    background: #17171d;
    border-color: #2b2b34;
}

@keyframes tdnLiveFlashDark {
    0% { background: #3d1522; box-shadow: 0 0 0 3px rgba(210, 26, 40, 0.55); }
    100% { background: #17171d; box-shadow: none; }
}

html[data-theme="dark"] .tdn-live-update.tdn-live-new { animation-name: tdnLiveFlashDark; }

@media (prefers-reduced-motion: reduce) {
    .tdn-live-dot,
    .tdn-live-update.tdn-live-new { animation: none; }
}

@media (max-width: 640px) {
    .tdn-live-feed { padding-left: 24px; }
    .tdn-live-update { padding: 13px 15px 15px; }
    .tdn-live-update::before { left: -21px; }
    .tdn-live-update h3 { font-size: 17px; }
}

/* -------------------------------------------------------------------------
 * Hero live-update links (v1.0.2): latest updates under the front-page
 * hero excerpt, news-site style.
 * ------------------------------------------------------------------------- */
.tdn-hmore {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.tdn-hmore__item {
    margin: 7px 0;
    font-size: 15px;
    line-height: 1.5;
}
.tdn-hmore__tag {
    color: #e51a3e;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
    margin-right: 8px;
    white-space: nowrap;
}
.tdn-hmore__link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #e51a3e;
    text-underline-offset: 3px;
}
.tdn-hmore__link:hover {
    color: #e51a3e;
}

/* The theme line-clamps .must-see__excerpt to 3 lines with overflow:hidden,
   which would clip the update links sitting beneath the excerpt paragraph.
   Undo the clamp whenever the links are present. */
.must-see__excerpt:has(.tdn-hmore) {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}