/*
 * Experiences (design-reference/ExperienceDetail.dc.html, and Main's
 * "Arranged for you" for the index): the page heads, the hero, "How it
 * works", the member line and the "Ask the concierge" form. Tabs, cards, the
 * film player and story text come from site.css.
 */

/* Index ------------------------------------------------------------------- */
.experience-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: var(--space-10) var(--site-margin) var(--space-8);
}

.experience-head__title {
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-leading);
}

.experience-head__helper {
  max-width: 60ch;
  color: var(--sand);
}

.experience-index {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 var(--site-margin) var(--space-11);
}

/* Hero -------------------------------------------------------------------- */
.experience-hero {
  background: var(--walnut);
  border-bottom: 1px solid var(--smoke);
}

.experience-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: var(--space-10) var(--site-margin) var(--space-8);
}

.experience-hero__title {
  font-size: var(--type-display-size);
  line-height: var(--type-display-leading);
}

/* Jost 300 only from 19px up (handoff section 6), so phones get 400. */
.experience-hero__subhead {
  max-width: 620px;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-leading);
  font-weight: var(--weight-body);
  color: var(--sand);
}

@media (min-width: 960px) {
  .experience-hero__subhead {
    font-weight: var(--weight-lead);
  }
}

.experience-hero__media .placeholder {
  border-radius: 0;
}

/* How it works, beside the form ------------------------------------------- */
.experience-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-9);
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: var(--space-10) var(--site-margin);
}

@media (min-width: 1100px) {
  .experience-body {
    grid-template-columns: minmax(0, 1fr) 460px;
    align-items: start;
    gap: 80px;
  }
}

.experience-how {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.experience-how__title {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: var(--weight-label);
  line-height: 1.4;
  color: var(--brass);
}

/* The opening line reads large, as in the mock; the rest is story text. */
.experience-how__intro > .story-text > p:first-child,
.experience-how__placeholder {
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-h3-size);
  line-height: 1.3;
}

.experience-how__placeholder {
  color: var(--sand);
}

.experience-steps {
  display: flex;
  flex-direction: column;
}

.experience-steps__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--smoke);
}

.experience-steps__number {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 28px;
  line-height: 1;
  color: var(--brass);
}

.experience-steps__title {
  font-family: var(--font-text);
  font-weight: var(--weight-label);
  font-size: 17px;
  line-height: 1.4;
}

.experience-steps__detail {
  margin-top: var(--space-1);
  font-size: 15px;
  color: var(--sand);
}

.experience-member {
  padding: var(--space-4) 18px;
  background: var(--walnut-2);
  border-left: 2px solid var(--brass);
  font-size: 15px;
  line-height: 1.6;
}

/* Ask the concierge ---------------------------------------------------------- */
.enquiry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  background: var(--walnut);
  border: 1px solid var(--smoke);
  scroll-margin-top: var(--space-6);
}

@media (max-width: 639px) {
  .enquiry {
    padding: var(--space-6) var(--space-5);
  }
}

.enquiry__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.enquiry__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-3);
}

@media (min-width: 640px) {
  .enquiry__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enquiry__field--full {
    grid-column: 1 / -1;
  }
}

/* The trap field: off screen, not display:none, which some bots skip. */
.enquiry__trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry__submit {
  width: 100%;
}

.enquiry__helper {
  font-size: 13px;
  line-height: 1.6;
  color: var(--sand);
}

/* Other experiences --------------------------------------------------------- */
.experience-more {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 var(--site-margin) var(--space-11);
}