/* The three fixes from Phil's 26 Sep review (ECHOSTUDIO-199), built to Iris's
 * mocks in direction/echostudio-199/. */

/* ---- the icon disc: "Worth knowing" on retreats and treatments ---------- */
.ico-disc {
  display: grid; place-items: center; flex: none;
  inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--radius-pill);
  background: var(--hue-parchment2); color: var(--hue-teal-deep);
  transition: background-color .5s cubic-bezier(0.2, 0.7, 0.2, 1), color .5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ico-disc svg { inline-size: 1.625rem; block-size: 1.625rem; }
.tone-raised .ico-disc, .tone-sand .ico-disc { background: var(--hue-parchment); }
@media (max-width: 768px) {
  .ico-disc { inline-size: 2.75rem; block-size: 2.75rem; }
  .ico-disc svg { inline-size: 1.375rem; block-size: 1.375rem; }
}

/* A retreat's four "Worth knowing" rows: heading on the left, rows on the right. */
.wk { display: grid; gap: var(--space-block); width: 100%; }
@media (min-width: 900px) {
  .wk { grid-template-columns: 4fr 1fr 7fr; column-gap: var(--space-roomy); align-items: start; }
  .wk > :first-child { grid-column: 1; }
  .wk > .rowlist { grid-column: 3; }
}
.rowlist > li > a.rowlist-ico { grid-template-columns: auto 1fr auto; }
.rowlist-ico .arr { display: block; inline-size: 1.25rem; color: var(--muted, currentColor);
  transition: transform .5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rowlist-ico .arr svg { display: block; inline-size: 100%; block-size: auto; }
@media (max-width: 639px) {
  .rowlist > li > a.rowlist-ico { grid-template-columns: auto 1fr auto; }
}

/* The treatment pages' four answers: the icon above the name, like the mock. */
.notes--icons .note-head { flex-direction: column; align-items: flex-start; gap: var(--space-snug); }

/* ---- the Matriarch Threshold, "What it is", as chapters ----------------- */
.mt { display: grid; width: 100%; }
.mt-row { display: grid; gap: var(--space-roomy); padding-block: var(--space-block); }
.mt-row + .mt-row, .mt-quote + .mt-row, .mt-panel + .mt-row { border-block-start: var(--space-hair) solid var(--rule-colour); }
.mt-intro { padding-block-start: 0; }
@media (min-width: 800px) {
  .mt-row { grid-template-columns: 4fr 1fr 7fr; column-gap: var(--space-roomy); }
  .mt-side { grid-column: 1; }
  .mt-body { grid-column: 3; }
  .mt-chap { padding-block: calc(var(--space-block) * 1.4); }
}
.mt-side { display: grid; gap: var(--space-roomy); align-content: start; }
.mt-body { display: grid; gap: var(--space-base); align-content: start; justify-items: start; }
.mt-body > p { max-width: 60ch; margin: 0; }
.mt-facts { margin: 0; border-block-start: var(--space-hair) solid var(--rule-colour); }
.mt-facts > div { display: flex; justify-content: space-between; gap: var(--space-base);
  padding-block: var(--space-snug); border-block-end: var(--space-hair) solid var(--rule-colour); }
.mt-facts dt { color: var(--muted); }
.mt-facts dd { margin: 0; text-align: end; }
.mt-lede { font-family: var(--text-heading-family); font-size: var(--text-heading-size); line-height: 1.2;
  letter-spacing: -.01em; max-width: 30ch; margin: 0 0 var(--space-tight); }
.mt-strong { font-weight: 500; }
.mt-soft { font-family: var(--text-heading-family); font-style: italic; font-size: 1.25rem; line-height: 1.35;
  color: var(--hue-teal900); max-width: 40ch; margin-block-start: var(--space-tight); }
.mt-come { font-family: var(--text-heading-family); font-size: 1.25rem; line-height: 1.35; max-width: 44ch; }
.chapter-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm); max-width: 20rem;
  background: var(--rule-colour); }
.chapter-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.mt-quote { margin: 0; padding-block: calc(var(--space-block) * 2.2); text-align: center;
  border-block: var(--space-hair) solid var(--rule-colour); }
.mt-quote blockquote { margin: 0 auto; max-width: 18ch; quotes: none; }
.mt-panel { background: var(--hue-parchment2); border-radius: var(--radius-sm); padding: var(--space-block);
  margin-block: var(--space-block); display: grid; gap: var(--space-roomy); }
.tone-raised .mt-panel { background: var(--hue-parchment); }
.mt-panel ol { list-style: none; margin: 0; padding: 0; display: grid; column-gap: calc(var(--space-block) * .8); }
@media (min-width: 800px) { .mt-panel ol { grid-template-columns: 1fr 1fr; } }
.mt-panel li { display: grid; grid-template-columns: 2.1rem 1fr; align-items: baseline;
  padding-block: var(--space-snug); border-block-start: var(--space-hair) solid var(--rule-colour); }
.mt-panel .n { color: var(--hue-teal-deep); }
.mt-price { font-family: var(--text-heading-family); font-size: 1.75rem; line-height: 1.1; margin: var(--space-tight) 0 0; }
.mt-close .btn-cta { margin-block-start: var(--space-tight); }
@media (max-width: 799px) {
  .chapter-photo { aspect-ratio: 3 / 2; max-width: none; }
  .mt-panel { padding: var(--space-roomy); }
  .mt-quote { padding-block: calc(var(--space-block) * 1.4); }
}

