/* ======================================================================
   Persona hero master (ph-*): the split hero shared by the persona pages (Homeowners, Contractors).
   Extracted 2026-10-15 from the Homeowners hero (homeowners.html #hero, css/homeowners.css .ho-hero*, .ho-split,
   .ho-photo, .ho-chip, .ho-cta-card) so both pages render the same hero from one source.
   Link after css/site.css (and css/list-icons.css, css/workflow.css), before the page stylesheet.
   How-to, skeleton and the ho-* mapping: docs/PERSONA-HERO.md.
   The card builds on Home's block card (.cta-card .cta-card--primary in css/site.css: surface colour, radius, hover,
   focus ring); everything inside it is restated here so the ph-* children do not depend on the .cta-card__* rules.
   ====================================================================== */

.ph-hero {
  /* dials: the Homeowners values; a page may override them on its own .ph-hero */
  --ph-hero-top: calc(var(--pn-header-height) + var(--pn-space-128)); /* 200: the split starts at y 200, header 72 fixed over it */
  --ph-hero-gap: var(--pn-space-32);          /* eyebrow / title / lead / actions */
  --ph-hero-actions-gap: var(--pn-space-24);  /* card to the text link */
  --ph-hero-rise: 600ms;                      /* entrance: rise 24 (site.css @keyframes rise) */
  --ph-hero-rise-step: 80ms;                  /* stagger between the text column's children */
  --ph-hero-photo-delay: 160ms;
  --ph-hero-eyebrow-lh: 18.2px;               /* one eyebrow line (14 x 1.3): the photo's top inset, with --ph-hero-gap */
  --ph-hero-link-lh: 23.4px;                  /* one text-link line (18 x 1.3): the photo's bottom inset, with --ph-hero-actions-gap */
  --ph-cta-pad: var(--pn-space-32);
  --ph-cta-row-gap: var(--pn-space-16);
  --ph-cta-label-size: 40px;
  padding-top: var(--ph-hero-top);
}

/* 6 + 6 split on the 1280 grid: 608 + 64 + 608; the photo stretches to the text column's height (owner 2026-10-15) */
.ph-hero__split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--pn-layout-gutter); align-items: stretch;
}
.ph-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ph-hero-gap); }

/* eyebrow (optional): sentence case at 14/500, +2% tracking, text/secondary, no dot unless --dot */
.ph-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0;
  font: var(--pn-type-ui-eyebrow); font-size: var(--pn-type-ui-eyebrow-size); font-weight: 500; line-height: 1.3; letter-spacing: 0.02em;
  color: var(--pn-color-text-secondary);
}
.ph-hero__eyebrow--dot { gap: var(--pn-space-8); }
.ph-hero__eyebrow--dot::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pn-color-text-muted);
}

/* title: .t-display-hero (tokens) as set on the element; lead: .t-lead in text/secondary */
.ph-hero__lead { color: var(--pn-color-text-secondary); text-wrap: pretty; }

/* actions: the CTA card, the text link under it; the card fills the 608 text column */
.ph-hero__actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--ph-hero-actions-gap);
  width: 100%; align-self: stretch;
}
.ph-hero__link { font: var(--pn-type-ui-label-l); } /* on .link */

/* CTA card, on .cta-card.cta-card--primary: caption / label + arrow / hairline + proof points */
.ph-cta-card {
  width: 100%; min-height: 0; padding: var(--ph-cta-pad);
  grid-template-columns: 1fr auto; grid-template-rows: auto auto auto;
  column-gap: var(--pn-space-24); row-gap: var(--ph-cta-row-gap);
}
.ph-cta-card__caption {
  grid-row: 1; grid-column: 1 / -1;
  font: var(--pn-type-ui-label-s); letter-spacing: 0.02em; text-transform: none; opacity: 0.72;
}
.ph-cta-card__label {
  grid-row: 2; grid-column: 1; align-self: center;
  font: 800 var(--ph-cta-label-size)/1.1 var(--pn-font-display); letter-spacing: -0.025em; /* headline face at its heaviest loaded weight */
}
.ph-cta-card__action { /* the arrow; the whole card is the link */
  grid-row: 2; grid-column: 2; align-self: center;
  font: 400 var(--ph-cta-label-size)/1.1 var(--pn-font-sans);
  transition: transform 160ms ease-out;
}
.ph-cta-card:hover .ph-cta-card__action { transform: translateX(4px); }
/* owner 2026-10-31: the origin fill moved to site.css as .cta-card__fill so the band cards get it too; only the
   points hairline flip stays here. */
