[data-layout="billboard"].billboard-transparent::after {
   background: var(--color-primary);
}

ul.list-events{
  margin-bottom: 1.3rem;
}

.list-events li.is-event{
  border: 1px solid #FFF;
  border-bottom-color: #F1F1F1;
  position: relative;
  border-radius: 8px;
}

.list-events li.is-event a{

  text-decoration: none;
}



.list-events li.is-event a.link-wrapper, .list-events li.is-event[data-active='0']{
  padding: 24px 12px;
}
@media all and (max-width: 639px){
  .list-events li.is-event a.link-wrapper, .list-events li.is-event[data-active='0']{
    padding: 16px 12px;
  }  
}
.list-events li.is-event a.link-wrapper{
  position: relative;
  width: 100%;
  display: block;
  height: 100%;
  
}


.list-events .date-block, .list-events .event-block{
  display: inline-grid;
}


.list-events li:last-of-type{
}

.list-events .date-block{
  width: 92px;
  line-height: 18px;
}

.list-events .event-block{
  width: calc(100% - 176px);  
}

.list-events .date-block span.date{
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
}
.list-events .date-block span.time{
  display: block;
}



.list-events .event-block .event-name {

  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 0.2rem;
  display:block;
}
.list-events li.is-event button, .list-events li.is-event .price{
  position: absolute;
  right: 12px;
  width: 72px;
  color: #222;
}
.list-events li.is-event button{
  color: white;
  background: #0067CE;
  height: 36px;
  line-height: 36px;
  border-radius: 4px;  
  font-size: 1.2rem;
  padding: unset;
  border: 0;
}
.list-events li.is-event .price{
  text-align: center;
  margin-top: 38px;
}

@media all and (max-width: 379){
  .list-events .event-block .event-name{
    color: #0067CE;
  }
  .list-events li.is-event button, .list-events li.is-event .price{
    display: none;
  }
}

.list-events .event-block .event-details{
  display: block;
  font-size: 1.1rem;
  color: #222;
 
}
.list-events li.is-event:not([data-active='0']) .event-block .event-details{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;   
}
.list-events .event-block .promotion{
  background: #d0e0ff;
  color: #0067ce;
  font-weight: 500;
  width: fit-content;
  border-radius: 6px;
  padding: 4px;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
  max-width: calc(100% - 30px);
}

@media all and (max-width: 480px){
  .list-events li.is-event .date-block{
    width: 80px;
    line-height: 16px;
  }
  .list-events li.is-event .date-block span.date{
    font-size: 1rem;
  }
  .list-events li.is-event .date-block span.time{
    font-size: 0.9rem;
  }
  .list-events li.is-event .event-block {
    width: calc(100% - 160px);
  }
  .list-events li.is-event .event-block .event-name{
    font-size: 1.2rem;
  }
  .list-events li.is-event .event-block .event-details{
    font-size: 1.05rem;
  }
  .list-events li.is-event button, .list-events li.is-event .price{
    width: 64px;
    right: 0px;
  }
  .list-events li.is-event button{
    font-size: 1.1rem;
    height: 32px;    
    line-height: 32px;    
  }
  .list-events li.is-event .price{
    margin-top: 34px;
  }
}

@media all and (min-width: 639px){
  .list-events li.is-event .date-block{
    width: 104px;
  }
  .list-events li.is-event .date-block span.date{
    font-size: 1.2rem;
  }  
  .list-events:not(article *) li.is-event .event-block{
    width: calc(100% - 216px);
  }
  .list-events:not(article *) li.is-event button, .list-events:not(article *) li.is-event .price{
    width: 96px;
  }
  .list-events:not(article *) li.is-event button{    
    height: 40px;
    line-height: 40px;
  }
  .list-events:not(article *) li.is-event .price{
    margin-top: 42px;
  }
  article .list-events{
    margin: 24px 52px 24px 8px;
    border: 1px solid #DDD;
    border-radius: 8px;
  }
}



