/* =========================================================================
   Pages — what only one kind of page needs: forms beside their steps,
   the thank-you page, the library and product pages, the price block.
   ========================================================================= */

/* ---- A form beside its "how it works" ---------------------------------------- */
.form-layout { display: grid; gap: var(--space-7) var(--space-9); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 940px) {
  .form-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .form-layout__intro { position: sticky; top: var(--space-6); }
}
.form-layout__intro > * + * { margin-top: var(--space-5); }
.form-card {
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line), 0 24px 60px -30px rgba(20, 20, 20, 0.25);
}
.section--mist .form-card, .section--dawn .form-card { background: var(--paper); }

/* ---- The appointment calendar (consultations, once a link is configured) --------- */
.calendar-block { display: grid; gap: var(--space-6); }
.calendar-block__head { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .calendar-block__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
}
.calendar-card {
  padding: clamp(var(--space-3), 2vw, var(--space-5));
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line), 0 24px 60px -30px rgba(20, 20, 20, 0.25);
}
.calendar-embed { min-height: 32rem; }
.calendar-embed iframe { display: block; width: 100%; }
.calendar-card__fallback { margin: var(--space-3) 0 0; font-size: .78rem; text-align: right; }
.calendar-card > .btn { width: 100%; }

/* ---- An offer beside its price (consultations: ongoing contact) ------------------- */
.offer { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .offer { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
}
.offer__intro > * + * { margin-top: var(--space-5); }
.offer__terms { margin-top: var(--space-5); font-size: var(--step-0); }

/* ---- Thank you -------------------------------------------------------------------- */
.thanks { padding-block: clamp(5rem, 4rem + 8vw, 11rem); text-align: left; }
.thanks__title { margin-top: var(--space-5); max-width: 14ch; font-size: var(--step-5); font-weight: 800; font-stretch: 84%; line-height: 0.98; letter-spacing: -0.018em; }
.thanks__lede { margin-top: var(--space-5); max-width: 48ch; font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); }

/* ---- Price block (booking page, product page) --------------------------------------- */
.price-block {
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border-radius: var(--radius-lg);
  background: var(--dawn);
  font-family: var(--font-ui);
}
.price-block__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35em; font-family: var(--font-display); font-size: var(--step-3); font-weight: 800; font-stretch: 86%; letter-spacing: -0.015em; line-height: 1.05; }
.price-block__price > span:first-child { white-space: nowrap; }
.price-block__unit { font-family: var(--font-ui); font-size: var(--step-0); font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }
.price-block__note { margin-top: var(--space-3); font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); }
.price-block__spec { margin-top: var(--space-5); }
.price-block__spec .spec__val { font-size: var(--step--1); }
.price-block .btn { margin-top: var(--space-5); }
.price-block__live {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: var(--step-0);
  font-weight: 600;
}

/* ---- Library and product pages ------------------------------------------------------- */
.product-group + .product-group { margin-top: var(--space-8); }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--mist);
  overflow: hidden;
  transition: transform var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); }
.card__media { position: relative; aspect-ratio: 16 / 10; background: var(--sea); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media-glyph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; color: rgba(255, 255, 255, 0.28); }
.card__body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; padding: var(--space-5); font-family: var(--font-ui); }
.card__category { font-size: var(--step--1); font-weight: 600; color: var(--ink-faint); }
.card__title { font-size: var(--step-1); }
.card__desc { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-soft); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.card__price { font-weight: 700; }
.card__link::after { content: ""; position: absolute; inset: 0; }

.product-hero__cat { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.product-hero__title { margin: var(--space-4) 0; font-size: var(--step-4); font-weight: 800; font-stretch: 86%; letter-spacing: -0.015em; line-height: 1; max-width: 18ch; }
.product-hero__subtitle { max-width: 52ch; font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); }
.product-cover { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--sea); overflow: hidden; }
.product-cover img { width: 100%; height: 100%; object-fit: cover; }
.product-cover__glyph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 5rem; font-weight: 800; color: rgba(255, 255, 255, 0.28); }

/* ---- Booking status line on the guest's page ------------------------------------------- */
.state { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-ui); font-weight: 600; }