/* =====================================================================
   guide.css — the two parent guides: /free-trial/ and /level-guide/
   ---------------------------------------------------------------------
   Both pages are siblings of /payment/ and load, in order, app.css
   (hero, strip, ruled flow, the two-column fact list) and payment.css
   before this file; tokens, the FAQ and its closing card are design-system
   parts (base.css / components.css). The body carries `page-app` plus
   `page-guide`.

   Only what neither of those files has lives here, in source order:
     0. .guide-hero      — the homepage's full-bleed photo hero
     1. .app-flow--four  — the ruled step columns, four across
     2. .guide-cards     — three cream cards: numeral, title, copy
     3. .guide-chooser   — 「いまのお子さまは？」 → the course to start with
     4. .guide-compare   — the four courses: one table ≥1024px, cards below
     5. .guide-route     — the level guide's 英検® route map (css/eiken.css's
                           grade scale, which only /level-guide/ loads here)

   Responsive contract: fluid from 320px up, on app.css's ramp —
   1023 (4-up → 2-up), 767 (phone), 600 (1-up), 520 (narrow phone).
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. HERO — the homepage's hero (home.css .hero): a full-bleed photograph
   under a cream wash that is solid at the left and clear by two-thirds
   across, with the copy anchored left over the solid part. These pages
   used app.css's centred hero with an illustration letterboxed under it —
   a product-page layout on a page with no product, and the only two
   anime-style images on a site that is otherwise photographed.

   Markup keeps app.css's hero pieces (breadcrumb, headline, sub, checks)
   and re-sets them left-aligned; the actions are the homepage's — one
   button, the LINE note, the checks, then a quiet text link — instead of
   a second outline button that wrapped under the first.

   The photo's focal point is set per page on the section — desktop,
   tablet (768–1023, where the frame crops hardest) and phone:
     style="--guide-hero-pos: 68% 40%; --guide-hero-pos-md: 40% 40%;
            --guide-hero-pos-sm: 60% 30%"
   (on phones the last one is the focal point of the banner above the copy)
--------------------------------------------------------------------- */
.guide-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 84vh, 740px);
  padding: calc(var(--header-h) + var(--sp-xl)) 0 var(--sp-xl);
  background-color: var(--bg-cream);
}
.guide-hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.guide-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--guide-hero-pos, 70% 35%);
}
/* home.css .hero-overlay, stop for stop. */
.guide-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(250, 247, 243, 1)    0%,
      rgba(250, 247, 243, 1)    20%,
      rgba(250, 247, 243, 0.90) 32%,
      rgba(250, 247, 243, 0.45) 44%,
      rgba(250, 247, 243, 0.10) 55%,
      rgba(250, 247, 243, 0)    66%
    ),
    linear-gradient(
      180deg,
      rgba(250, 247, 243, 0.32) 0%,
      rgba(250, 247, 243, 0)    18%,
      rgba(250, 247, 243, 0)    82%,
      rgba(250, 247, 243, 0.20) 100%
    );
}
.guide-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.guide-hero-text { width: min(52vw, 620px); }

.guide-hero .app-hero-headline {
  margin: 0 0 1.5rem;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  text-align: left;
  text-wrap: balance;
  word-break: auto-phrase;
}
.guide-hero .app-hero-sub {
  margin: 0;
  max-width: 34em;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  text-align: left;
}
/* The highlighter as a background on the <em> itself, so a phrase that
   wraps keeps the ground under both halves (course.css .course-hero-sub). */