.events .skeleton{
  overflow: auto;
  margin-bottom: 16px;
}
.skeleton-avatar, .skeleton-text{
  float: left;
}
.events .skeleton-avatar{
  margin-right: 16px;
  width: 64px;
}
.events .skeleton-avatar, .events .skeleton-text{
  height: 64px;
}
.events .skeleton-text{
  width: calc(100% - 80px);
}
#row-jump-menu .skeleton-text{
  height: 32px;
  width: 300px;
  margin-bottom: 16px;
}


.skeleton-text, .skeleton-avatar{
  background: #F1F1F1;
  border-radius: 3px;
}

.container-matchup-ranking{
  overflow: auto;
  margin-bottom: 3rem;
}

.container-matchup-ranking p{
  margin-bottom: 0.5rem;
}


.matchup-ranking-bar{
  height: 20px;
}

.matchup-ranking-bar .mini-bar{
 display: inline-block;
 background: goldenrod;
 height: 100%;
 width: 33%;
}

.matchup-ranking-bar .mini-bar.inexpensive{
  background: green;
}

.matchup-ranking-bar .mini-bar.expensive{
  background: red;
}

.matchup-ranking-bar .mini-bar.average{
 width: 34%;
}


#more-matchups section{
  margin-bottom: 2rem;
}


@media all and (min-width: 440px){
  #more-matchups ul{
    display: inline-table;
    width: 33%;
  }
}
@media all and (max-width: 439px){
  #more-matchups .matchup-league{
    display: inline-table;
    width: 50%;
  }  
}

.matchup-ranking-details.middle-right{
  direction: rtl;
}
.matchup-ranking-details.middle-right i{
  position: absolute;
  right: -14px;
  top: 2px;
}

.matchup-ranking-details.middle-left{
  direction: ltr;
}
.matchup-ranking-details.middle-left i{
  position: absolute;
  left: -14px;
  top: 2px;
}

.price-table th, td {
        padding: 4px;
    }

td.lowPrice, td.inventory  {
        text-align: center;
    }







    
.league-banner[data-league='mlb'] img {
   height: 30px;
}

[data-layout="billboard"] h2 {
   margin-bottom: 18px;
   line-height: 1.2;
}

@media only screen and (min-width: 960px) {
   #primary-event-list-container {
       box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 16px;
       background: white;
       padding: 16px;
       border-radius: 12px;
       border: 1px solid #F8F8F8;
   }
}


[data-layout='billboard'].billboard-themed{
   background: var(--performer-theme-color);   
}

[data-layout='billboard'] h2{
   font-size: var(--size-title);
   font-weight: normal;
}

[data-layout='billboard'].has-team-icon h1{
   padding-left: 64px;
   min-height: 56px;
   align-content: center;
   margin-bottom: 12px;
}

#buyer-guarantee-sidebar {
   border-radius: 6px;
   max-width: 320px;
}



[data-layout='billboard'].billboard-themed .billboard-content trust-bar {
   background: var(--color-primary);
   margin-left: -24px;
   margin-right: -24px;
   padding: 12px 24px;
   margin-bottom: -24px;
   border-radius: 0 0 8px 8px;
}

@media screen and (max-width: 768px) {
   [data-layout='billboard'].billboard-themed .billboard-content trust-bar{
      border-radius: 0;
   }
}

.league-banner[data-league='mlb'] {
   color: white;
   line-height: 30px;
   display: flex;
   gap: 8px;
   font-size: clamp(12px, 2vw, 15px);
   font-weight: 600;
   margin-left: -24px;
   margin-right: -24px;
   background: var(--color-primary);   
   padding-left: 16px;
   padding-top: 12px;
}

.list-events li.is-event button:after {
   content: "";
}

main[data-show='billboard'] [data-layout='feature']{
   width: 100%;
   max-width: 768px;
}

#more-matchups lh {
   color: var(--color-primary-subtitle);
   margin-bottom: 8px;
}

#more-matchups a{
   font-weight: 500;   
}

