/*
  The Head Spa by Hikari, D11 group 3: contact.html, faq.html, thank-you.html, 404.html.
  Loaded after site.css and the page group file (pages-core.css or pages-journal.css), on these
  four pages only. Same rules as site.css: final states only (no transitions, no keyframes),
  tokens only (no colour values, no font names). Class prefix g3-.

  Language (yusen inner pages, translated): the first screen is split. One photograph or film
  fills half of it from the top of the page to the edge of the screen and holds still while
  the words scroll beside it; the words stay on ivory. Details sit on hairline rows. The contact
  page closes on a full-width band of daylight, like the home page gift band.

  Contents
    1. Tokens
    2. Split first screen (all four pages)
    3. Contact: hairline detail rows
    4. Contact: enquiry beside the sign film
    5. Contact: appointments band
    6. FAQ: head, accordion (d11-g3.js), help band
    7. System pages: thank you, 404
*/

/* 1. Tokens */
:root {
  --g3-pane: clamp(22rem, 42vw, 46rem);                               /* width of the media half */
  --g3-edge: max(var(--pad-x), calc((100vw - var(--max)) / 2));      /* the header's content edge */
  --g3-inner: clamp(2.5rem, 1rem + 4vw, 6rem);                       /* words to media gap */
}

/* 2. Split first screen */
.g3-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}
.g3-split__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--clay);
}
.g3-split__media img,
.g3-split__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g3-split__body {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
  min-width: 0;
  padding: clamp(2.25rem, 1.8rem + 2vw, 3.5rem) var(--pad-x) var(--section-y-compact);
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .g3-split__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 64em) {
  .g3-split {
    grid-template-columns: var(--g3-pane) minmax(0, 1fr);
    min-height: calc(100svh - var(--header-h));
  }
  .g3-split--media-right { grid-template-columns: minmax(0, 1fr) var(--g3-pane); }
  .g3-split__media {
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: var(--header-h);
    height: calc(100svh - var(--header-h));
    min-height: 34rem;
    aspect-ratio: auto;
  }
  .g3-split--media-left .g3-split__media { grid-column: 1; }
  .g3-split--media-right .g3-split__media { grid-column: 2; }
  .g3-split__body {
    grid-row: 1;
    padding-block: clamp(3.5rem, 9svh, 6.5rem);
  }
  .g3-split--media-left .g3-split__body { grid-column: 2; padding-inline: var(--g3-inner) var(--g3-edge); }
  .g3-split--media-right .g3-split__body { grid-column: 1; padding-inline: var(--g3-edge) var(--g3-inner); }
}

/* 3. Contact: the storefront film and hairline detail rows */
.contact.g3-split { padding: 0; }
.contact.g3-split .contact__film {
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  aspect-ratio: 4 / 5;
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .contact.g3-split .contact__film { aspect-ratio: 4 / 3; }
}
@media (min-width: 64em) {
  .contact.g3-split .contact__film {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    aspect-ratio: auto;
  }
}
.g3-split .contact__head .page-lead { max-width: 32rem; }
.contact__details.g3-rows {
  display: block;
  align-self: stretch;   /* pages-core.css sets start for its old grid; here it spans the column */
  max-width: 48rem;
  padding-top: 0;
  border-top: 0;
}
.g3-rows .contact__block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  padding-block: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  border-top: 1px solid var(--rule-strong);
}
.g3-rows .contact__block + .contact__block { border-top-color: var(--rule); }
.g3-rows .contact__block:last-child { border-bottom: 1px solid var(--rule); }
.g3-rows .contact__block > * + * { margin-top: 0; }
.g3-rows .contact__block > :not(.pc-label) + :not(.pc-label) { margin-top: var(--space-2); }
.g3-rows .pc-label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent);
}
.g3-rows .contact__note { max-width: 30rem; padding-top: var(--space-1); }
@media (min-width: 40em) {
  .g3-rows .contact__block { grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: var(--gutter); }
  .g3-rows .pc-label { grid-column: 1; grid-row: 1 / span 8; margin: 0; padding-top: 0.45rem; }
  .g3-rows .contact__block > :not(.pc-label) { grid-column: 2; }
}

/* 4. Contact: the enquiry beside the hanging sign (a silent loop tile) */
.g3-enquiry .enquiry__grid { row-gap: var(--space-7); }
.g3-enquiry__film { aspect-ratio: 1 / 1; }
.g3-enquiry__film video { object-position: 50% 48%; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .g3-enquiry__film { aspect-ratio: 3 / 2; }
}
@media (min-width: 64em) {
  .g3-enquiry .enquiry__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    row-gap: var(--space-7);
    align-items: start;
  }
  .g3-enquiry__film { grid-column: 1 / span 5; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
  .g3-enquiry .enquiry__head { grid-column: 7 / -1; grid-row: 1; }
  .g3-enquiry .enquiry__form { grid-column: 7 / -1; grid-row: 2; max-width: none; }
}