.guide-hero .app-hero-sub em::after { content: none; }
.guide-hero .app-hero-sub em {
  background-image: linear-gradient(
    to top,
    transparent 0.08em,
    rgba(245, 158, 11, 0.22) 0.08em,
    rgba(245, 158, 11, 0.22) 0.38em,
    transparent 0.38em
  );
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.guide-hero-actions { margin-top: 1.85rem; }
/* One left-aligned column at every width (app.css's ≤520 stacking recipe):
   three checks in a 620px column wrapped 2 + 1, leaving the third alone. */
.guide-hero .app-hero-checks { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.guide-hero .app-hero-checks li { word-break: auto-phrase; align-items: baseline; }
/* The secondary path, as a line of text — home.css .hero-alt-cta. */
.guide-hero-alt {
  margin: 0.9rem 0 0;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--text-light);
}

@media (max-width: 1023px) {
  .guide-hero { min-height: clamp(520px, 70vh, 640px); }
  .guide-hero-text { width: min(46vw, 450px); }   /* home.css's tablet column */
  .guide-hero-img { object-position: var(--guide-hero-pos-md, var(--guide-hero-pos, 70% 35%)); }
  .guide-hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(250, 247, 243, 0.98) 0%,
        rgba(250, 247, 243, 0.96) 26%,
        rgba(250, 247, 243, 0.80) 40%,
        rgba(250, 247, 243, 0.35) 54%,
        rgba(250, 247, 243, 0.08) 66%,
        rgba(250, 247, 243, 0)    76%
      );
  }
}
/* Phones: home.css's banner (home.css .hero ≤767). The photo leaves the
   background and sits above the copy as a banner that fades into the cream,
   so the copy runs on solid cream instead of over a ghosted photo. */
@media (max-width: 767px) {
  .guide-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding: var(--header-h) 0 var(--sp-lg);
  }
  .guide-hero-visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: 34vh;
    min-height: 230px;
    max-height: 340px;
    flex-shrink: 0;
  }
  .guide-hero-img {
    object-position: var(--guide-hero-pos-sm, 60% 30%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  }
  .guide-hero-overlay { background: none; }
  .guide-hero-inner { padding-top: 1.5rem; }
  .guide-hero-text { width: 100%; }
}
/* home.css's per-width banner steps. Not its tall-phone enlargement: this
   hero also carries a breadcrumb and a longer lead, and at 34vh its button
   would slip under the sticky bar on a 390 × 844 phone. */
@media (max-width: 639px) { .guide-hero-visual { height: 32vh; min-height: 220px; max-height: 320px; } }
@media (max-width: 480px) { .guide-hero-visual { height: 30vh; min-height: 205px; max-height: 300px; } }
@media (max-width: 400px) { .guide-hero-visual { height: 28vh; min-height: 195px; max-height: 280px; } }
@media (max-width: 360px) { .guide-hero-visual { height: 26vh; min-height: 185px; max-height: 255px; } }
@media (max-width: 320px) { .guide-hero-visual { height: 24vh; min-height: 175px; max-height: 235px; } }
@media (max-width: 520px) {
  .guide-hero .cta-btn { width: 100%; }
  /* app.css centres its stacked checks under a centred hero; this one
     is left-aligned, so they stay on the text's left edge. */
  .guide-hero .app-hero-checks { margin-inline: 0; }
}
/* app.css's ≤360 hero-button step (the one /payment/ and /app/ use), so the
   label stays on one line: 「…申し込 / む」 at 360. */
@media (max-width: 360px) {
  .guide-hero .cta-btn,
  .page-guide .faq-cta .btn { font-size: var(--fs-body-md); padding-inline: 0.75rem; }
}


/* The FAQ stays app.css's white on both pages: the shared CTA after it is
   cream, and a cream FAQ ran straight into it as one 2,000px band. The
   level guide keeps its bands alternating by folding 逆算 into COMPARE
   (.guide-subsection below). */

/* app.css styles the note's <em> but never needed a link in it; these
   pages hand the reader onward from those notes. */
.page-guide .app-flow-note a {
  color: var(--ink-sky);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------------------------------------------------------------------
   1. FLOW VARIANTS — app.css's .app-flow is three across, two across on
   tablets. A four-step sequence set three-across leaves the last step
   alone on its own row; a three-step one does the same at two across.
--------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .app-flow--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-10) var(--sp-6);
  }
}
/* A three-step sequence folds 2 + 1 at app.css's tablet step, leaving the
   last step alone in half a row; it stacks as one column instead, on the
   container's edges like every other grid (docs/design-system.md §1). */
