/* =====================================================================
   fee.css — the site's one fee table
   ---------------------------------------------------------------------
   Loaded by /payment/ and the four course pages (partials/course-page.php).
   Both print the same numbers — 入会金, the monthly fee, what a lesson is —
   and they used to print them in two different panels, each built from a
   warm band carrying a display figure, a ruled strip, and a cream or warm
   closing band. Three surfaces and three type sizes inside one section, with
   brand-blue figures sitting on orange-tinted ground.

   This is the replacement, and it has exactly one of everything:
     - one surface   — a white panel on the site's card chrome
                       (border-warm hairline, --r-lg, --shadow-sm)
     - one cell      — label, value, note, top-aligned, same padding
     - one figure    — Montserrat 800 in --primary, unit and cycle in ink
     - one rule      — the border-warm hairline between cells and rows

   Markup:
     <div class="fee">
       <div class="fee-row">                       four cells to a row
         <dl class="fee-cell">
           <dt class="fee-label">月謝</dt>
           <dd class="fee-value"><span class="fee-num">17,600</span>
             <span class="fee-unit">円</span><span class="fee-cycle">/月</span></dd>
           <dd class="fee-note">毎月のお支払い・税込</dd>
         </dl>
         …
       </div>
       <div class="fee-row fee-row--note">         one figure + its explanation
         <dl class="fee-cell">…</dl>
         <div class="fee-cell fee-cell--prose"><p class="fee-prose">…</p></div>
       </div>
     </div>

   A value that is a word rather than an amount (「週1回 45分」) goes in
   .fee-text instead of .fee-num and sits on the same baseline.

   Ramp: 4 across ≥1024 · 2 across 521–1023 · 1 across ≤520. A --note row
   stacks at 1023 with its explanation running on under the figure, so the
   figure never sits in half a row with an empty half beside it.
   ===================================================================== */

.fee {
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.fee-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fee-row + .fee-row { border-top: 1px solid var(--border-warm); }

.fee-cell {
  min-width: 0;
  margin: 0;
  padding: 1.5rem 1.75rem 1.6rem;
}
.fee-cell + .fee-cell { border-left: 1px solid var(--border-warm); }
.fee-cell dd { margin: 0; }
/* The prose's 14/1.9 line box puts its first baseline 4px below the 13/1.6
   label's, so the prose cell takes 1.25rem off the top instead of 1.5rem
   (≥1024 only; the stacked layouts reset it to 0) and its first line sits
   on the label's baseline. */
.fee-row--note .fee-cell--prose { grid-column: span 3; padding-top: 1.25rem; }

/* The registered mark — same recipe as the rest of the site, so 英検® in a
   label does not ride the UA's vertical-align:super and add leading. */
.fee sup {
  font-size: 0.6em;
  vertical-align: baseline;
  position: relative;
  top: -0.45em;
  line-height: 0;
}

.fee-label {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  color: var(--text-main);
}

/* The value line reserves the figure's height in every cell and drops its
   one line to the bottom of that box, so a word value (「オンライン」) lands
   on the same baseline as the --fs-stat figure beside it instead of floating
   at the top of a taller cell. */
.fee-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: flex-end;
  min-height: 2rem;
  margin: 0.45rem 0 0.25rem;
}
.fee-num {
  font-family: var(--font-en);
  font-size: var(--fs-stat);
  font-weight: var(--fw-head);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.fee-unit {
  margin-left: 0.15em;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--text-main);
}
.fee-cycle {
  margin-left: 0.1em;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--text-light);
}
.fee-text {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--text-main);
  word-break: auto-phrase;
}
.fee-note {
  display: block;
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--text-light);
}
/* Explanations and fine print. Top-aligned like every other cell, so the
   first line sits level with the figure cell's label. */
.fee-prose {
  margin: 0;
  max-width: var(--w-measure);
  font-size: var(--fs-body-md);
  line-height: 1.9;
  color: var(--text-light);
}
.fee-prose + .fee-prose { margin-top: 0.5rem; }
.fee-prose strong {
  font-weight: 700;
  color: var(--text-main);
}
.fee-prose a {
  font-weight: var(--fw-bold);
  color: var(--ink-sky);   /* the site's in-text link ink (AA on white) */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.fee-prose a:hover { opacity: 1; color: var(--text-main); }

@media (max-width: 1023px) {
  .fee-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fee-row .fee-cell:nth-child(odd) { border-left: 0; }
  .fee-row .fee-cell:nth-child(n + 3) { border-top: 1px solid var(--border-warm); }

  /* A figure and its explanation read as one cell: the prose runs on under
     the note with no rule and no second top padding. */
  .fee-row--note { grid-template-columns: 1fr; }
  .fee-row--note .fee-cell { padding-bottom: 0.75rem; }
  .fee-row--note .fee-cell.fee-cell--prose {
    grid-column: auto;
    border-left: 0;
    padding-top: 0;
    padding-bottom: 1.6rem;
  }
}

@media (max-width: 520px) {
  .fee-row { grid-template-columns: 1fr; }
  .fee-cell { padding: 1.25rem 1.35rem 1.35rem; }
  .fee-row .fee-cell,
  .fee-row .fee-cell:nth-child(odd) { border-left: 0; }
  .fee-row .fee-cell + .fee-cell { border-top: 1px solid var(--border-warm); }
  .fee-row--note .fee-cell { padding-bottom: 0.6rem; }
  .fee-row--note .fee-cell.fee-cell--prose {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 1.35rem;
  }
}