/* Home page-specific layout. Scoped: enqueued only on the front page.
   Mirrors the <style> block from design-reference/src/home.body.html. */

.home-hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; }
.home-hero__img { position: absolute; inset: 0; }
/* The hero box is the full section; the photograph arrives at whatever aspect it
   was shot at. cover crops rather than letterboxes, and the scrim (next rule,
   later in the DOM) paints over it. */
.home-hero__img img { width: 100%; height: 100%; object-fit: cover; }
/* Two layers, two jobs. The linear scrim sets the mood and anchors the bottom
   edge; it deliberately stays light in the middle so the photograph survives.
   It cannot carry the text as well: the h1 band lands on blown gold specular
   (pure #FFF), which needs ~0.64 uniform ink to clear AA-large 3:1 — across
   the middle of the frame that would drown the picture.
   So the reading contrast comes from the vignette below instead. */
.home-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,26,24,0.20) 0%, rgba(27,26,24,0.18) 45%, rgba(27,26,24,0.92) 100%); }
/* Darkens only behind the copy, and rides on .home-hero__inner so it tracks the
   text block instead of a hardcoded height — the h1 sits at 33-65% of the hero
   on desktop but 19-52% on mobile, so a fixed position on the scrim would drift.
   Fades to zero inside the container, which is capped at --mv-maxw, so on wide
   viewports the photograph stays untouched at the edges. */
.home-hero__inner { position: relative; width: 100%; text-align: center; padding-block: var(--mv-s12); background: radial-gradient(ellipse 62% 62% at 50% 36%, rgba(27,26,24,0.88) 0%, rgba(27,26,24,0.80) 55%, rgba(27,26,24,0) 100%); }
.home-hero__ctas { display: flex; flex-direction: column; gap: var(--mv-s3); margin-top: var(--mv-s8); }
.home-hero__meta { position: absolute; top: var(--mv-s6); left: var(--mv-gutter); }
.home-hero__num { position: absolute; top: var(--mv-s6); right: var(--mv-gutter); }

.home-strip { margin-bottom: var(--mv-s12); }
.home-strip__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--mv-s4); }
.home-strip__title { display: flex; align-items: baseline; gap: var(--mv-s3); }
.home-strip__title .num { font-family: var(--mv-serif); font-style: italic; font-weight: 300; font-size: 1.375rem; color: var(--mv-highlight); }
.home-strip__title h3 { font-family: var(--mv-serif); font-weight: 400; font-size: 1.625rem; margin: 0; color: var(--mv-default); }
/* min-width:0 + max-width:100% cap the rail box; overscroll-behavior-x:contain
   keeps a swipe inside the rail so it can't pan the page on mobile. */
.home-strip__items { display: flex; gap: var(--mv-s4); min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory; }
.home-strip__items::-webkit-scrollbar { height: 0; }
.home-strip__items > .mv-card { flex: 0 0 46%; scroll-snap-align: start; }

.home-signature__media { aspect-ratio: 4/5; margin-bottom: var(--mv-s6); overflow: hidden; }
/* The block is a fixed 4/5 box but the only global img rule is max-width:100%,
   so the piece's photograph would otherwise keep its own aspect inside it. Same
   treatment as .mv-card__media img. */
.home-signature__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .home-hero__ctas { flex-direction: row; justify-content: center; }
  .home-strip__items { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .home-strip__items > .mv-card { flex: none; }
}
@media (min-width: 1024px) {
  .home-hero__inner { padding-block: var(--mv-s20); }
  .home-strip__items { grid-template-columns: repeat(5, 1fr); }
  .home-signature { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--mv-s16); align-items: center; }
  .home-signature__media { margin-bottom: 0; }
}