/*
 * Event page sections.
 * Loaded on single events only. Composed from tokens.css.
 */

/* ---------------------------------------------------------------
 * Hero
 * --------------------------------------------------------------- */

.event-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(84svh, 46rem);
  padding-block: calc(var(--header-h) + var(--space-9)) var(--space-10);
  color: var(--color-text-invert);
}

/*
 * Type sits on the left over a photograph that is brightest on the right, so
 * the scrim is directional. Same reasoning as the homepage feature band.
 */
.event-hero::after {
  background: linear-gradient(
    90deg,
    rgba(7, 9, 11, 0.86) 0%,
    rgba(7, 9, 11, 0.76) 42%,
    rgba(7, 9, 11, 0.45) 78%,
    rgba(7, 9, 11, 0.35) 100%
  );
}

.event-hero__content {
  max-width: 46rem;
}

.event-hero__title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
}

.event-hero__lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.event-hero__actions {
  margin-top: var(--space-7);
}

/* ---------------------------------------------------------------
 * Introduction
 * --------------------------------------------------------------- */

.event-intro__grid {
  display: grid;
  gap: var(--space-6) var(--space-10);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
}

@media (max-width: 800px) {
  .event-intro__grid {
    grid-template-columns: 1fr;
  }
}

.event-intro__heading {
  font-size: var(--fs-h2-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  /* Two deliberate lines in the design; balance keeps them even as it wraps. */
  text-wrap: balance;
}

.event-intro__body {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.event-intro__body p + p {
  margin-top: var(--space-5);
}

/* ---------------------------------------------------------------
 * Packages
 * --------------------------------------------------------------- */

/*
 * The band stops short of the bottom of the cards, so they hang over its edge
 * onto the white below. That overhang is the device the design is built on
 * here, and it is also what the dot pattern is positioned against, so it is a
 * variable rather than a number repeated in four places.
 */
.packages {
  --band-inset: 5.7rem;

  position: relative;
  padding-block: var(--section-y) 0;
  color: var(--color-text-invert);
}

/*
 * Slate under the photograph, not charcoal.
 *
 * Sampled off the design, this band averages #4D585B, which is the brand slate
 * with a little of the picture showing through. Building it as a near-black
 * band was wrong: it read as a hole in the page on any event without its own
 * band image.
 */
.packages::before {
  content: "";
  position: absolute;
  inset: 0 0 var(--band-inset) 0;
  z-index: 0;
  background: var(--sgh-slate);
}

/* The photograph and its scrim stop at the same line as the slate. */
.packages .backdrop,
.packages::after {
  inset: 0 0 var(--band-inset) 0;
}

/*
 * Drained of colour, then pulled towards mid-grey before the wash goes over it.
 * Without the contrast and brightness pass a night race lands at #3E494E while
 * a bright fairway lands at #4F5A5F, and the band changes character page to
 * page. Flattening the source first means any photograph arrives at roughly
 * the same slate, which is what the design shows.
 */
.packages .backdrop__img {
  filter: grayscale(1) contrast(0.55) brightness(1.35);
}

.packages::after {
  background: rgba(68, 80, 85, 0.9);
}

.packages__heading {
  margin-bottom: var(--space-9);
  font-size: var(--fs-h2-lg);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps-tight);
  text-align: center;
  text-transform: uppercase;
}

.packages__grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

/*
 * Exactly four cards in a three-across grid leaves one stranded on its own
 * row, which reads as a mistake rather than a layout. Two-by-two is the tidier
 * answer for four, and the services hub is the page that has four. Applied by
 * count from the template rather than by :has(), so it is obvious in the markup
 * why the grid changed.
 */
.packages__grid--pairs {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1000px) {
  .packages__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .packages__grid {
    grid-template-columns: 1fr;
  }
}

/*
 * One dot grid, not two. It is a single rectangle sitting on the white below
 * the band, running off the right edge of the page, with the cards overlapping
 * its top-left corner: that occlusion is what gives the design its stepped
 * shape. Splitting it into a block per section produced two grids out of phase
 * with each other, and the half over the dark band was invisible anyway.
 *
 * z-index 1 puts it above the band's backdrop and below the cards, which sit
 * in the container at z-index 2.
 */
.packages__pattern {
  position: absolute;
  right: 0;
  bottom: -4.25rem;
  z-index: 1;
  width: min(21rem, 30vw);
  height: 9.4rem;
  background-image: radial-gradient(var(--sgh-charcoal) 1.5px, transparent 1.6px);
  background-size: 17px 17px;
  pointer-events: none;
}

@media (max-width: 900px) {
  .packages__pattern {
    display: none;
  }
}

/* ---------------------------------------------------------------
 * Package card
 * --------------------------------------------------------------- */

.package {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-dark);
  /*
   * The card carries its own text colour rather than inheriting it from the
   * band around it. It sets its own dark background, so relying on an ancestor
   * makes it a component that only works in one place: on the services hub,
   * which has a white section behind it, every title and summary rendered
   * charcoal on charcoal and disappeared. Inside .packages this is the value it
   * was already inheriting, so nothing there moves.
   */
  color: var(--color-text-invert);
}

