/* Hosted Sessions page styles */
.hosted-sessions-page {
  width: 100%;
  overflow-x: hidden;
}

/* Section base spacing */
.hs-intro,
.hs-experience,
.hs-structure,
.hs-dining,
.hs-social,
.hs-private,
.hs-expect,
.hs-enquire {
  padding-block: var(--space-3xl);
}

/* Hosted Sessions Introduction */
.hs-intro {
  background-color: var(--bg-base);
}

.hs-intro__inner {
  max-width: 700px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.hs-intro__title {
  font-size: clamp(1.75rem, 5vw, var(--text-h1));
  margin: 0;
}

.hs-intro__lead {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin: 0;
  max-width: 65ch;
  margin-inline: auto;
}

.hs-intro__support {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  margin: 0;
  max-width: 65ch;
  margin-inline: auto;
  opacity: 0.85;
}

/* The Hosted Experience */
.hs-experience {
  background-color: var(--bg-base);
}

.hs-experience__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-xl);
  align-items: start;
}

.hs-experience__media {
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-surface);
}

.hs-experience__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85) saturate(0.9);
}

.hs-experience__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.hs-experience__title {
  font-size: clamp(1.25rem, 3vw, var(--text-h2));
  margin: 0;
}

.hs-experience__subtitle {
  font-size: clamp(1.1rem, 2.5vw, var(--text-h3));
  margin: 0;
  margin-top: var(--space-sm);
}

.hs-experience__text {
  margin: 0;
  max-width: 70ch;
}

/* Session Structure */
.hs-structure {
  background-color: var(--bg-base);
}

.hs-structure__inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hs-structure__title {
  font-size: clamp(1.25rem, 3vw, var(--text-h2));
  margin: 0;
  text-align: center;
}

.hs-structure__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.hs-structure__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
  padding-left: var(--space-xl);
}

.hs-structure__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  background-color: var(--accent-primary);
  border: 2px solid var(--border-subtle);
  box-shadow: var(--glow-accent);
}

.hs-structure__item-title {
  font-size: var(--text-h3);
  margin: 0;
}

.hs-structure__item-text {
  margin: 0;
  max-width: 75ch;
}

/* Dining and Service */
.hs-dining {
  background-color: var(--bg-base);
}

.hs-dining__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-xl);
  align-items: start;
}

.hs-dining__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.hs-dining__title {
  font-size: clamp(1.25rem, 3vw, var(--text-h2));
  margin: 0;
}

.hs-dining__subtitle {
  font-size: clamp(1.1rem, 2.5vw, var(--text-h3));
  margin: 0;
  margin-top: var(--space-sm);
}

.hs-dining__text {
  margin: 0;
  max-width: 70ch;
}

.hs-dining__media {
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-surface);
}

.hs-dining__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85) saturate(0.9);
}

/* The Social Aspect */
.hs-social {
  background-color: var(--bg-base);
}

.hs-social__inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.hs-social__title {
  font-size: clamp(1.25rem, 3vw, var(--text-h2));
  margin: 0;
}

.hs-social__subtitle {
  font-size: clamp(1.1rem, 2.5vw, var(--text-h3));
  margin: 0;
  margin-top: var(--space-sm);
}

.hs-social__text {
  margin: 0;
  max-width: 65ch;
  margin-inline: auto;
}

/* Private and Group Sessions */
.hs-private {
  background-color: var(--bg-base);
}

.hs-private__panel {
  max-width: 800px;
  margin-inline: auto;
  padding: var(--space-xl);
  background-color: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.hs-private__title {
  font-size: clamp(1.25rem, 3vw, var(--text-h2));
  margin: 0;
}

.hs-private__subtitle {
  font-size: clamp(1.1rem, 2.5vw, var(--text-h3));
  margin: 0;
  margin-top: var(--space-sm);
}

.hs-private__text {
  margin: 0;
  max-width: 70ch;
}

.hs-private__cta {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

/* What to Expect */
.hs-expect {
  background-color: var(--bg-base);
}

.hs-expect__inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hs-expect__title {
  font-size: clamp(1.25rem, 3vw, var(--text-h2));
  margin: 0;
  text-align: center;
}

.hs-expect__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.hs-expect__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
  padding-left: var(--space-xl);
}

.hs-expect__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 10px;
  height: 10px;
  background-color: var(--accent-secondary);
  border: 2px solid var(--border-subtle);
}

.hs-expect__item-title {
  font-size: var(--text-h3);
  margin: 0;
}

.hs-expect__item-text {
  margin: 0;
  max-width: 75ch;
}

/* Enquire About a Session */
.hs-enquire {
  background-color: var(--bg-surface);
  border-top: 2px solid var(--border-subtle);
  border-bottom: 2px solid var(--border-subtle);
}

.hs-enquire__inner {
  max-width: 700px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.hs-enquire__title {
  font-size: clamp(1.25rem, 3vw, var(--text-h2));
  margin: 0;
}

.hs-enquire__text {
  margin: 0;
  max-width: 65ch;
  margin-inline: auto;
}

.hs-enquire__contact {
  margin: 0;
  max-width: 65ch;
  margin-inline: auto;
}

.hs-enquire__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-sm);
}

.hs-enquire__primary,
.hs-enquire__secondary {
  min-width: 160px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .hs-experience__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .hs-dining__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .hs-dining__media {
    order: 2;
  }

  .hs-dining__content {
    order: 1;
  }

  .hs-experience__media {
    order: 1;
  }

  .hs-experience__content {
    order: 2;
  }
}

@media (max-width: 768px) {
  .hs-intro,
  .hs-experience,
  .hs-structure,
  .hs-dining,
  .hs-social,
  .hs-private,
  .hs-expect,
  .hs-enquire {
    padding-block: var(--space-2xl);
  }

  .hs-private__panel {
    padding: var(--space-lg);
  }

  .hs-private__cta {
    align-self: stretch;
    width: 100%;
  }

  .hs-enquire__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hs-enquire__primary,
  .hs-enquire__secondary {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hs-intro__inner,
  .hs-structure__inner,
  .hs-social__inner,
  .hs-private__panel,
  .hs-expect__inner,
  .hs-enquire__inner {
    padding-inline: var(--space-sm);
  }

  .hs-experience__grid,
  .hs-dining__grid {
    padding-inline: var(--space-sm);
  }

  .hs-structure__item,
  .hs-expect__item {
    padding-left: var(--space-lg);
  }
}