/*
 * Haus of Contour — the treatments page.
 *
 * Only what this page alone needs: the intro, the at-a-glance index, and the
 * treatment blocks. The parallax bands, "best for" lists, detail grids, the
 * studio rail and the closing band are shared — they live in site.css.
 */

/* ------------------------------------------------------------ menu index */

/* The at-a-glance list: number, name, then price and duration flush right.
   The trailing rule is a bare element so the last row is closed off. */
.menu { margin-top: 76px; }

.menu__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: baseline;
  color: inherit;
  border-top: 1px solid var(--rule);
  padding: 26px 0;
  transition: background 500ms var(--ease);
}
.menu__row:hover { background: var(--raised); color: inherit; }

.menu__num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.menu__name {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.menu__figures {
  display: flex;
  gap: 20px;
  align-items: baseline;
}

.menu__price { font-size: 15px; color: var(--ink); }

.menu__duration {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.menu__end { border-top: 1px solid var(--rule); }

@media (max-width: 700px) {
  .menu__row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px 18px;
  }
  /* Price and duration drop under the name rather than squeezing it. */
  .menu__figures { grid-column: 2; }
}

/* ------------------------------------------------------- treatment blocks */

.treatment { padding-top: 104px; padding-bottom: 104px; }

/* The alternating sections sit on the raised ground with a rule above. */
.treatment--raised {
  border-top: 1px solid var(--rule);
  background: var(--raised);
}

.treatment--ruled { border-top: 1px solid var(--rule); }

.treatment__grid {
  display: grid;
  /* min() so the track can fall below its ideal width on a narrow phone.
     A bare minmax(320px, 1fr) refuses to shrink past 320px and overflows
     the viewport, taking every section on the page with it. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 76px;
  align-items: start;
}

.treatment__label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
}

.treatment__num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.treatment__title { max-width: 22ch; }

.treatment__summary { margin-top: 26px; }

/* Price and duration, ruled above and below. */
.treatment__figures {
  margin-top: 36px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.treatment__price { font-size: 15px; color: var(--ink); }

.treatment__duration {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.treatment__fit { margin-top: 34px; }

.treatment__cta { margin-top: 34px; }

.treatment__frame { aspect-ratio: 4 / 5; }

/*
 * Two 320px tracks plus the 76px gap need 716px of content box, so the grid
 * drops to one column just under 764px wide. From there the copy always
 * leads: blocks 02 and 04 put the photograph first in source order, and a
 * single column that alternates between a heading and a picture reads as an
 * accident rather than a rhythm.
 */
@media (max-width: 763px) {
  .treatment__grid { gap: 48px; }
  .treatment__grid > .frame { order: 2; }
}

@media (max-width: 719px) {
  .treatment { padding-top: 64px; padding-bottom: 64px; }
}

@media (max-width: 719px) {
  .menu { margin-top: 48px; }
}