/* Liberty Dayton RMC: two hero directions on the approved d-blue-white header (pd-15t1.3, Iris, 2026-10-31).
   Loads after styles.css. Every rule is scoped to .hero--photo (direction 1), .hero--card (direction 2) or the shared
   .hband options group, so nothing here touches the header, the menus or the composite's own hero children.
   Both pages keep the class "hero" on the section because app.js (v4, feat/pd-15t1.2) finds the hero by that class
   for the phone bar swap. The composite's .hero::before photo and ::after grade are switched off and redrawn per direction.
   Order at every width (Terry 2026-10-31): eyebrow, headline, "What brings you in?", the four options as a 2x2 grid of
   small tiles (icon on top, label underneath), the full-width red Emergency Care, then the paragraph. No Book button.
   Every value comes from tokens.css or qframe-tokens.css, except the proposed tokens in the block below (playbook C1). */

:root {
  /* Proposed, this QFrame only. The playbook session adopts or drops them. */
  --fs-hero-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);   /* 40 to 72 px: one step above --fs-h1 (38 to 60) for the homepage hero alone. h2 (30 to 42) stays at least 25 percent below it at every width (C3) */
  --hero-card-overlap-phone: var(--space-5);    /* 32 px: how far the photo card crosses the hero's lower edge on phones */
  --hero-photo-aspect-phone: 16 / 10;           /* the photo card on phones */
}

/* ---------- The options, shared by both directions (playbook 05.9's five situation tiles, one tap each). Four small white tiles
   at the one radius, a blue job icon on top and the label underneath, in two columns; the Emergency Care tile is the one
   filled tile, in the emergency red (Terry 2026-10-30), full width and last (Terry 2026-10-31). ---------- */
.hband { position: relative; z-index: 1; margin-top: var(--space-4); color: var(--fg-on-dark); }
.hband__label { display: block; margin: 0 0 var(--space-3); font-size: var(--fs-h3); font-weight: var(--fw-display); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--fg-on-dark); }
.hband__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); grid-template-rows: 1fr 1fr auto; }   /* rows one and two share the tallest tile height */
.hband__list > li { display: flex; }   /* the tile fills its cell, so both tiles in a row stand the same height */
.hband__list > li:last-child { grid-column: 1 / -1; }
.htile { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); min-height: var(--strip-tile-min); padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-light); color: var(--fg-on-light); font-weight: var(--fw-strong); font-size: var(--fs-body-sm); line-height: var(--lh-tight); transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); }
.htile:hover { background: var(--bg-pale); color: var(--fg-on-light); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.htile .htile__icon { box-sizing: content-box; width: 1.25rem; height: 1.25rem; padding: var(--space-1); border-radius: var(--radius-full); background: var(--bg-pale); color: var(--ldr-primary-600); }
.htile__text { display: flex; flex-direction: column; gap: 2px; }
.htile__sub { font-weight: var(--fw-body); font-size: var(--fs-eyebrow); }
/* Emergency Care, the full-width red button as before: icon, label and sub side by side, the arrow at the end */
.htile--er { flex-direction: row; justify-content: flex-start; text-align: left; padding: var(--space-2) var(--space-3); background: var(--bg-emergency); color: var(--fg-on-dark); }
.htile--er:hover { background: var(--bg-emergency-hover); color: var(--fg-on-dark); }
.htile--er .htile__icon { background: var(--ldr-neutral-15); color: var(--fg-on-dark); }
.htile--er .htile__text { align-items: flex-start; }
.htile--er .htile__sub { color: var(--fg-on-dark-muted); }
.htile--er .htile__go { margin-left: auto; width: 1.25em; height: 1.25em; color: var(--fg-on-dark); }

/* ---------- Direction 1: the photo leads. The clinician photo runs edge to edge on the hospital-blue ground under the 06.1
   grade (the photo at 55 percent, then the two-direction gradient: blue at the top left, navy at the bottom right), the
   photo is mirrored so the nurse and patient sit on the right, and the copy and the options sit on the left where the room is quiet. ---------- */
.hero--photo { background: var(--bg-primary); color: var(--fg-on-dark); padding-bottom: var(--space-6); }
.hero--photo::before, .hero--photo::after { content: none; }
.hp__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hp__photo { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% 50%; opacity: var(--ldr-photo-under-grade); transform: scaleX(-1); }   /* mirrored: the image layer only, never the text. object-position runs before the flip, so x% here sits at (100 - x)% on screen */
.hp__grade { position: absolute; inset: 0; background: none; }
.hp__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
.hp__copy { max-width: 36rem; }
.hp__copy h1 { font-size: var(--fs-hero-display); color: var(--fg-on-dark); margin: 0; }
.hp__lead { font-size: var(--fs-body); color: var(--fg-on-dark); max-width: 32rem; margin: var(--space-4) 0 0; }
@media (min-width: 48em) { .hp__lead { font-size: var(--fs-body-lg); } }
@media (min-width: 64em) {
  .hp__photo { object-position: 75% 30%; }
  .hp__grade { background: none; }
  .hp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-6); }
  .hp__copy { grid-column: 1; padding-top: var(--space-4); }
}

