/* Events section: next-show card + archive list.
   List = directional hover list, coloured with the Bekifft tokens. */
.events-section { background: var(--bk-brown-800); position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.events-section__inner { max-width: var(--bk-container); margin: 0 auto; padding: var(--bk-section-y) var(--bk-gutter); }
.events-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--bk-space-4); margin-bottom: var(--bk-space-7); }
.events-section__sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--bk-space-3); margin: var(--bk-space-9) 0 var(--bk-space-5); }

/* Next show: green card (different from the orange hover tile of the list), dark text */
.events-next { display: flex; flex-wrap: wrap; gap: var(--bk-space-6); align-items: center; background: var(--bk-green); color: var(--bk-black); border-radius: var(--bk-radius-lg); padding: var(--bk-space-7); }
.events-next p { margin: 0; }
.events-next__date { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--bk-space-1); }
.events-next__eyebrow { font-size: var(--bk-text-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.events-next__day { font-family: var(--bk-font-display); font-size: var(--bk-text-2xl); line-height: var(--bk-lh-none); }
.events-next__time { font-weight: 700; }
.events-next__text { flex: 999 1 320px; min-width: 0; }
.events-next__title { font-family: var(--bk-font-display); font-size: var(--bk-text-xl); line-height: var(--bk-lh-tight); }
.events-next__venue { margin-top: var(--bk-space-2) !important; font-weight: 600; }
.events-next__line { margin-top: var(--bk-space-2) !important; font-weight: 500; }
.events-next__btn { flex: 0 0 auto; background: var(--bk-black); color: var(--bk-cream-50); text-decoration: none; padding: var(--bk-space-4) var(--bk-space-6); font-weight: 800; border-radius: var(--bk-radius-pill); }
.events-next__btn:hover { background: var(--bk-brown-800); }

/* ---- Directional list hover (colours via tokens) ---- */
.directional-list {
  color: var(--bk-cream-100);
  flex-flow: column;
  width: 100%;
  max-width: 100%;
  display: flex;
  position: relative;
  font-size: var(--bk-text-base);
}

.directional-list__info {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  display: flex;
  position: relative;
}

.directional-list__eyebrow {
  color: var(--bk-orange-300);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: .75em;
  line-height: 1;
}

.directional-list__item {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  color: inherit;
  justify-content: space-between;
  align-items: center;
  margin-top: -1px;
  padding: 1.6em 1.5em;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.directional-list__col-award {
  min-width: 18%;
  position: relative;
}

.directional-list__col-client {
  flex: 1;
  position: relative;
}

.directional-list__col-venue {
  flex: 0 0 28%;
  position: relative;
}

.directional-list__col-year {
  flex: none;
  min-width: 7em;
  position: relative;
  text-align: right;
}

.directional-list__p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
  line-height: 1.2;
}

.directional-list__border {
  z-index: 2;
  opacity: .3;
  background-color: currentColor;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.directional-list__border.is--item {
  top: 0;
  bottom: auto;
}

.directional-list__hover-tile {
  background-color: var(--bk-accent);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

[data-directional-hover-tile] {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(-100%);
  will-change: transform;
}

/* Bekifft additions: dark text on the orange tile (never white on orange), date in the display font, focus ring, phones */
.directional-list__item .directional-list__p { transition: color .3s; }
.directional-list__item:hover .directional-list__p,
.directional-list__item:focus-visible .directional-list__p { color: var(--bk-brown-800); }
.directional-list__item:focus-visible { outline: 3px solid var(--bk-focus-color, var(--bk-orange-200)); outline-offset: -3px; }
.directional-list__item:focus-visible [data-directional-hover-tile] { transform: translate(0%, 0%); }
.directional-list__col-award .directional-list__p { font-family: var(--bk-font-display); font-size: var(--bk-text-lg); line-height: var(--bk-lh-none); }
.directional-list__item .directional-list__col-client .directional-list__p { font-weight: 800; }
@media (max-width: 760px) {
  .directional-list__col-venue { display: none; }
  .directional-list__col-year { min-width: 5.5em; }
  .directional-list__item { padding: 1.25em 1em; }
  .directional-list__info { padding-left: 1em; padding-right: 1em; }
}

/* Header and rows share one grid, so the column titles always sit exactly above the values */
.directional-list__info { box-sizing: border-box; }
.directional-list__info, .directional-list__item { display: grid; grid-template-columns: 8em minmax(0, 1fr) minmax(0, .7fr) 7.5em; align-items: center; }
.directional-list__col-award, .directional-list__col-client, .directional-list__col-venue, .directional-list__col-year { min-width: 0; flex: none; }
.directional-list__info .directional-list__col-year { text-align: right; }
@media (max-width: 760px) {
  .directional-list__info, .directional-list__item { grid-template-columns: 5.6em minmax(0, 1fr) 5.4em; }
}
@media (max-width: 480px) {
  .directional-list__item { padding: 1.1em .75em; gap: .5em; }
  .directional-list__info { padding-left: .75em; padding-right: .75em; gap: .5em; }
  .directional-list__col-award .directional-list__p { font-size: var(--bk-text-md); }
  .directional-list__col-client .directional-list__p, .directional-list__col-year .directional-list__p { font-size: var(--bk-text-sm); }
  .directional-list__col-year { min-width: 0; }
}