/* home.css: homepage layout (package B, SITE-SPEC §2). Tokens only, no hex.
   Components come from site.css; this file only arranges them. */

/* Two white bands in a row (S2/S3, S5/S7, S9/S10): a hairline inside the container
   instead of a second full gap. */
.page-home .band--white + .band--white { padding-top: 0; }
.page-home .band--white + .band--white > .container { position: relative; padding-top: var(--section-pad); }
.page-home .band--white + .band--white > .container::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--color-border); }

/* S2 · Job cards (8 columns) and the portrait card (4 columns).
   DOM order: six cards, then the person. Phones show the person after the
   third card; tablets put it full width at the end. */
.home-jobs__grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (max-width: 767.98px) {
  .home-jobs__grid > .home-job:nth-child(n+4) { order: 2; }
  .home-jobs__person { order: 1; }
}
@media (min-width: 768px) {
  .home-jobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-jobs__person { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .home-jobs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-jobs__person { grid-column: 3; grid-row: 1 / span 3; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--space-5)); }
}
.home-job .card__label { display: flex; align-items: center; gap: 10px; }
.home-job .card__label::before { content: ""; flex: none; width: 16px; height: 4px; border-radius: 2px; background: var(--df-navy-800); }
/* a link label that wraps stays left-aligned (S2 cards are narrow at 992-1199 px) */
.page-home .card__foot .btn-link { text-align: left; }

/* Portrait card side by side (photo left) below 992 px */
@media (max-width: 991.98px) {
  .home-jobs__person .portrait { display: grid; grid-template-columns: clamp(96px, 26vw, 200px) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: var(--space-5); align-items: start; }
  .home-jobs__person .portrait > * { grid-column: 2; }
  .home-jobs__person .portrait__photo { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; }
  .home-jobs__person .portrait .btn-row { grid-column: 1 / -1; margin-top: var(--space-5); }
}
@media (max-width: 575.98px) {
  .home-jobs__person .portrait { padding: var(--space-5); }
}

/* S3 · Code-drawn preview panel for a proof tile (no gold); the dark base
   is kept for the light variant below */
.home-mini {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 16 / 9;
  padding: 20px 24px;
  background: var(--color-hero-bg);
  color: var(--color-hero-subtle);
}
.home-mini__kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--df-navy-300); }
.home-mini__name { font-size: 1.25rem; line-height: 1.2; font-weight: 600; color: var(--color-hero-text); }
.home-mini__meta { font-family: var(--font-mono); font-size: 12.5px; margin-bottom: 4px; }
.home-mini__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--color-on-dark-border); }
.home-mini__what { font-size: var(--fs-small); line-height: 1.3; color: var(--color-hero-text); }
.home-mini .chip { flex: none; }
/* Tile 2 until SCR-03 exists: the panel on a light surface */
.home-mini--light { background: var(--color-surface-alt); color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.home-mini--light .home-mini__kicker { color: var(--color-text-muted); }
.home-mini--light .home-mini__name, .home-mini--light .home-mini__what { color: var(--color-text-heading); }
.home-mini--light .home-mini__row { border-top-color: var(--color-border); }
.home-mini--light .chip { background: var(--color-surface); color: var(--color-brand); border-color: var(--color-border); }

/* S7 · Sector strip under the service cards */
.home-sectors { margin-top: var(--space-8); }
.home-sectors__image { margin-bottom: var(--space-6); }
.home-sectors__title { font-size: var(--fs-h4); margin-bottom: var(--space-4); }
.home-sectors__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin: 0; }
.home-sectors__list > li { margin: 0; }
.home-sectors__list a, .home-problems__list a { font-weight: 600; }
/* Touch targets of at least 44px (spec 7.8): 10px above and below each link
   line, with the list gaps cut back so the rhythm stays as it was. The bar
   marker moves down by the same 10px so it still lines up with the text. */
.home-sectors__list a, .home-problems__list a { display: inline-block; padding-block: 10px; }
.home-sectors__list > li::before, .home-problems__list > li::before { top: calc(.7em + 10px); }

/* S8 · Steps, then the one primary button and the price note */
.home-start .section-foot { margin-top: var(--space-7); }
.home-start__vat { margin: var(--space-4) 0 0; font-size: var(--fs-small); color: var(--color-text-muted); }

/* S10 · Two portrait cards, photo beside the name */
.home-team__grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .home-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-team .portrait { display: grid; grid-template-columns: clamp(88px, 22vw, 168px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--space-5); align-items: start; }
.home-team .portrait > * { grid-column: 2; }
.home-team .portrait__photo { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; }
.home-team .portrait__text { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .home-team .portrait { padding: var(--space-5); grid-template-rows: auto 1fr auto; }
  .home-team .portrait__photo { grid-row: 1 / span 2; }
  .home-team .portrait__text { grid-column: 1 / -1; margin-top: var(--space-5); }
}

/* S11 · Problem links in two columns */
.home-problems__list { max-width: 880px; margin: 0; }
.home-problems__list > li { margin-bottom: 0; }