.ph-cta-card .ph-cta-card__points { transition: border-color 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.cta-card--primary.is-filled .ph-cta-card__points { border-top-color: rgba(11, 14, 20, 0.18); }
.ph-cta-card__points {
  grid-row: 3; grid-column: 1 / -1; margin: var(--pn-space-8) 0 0; padding: 20px 0 0; list-style: none;
  border-top: 1px solid rgba(11, 14, 20, 0.14);
  display: flex; flex-direction: column; gap: var(--pn-space-8);
  font: var(--pn-type-ui-label); opacity: 0.8;
}
.ph-cta-card__points li { display: flex; align-items: center; gap: var(--pn-space-12); } /* items are .li-item (css/list-icons.css) */
/* --ink: icons follow the card's dark text. On the warm-white primary card the accent stroke fails
   (green #46c88a 1.86:1; the neutral accent is the card's own colour, 1:1). */
.ph-cta-card__points--ink .li-ico { stroke: currentColor; }

/* photo: straight on the page, card radius, no border, cover crop. It takes the row's height (the text column
   decides it) and never adds to it: the img is absolute, so its intrinsic size cannot grow the row. */
.ph-hero__photo {
  position: relative; align-self: stretch; min-height: 0;
  margin: 0; border-radius: var(--pn-radius-card); overflow: hidden;
  background: var(--pn-color-background-raised);
}
.ph-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* owner 2026-10-15: the photo's top sits on the headline, not the eyebrow, and its bottom on the CTA card, not the text link.
   Each inset exists only when that element does (Homeowners has no eyebrow). */
.ph-hero__split:has(.ph-hero__eyebrow) .ph-hero__photo { margin-top: calc(var(--ph-hero-eyebrow-lh) + var(--ph-hero-gap)); }
.ph-hero__split:has(.ph-hero__link) .ph-hero__photo { margin-bottom: calc(var(--ph-hero-link-lh) + var(--ph-hero-actions-gap)); }

/* entrance on load, as Home's hero copy: rise 24 / 600ms, the text column staggered 80ms by position, photo at 160 */
.js .ph-hero__rise { animation: rise var(--ph-hero-rise) var(--pn-ease-out) both; }
.js .ph-hero__text > .ph-hero__rise:nth-child(2) { animation-delay: calc(var(--ph-hero-rise-step) * 1); }
.js .ph-hero__text > .ph-hero__rise:nth-child(3) { animation-delay: calc(var(--ph-hero-rise-step) * 2); }
.js .ph-hero__text > .ph-hero__rise:nth-child(4) { animation-delay: calc(var(--ph-hero-rise-step) * 3); }
.js .ph-hero__text > .ph-hero__rise:nth-child(5) { animation-delay: calc(var(--ph-hero-rise-step) * 4); }
.js .ph-hero__photo.ph-hero__rise { animation-delay: var(--ph-hero-photo-delay); }

@media (prefers-reduced-motion: reduce) {
  .js .ph-hero__rise { animation: none; }
  .ph-cta-card:hover .ph-cta-card__action { transform: none; }
  .ph-cta-card .ph-cta-card__points { transition: none; }
}

/* ======================================================================
   Responsive tiers (docs/BUILD-CONTRACT-responsive-2026-11-04.md, builder 2A). The hero starts one section gap under the
   header at every tier. Laptop and tablet keep the 6 + 6 split (photo still headline-top to card-bottom) with a
   smaller card label; phone stacks: copy, then the photo at a fixed 4:5 crop (it can no longer borrow the text column's height),
   one 48 below the text link.
   ====================================================================== */

/* ---- responsive: laptop (2026-11-04) ---- */
/* the 40 label left "off" alone on a second line in the ~450 card at 1024 */
@media (max-width: 1279px) {
  .ph-hero { --ph-cta-label-size: 32px; }
}

/* ---- responsive: tablet (2026-11-04) ---- */
@media (max-width: 1023px) {
  .ph-hero {
    --ph-hero-top: calc(var(--pn-header-height) + var(--section-gap));
    --ph-cta-pad: var(--pn-space-24);
  }
}

/* ---- responsive: phone (2026-11-04) ---- */
@media (max-width: 767px) {
  .ph-hero { --ph-cta-label-size: 28px; }
  .ph-hero__split { grid-template-columns: minmax(0, 1fr); row-gap: var(--pn-space-48); }
  .ph-hero__photo { aspect-ratio: 4 / 5; }
  .ph-hero__split:has(.ph-hero__eyebrow) .ph-hero__photo { margin-top: 0; }
  .ph-hero__split:has(.ph-hero__link) .ph-hero__photo { margin-bottom: 0; }
}