@media (max-width: 1023px) {
  .app-flow--three { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------------------------
   2. CARDS — the cream card from app.css's worries block, without its
   hanging 「 indent (these titles are statements, not quotations).
--------------------------------------------------------------------- */
.guide-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}
.guide-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--bg-cream);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  min-width: 0;
}
.section-alt .guide-card { background: var(--bg-white); }
.guide-card-num {
  font-family: var(--font-en);
  font-size: var(--fs-caption);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: var(--ink-amber);
}
.guide-card-title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  text-wrap: balance;
  word-break: auto-phrase;
}
.guide-card-text {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-light);
}
.guide-card-text + .guide-card-text { margin-top: calc(var(--sp-1) * -1); }
.guide-card-text strong { color: var(--text-main); font-weight: var(--fw-bold); }
.guide-card-foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-warm);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-light);
}
.guide-card-foot a,
.guide-card-text a {
  color: var(--ink-sky);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 1023px) {
  .guide-cards { grid-template-columns: 1fr; gap: var(--sp-4); }
}
@media (max-width: 520px) {
  .guide-card { padding: var(--sp-5); }
}


/* ---------------------------------------------------------------------
   3. CHOOSER — one row per starting point. Situation on the left, the
   course to start with on the right; restacks on phones.
--------------------------------------------------------------------- */
.guide-chooser {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.guide-chooser-item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) auto minmax(0, 6fr);
  /* Top-aligned, so the situation shares its first line with the course
     it leads to in every row; centred, the offset changed row by row with
     the length of the note. */
  align-items: start;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8);
}
.guide-chooser-item + .guide-chooser-item { border-top: 1px solid var(--border-warm); }
.guide-chooser-now {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-bold);
  color: var(--text-main);
}
.guide-chooser-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: rgba(245, 158, 11, 0.14);
  color: var(--ink-amber);
  font-weight: var(--fw-bold);
  line-height: 1;
  /* centred on the situation's first line (--lh-body) */
  margin-top: calc((1em * var(--lh-body) - 32px) / 2);
}
.guide-chooser-then { min-width: 0; }
.guide-chooser-course {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-bold);
}
.guide-chooser-course a {
  color: var(--ink-sky);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.guide-chooser-note {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-light);
}
.guide-chooser-note a {
  color: var(--ink-sky);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  .guide-chooser-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-5);
  }
  .guide-chooser-arrow { width: 24px; height: 24px; margin-top: 0; transform: rotate(90deg); }
}


/* ---------------------------------------------------------------------
   4. COMPARE — the four courses. From 1024px up they are ONE table on one
   white surface: the row labels printed once in the first column
   (.guide-compare-labels), the four grades as column heads, a hairline
   between every row and column. It used to be four cards that each
   repeated all seven labels (28 labels for 7 facts) under a peach head
   band with blue level text — the warm-band-plus-blue recipe the rest of
   the site has been cleared of. Below 1024px a four-column table cannot
   restack, so each course becomes its own card again (labels shown,
   label column hidden) — the same cell recipe, the same white surface.
--------------------------------------------------------------------- */
.guide-compare {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
}
.guide-compare-labels { display: none; }
.guide-compare-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.guide-compare-head {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border-warm);
}
.guide-compare-grade {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-head);
  color: var(--text-main);
}
.guide-compare-grade small {
  margin-left: 0.2em;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-light);
}
.guide-compare-level {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-light);
}
.guide-compare-card > dl { margin: 0; }
.guide-compare-fact {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border-warm);
  min-width: 0;
}
.guide-compare-fact dt {
  margin: 0 0 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  color: var(--ink-quiet);
}
.guide-compare-fact dd {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-main);
  /* balance, as legal.css pairs it with auto-phrase: short cells break
     into even lines instead of stranding 「養成」 */
  text-wrap: balance;
  word-break: auto-phrase;
}
/* The fee in the site's one figure recipe (css/fee.css .fee-num): Montserrat
   800 in brand blue, the unit in ink. */
