/* ==========================================================================
   ARKADE LOUNGE — Take Over
   --------------------------------------------------------------------------
   Group hire. The page has to read as the premium end of the offer without
   reaching for a second visual language: same tokens, same geometry, more
   space and a heavier display face.

   Nothing here defines a colour, size or duration of its own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PACKAGES
   -------------------------------------------------------------------------- */

.packages {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-block-start: var(--sp-6);
}

.package {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

.package__name {
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-hero);
  margin: 0;
}

.package__meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 0;
}

.package__dot {
  color: var(--text-dim);
}

.package__price {
  align-items: baseline;
  display: flex;
  gap: var(--sp-2);
  margin: 0;
  padding-block: var(--sp-2);
}

.package__from {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.package__amount {
  color: var(--accent-text);
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-hero);
}

.package__includes {
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  font-size: var(--fs-sm);
  gap: var(--sp-2);
  line-height: var(--lh-body);
  list-style: none;
  margin: 0;
  padding: 0;
}

.package__includes li {
  padding-inline-start: var(--sp-4);
  position: relative;
}

.package__includes li::before {
  color: var(--accent);
  content: '';
  background: currentColor;
  block-size: 2px;
  inline-size: var(--sp-2);
  inset-block-start: 0.7em;
  inset-inline-start: 0;
  position: absolute;
}

/* Pushed to the bottom so the buttons line up across cards of unequal
   height, which they always are. */
.package__choose {
  margin-block-start: auto;
}

.packages__note {
  margin-block-start: var(--sp-5);
  max-inline-size: var(--container-text);
}

/* --------------------------------------------------------------------------
   HOW IT WORKS
   -------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
}

.steps__item {
  border-block-start: 2px solid var(--line-strong);
  padding-block-start: var(--sp-4);
}

.steps__number {
  color: var(--accent);
  display: block;
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-hero);
  line-height: var(--lh-tight);
}

.steps__title {
  font-size: var(--fs-h4);
  margin-block: var(--sp-3) var(--sp-2);
}

.steps__body {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: 0;
}

/* --------------------------------------------------------------------------
   THE DETAIL
   -------------------------------------------------------------------------- */

.detail-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-block-start: var(--sp-6);
}

.detail {
  padding: var(--sp-5);
}

.detail__title {
  color: var(--accent-text);
  font-size: var(--fs-h4);
  margin: 0 0 var(--sp-2);
}

.detail__body {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: 0;
}

/* --------------------------------------------------------------------------
   ENQUIRY FORM
   -------------------------------------------------------------------------- */

.enquiry__standing-notice {
  margin-block: var(--sp-5) var(--sp-4);
}

.enquiry__standing-notice p {
  margin: 0;
}

.enquiry {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
}

.enquiry__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.enquiry__legend {
  color: var(--text);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  margin-block-end: var(--sp-3);
  padding: 0;
}

/* Two columns where there is room, one where there is not. Deliberately not
   a media query: the fields collapse on their own content width. */
.enquiry__row {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.enquiry__errors {
  background: var(--alert-quiet);
  border-inline-start: 3px solid var(--alert);
  padding: var(--sp-4);
}

.enquiry__error-title {
  color: var(--text);
  font-weight: var(--fw-semi);
  margin: 0 0 var(--sp-2);
}

.enquiry__error-list {
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  font-size: var(--fs-sm);
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.enquiry__foot {
  margin: 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   AFTER SENDING
   -------------------------------------------------------------------------- */

.enquiry-done {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-block-start: var(--sp-5);
  padding: var(--sp-7);
}

.enquiry-done__title {
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-hero);
  margin: 0;
}

.enquiry-done__body {
  color: var(--text-2);
  line-height: var(--lh-body);
  margin: 0;
}

.enquiry-done__rows {
  display: grid;
  gap: var(--sp-2) var(--sp-4);
  grid-template-columns: auto 1fr;
  margin: 0;
}

.enquiry-done__label {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.enquiry-done__value {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin: 0;
}

.enquiry-done__notice {
  margin: 0;
}

/* The success panel is a destination, so it gets a self-contained button
   rather than inheriting the form's full-width treatment. */
.enquiry-done .btn {
  align-self: flex-start;
}