/* LHR layout fixes (6.6). Two things the client asked for, kept apart from the approved stylesheets:
   1. Paragraphs run the full width of their column (the 64ch / 72ch caps are lifted everywhere
      except blog articles and the footer line, which keep a readable measure).
   2. The About page hero photo is a wide landscape slot, not a narrow 9:16 column. */

/* 1. full-width copy */
p,
.sec__lead,
.hero__lead, .hero__reply,
.phero__lead, .phero__note,
.sec__head--row .sec__lead, .sec--everyone .sec__lead, .sec--confidence .sec__lead,
.services__foot, .plans__foot,
.sec__cta-text, .cta__text, .contact__note,
.intro__text, .step p, .story__body p:not(.eyebrow) { max-width: none; }
.sec__head { max-width: none; }
.sec__head--row .sec__lead { flex: 1 1 320px; }
.prose p { max-width: 68ch; }
.ftr__line { max-width: 40ch; }

/* 2. About hero: landscape photo, full column width */
.phero__media--wide { width: 100%; max-width: none; justify-self: stretch; }
.phero__media--wide .lhr-media { aspect-ratio: 4 / 3; }
.phero__media--wide .lhr-media img, .phero__media--wide .lhr-media video { object-position: center 30%; }
@media (min-width: 1001px) {
	.phero__in:has(.phero__media--wide) { grid-template-columns: minmax(300px, 34rem) minmax(0, 1.15fr); }
}
@media (max-width: 1000px) {
	.phero__media--wide .lhr-media { aspect-ratio: 16 / 10; }
}

/* 3. Hair replacement for men: the process photo takes the left half, the five steps the right half (6.6.1). */
@media (min-width: 901px) {
	#process.sec--steps .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-7); }
	#process.sec--steps .steps, #process.sec--steps .sec__cta { grid-column: 2; }
	#process.sec--steps .how__media { grid-column: 1; grid-row: 2 / span 2; align-self: start; width: 100%; max-width: 420px; justify-self: center; }
	#process.sec--steps .how__media .lhr-media { aspect-ratio: 4 / 5; }
}

/* 4. Phones: one photo or video per screen in every carousel, as big as the screen allows (6.6.1).
   Every slot is the same full-width 4:5 frame; a wide before/after photo is shown whole inside it. */
@media (max-width: 640px) {
	body .hero .rail__item, body .phero .rail__item, body .results__rail .rail__item, body .mcar__item,
	body .rail__track:has(.lhr-fit) > .rail__item, body .mcar__track:has(.lhr-fit) > .mcar__item,
	body .rail__track:has(.lhr-fit) > .rail__item:not(:has(> .lhr-fit)), body .mcar__track:has(.lhr-fit) > .mcar__item:not(:has(> .lhr-fit)) { flex: 0 0 calc(100vw - 2 * var(--gutter)); }
	body .hero .rail__item > .lhr-media, body .phero .rail__item > .lhr-media, body .results__rail .rail__item > .lhr-media, body .mcar__item > .lhr-media,
	body .rail__item:has(> .lhr-fit) > .lhr-fit, body .mcar__item:has(> .lhr-fit) > .lhr-fit { width: 100%; aspect-ratio: 4 / 5; height: auto; }
	body .rail__item > .lhr-fit img, body .mcar__item > .lhr-fit img { object-fit: contain; }
}