.guide-compare-fee {
  font-family: var(--font-en);
  font-size: var(--fs-h2);
  font-weight: var(--fw-head);
  line-height: var(--lh-num);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.guide-compare-fee-unit {
  margin-left: 0.15em;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--text-main);
}
/* Two links, stacked on the card's left edge: the course (the card's
   action, ink blue and bold) and under it, quieter, that grade's exam
   guide on /eiken/ — caption size, regular weight, secondary ink, so the
   eye lands on the course first. Stacked rather than side by side: a
   table column at 1024 is ~170px inside its padding, one link's width. */
.guide-compare-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-5) var(--sp-2);   /* the exam link's 44px box carries the rest */
}
.guide-compare-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-sky);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.guide-compare-exam {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.guide-compare-exam:hover { opacity: 1; color: var(--ink-sky); }
/* Centred under the table like index.php's .stat-note, so the fine print
   does not start 140px in from the grid it annotates. */
.guide-compare-note {
  max-width: var(--w-narrow);
  margin: var(--sp-6) auto 0;
  text-align: center;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-quiet);
  text-wrap: pretty;
  word-break: auto-phrase;
}
.guide-compare-note a {
  color: var(--ink-sky);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 1024px) {
  .guide-compare {
    grid-template-columns: 9.5rem repeat(4, minmax(0, 1fr));
    /* head + 7 facts + foot, shared by every column (subgrid) */
    grid-template-rows: repeat(9, auto);
    gap: 0;
    background: var(--bg-white);
    border: 1px solid var(--border-warm);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .guide-compare-labels,
  .guide-compare-card {
    display: grid;
    grid-row: span 9;
    grid-template-rows: subgrid;
    row-gap: 0;
    min-width: 0;
  }
  .guide-compare-card {
    border: 0;
    border-left: 1px solid var(--border-warm);
    border-radius: 0;
    overflow: visible;
  }
  .guide-compare-card > dl { display: contents; }
  .guide-compare-labels > span {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border-warm);
    font-size: var(--fs-caption);
    line-height: var(--lh-body-sm);
    font-weight: var(--fw-bold);
    color: var(--text-main);
  }
  .guide-compare-labels > .guide-compare-labels-foot { border-bottom: 0; }
  /* the label column says it once; each card's own <dt> stays for screen
     readers (the label column is aria-hidden) */
  .guide-compare-fact dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .guide-compare-foot { margin-top: 0; align-self: end; }
}
@media (max-width: 1023px) {
  /* two across on the container's edges, as the 逆算 cards below are */
  .guide-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 1023px) {
  /* 2-up cards are as narrow as 268px at 601: one token less inset (as
     .guide-card and .app-worry step down at ≤520) so the longest row-1 value
     stays whole */
  .guide-compare-head,
  .guide-compare-fact,
  .guide-compare-foot { padding-inline: var(--sp-4); }
}
@media (max-width: 600px) {
  .guide-compare { grid-template-columns: 1fr; }
}

/* 逆算 — the second half of the COMPARE band on the level guide — and
   試験の中身, the second half of the CHOOSER band: a section's worth of
   space above the header, so each reads as its own part. */
.guide-subsection { margin-top: var(--sp-section); }


/* ---------------------------------------------------------------------
   5. ROUTE MAP — 試験の中身 on the level guide: the /eiken/ guides' grade
   scale (css/eiken.css §5, printed by eiken_scale() from
   partials/eiken/bootstrap.php; the page loads eiken.css before this
   file). Its own margins are set for a reading column, where it follows a
   paragraph; here it follows a section header, which already carries the
   gap. The link to the /eiken/ hub closes the block like the homepage's
   「すべての合格者ストーリーを見る」 (home.css .success-cta).
--------------------------------------------------------------------- */
.guide-route .eiken-scale { margin: 0; }
.guide-route-cta {
  margin: var(--sp-block) 0 0;
  text-align: center;
}