/* 5. Contact: appointments on the sunlit front window, full width */
.g3-book { min-height: clamp(28rem, 72svh, 46rem); }
.g3-book .bleed__media img { object-position: 50% 62%; }
.g3-book .bleed__content { gap: var(--space-6); }
.g3-book__title {
  font-size: var(--fs-h2-lg);
  font-style: italic;
  font-weight: var(--display-wght-light);
  line-height: 1.04;
  letter-spacing: var(--display-track-italic);
}
.g3-book__actions { justify-content: center; gap: var(--space-3); }
@media (max-width: 47.99em) {
  .g3-book .bleed__media img { object-position: 50% 50%; }
  .g3-book__actions { flex-direction: column; align-items: stretch; width: min(100%, 20rem); }
}

/* 6. FAQ */
.g3-faq-head.page-head { padding: 0; }
.g3-faq-head .g3-split__media img { object-position: 50% 60%; }
@media (min-width: 48em) and (max-width: 63.99em) {
  /* 4:3 on tablets: keep the lit logo (rows 470 to 1060 of 2048) and the desk in the frame */
  .g3-faq-head .g3-split__media img { object-position: 50% 38%; }
}
.g3-faq-head .page-lead { max-width: 30rem; }
.g3-faq-head .page-lead a { color: var(--ink); }
.g3-faq-head .page-lead a:hover { color: var(--accent); }
@media (max-width: 63.99em) {
  .g3-faq-head .g3-split__media { order: -1; }
}
@media (min-width: 64em) {
  .g3-faq-head .g3-split__body { justify-content: flex-end; }
}
.g3-faq.faq { padding-block: 0 var(--section-y); }
@media (min-width: 64em) {
  .g3-faq.faq { padding-top: var(--section-y-compact); }
}
.g3-faq .faq-group__title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: var(--display-wght-light);
}
/* accordion (d11-g3.js adds the buttons and [data-accordion="on"]; without it every answer is
   open under its question, in the two columns of pages-core.css) */
[data-accordion="on"] .qa { display: block; padding-block: 0; }
[data-accordion="on"] .qa__q { font-size: inherit; line-height: inherit; }
.qa__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  min-height: 3.5rem;
  padding: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem) 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.14rem + 0.45vw, 1.5625rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--display-track-sm);
  text-align: left;
  cursor: pointer;
}
.qa__btn:hover,
.qa__btn[aria-expanded="true"] { color: var(--accent); }
.qa__btn:hover .qa__text,
.qa__btn:focus-visible .qa__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.qa__btn:focus-visible { outline-offset: 2px; }
.qa__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--accent); }
.qa__btn[aria-expanded="true"] .qa__icon-v { opacity: 0; }
[data-accordion="on"] .qa__a { max-width: 42rem; }
[data-accordion="on"] .qa__a > :last-child { margin-bottom: clamp(1.5rem, 1.25rem + 0.8vw, 2.25rem); }
/* site.css hides every [hidden] with display: none; a closed answer that find in page can still
   reach (hidden="until-found") needs its box, the browser keeps its content out of sight */
[data-accordion="on"] .qa__a[hidden="until-found"] { display: block !important; }
.g3-faq-help.faq-help { padding-block: var(--section-y-compact); }
.g3-faq-help .faq-help__title {
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: var(--display-wght-light);
}

/* 7. System pages (thank you, 404): words first on phones, the photograph below, edge to edge */
.g3-system.system { padding: 0; }
.g3-system .g3-split__body { justify-content: center; }
.g3-system .system__links { margin-top: var(--space-7); }
.g3-system.system .search-form { max-width: 34rem; }
.page-thanks .g3-split__media img { object-position: 50% 92%; }
.page-404 .g3-split__media img { object-position: 50% 50%; }
@media (max-width: 63.99em) {
  .g3-system .g3-split__body { padding-bottom: var(--space-8); }
}
/* 404: the whole decal (mark and name, rows 464 to 1720 of 2048) stays inside every crop */
@media (min-width: 48em) and (max-width: 63.99em) {
  .page-404 .g3-split__media { aspect-ratio: 1 / 1; }
  .page-404 .g3-split__media img { object-position: 50% 60%; }
}