/* ---------- Direction 2: a white ground, the headline in navy, the options as solid navy tiles straight on the white (no panel around them), and the photo
   as the one feature card in full colour beside the copy on computers; on phones the card comes last and crosses the hero's
   lower edge into the next section (one overlap, never over copy). ---------- */
.hero--card { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; z-index: var(--z-above); background: var(--bg-light); color: var(--fg-on-light-body); padding-bottom: 0; }
.hero--card::before, .hero--card::after { content: none; }
.hc__copy { padding-inline: var(--space-container); }
.hc__copy h1 { font-size: var(--fs-hero-display); color: var(--fg-on-light); margin: 0; }
.hc__lead { font-size: var(--fs-body); color: var(--fg-on-light-body); max-width: 32rem; margin: var(--space-4) 0 0; }
.hero--card .hero__accent path { stroke: var(--ldr-underline-on-light); }
.hero--card .hband__label { color: var(--fg-on-light); }
.hc__figure { position: relative; z-index: 2; margin: var(--space-5) 0 calc(-1 * var(--hero-card-overlap-phone)); padding-inline: var(--space-container); }
.hc__card { display: block; width: 100%; height: auto; aspect-ratio: var(--hero-photo-aspect-phone); object-fit: cover; object-position: 32% 50%; border-radius: var(--radius-md); box-shadow: var(--shadow-4); }
@media (min-width: 48em) { .hc__lead { font-size: var(--fs-body-lg); } }
@media (min-width: 64em) {
  .hero--card { grid-template-columns: minmax(var(--space-container), 1fr) minmax(0, calc(var(--container-max) * 0.54)) minmax(0, calc(var(--container-max) * 0.46)) minmax(var(--space-container), 1fr); padding-bottom: var(--space-6); }
  .hc__copy { grid-column: 2; grid-row: 1; padding: var(--space-4) var(--space-6) 0 0; }
  .hc__figure { grid-column: 3; grid-row: 1; align-self: stretch; display: flex; margin: var(--space-4) 0 0; padding: 0; }
  .hc__card { height: 100%; aspect-ratio: auto; }
}
.htile:not(.htile--er) { justify-content: flex-start; }   /* icons line up across a row, as in the header grid */

/* Terry 2026-10-31: tiles carry a bold title and a smaller descriptor, icons about twice the size (2.5rem plate, was 1.25rem). */
.htile:not(.htile--er) .htile__icon { width: 2.5rem; height: 2.5rem; padding: var(--space-1); }
.htile:not(.htile--er) .htile__text { gap: var(--space-1); align-items: center; }
.htile:not(.htile--er) .htile__sub { font-size: var(--fs-body-sm); line-height: var(--lh-tight); color: var(--fg-on-light-body); }
.htile:not(.htile--er) .htile__text > span:first-child { font-size: var(--fs-body); font-weight: var(--fw-display); }
.htile--er .htile__text > span:first-child { font-weight: var(--fw-strong); }
/* Direction 2: solid navy tiles, white icon and text, the one radius. */
.hero--card .htile:not(.htile--er) { background: var(--bg-navy); color: var(--fg-on-dark); }
.hero--card .htile:not(.htile--er):hover { background: var(--bg-navy); color: var(--fg-on-dark); }
.hero--card .htile:not(.htile--er) .htile__icon { background: transparent; color: var(--fg-on-dark); }
.hero--card .htile:not(.htile--er) .htile__sub { color: var(--fg-on-dark-muted); }
@media (max-width: 30em) { .htile:not(.htile--er) { padding: var(--space-2) var(--space-1); } }
.htile:not(.htile--er) .htile__sub { text-wrap: balance; }   /* two-line descriptors split evenly, never one word alone */

/* Terry 2026-10-31: on phones the hero copy is centered (eyebrow without its dash mark, headline, label, paragraph);
   the tiles and Emergency Care stay full width. Computers are unchanged. */
@media (max-width: 63.99em) {
  .hp__copy, .hc__copy { text-align: center; }
  .hp__copy .eyebrow::before, .hc__copy .eyebrow::before { display: none; }
  .hp__copy .eyebrow, .hc__copy .eyebrow { text-wrap: balance; }
  .hp__lead, .hc__lead { margin-inline: auto; }
}
.hp__lead, .hc__lead { text-wrap: balance; }   /* even lines at every width, no word alone at the end */
.htile--er .htile__sub { text-wrap: balance; }   /* the long line splits evenly on phones */
.nobr { white-space: nowrap; }
@media (max-width: 24em) { .htile--er { padding-inline: var(--space-2); gap: var(--space-1); } .htile--er .nobr { white-space: normal; } }   /* 360 wide: two lines; the hyphen may break so no lone word forms */