/* ---- the enquire page: words left, the form in a card on the right ----- */
.blk-enquiry.enq { display: grid; gap: var(--space-block); width: 100%; justify-items: stretch; }
.enq-intro { display: grid; gap: var(--space-roomy); align-content: start; }
.enq-intro .t-lede { max-width: 40ch; }
.enq-contact { margin: 0; border-block-start: var(--space-hair) solid var(--rule-colour); }
.enq-contact > div { display: flex; justify-content: space-between; gap: var(--space-snug);
  padding-block: var(--space-snug); border-block-end: var(--space-hair) solid var(--rule-colour); }
.enq-contact dt { color: var(--muted); }
.enq-contact dd { margin: 0; text-align: end; }
.enq-contact-wide { display: none; }
@media (min-width: 1000px) {
  .blk-enquiry.enq { grid-template-columns: 5fr 1fr 6fr; column-gap: var(--space-roomy); align-items: start; }
  .blk-enquiry.enq > .enq-intro { grid-column: 1; grid-row: 1; justify-self: stretch; position: sticky; top: calc(var(--head-h, 5rem) + var(--space-block)); }
  .blk-enquiry.enq > .enquiry-wrap { grid-column: 3; grid-row: 1; justify-self: stretch; width: 100%; }
  .enq-contact-wide { display: block; margin-block-start: var(--space-base); }
  .enq-contact-narrow { display: none; }
}
.enq .enquiry-wrap { background: var(--hue-parchment); border: var(--space-hair) solid var(--rule-colour);
  border-radius: var(--radius-sm); padding: var(--space-block); }
@media (max-width: 767px) { .enq .enquiry-wrap { padding: var(--space-roomy); } }

.enquiry--steps { max-width: none; gap: 0; }
.enq-progress { display: flex; gap: var(--space-tight); margin-block-end: var(--space-roomy); }
.enq-progress span { flex: 1; block-size: 2px; border-radius: 2px; background: var(--rule-colour); transition: background-color .35s; }
.enq-progress span.on { background: var(--hue-teal-deep); }
html:not(.js) .enq-progress, html:not(.js) .enq-js { display: none; }
.enq-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-base); }
html:not(.js) .enq-step + .enq-step { margin-block-start: var(--space-block); }
html.js .enq-step:not(.on) { display: none; }
html.mv .enq-step.on { animation: enq-in .35s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes enq-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.enq-legend { padding: 0; display: grid; gap: var(--space-tight); margin-block-end: var(--space-tight); }
.enq-legend .t-heading { margin: 0; }
.enq-legend .t-heading:focus { outline: none; }
.enq-legend .t-heading:focus-visible { outline: 2px solid var(--hue-teal-deep); outline-offset: 4px; }
.enquiry--steps .field { display: grid; gap: var(--space-tight); }
.enquiry--steps .field.invalid input, .enquiry--steps .field.invalid textarea { border-color: var(--hue-orange-action-deep); }
.enq-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-base); margin-block-start: var(--space-tight); }
.enq-nav > .btn-cta:only-child, .enq-nav > .btn-cta:first-child:last-child { margin-inline-start: auto; }
html:not(.js) .enq-nav > .btn-cta { margin-inline-start: 0; }
.enq-back { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.enq-back:hover { color: var(--fg); }

.enq-chips { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.enq-chip { position: relative; display: inline-flex; }
.enq-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.enq-chip span { display: inline-flex; align-items: center; gap: .35em; min-height: 2.75rem;
  padding: var(--space-tight) var(--space-base); border: var(--space-hair) solid var(--rule-colour);
  border-radius: var(--radius-pill); font-size: var(--text-body-size); line-height: 1.2;
  transition: background-color .25s, color .25s, border-color .25s; }
.enq-chip input:checked + span { background: var(--hue-teal900); border-color: var(--hue-teal900); color: var(--hue-parchment); }
.enq-chip input:checked + span::before { content: "\2713"; }
.enq-chip input:focus-visible + span { outline: 2px solid var(--hue-teal-deep); outline-offset: 2px; }
@media (hover: hover) { .enq-chip:hover span { border-color: var(--hue-teal-deep); } }
.enq-chips--small .enq-chip span { min-height: 2.25rem; font-size: var(--text-small-size); padding: .35rem .85rem; }
.enq-which { display: grid; gap: var(--space-snug); margin-block-start: var(--space-tight);
  padding-block-start: var(--space-base); border-block-start: var(--space-hair) dashed var(--rule-colour); }
html.js .enq-which:not(.on) { display: none; }

/* ---- draft mode in a tab of its own (ECHOSTUDIO-740) -------------------- */
/* Only rendered while an editor previews drafts; visitors never get it. */
.preview-bar {
  position: fixed; z-index: 210;
  /* Clear of the notch and the home indicator on a phone (ECHOSTUDIO-789). */
  inset-block-end: calc(var(--space-base) + env(safe-area-inset-bottom));
  inset-inline-start: max(var(--space-base), env(safe-area-inset-left));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight) var(--space-snug);
  max-inline-size: calc(100% - 2 * var(--space-base));
  padding: var(--space-snug) var(--space-roomy); border-radius: var(--radius-lg);
  background: var(--hue-teal900); color: var(--hue-parchment);
  font-family: var(--font-sans); font-size: .875rem; line-height: 1.4;
  box-shadow: 0 6px 24px rgb(6 38 39 / .25);
}
.preview-bar p { margin: 0; }
.preview-bar a { color: var(--hue-parchment); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.preview-bar a:focus-visible { outline: 2px solid var(--hue-parchment); outline-offset: 3px; }