/* The events section: the overview, an event with its dates, and the pages of the booking.
   Sizes are in rem like the rest of the site, so they scale with the window on tablets and phones. */

.events-intro {
  padding: 3rem 0 4rem;
}

/* In the middle above the title; only the text is the link. */
.events-intro .events-back {
  display: block;
  width: fit-content;
  margin: 0 auto 1.6rem;
  color: var(--red);
  font-size: 1.4rem;
}

/* The text of the event (the class rich-text is in richtext.css): as wide as the text of an article. */
.events-body {
  max-width: 76rem;
  margin: 5rem auto 0;
}

/* The list of events (or of the dates of one event): white cards on a navy band, like the jobs. */
.events-list {
  padding: 4rem 2.5rem 6rem;
  background: var(--navy);
}

/* The cards are as wide as the window minus 2.5rem on each side (25px at a window of 1000px, less on a smaller window,
   as the rest of the page), and never wider than 98rem: below that width there is always room between the cards and
   the edges of the window. On a phone it is 20px. */
.events-list .container {
  width: auto;
  max-width: 98rem;
}

.events-list__title {
  margin-bottom: 2.4rem;
  color: var(--white);
  font: 700 2.4rem/normal var(--font-display);
  text-align: center;
}

.events-list__items {
  display: grid;
  gap: 2.1rem;
}

.events-list .form-status {
  margin-bottom: 2.1rem;
}

.event-card {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding: 2.4rem 2.8rem;
  background: var(--white);
}

/* The cards of the overview and of the dates of an event, and the blocks of the booking pages: rounded, like the
   news articles. */
.events-list .event-card,
.booking-summary,
.order__block,
.booking .form--light {
  border-radius: 1.2rem;
}

/* The whole card is the link: the link of "More info" (the overview) or of "Book now" (a date of the event) is
   stretched over the card. A glow and a background when you point at it. A date that is sold out is not a link. */
.event-card--link {
  position: relative;
  transition:
    box-shadow 0.2s,
    background-color 0.2s;
}

.event-card--link .event-card__link::after,
.event-card--link .event-card__book::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.2rem;
}

.event-card--link:hover {
  background-color: #e8eefa; /* a light tint of the navy of the site */
  box-shadow: 0 0.4rem 3rem 0.2rem rgb(150 185 255 / 60%); /* a light glow: a dark shadow is not seen on the navy */
}

.event-card--link:hover .event-card__title {
  text-decoration: underline;
}

.event-card--link:focus-within {
  outline: 0.2rem solid #5b9dff;
}

.event-card__title,
.order__title,
.booking-summary__title {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 2.6rem;
}

.event-card__title {
  font-size: 2.5rem;
  line-height: 3.2rem;
}

.event-card__date {
  margin-top: 0.4rem;
  color: var(--red);
  font-size: 1.6rem;
  font-weight: 700;
}

.event-facts {
  display: grid;
  grid-template-columns: 17rem 1fr;
  margin: 0.8rem 0 0;
  font-size: 1.4rem;
  line-height: 2.2rem;
}

.event-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.event-card__side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
}

.event-seats {
  color: #14532d;
  font-size: 1.4rem;
  font-weight: 700;
}

.event-seats--few,
.event-seats--sold-out {
  color: var(--crimson);
}

.event-seats--none {
  color: #5c6577;
}

/* The dates that still have seats, below the language: four on a row, with commas between. The text is that of the
   other facts (font, size and colour of "English"), so it has no rules of its own for that. */
.event-dates ul {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0 1.2rem;
  justify-content: start;
}

.event-dates li:not(:last-child)::after {
  content: ",";
}

/* The price, below the seats (at the right of the card). */
.event-price {
  margin-right: 1rem; /* the label and the amount end at the same place: the room is kept at the edge of both */
  text-align: right;
}

