/* Shared horizontal layout. Loaded last by build-environment.mjs. */
:root {
  --content-max: 1200px;
  --page-gutter: clamp(20px, 4vw, 48px);
  --page-inset: max(var(--page-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --panel-inset: clamp(20px, 3vw, 40px);
  --column-gap: clamp(24px, 6vw, 88px);
}

/* One centered frame for navigation, sections, headings, cards and footer. */
.wrap {
  width: min(var(--content-max), calc(100% - var(--page-inset) - var(--page-inset)));
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Full-bleed category tabs intentionally sit outside the content frame. */
.switcher .wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Homepage copy uses absolute positioning; detail heroes stay in normal flow.
   Do not apply the homepage left offset to an already centered .wrap. */
.hero > .hero-copy {
  left: 0;
  right: 0;
  width: min(var(--content-max), calc(100% - var(--page-inset) - var(--page-inset)));
  max-width: var(--content-max);
  margin-inline: auto;
}
.page-hero > .wrap.hero-copy {
  left: auto;
  right: auto;
  width: min(var(--content-max), calc(100% - var(--page-inset) - var(--page-inset)));
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Grid tracks own the available width. Legacy prose caps must not leave an
   empty strip on the right when a two-column section becomes one column. */
:is(.content-grid, .intro-grid, .guide-head, .chooser-grid, .info-grid) {
  column-gap: var(--column-gap);
}
:is(.content-grid, .intro-grid, .guide-head, .chooser-grid, .info-grid) > * {
  min-width: 0;
  max-width: none;
}
.content-grid > .prose,
.intro-grid > .intro-copy,
.intro-grid > div:last-child {
  width: 100%;
  max-width: none;
}

/* Symmetric card insets scale with the viewport, including narrow phones. */
:is(.info-card, .guide-card, .result, .cross-card, .need, .access-routes) {
  padding-inline: var(--panel-inset);
  min-width: 0;
}
:is(.world-copy, .treatment-copy) {
  padding-inline: clamp(24px, 4vw, 64px);
  min-width: 0;
}
.gateway-copy {
  left: var(--panel-inset);
  right: var(--panel-inset);
}

/* Wide panels must not retain a second arbitrary text-width cap. */
.guide-head > p,
.gateway-copy > p {
  max-width: none;
}

@media (max-width: 1100px) {
  .intro-grid > .intro-copy { padding-top: 0; }
}
@media (max-width: 820px) {
  .content-grid, .intro-grid { grid-template-columns: minmax(0, 1fr); }
  .content-grid > *, .intro-grid > * { width: 100%; }
}

/* Keep copy in the same horizontal frame as its heading. Natural wrapping
   fills the available line; Safari's paragraph rebalancing must not shorten it. */
.copy-flow {
  width: 100%;
  max-width: none;
  max-inline-size: none;
  text-wrap: wrap;
}
.gateway-copy > p {
  width: 100%;
  margin-inline: 0;
  max-inline-size: none;
}

/* Link borders and labels share the heading/body edges. Older interaction
   rules expanded these links with negative margins and added another inset. */
.gateway-copy > .gateway-link,
.result > .recommend,
.treatment-copy > .cta-line {
  margin-inline: 0;
  padding-inline: 0;
}
.world .service-list a {
  padding-inline: 0;
}

/* Answers do not need the question's reserved plus/minus-icon space. */
.faq-list .answer {
  padding-inline: 0;
}

@media (max-width: 1100px) {
  /* The home section heading already stacks here, before the old 820px reset. */
  .section-head > p {
    width: 100%;
    max-width: none;
    max-inline-size: none;
  }
}
@media (max-width: 820px) {
  /* Single-column hero copy follows the same frame as its heading. */
  .hero-copy > p,
  .content-hero > .wrap > p {
    width: 100%;
    max-width: none;
    max-inline-size: none;
  }
}

/* Home introduction: keep the heading frame aligned with its body and avoid
   the desktop grid gap plus paragraph margins accumulating after stacking. */
.intro-grid h2 {
  width: 100%;
  max-width: none;
  max-inline-size: none;
}
.title-tail { white-space: nowrap; }
@media (max-width: 1100px) {
  .intro-grid { row-gap: clamp(20px, 3vw, 32px); }
  .intro-grid h2 { margin-bottom: 0; }
  .intro-copy > p:first-child { margin-top: 0; }
}
@media (max-width: 620px) {
  .intro-grid h2 {
    font-size: clamp(1.375rem, 6.2vw, 1.75rem);
    line-height: 1.5;
  }
}

/* Break between Japanese word groups, never inside a word or before punctuation.
   Outer title/copy chunks remain inline so a long sentence is not one rigid box. */
.phrase-unit {
  display: inline-block;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  text-indent: 0;
  vertical-align: baseline;
}
@supports (font-size: min(1em, 10cqi)) {
  .phrase-unit { font-size: min(1em, calc(100cqi / var(--unit-em))); }
}