/*
 * Info card
 * Figma: Desktop 70:62 (card 989 × 404, section y 1024–1600) · Mobile 86:4 (352 × 490, section y 960–1520)
 * Dividers are CSS borders. The card has its own background and sits above the hero blur art.
 * < 1040px uses the mobile (2-column) arrangement; >= 1040px the 4-column desktop card.
 */

.info {
  position: relative;
  z-index: 1;
  padding-block: 35px;
  --info-line: 2px solid var(--text-info);
}

.info__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 19px;
}

.info__card {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 4px;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.info__list {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
}

.info__item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.info__item > * { margin: 0; }
.info__dd { display: flex; flex-direction: column; }
.info__strong { color: var(--text-primary); }
.info__accent { color: var(--text-info); }

.info__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Mobile / tablet: rows of two cells, divided by borders */
.info__item--dates { padding: 0 24px 16px 0; border-bottom: var(--info-line); }
.info__item--venue { padding: 0 0 16px 26px; border-bottom: var(--info-line); }
.info__item--ages  { padding: 16px 24px 16px 0; border-bottom: var(--info-line); }
.info__item--cost  { padding: 16px 0 16px 26px; border-bottom: var(--info-line); }
.info__item--buses { grid-column: 1 / -1; padding: 16px 0; border-bottom: var(--info-line); }

.info__item--venue::before,
.info__item--cost::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 16px;
  border-left: var(--info-line);
}
.info__item--cost::before { top: 16px; }

.info__item--venue .info__accent { white-space: nowrap; }
@media (max-width: 380px) { .info__item--venue .info__accent { white-space: normal; } }

.info__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 2px solid var(--border-strong);
  color: var(--text-primary);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Desktop card (989 × 404) ---------- */
@media (min-width: 1040px) {
  .info { padding: 25px 0 147px; }

  .info__inner { padding-inline: 19px; }

  .info__card {
    display: block;
    max-width: 989px;
    margin-left: min(181px, 100% - 989px);
    margin-right: 0;
    padding: 21px 23px 24px;
  }

  .info__list {
    grid-template-columns: 186fr 326fr 222fr 209fr;
  }

  .info__item--dates,
  .info__item--venue,
  .info__item--ages,
  .info__item--cost {
    box-sizing: border-box;
    min-height: 180px;
    border-bottom: var(--info-line);
  }
  .info__item--dates { padding-top: 18px; }
  .info__item--venue { padding: 27px 0 0 50px; }
  .info__item--ages  { padding: 45px 0 0 51px; }
  .info__item--cost  { padding: 36px 0 0 41px; }

  /* vertical dividers span 146px from the top of the row */
  .info__item--venue::before,
  .info__item--ages::before,
  .info__item--cost::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    height: 146px;
    border-left: var(--info-line);
  }
  .info__item--ages { position: relative; }

  .info__item--buses {
    grid-row: 2;
    grid-column: 1 / 4;
    max-width: 697px;
    padding: 18px 0 0;
    border-top: 0;
    border-bottom: 0;
    position: static;
  }
  .info__button {
    position: absolute;
    left: calc(796 / 989 * 100%);
    bottom: 54px;
    width: calc(168 / 989 * 100%);
    box-sizing: border-box;
    white-space: normal;
  }
}