.package__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

/*
 * Holds the space when a card has no photograph yet, so titles stay on the same
 * line across a row. Slate rather than nothing, matching the homepage event
 * card, because a reserved block reads as "no image yet" while a collapsed one
 * reads as a broken layout.
 */
.package__media--empty {
  background: var(--sgh-slate);
}

.package__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.package__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-6);
}

.package__eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.package__title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
}

/*
 * Dates and stay, side by side, with a hairline above and below. Rules on the
 * dl itself rather than separate elements so they cannot outlive the content.
 */
.package__meta {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-rule-invert);
  border-bottom: 1px solid var(--color-rule-invert);
}

.package__meta dt {
  margin-bottom: var(--space-2);
  color: var(--sgh-stone);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.package__meta dd {
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
}

.package__summary {
  margin-top: var(--space-5);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
}

/*
 * margin-top:auto pins the link to the bottom, so the links line up across a
 * row whatever length the descriptions are. Cards of unequal text are the
 * normal case, not the exception.
 */
.package__action {
  margin: auto 0 0;
  padding-top: var(--space-6);
}

/* ---------------------------------------------------------------
 * FAQs
 * --------------------------------------------------------------- */

/*
 * Extra headroom because the dot pattern from the band above overhangs into
 * the top of this section. The dots belong to the packages band, not here.
 */
.faq {
  position: relative;
  padding-top: calc(var(--section-y) + 3rem);
}

.faq__grid {
  position: relative;
  display: grid;
  gap: var(--space-8) var(--space-10);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
}

@media (max-width: 900px) {
  .faq__grid {
    grid-template-columns: 1fr;
  }
}

.faq__heading {
  margin-bottom: var(--space-6);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  text-wrap: balance;
}

.faq__body {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.faq__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* Accordion, built on native details/summary. */
.faq__item {
  border-bottom: 1px solid var(--color-rule);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  cursor: pointer;
  list-style: none;
}

/* Both are needed: WebKit uses the pseudo-element, everything else the property. */
.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::marker {
  content: "";
}

.faq__question:hover .faq__question-text {
  color: var(--color-accent);
}

/*
 * The plus drawn in CSS: two bars, one of which rotates away when open. Using
 * a character would leave it at the mercy of whichever font is resolved.
 */
.faq__marker {
  position: relative;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
}

.faq__marker::before,
.faq__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.faq__marker::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq__item[open] .faq__marker::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.faq__answer {
  padding-bottom: var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.faq__answer p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
 * What we take care of
 *
 * For the events SGH runs rather than sells a ticket to. Nothing here is new
 * to the system: the hairline rules are the package card's, the orange marker
 * is the accent, the type comes off the same scale. It reads differently from
 * a packages grid because the content is different, not because it was styled
 * to look different.
 * --------------------------------------------------------------- */

.included {
  background: var(--color-bg-dark);
  color: var(--color-text-invert);
}

.included__heading {
  margin-bottom: var(--space-7);
  font-size: var(--fs-h2-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
}

.included__list {
  display: grid;
  gap: 0 var(--space-9);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 700px) {
  .included__list {
    grid-template-columns: 1fr;
  }
}

.included__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-rule-invert);
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
}

/*
 * A rule above every item gives the two columns a shared top edge whatever
 * their lengths. A rule below would leave one column with a trailing line.
 */
.included__item::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-accent);
  transform: translateY(-0.15em);
}

.included__note {
  max-width: 60ch;
  margin-top: var(--space-7);
  color: var(--sgh-stone);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

/* ---------------------------------------------------------------
 * Package page
 *
 * No design for this, so it is assembled from what already exists: the event
 * hero, the inclusions list from corporate events, the package card's hairline
 * rules. Only the itinerary is a new shape, and that is because a day-by-day
 * list is a shape nothing else on the site needed.
 * --------------------------------------------------------------- */

.package-hero__label {
  margin-bottom: var(--space-4);
  color: var(--color-accent);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* The eyebrow doubles as the way back to the parent event. */
.package-hero .eyebrow a {
  text-decoration: none;
}

.package-hero .eyebrow a:hover {
  text-decoration: underline;
}

.package-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-9);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule-invert);
}

