/* =========================================================
   An individual LFD Season page

   The hero and the related-seasons grid are the Hub's own - this file adds only
   what a season page has that the Hub does not: the editorial introduction, the
   running order, and the rail of related content.

   Same gutter contract, same hairlines, same Oswald / Georgia / Open Sans
   division of labour as the homepage. Nothing new is invented here.
   ========================================================= */

.lfd-season {
  display: block;
}

/* ---------------------------------------------------------
   The editorial introduction

   Georgia, the same editorial voice the open-call panel's title and the
   designers heading use, at a reading measure rather than a display size.
   --------------------------------------------------------- */
.lfd-season-intro {
  padding-block: 64px 10px;
  padding-inline: var(--lfd-seasons-gutter);
  background: #fff;
}

.lfd-season-intro-inner {
  max-inline-size: 62ch;
}

.lfd-season-intro p {
  margin: 0 0 1em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.6;
  color: #111;
}

.lfd-season-intro p:last-child {
  margin-block-end: 0;
}

/* ---------------------------------------------------------
   Section titles - the statistics strip's Oswald heading
   --------------------------------------------------------- */
.lfd-season-section-title {
  margin: 0 0 24px;
  font-family: Oswald, Arial, sans-serif;
  font-size: clamp(24px, 2vw, 38px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #000;
}

/* ---------------------------------------------------------
   The running order

   Hairline-separated rows, the statistics strip's and the designers section's
   device - a time in a fixed column, the slot beside it.
   --------------------------------------------------------- */
.lfd-season-schedule {
  padding-block: 70px 20px;
  padding-inline: var(--lfd-seasons-gutter);
  background: #fff;
}

.lfd-season-schedule-note {
  margin: -12px 0 28px;
  max-inline-size: 60ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.72);
}

.lfd-season-day + .lfd-season-day {
  margin-block-start: 48px;
}

.lfd-season-day-title {
  margin: 0 0 14px;
  font-family: Oswald, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.58);
}

.lfd-season-slots {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfd-season-slot {
  display: grid;
  grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr);
  gap: 24px;
  padding-block: 20px;
  border-block-start: 1px solid rgba(0, 0, 0, 0.12);
}

.lfd-season-slot:last-child {
  border-block-end: 1px solid rgba(0, 0, 0, 0.12);
}

.lfd-season-slot-time {
  font-family: Oswald, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #000;
  font-variant-numeric: tabular-nums;
}

.lfd-season-slot-body {
  min-inline-size: 0;
}

/*
 * A SLOT WITH NO TIME STILL NEEDS THE WHOLE ROW.
 *
 * The component omits the <time> element when a slot has no start - correctly, because an empty
 * <time> is not a time. But the grid has two columns, so with the time gone the body landed in
 * the 7.5em one. Measured on a season page: "Showroom (times to be confirmed)" set one word per
 * line in a column an inch wide.
 *
 * :first-child is exactly the condition - the body is first only when the time is absent - so
 * this needs no extra class and cannot fall out of step with the markup.
 */
.lfd-season-slot-body:first-child {
  grid-column: 1 / -1;
}

.lfd-season-slot-title {
  margin: 0;
  font-family: Oswald, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
  overflow-wrap: break-word;
}

.lfd-season-slot-link {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color var(--lfd-duration-base, 0.25s) ease;
}

.lfd-season-slot-link:hover,
.lfd-season-slot-link:focus-visible {
  border-block-end-color: currentColor;
}

.lfd-season-slot-meta {
  margin: 8px 0 0;
  font-family: Oswald, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* Was rgba(0, 0, 0, 0.5) - #808080, 3.98:1. This line carries the format and
     the venue of a slot, which is the thing a visitor scans the running order
     for, so it is the last place to be under AA. */
  color: var(--lfd-color-text-quiet, rgba(0, 0, 0, 0.55));
  overflow-wrap: break-word;
}

.lfd-season-slot-designers {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.72);
  overflow-wrap: break-word;
}

.lfd-season-slot-designers a {
  color: inherit;
}

.lfd-season-slot-ticket {
  margin: 14px 0 0;
}

/* ---------------------------------------------------------
   The rail of related content
   --------------------------------------------------------- */
.lfd-season-section {
  padding-block: 56px 0;
  padding-inline: var(--lfd-seasons-gutter);
  background: #fff;
}

/* A section whose component brings its own full-bleed band - the gallery, the
   news grid - must not be padded twice. */
.lfd-season-section > .lfd-home-gallery-feature,
.lfd-season-section > .lfd-home-news-feature,
.lfd-season-section > .lfd-designers-feature {
  margin-inline: calc(var(--lfd-seasons-gutter) * -1);
  padding-inline: var(--lfd-seasons-gutter);
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */
@media (max-width: 1180px) {

  .lfd-season-intro {
    padding-block: 56px 8px;
  }

  .lfd-season-schedule {
    padding-block: 62px 18px;
  }

  .lfd-season-section {
    padding-block: 48px 0;
  }
}

/* ---------------------------------------------------------
   Mobile

   The time moves above the slot rather than beside it: a 7.5em column beside a
   fluid one leaves the slot title about 150px on a 390px screen, which is two
   words a line.
   --------------------------------------------------------- */
@media (max-width: 767px) {

  .lfd-season-intro {
    padding-block: 44px 6px;
  }

  .lfd-season-intro p {
    font-size: 17px;
    line-height: 1.58;
  }

  .lfd-season-schedule {
    padding-block: 48px 14px;
  }

  .lfd-season-slot {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-block: 18px;
  }

  .lfd-season-slot-time {
    font-size: 13px;
    letter-spacing: 0.1em;
    color: rgba(0, 0, 0, 0.58);
  }

  .lfd-season-slot-title {
    font-size: 15px;
  }

  .lfd-season-day + .lfd-season-day {
    margin-block-start: 36px;
  }

  .lfd-season-section {
    padding-block: 40px 0;
  }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .lfd-season-slot-link {
    transition: none;
  }
}