#venue-content a{
   font-weight: bold;
}

#row-schedule{
   box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 16px;
   background: white;
   padding: 16px;
   border-radius: 12px;
   border: 1px solid #F8F8F8;
   min-height: 40vh;   
}

/* ═══════════════════════════════════════════════════════════════
   MATCHUP BILLBOARD
   Two-tone hero built from resident_bridge colours. Replaces the
   per-pairing photo, which existed for 2 of 1,862 matchups.
   ═══════════════════════════════════════════════════════════════ */

.billboard-matchup{
   min-height: 320px;
   display: flex;
   align-items: center;
}

.matchup-hero-bg{
   position: absolute;
   inset: 0;
   z-index: 0;
   background: var(--billboard-bg);
}

/**
 * The two colours are LAYERED, not tiled side by side.
 *
 * They used to be flex siblings, each with its own clip-path, and the two clipped
 * edges did not share a seam — leaving a diagonal strip of the billboard's black
 * background showing through between them. It measured 2% of the width on desktop
 * and 10.9% on mobile, which is the black wedge that looked deliberate but was not.
 *
 * Home is full-bleed underneath. Away is the same full-bleed box clipped on top, so
 * the seam IS away's edge and a gap is geometrically impossible at any viewport.
 * The polygons keep the proportions the tiled version rendered at.
 *
 */
.matchup-hero-side{
   position: absolute;
   inset: 0;
   /* fallback for a resident with no usable colour — see $heroTeamColor in init.php */
   background-color: rgba(var(--billboard-bg-rgb), 1);
}

.matchup-hero-home{ z-index: 0; }
.matchup-hero-away{ z-index: 1; clip-path: polygon(0 0, 57% 0, 41% 100%, 0 100%); }

/**
 * Matchup banner — the 1600x800 designed graphic, shown at its own ratio in the
 * write-up rather than cropped behind the hero. aspect-ratio plus the width/height
 * attributes mean it reserves space before it loads and never shifts the article.
 */
.matchup-banner{
   margin: 0 0 28px;
}

.matchup-banner img{
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 2 / 1;
   object-fit: cover;
   border-radius: 12px;
}

/**
 * No veil at all — the team colours are laid down flat, so a colour-pick returns the
 * real brand hex. The base billboard-transparent::after is an opaque navy wash, so it
 * has to be cancelled here; specificity is deliberately above
 * [data-layout="billboard"].billboard-transparent::after in lib/base/styles.
 *
 * The cost is that white text is no longer safe on every team: 24 of the 124 matchup
 * teams need dark text instead. init.php computes it per matchup and sets it inline
 * on .billboard-content. Everything inside inherits, including [data-is="icon"],
 * which paints with background-color: currentColor.
 */
[data-layout="billboard"].billboard-transparent.billboard-matchup::after{
   background: none;
}

.billboard-matchup .billboard-content{
   position: relative;
   z-index: 2;
   color: #fff;
   /**
    * Text is white over both halves of the diagonal, on flat unmodified team colour.
    * 12 of the 124 teams cannot carry white text at any accessible ratio (Warriors and
    * Bruins are 1.6:1). This shadow is what makes those readable at all — it is
    * mitigation, not a WCAG pass. Removing it makes the gold teams illegible.
    */
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.35);
}

/* base styles colour these independently — pull them onto the computed hero colour */
.billboard-matchup .billboard-content [data-role='breadcrumbs'],
.billboard-matchup .billboard-content [data-role='breadcrumbs'] a,
.billboard-matchup .billboard-content [data-role='breadcrumbs'] span,
.billboard-matchup .billboard-content h1,
.billboard-matchup .billboard-content trust-bar,
.billboard-matchup .billboard-content .trust-bar-label,
.billboard-matchup .billboard-content trust-bar li{
   color: inherit;
}

/* VS lockup ---------------------------------------------------- */

.matchup-vs{
   display: flex;
   align-items: baseline;
   gap: 14px;
   margin-bottom: 6px;
   color: inherit;
}