.package-hero__meta dt {
  margin-bottom: var(--space-2);
  color: var(--sgh-stone);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.package-hero__meta dd {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-heading);
}

.package-overview {
  max-width: 62ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

/* ---------------------------------------------------------------
 * Itinerary
 * --------------------------------------------------------------- */

.itinerary {
  background: var(--color-bg-dark);
  color: var(--color-text-invert);
}

/*
 * Two dark bands meeting.
 *
 * The schedule and the inclusions list are both charcoal, so stacked they read
 * as one section with two headings floating in it: the section padding doubles
 * into an unexplained gap and nothing marks where one ends. The boundary is
 * drawn with the same hairline the schedule already uses between its own rows,
 * and the doubled padding collapses to one interval so the rule falls where a
 * section break belongs.
 *
 * Neither surface changes, deliberately. The orange row labels measure 5.92:1
 * on charcoal and 4.49:1 on the lighter charcoal, so shifting either band to
 * separate them would drop that text below AA.
 */
.itinerary + .included {
  padding-top: 0;
}

.itinerary + .included > .container {
  padding-top: var(--section-y);
  border-top: 1px solid var(--color-rule-invert);
}

.itinerary__heading {
  font-size: var(--fs-h2-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
}

.itinerary__intro {
  max-width: 60ch;
  margin-top: var(--space-4);
  color: var(--sgh-stone);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.itinerary__list {
  margin: var(--space-8) 0 0;
  padding: 0;
}

/*
 * Day label in one column, what happens in the other. The rule sits on the top
 * of each row so the first day gets one and the last does not trail one.
 */
.itinerary__day {
  display: grid;
  gap: var(--space-2) var(--space-8);
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-rule-invert);
}

@media (max-width: 700px) {
  .itinerary__day {
    grid-template-columns: 1fr;
  }
}

.itinerary__day-label {
  color: var(--color-accent);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
}

.itinerary__day-detail {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Small print under an inclusions list. */
.included__notes {
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  color: var(--sgh-stone);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
}

.included__notes li + li {
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------------
 * Package card links
 * --------------------------------------------------------------- */

.package__media {
  display: block;
}

.package__title a {
  text-decoration: none;
}

.package__title a:hover {
  color: var(--color-accent);
}

.package:hover .package__media img {
  transform: scale(1.04);
}

.package__media img {
  transition: transform var(--dur-slow) var(--ease);
}

/* Two actions on a package card: browse the detail, or go straight to an enquiry. */
.package__action {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
}

.package__enquire {
  color: var(--sgh-stone);
}

.package__enquire:hover,
.package__enquire:focus-visible {
  color: var(--color-text-invert);
}

/* ---------------------------------------------------------------
 * Service page offerings
 *
 * Titled entries rather than the plain lines of the inclusions list, so this
 * borrows that section's charcoal band and rules and gives each item a heading.
 * --------------------------------------------------------------- */

.offers {
  background: var(--color-bg-dark);
  color: var(--color-text-invert);
}

.offers__intro {
  max-width: 60ch;
  margin-top: var(--space-4);
  color: var(--sgh-stone);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.offers__list {
  display: grid;
  gap: 0 var(--space-9);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--space-8) 0 0;
  padding: 0;
}

@media (max-width: 800px) {
  .offers__list {
    grid-template-columns: 1fr;
  }
}

.offer {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-rule-invert);
}

.offer__title {
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
}

.offer__body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/*
 * Offerings with a portrait become a team grid: three or four across, the
 * picture leading. Without portraits the same markup stays the two-column
 * list the service pages use, so one component covers both.
 */
.offers__list--portraits {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}

@media (max-width: 900px) {
  .offers__list--portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .offers__list--portraits { grid-template-columns: 1fr; }
}

.offers__list--portraits .offer {
  padding-block: 0;
  border-top: 0;
}

.offer__portrait {
  margin-bottom: var(--space-5);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/*
 * Landscape source images keep a landscape crop. Square is right for a
 * headshot and wrong for a photograph of a grid start or a boxing ring, where
 * the whole point of the picture is at the edges.
 */
.offers__list--landscape .offer__portrait {
  aspect-ratio: 4 / 3;
}

.offer__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.offers__list--portraits .offer__title {
  font-size: var(--fs-h3);
  text-transform: none;
}