/* ==========================================================================
   The Hmong Inc. — Housing & Community Development (program detail), v1 draft
   Device of its own: a two-column CASEWORK PATHWAY (what happens when someone
   walks in, as an earned numbered sequence) beside a sticky "start here" card,
   then a plain resource directory table and an eligibility FAQ.
   Reference: The Fresno Center's services IA (structure only, nothing visual).
   Light register, shared type scale. Extends styles.css.
   ========================================================================== */

.crumb {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--secondary); display: flex; gap: .55rem; align-items: center; margin: 0 0 1.6rem; flex-wrap: wrap;
}
.crumb a { color: var(--secondary); text-decoration: none; }
.crumb a:hover { color: var(--green-ink); }
.crumb span { color: var(--hair-strong); }
.crumb b { font-variation-settings: "wdth" 100, "wght" 700; color: var(--ink); }

.pgh { padding-block: clamp(52px, 7vw, 104px) clamp(36px, 4.5vw, 60px); }
.pgh__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: end; }
@media (max-width: 900px) { .pgh__grid { grid-template-columns: 1fr; gap: 2rem; } }
.pgh .d1 { font-size: clamp(2.35rem, 5.2vw, 4.2rem); }
.pgh__side { color: var(--secondary); max-width: 36ch; }

/* --- pathway + start-here card -------------------------------------------- */
.path { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 84px); align-items: start; }
@media (max-width: 940px) { .path { grid-template-columns: 1fr; gap: 2.4rem; } }
@media (min-width: 941px) { .startcard { position: sticky; top: 108px; } }

.steps { list-style: none; margin: clamp(24px,3vw,40px) 0 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: clamp(16px,2.4vw,30px);
  padding-block: clamp(18px,2.2vw,26px); border-top: 1px solid var(--hair); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps .n {
  font-family: var(--display); font-variation-settings: "wdth" 62, "wght" 900;
  font-size: 2.1rem; line-height: .9; color: var(--green); font-variant-numeric: lining-nums; letter-spacing: -.03em;
}
.steps h3 { font-family: var(--display); font-variation-settings: "wdth" 72, "wght" 800;
  text-transform: uppercase; font-size: 1.1rem; color: var(--ink); margin: 0 0 .4rem; }
.steps p { color: var(--secondary); font-size: 1rem; line-height: 1.55; margin: 0; }

.startcard__inner { background: var(--card); border-radius: 4px; padding: clamp(24px,3vw,36px); }
.startcard h2 { margin: 0 0 .8rem; }              /* .d3 governs size */
.startcard p { color: var(--secondary); margin: 0 0 1.2rem; }
.startcard dl { display: grid; gap: .5rem; margin: 0 0 1.4rem; }
.startcard dt { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--secondary); }
.startcard dd { margin: 0 0 .5rem; color: var(--ink); font-size: 1.02rem; }

/* --- resource directory ---------------------------------------------------- */
.dir { border-top: 1px solid var(--hair-strong); margin-top: clamp(28px,3.5vw,46px); }
.dir__row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr) auto;
  gap: clamp(16px,3vw,40px); align-items: baseline; padding-block: clamp(18px,2.2vw,26px);
  border-bottom: 1px solid var(--hair); }
@media (max-width: 760px) { .dir__row { grid-template-columns: 1fr; gap: .4rem; } }
.dir__what { font-family: var(--display); font-variation-settings: "wdth" 72, "wght" 800;
  text-transform: uppercase; font-size: 1.05rem; color: var(--ink); }
.dir__who { color: var(--secondary); font-size: 1rem; line-height: 1.5; }
.dir__how { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); white-space: nowrap; }

/* --- FAQ ------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--hair-strong); max-width: 74ch; margin-top: clamp(24px,3vw,40px); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; padding: 1.2rem 2.2rem 1.2rem 0; position: relative;
  font-family: var(--display); font-variation-settings: "wdth" 72, "wght" 800;
  text-transform: uppercase; font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .1rem; top: 50%; transform: translateY(-50%);
  font-family: var(--ui); font-weight: 700; font-size: 1.5rem; color: var(--green-ink); }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { color: var(--green-ink); }
.faq__a { margin: 0 0 1.3rem; color: var(--secondary); font-size: 1.02rem; line-height: 1.6; max-width: 64ch; }

/* --- split caption --------------------------------------------------------
   styles.css positions .split__note absolutely for the home page's breakout
   split. This page uses a plain two-column split, so the note detaches and
   hangs below the photo. Put it back in flow, fixed under the image. */
.split .split__media { display: flex; flex-direction: column; }
.split .split__media img { aspect-ratio: 4 / 3; border-radius: 4px 4px 0 0; }
.split .split__note {
  position: static; inset: auto; max-width: none; margin: 0;
  border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 4px 4px;
  box-shadow: none; background: var(--card);
}