/* WBX3 / EDITORIAL FINISH / LOCAL PREVIEW */

#main.wbx-unified {
  --wbx-line:#333841;
  --wbx-red:#c8102e;
  --wbx-paper:#f6f6f7;
}

#main.wbx-unified .wbx-card-grid {
  gap:18px!important;
  align-items:stretch!important;
}

#main.wbx-unified .wbx-card {
  position:relative!important;
  isolation:isolate!important;
  display:flex!important;
  flex-direction:column!important;
  border:1px solid var(--wbx-line)!important;
  border-radius:7px!important;
  overflow:hidden!important;
  background:linear-gradient(
    155deg,#1b1e24 0%,#121419 100%
  )!important;
  box-shadow:0 8px 22px rgba(0,0,0,.15)!important;
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease!important;
}

#main.wbx-unified .wbx-card:hover {
  transform:translateY(-5px)!important;
  border-color:#898d97!important;
  box-shadow:0 22px 48px rgba(0,0,0,.42)!important;
}

#main.wbx-unified .wbx-card::before {
  content:"";
  position:absolute;
  z-index:3;
  inset:0 0 auto;
  height:2px;
  background:var(--wbx-red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s ease;
  pointer-events:none;
}

#main.wbx-unified .wbx-card:hover::before,
#main.wbx-unified .wbx-card.wbx-new::before {
  transform:scaleX(1);
}

#main.wbx-unified .wbx-card.wbx-new {
  border-color:#c8102e!important;
  background:linear-gradient(
    145deg,#241c23,#14161b 55%
  )!important;
}

/* Same image frame on every card. */
#main.wbx-unified .wbx-card-image,
#main.wbx-unified .wbx-cover-link,
#main.wbx-unified .wbx-card-image img,
#main.wbx-unified .wbx26-editorial-cover {
  height:214px!important;
  min-height:214px!important;
  max-height:214px!important;
  width:100%!important;
}

#main.wbx-unified .wbx-card-image {
  position:relative!important;
  background:#08090c!important;
  overflow:hidden!important;
  border-bottom:1px solid #30343c!important;
}

#main.wbx-unified .wbx-card-image img {
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  transition:transform .28s ease!important;
}

#main.wbx-unified .wbx-card:hover .wbx-card-image img {
  transform:scale(1.045)!important;
}

/* A dark photographic frame, not another decorative panel. */
#main.wbx-unified .wbx-card-image::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:24%;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(8,9,12,.4));
}

#main.wbx-unified .wbx-card-content {
  flex:1!important;
  padding:19px!important;
  display:flex!important;
  flex-direction:column!important;
}

#main.wbx-unified .wbx-card-meta {
  margin:0 0 12px!important;
  color:#aeb1bc!important;
  font:800 10px Archivo,Arial,sans-serif!important;
  line-height:1.5!important;
  letter-spacing:.095em!important;
}

#main.wbx-unified .wbx-card h2 {
  color:var(--wbx-paper)!important;
  font:900 19px/1.23 Archivo,Arial,sans-serif!important;
  letter-spacing:-.035em!important;
  margin:0 0 18px!important;
  text-wrap:pretty!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

#main.wbx-unified .wbx-headline-link {
  color:inherit!important;
  text-decoration:none!important;
}

#main.wbx-unified .wbx-headline-link:hover {
  color:#ff748c!important;
}

/* A single bottom action rail. */
#main.wbx-unified .wbx27-actions {
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
  padding:13px 0 0!important;
  margin:auto 0 0!important;
  border-top:1px solid #383c45!important;
}

#main.wbx-unified .wbx27-actions > * {
  display:inline-flex!important;
  flex:1 1 0!important;
  min-width:0!important;
  height:43px!important;
  min-height:43px!important;
  justify-content:center!important;
  align-items:center!important;
  padding:7px 5px!important;
  border:1px solid #474c57!important;
  border-radius:5px!important;
  background:#282b33!important;
  color:#f6f6f7!important;
  font:850 11px Archivo,Arial,sans-serif!important;
  text-decoration:none!important;
  letter-spacing:.025em!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:background .18s,border-color .18s!important;
}

#main.wbx-unified .wbx27-actions > *:hover {
  background:#41414b!important;
  border-color:#a8aab2!important;
}

#main.wbx-unified .wbx27-actions .wbx27-listen {
  background:#c8102e!important;
  border-color:#c8102e!important;
}

#main.wbx-unified .wbx27-actions .wbx27-listen:hover {
  background:#a30d28!important;
}

#main.wbx-unified .wbx27-actions .wbx27-story {
  background:transparent!important;
  border-color:#565965!important;
}

#main.wbx-unified .wbx27-actions .wbx27-story:only-child {
  flex:1!important;
}

/* Keep media functionality with a more polished presentation. */
.wbx27-dock {
  border-radius:8px!important;
  border-top:3px solid #c8102e!important;
  background:#17191f!important;
  box-shadow:0 26px 85px #000b!important;
}

.wbx27-modal {
  border-radius:8px!important;
  background:#14161b!important;
}

.wbx27-modal::backdrop {
  background:rgba(0,0,0,.88)!important;
  backdrop-filter:blur(8px);
}

#main.wbx-unified a:focus-visible,
#main.wbx-unified button:focus-visible {
  outline:3px solid #fff!important;
  outline-offset:3px!important;
}

@media(max-width:650px) {
  #main.wbx-unified .wbx-card h2 {
    font-size:18px!important;
  }
  #main.wbx-unified .wbx-card-image,
  #main.wbx-unified .wbx-cover-link,
  #main.wbx-unified .wbx-card-image img,
  #main.wbx-unified .wbx26-editorial-cover {
    height:195px!important;
    min-height:195px!important;
    max-height:195px!important;
  }
}

@media(prefers-reduced-motion:reduce) {
  #main.wbx-unified .wbx-card,
  #main.wbx-unified .wbx-card::before,
  #main.wbx-unified .wbx-card-image img {
    transition:none!important;
    transform:none!important;
  }
}