/* The row and buttons share home.css and home-components.css.
   A single publication adapts to its column instead of behaving as a rail slide. */
:is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: Lato, Arial, sans-serif;
  container: bf-publication / inline-size;
}
:is(#bestfy-prisma, .bf-publication-event).bf-publication-event .bf-events { margin: 0; }
.bf-publication-event .bf-events-track { min-width: 0; }
:is(#bestfy-prisma, .bf-publication-event).bf-publication-event .bf-publication-event__notice {
  margin: 10px 0 0;
  color: #687c8d;
  font-size: 10px;
  line-height: 1.5;
}
:is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event .bf-event-resource[aria-current="page"] {
  background: #eaf0f4;
  border-color: #d1dce6;
  color: #657789;
  cursor: default;
}
.bf-publication-event .bf-event-finished {
  padding: 2px 6px;
  border-radius: 4px;
  background: #eff4f8;
  color: #526b80;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.bf-publication-event [hidden], #bestfy-prisma.bf-publication-modals [hidden] { display: none !important; }
/* Articles can occupy a narrow column even on a wide viewport. */
@container (max-width: 360px) {
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event :is(.bf-event-match,.bf-event-direct) .bf-event-resource .bf-icon { display: none; }
}

/* A publication contains one event, so it must not inherit the 380px rail slide. */
:is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-events-track {
  display: block;
  padding: 0;
  overflow: visible;
}
:is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-events-track > .bf-event {
  width: 100%;
  max-width: none;
  margin: 0;
  flex: none;
}

/* Keep a horizontal action row in article columns narrower than the home table.
   Moving the title above it frees room without squeezing button labels. */
@container bf-publication (min-width: 881px) and (max-width: 1052px) {
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event {
    --publication-news: 86px;
    --publication-video: 82px;
    --publication-direct: 90px;
    display: grid;
    grid-template-columns: 86px var(--publication-news) var(--publication-video) minmax(160px,1fr) var(--publication-direct) 202px 66px !important;
    grid-template-areas: "date date date date date date date" "title title title title title title title" "match news video promo direct pick house" !important;
    grid-template-rows: auto auto auto;
    gap: 10px 6px !important;
    align-items: start;
    padding: 14px !important;
    border: 0;
    border-left: 3px solid var(--house);
    border-radius: 0;
    box-shadow: none;
  }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event:has(.bf-event-news:empty) { --publication-news: 0px; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event:has(.bf-event-video:empty) { --publication-video: 0px; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event:has(.bf-event-direct:empty) { --publication-direct: 0px; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event > div {
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    align-self: start;
  }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event > .bf-event-date { grid-area: date !important; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event > .bf-event-title { grid-area: title !important; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event > .bf-event-match { grid-area: match !important; border: 0; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event > .bf-event-news { grid-area: news !important; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event > .bf-event-video { grid-area: video !important; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event > .bf-event-promo { grid-area: promo !important; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event > .bf-event-direct { grid-area: direct !important; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event > .bf-event-direct:not(:empty) { display: flex; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event > .bf-event-pick { grid-area: pick !important; border: 0; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event > .bf-event-house { grid-area: house !important; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event-title h3 { font-size: 16px !important; margin: 0; }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event :is(a,button,summary).bf-event-resource,
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event .bf-event-pick .bf-pick {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px;
    padding: 6px 5px;
    margin: 0;
    font-size: 11px !important;
    gap: 4px;
    border-radius: 6px;
  }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event-house .bf-brand {
    width: 66px;
    height: 32px;
    padding: 3px 4px;
  }
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container .bf-event-house .bf-brand img { max-height: 26px; max-width: 100%; }
}

/* A single full-width card needs no second frame or empty slider gutter. */
@container bf-publication (max-width: 880px) {
  :is(#bestfy-prisma, .bf-publication-event).bf-publication-event.bf-final .bf-events .bf-event-container { border: 0; background: transparent; }
}