/* BroadwayWorld Live Blog -- front-end styles. Everything is namespaced under
   #bww-liveblog with the distinct .bwwlb-* class prefix so it never collides
   with site CSS, and a small reset keeps the site's element styles from
   bleeding in. */

/* The article template wraps the TOP ("media") embed in <span class="video"> --
   the site's responsive-video box (inline span, aspect-ratio/overflow rules).
   When that span is actually holding the live blog, reset it to normal flow so
   the feed isn't clipped or collapsed. */
   span.video:has(#bww-liveblog) {
    display: block !important; position: static !important;
    width: auto !important; max-width: none !important; height: auto !important;
    padding: 0 !important; margin: 0 !important; overflow: visible !important;
    aspect-ratio: auto !important; float: none !important;
  }
  
  #bww-liveblog, #bww-liveblog *, #bww-liveblog *::before, #bww-liveblog *::after { box-sizing: border-box; }
  #bww-liveblog { display: block; }
  #bww-liveblog figure { margin: 0; padding: 0; }
  #bww-liveblog .bwwlb-item, #bww-liveblog .bwwlb-headline, #bww-liveblog .bwwlb-body { float: none; }
  /* neutralise the article body's .disnep-area rules: img { padding:8px } and a { max-width:300px } */
  #bww-liveblog img { padding: 0 !important; }
  #bww-liveblog a { max-width: none !important; }
  
  #bww-liveblog { font-family: inherit; margin: 0 0 1.5em; }
  
  #bww-liveblog .bwwlb-intro { margin: 0 0 1em; font-size: 1.05em; line-height: 1.5; }
  
  #bww-liveblog .bwwlb-livestream { margin: 0 0 1.25em; }
  #bww-liveblog .bwwlb-livestream iframe,
  #bww-liveblog .bwwlb-livestream video { width: 100%; max-width: 100%; }
  
  #bww-liveblog .bwwlb-controls {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1em; padding: .5em 0; margin-bottom: .75em;
    border-bottom: 2px solid #e0e0e0; font-size: .85em;
  }
  #bww-liveblog .bwwlb-status { color: #777; text-transform: uppercase; letter-spacing: .04em; }
  #bww-liveblog .bwwlb-status.bwwlb-ok::before  { content: '\25CF'; color: #d12; margin-right: .35em; animation: bwwlb-pulse 2s infinite; }
  #bww-liveblog .bwwlb-status.bwwlb-err::before { content: '\25CF'; color: #bbb; margin-right: .35em; }
  @keyframes bwwlb-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
  
  #bww-liveblog .bwwlb-sort button {
    background: none; border: 1px solid #ccc; border-radius: 3px;
    padding: .2em .6em; margin-left: .35em; cursor: pointer; font: inherit; color: #555;
  }
  #bww-liveblog .bwwlb-sort button.bwwlb-active { background: #222; color: #fff; border-color: #222; }
  
  #bww-liveblog .bwwlb-items { display: flex; flex-direction: column; gap: 1em; }
  
  #bww-liveblog .bwwlb-item {
    position: relative; padding: 1em 1.1em; border: 1px solid #e6e6e6;
    border-left: 4px solid #d0d0d0; border-radius: 4px; background: #fff;
  }
  #bww-liveblog .bwwlb-item.bwwlb-pinned       { border-left-color: #d12; background: #fffaf6; }
  #bww-liveblog .bwwlb-item.bwwlb-type-winner  { border-left-color: #c9a227; }
  #bww-liveblog .bwwlb-item.bwwlb-type-speech  { border-left-color: #2a6; }
  #bww-liveblog .bwwlb-item.bwwlb-new     { animation: bwwlb-flash 1.2s ease-out; }
  @keyframes bwwlb-flash { from { background: #fff6cc; } to { background: #fff; } }
  
  #bww-liveblog .bwwlb-pin-flag {
    display: inline-block; font-size: .65em; font-weight: 700; letter-spacing: .08em;
    color: #d12; border: 1px solid #d12; border-radius: 2px; padding: .1em .4em; margin-bottom: .4em; margin-right: .5em;
  }
  #bww-liveblog .bwwlb-time { display: inline-block; font-size: .75em; color: #999; margin-bottom: .25em; }
  #bww-liveblog .bwwlb-by { display: inline-block; font-size: .75em; color: #999; margin: 0 0 .25em .6em; }
  #bww-liveblog .bwwlb-by a { color: #555; text-decoration: none; font-weight: 600; }
  #bww-liveblog .bwwlb-by a:hover { text-decoration: underline; }
  #bww-liveblog .bwwlb-by-img { width: 30px !important; height: 30px !important; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: .35em; max-width: none !important; }
  #bww-liveblog .bwwlb-headline { font-size: 1.1em; line-height: 1.3; margin: .1em 0 .4em; }
  #bww-liveblog .bwwlb-headline a { color: inherit; text-decoration: none; }
  #bww-liveblog .bwwlb-headline a:hover { text-decoration: underline; }
  #bww-liveblog .bwwlb-body { line-height: 1.55; }
  #bww-liveblog .bwwlb-body p:last-child { margin-bottom: 0; }
  
  #bww-liveblog .bwwlb-card {
    display: grid !important; grid-template-columns: 120px minmax(0, 1fr) !important;
    width: 100% !important; max-width: none !important; box-sizing: border-box !important;
    gap: .9em; margin-top: .7em; padding: .6em;
    border: 1px solid #eee; border-radius: 4px; background: #fafafa;
    text-decoration: none; color: inherit; align-items: start;
  }
  #bww-liveblog .bwwlb-card:hover { background: #f2f2f2; }
  #bww-liveblog .bwwlb-card-img { width: 120px; max-width: 120px; }
  #bww-liveblog .bwwlb-card-img img { display: block !important; width: 120px !important; aspect-ratio: 2 / 1 !important; height: auto !important; object-fit: cover; border-radius: 3px; max-width: none !important; padding: 0 !important; }
  #bww-liveblog .bwwlb-card-body { min-width: 0; }
  #bww-liveblog .bwwlb-card-note { font-size: .8em; font-weight: 700; color: #d12; text-transform: uppercase; }
  #bww-liveblog .bwwlb-card-title { font-size: .95em; font-weight: 700; color: #222; line-height: 1.3; }
  #bww-liveblog .bwwlb-card-excerpt { font-size: .9em; color: #444; line-height: 1.45; }
  #bww-liveblog .bwwlb-photo { margin: .7em 0 0; }
  #bww-liveblog .bwwlb-photo img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
  #bww-liveblog .bwwlb-credit { display: block; font-size: .7em; color: #aaa; margin-top: .4em; }
  
  @media (max-width: 540px) {
    #bww-liveblog .bwwlb-card { grid-template-columns: 1fr !important; }
    #bww-liveblog .bwwlb-card-img, #bww-liveblog .bwwlb-card-img img { width: 100% !important; max-width: none !important; }
    /* full-width on mobile -> keep the image's natural aspect ratio, not the 80px desktop thumb height */
    #bww-liveblog .bwwlb-card-img img { height: auto !important; }
  }