.event-price__label {
  color: #5c6577;
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.event-price__amount {
  font-size: 3rem;
  font-weight: 700;
  line-height: 3.6rem;
}

/* A date that is sold out is grey, like its disabled button: the title, the date, the facts and the price. Only
   "Sold out" keeps its colour. */
.event-card--sold-out .event-card__title,
.event-card--sold-out .event-card__date,
.event-card--sold-out .event-facts dt,
.event-card--sold-out .event-facts dd,
.event-price--muted .event-price__label,
.event-price--muted .event-price__amount {
  color: #9aa3b5;
}

.event-card__link {
  display: block;
  min-width: 14.2rem;
  padding: 0.6rem 1.6rem;
  border-radius: 0.5rem;
  background: var(--navy);
  color: var(--white);
  font: 700 1.5rem/2.3rem var(--font-nav);
  text-align: center;
  transition: background-color 0.2s;
}

.event-card__link:hover {
  background: #1d5f7d;
}

/* "Book now": the red button of the site (as "Back to the homepage"). */
.event-card__book {
  width: 16rem;
}

.event-card__book--disabled,
.event-card__book--disabled:hover {
  border-color: #9aa3b5;
  background: #9aa3b5;
  cursor: not-allowed;
}

/* The floating "book now" of an event: bottom right, until the dates to book are in view (event.js). */
html {
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.floating-book {
  position: fixed;
  right: 3rem;
  bottom: 3rem;
  z-index: 45;
  width: 16rem;
  box-shadow: 0 0.4rem 1.6rem rgb(0 0 0 / 30%);
}

.floating-book[hidden] {
  display: none;
}

/* The booking: a navy band with white blocks (what is booked, the form, the check of the order). */
.booking {
  padding: 4rem 0 6rem;
  background: var(--navy);
}

.booking .page-title {
  margin-bottom: 2.4rem;
  color: var(--white);
}

.booking .container {
  width: 70rem;
}

.booking-summary,
.order__block {
  padding: 2.4rem 2.8rem;
  background: var(--white);
}

.booking-summary {
  margin-bottom: 2.1rem;
}

.booking-summary__text {
  margin-top: 0.8rem;
  font-size: 1.5rem;
  line-height: 2.4rem;
}

.booking-summary__text p + p {
  margin-top: 1lh;
}

.booking .form--light {
  width: auto;
  row-gap: 3.2rem;
  padding: 2.8rem;
}

.booking__group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.booking__group legend {
  margin-bottom: 1.6rem;
  padding: 0;
  font: 400 2rem/3rem var(--font-display);
}

/* Who is paying: two choices next to each other. */
.booking__choices {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 1rem 3rem;
}

.booking__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  cursor: pointer;
}

.booking__check {
  margin-top: 0.4rem;
}

.booking__choice input {
  width: 1.8rem;
  height: 1.8rem;
  margin: 0;
  accent-color: var(--navy);
}

/* The company form is only there when the employer pays. Without :has() in the browser it is always shown. */
.booking__company {
  display: none;
}

.booking__form:has(input[name="payer"][value="employer"]:checked) .booking__company {
  display: grid;
}

@supports not selector(:has(*)) {
  .booking__company {
    display: grid;
  }
}

/* A field that is not valid: a red border, from the server (after sending) and from the browser (after leaving). */
.booking .field--invalid input,
.booking .field--invalid select,
.booking .field--invalid textarea,
.booking .field input:user-invalid,
.booking .field select:user-invalid {
  border: 0.2rem solid #d4380d;
}

/* The progress bar: where the visitor is in the booking, instead of the breadcrumbs. */
.booking-steps {
  padding: 1.5rem 0;
  background: #f4f5f7;
}

.booking-steps .container {
  width: auto;
}

.booking-steps ol {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.2rem;
  font: 1.4rem/normal var(--font-ui);
}

.booking-steps li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #7b8498;
  white-space: nowrap;
}

.booking-steps li + li::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 1.2rem;
  border: solid #a5adbd;
  border-width: 0.15rem 0.15rem 0 0;
  transform: rotate(45deg);
}

.booking-steps__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #dfe3ea;
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 700;
}

.booking-steps .is-done .booking-steps__number {
  background: var(--navy);
  color: var(--white);
}

.booking-steps [aria-current] {
  color: var(--navy);
  font-weight: 700;
}

.booking-steps [aria-current] .booking-steps__number {
  background: var(--red);
  color: var(--white);
}