.matchup-vs-team{
   font-size: clamp(30px, 4.6vw, 54px);
   font-weight: 900;
   line-height: 1;
   letter-spacing: -0.02em;
}

.matchup-vs-word{
   font-size: 15px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .1em;
   opacity: .8;
}

/* H1 steps back so the abbreviations carry the weight */
.billboard-matchup .billboard-content h1{
   font-size: clamp(17px, 1.9vw, 22px);
   font-weight: 600;
   line-height: 1.25;
   opacity: .95;
   margin: 0 0 18px;
}

/* Facts strip -------------------------------------------------- */

.matchup-facts{
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
   margin: 0 0 16px;
   padding: 0;
   color: inherit;
}

.matchup-fact-label{
   display: block;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .07em;
   opacity: .72;
   margin-bottom: 3px;
}

.matchup-fact-value{
   display: block;
   font-size: 17px;
   font-weight: 700;
}

@media (max-width: 767px){
   .billboard-matchup{ min-height: 0; }

   /* same layered approach, steeper — matches what the tiled version rendered at */
   .matchup-hero-away{ clip-path: polygon(0 0, 55% 0, 34% 100%, 0 100%); }

   .matchup-facts{ gap: 18px; }
   .matchup-fact-value{ font-size: 15px; }
}


/**
 * MATCHUP BILLBOARD — desktop and tablet
 *
 * The hero was composed against a 390px mobile viewport; everything above only had a
 * max-width: 767px block, so wide screens were inheriting mobile-scale type inside a
 * 320px box with the base 24px padding. That reads as undersized rather than deliberate
 * once the canvas is 1200px across.
 *
 * The diagonal opens up as the canvas widens — the mobile angle is far too steep to
 * stretch across a wide box.
 */
@media (min-width: 768px){
   .billboard-matchup{
      min-height: 380px;
      padding: 34px;
   }

   /* line length, not colour — text is white on both halves so it can cross the seam */
   .billboard-matchup .billboard-content{
      max-width: 62%;
   }

   .matchup-vs{
      gap: 18px;
      margin-bottom: 10px;
   }

   .matchup-vs-team{ font-size: clamp(44px, 5.2vw, 64px); }
   .matchup-vs-word{ font-size: 17px; }

   .billboard-matchup .billboard-content h1{
      font-size: clamp(23px, 2.2vw, 30px);
      margin-bottom: 22px;
   }

   .matchup-facts{ gap: 40px; }
   .matchup-fact-label{ font-size: 12px; }
   .matchup-fact-value{ font-size: 20px; }

   .matchup-hero-away{ clip-path: polygon(0 0, 62% 0, 46% 100%, 0 100%); }
}

@media (min-width: 1200px){
   .billboard-matchup{
      min-height: 420px;
      padding: 44px;
   }

   .billboard-matchup .billboard-content{ max-width: 56%; }

   .matchup-hero-away{ clip-path: polygon(0 0, 60% 0, 43% 100%, 0 100%); }
}


/**
 * Empty schedule. Between seasons this is the normal state for a whole league at once,
 * so it gets a real block rather than an absence.
 */
.matchup-empty{
   background: #f6f7f9;
   border: 1px solid #e4e7ec;
   border-left: 4px solid #cfd4dc;
   border-radius: 10px;
   padding: 16px 18px;
   margin: 0 0 28px;
   color: #475467;
   font-size: 1.15rem;
   line-height: 1.55;
}

/**
 * The fallback lists sit under their own headings inside #row-schedule. Without an
 * explicit rhythm here the h3 lands hard against the paragraph above it, because
 * nothing else in this theme styles an h3 in this context.
 */
#row-schedule h2{
   margin-bottom: 16px;
}

#row-schedule h3{
   margin: 34px 0 12px;
   font-size: 1.45rem;
   line-height: 1.25;
}

/* first list follows the explanation, which already carries its own bottom margin */
#row-schedule .matchup-empty + h3{
   margin-top: 0;
}