/* ad-hoc, not part of product: Private Events page (private-events.html), redesign variant 1.
   Page-scoped additions only; every class here is prefixed .events- so nothing collides with the
   homepage `.split.events` block. Hero, splits, intros, tiles, captions and buttons come from style.css. */

/* ==========================================================================
   01 Hero: the room-page hero, with a slightly wider measure for the longer Figma copy
   ========================================================================== */
.events-hero .room-hero__body { max-width: 28rem; }

/* ==========================================================================
   02 + 04 Settings: the homepage editorial split, plus a "Great for" ruled list
   ========================================================================== */
.events-setting { margin-top: var(--section-large); }
/* the mirrored split's copy column gets one more column so the two-up list breathes */
.events-setting.split--reverse .split__text { grid-column: 8 / span 5; }
.events-setting .split__text { padding-block: var(--section-main); }

.events-fit {
  max-width: 30rem;
  margin-top: var(--space-7);
}
.events-fit__label {
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.events-fit__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  border-top: var(--hairline-thin) solid var(--c-line);
}
.events-fit__list li {
  padding: var(--space-2) 0;
  border-bottom: var(--hairline-thin) solid var(--c-line);
  color: var(--c-text-2);
}

/* ==========================================================================
   03 Beachfront setting: one wide frame and two tall ones on a shared height
   ========================================================================== */
.events-scene { --scene-h: clamp(20rem, 34vw, 36rem); }
.events-scene__grid {
  margin-top: var(--space-8);
  row-gap: var(--space-6);
}
.events-scene__wide { grid-column: 1 / span 6; }
.events-scene__tall { grid-column: span 3; }
.events-scene__grid .media { height: var(--scene-h); }

/* ==========================================================================
   05 Two ways to gather: homepage room tiles (2-up); long facts stay on two lines
   ========================================================================== */
.events-ways .room__facts {
  max-width: 24rem;
  text-wrap: balance;
}

/* ==========================================================================
   06 Plan your event: alt band, centred intro, hairline form
   ========================================================================== */
.events-terms { padding-bottom: var(--section-main); }

.events-enquire {
  margin-top: var(--seam);
  padding: var(--section-main) 0 var(--section-large);
  background: var(--c-bg-2);
}

.events-form {
  width: min(100%, 52rem);
  margin: var(--space-8) auto 0;
}
.events-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
}
.events-field { display: flex; flex-direction: column; }
.events-field--full { grid-column: 1 / -1; }

.events-field__label {
  margin-bottom: var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-ink);
}
.events-field__req { color: var(--c-text-3); }

.events-field__input {
  width: 100%;
  min-height: 2.5rem;
  padding: var(--space-1) 0;
  border: 0;
  border-bottom: var(--hairline) solid var(--c-line);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fade) var(--ease-std);
}
.events-field__input:hover { border-bottom-color: var(--c-text-3); }
.events-field__input:focus-visible {
  outline: none;
  border-bottom-color: var(--c-ink);
}
/* only flag a field after the visitor has left it with a bad value */
.events-field__input:user-invalid { border-bottom-color: var(--c-ink); }
.events-field__input::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.events-field__area {
  min-height: 7rem;
  resize: vertical;
}

.events-field__select { position: relative; }
.events-field__select select { padding-right: 1.5rem; cursor: pointer; }
.events-field__select .icon {
  position: absolute;
  right: 0;
  top: 50%;
  font-size: .75rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.events-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.events-form__note { margin-top: 0; }
.events-form__btn { cursor: pointer; }
.events-form__status:empty { display: none; }
.events-form__status {
  margin-top: var(--space-4);
  text-align: right;
}

/* direct contact under the form */
.events-direct {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-7);
  width: min(100%, 52rem);
  margin: var(--space-8) auto 0;
  padding-top: var(--space-5);
  border-top: var(--hairline-thin) solid var(--c-line);
}
.events-direct li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.events-direct__key {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--c-text-3);
}
.events-direct .link { text-transform: none; letter-spacing: 0; font-weight: var(--fw-medium); }

/* ==========================================================================
   Responsive: tablet ≤ 991px, phone ≤ 767px, small phone ≤ 599px
   ========================================================================== */
@media (max-width: 991px) {
  /* splits stack (style.css): copy above or below a full-width photo */
  .events-setting .split__text { padding-block: var(--section-main); }
  .events-setting.split--reverse .split__text { padding: var(--section-main) var(--margin) 0; }
  .events-setting--beach .split__media { aspect-ratio: 4 / 3; }
  .events-fit { max-width: none; }

  .events-scene__wide { grid-column: 1 / -1; }
  .events-scene__tall { grid-column: span 6; }
}

@media (max-width: 767px) {
  .events-setting--beach .split__media { aspect-ratio: 4 / 5; }
  .events-scene { --scene-h: 22rem; }
  .events-scene__grid { row-gap: var(--space-5); }
  .events-form__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
  .events-scene { --scene-h: 17rem; }
  .events-scene__wide .media { height: 15rem; }
  .events-fit__list { grid-template-columns: minmax(0, 1fr); }
  .events-form__foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .events-form__note { text-align: center; }
  .events-form__status { text-align: center; }
  .events-direct { flex-direction: column; align-items: center; }
}