/* The same button as "Proceed" on the check of the order (the red .button of the site), in the middle of the form. */
.booking__submit {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 20rem;
  margin-top: 1rem;
  padding: 0 3rem;
}

/* The check of the order. */
.order {
  display: grid;
  gap: 2.1rem;
}

.order__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.order__change {
  color: var(--white);
  text-decoration: underline;
}

.order__proceed,
.order__back {
  min-width: 20rem;
  padding: 0 3rem;
}

/* After a click on "Book now!" (order.js): the text makes room for a wait icon, and the button is off. */
.order__proceed {
  position: relative;
}

.order__wait {
  display: none;
}

.order__proceed.is-busy,
.order__proceed.is-busy:hover {
  border-color: var(--red);
  background: var(--red);
  cursor: progress;
}

.order__proceed.is-busy span {
  visibility: hidden; /* it keeps the width of the button */
}

.order__proceed.is-busy .order__wait {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.2rem;
  height: 2.2rem;
  margin: -1.1rem 0 0 -1.1rem;
  border: 0.3rem solid rgb(255 255 255 / 35%);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: order-wait 0.8s linear infinite;
}

@keyframes order-wait {
  to {
    transform: rotate(360deg);
  }
}

.booking-steps a:hover {
  text-decoration: underline;
}

.booking-steps a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.thanks__text {
  margin-top: 2rem;
}

.thanks__reference {
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
}

@media (max-width: 640px) {
  .events-intro .container,
  .booking .container {
    width: auto;
    padding-inline: 2rem;
  }

  .events-intro {
    padding: 2rem 0 2.4rem;
  }

  .events-intro .events-back {
    font-size: 1.1rem;
  }

  .events-body {
    margin-top: 2.4rem;
  }

  .events-list {
    padding: 2.4rem 20px 3rem;
  }

  .booking {
    padding: 2.4rem 0 3rem;
  }

  .events-list__title {
    font-size: 1.6rem;
  }

  .event-card {
    flex-direction: column;
    gap: 1.6rem;
    padding: 1.6rem 1.4rem;
  }

  .event-card__title,
  .order__title,
  .booking-summary__title {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .event-card__title {
    font-size: 2rem;
    line-height: 2.6rem;
  }

  .event-card__date {
    font-size: 1.3rem;
  }

  .event-facts {
    grid-template-columns: 10rem 1fr;
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  .event-card__side {
    align-items: stretch;
  }

  .event-seats {
    font-size: 1.2rem;
  }

  .event-card__link {
    font-size: 1.3rem;
  }

  .event-card__book {
    width: 100%;
  }

  /* Next to the back to top button. */
  .floating-book {
    right: 8rem;
    bottom: 4rem;
    width: 14rem;
  }

  .booking-summary,
  .order__block {
    padding: 1.6rem 1.4rem;
  }

  .booking-summary__text {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  .booking .form--light {
    padding: 1.6rem 1.4rem;
  }

  .booking__group {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .booking__group legend {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }

  .booking__choice {
    font-size: 1.3rem;
  }

  .booking-steps {
    padding: 1.1rem 0;
  }

  .booking-steps ol {
    gap: 1rem;
    font-size: 1rem;
  }

  .booking-steps__number {
    display: none;
  }

  .booking-steps li {
    gap: 0.5rem;
  }

  .booking-steps li + li::before {
    margin-right: 0.6rem;
  }

  /* Some room above "Available dates", which is a block of its own on a phone. */
  .event-dates__label {
    margin-top: 0.8rem;
  }

  /* On a phone the dates use the whole width, below their label: as many on a row as fit, none broken in two. */
  .event-facts dd.event-dates {
    grid-column: 1 / -1;
  }

  .event-dates ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
  }

  .event-dates li {
    white-space: nowrap;
  }

  .event-price {
    margin-right: 0;
    text-align: left;
  }

  .event-price__label {
    font-size: 1.1rem;
  }

  .event-price__amount {
    font-size: 2.4rem;
    line-height: 3rem;
  }

  .booking__submit {
    width: 100%;
  }

  /* The button (Proceed, or Back to list) in the middle, not as wide as the screen; the link under it. */
  .order__actions {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }

  .thanks__reference {
    font-size: 1.3rem;
    line-height: 2rem;
  }
}