/* ==========================================================================
   Mera Pets — home.css
   §10 Homepage section layouts (hero, proof strip, statements, plan teaser).
   Design system v1.0.
   ========================================================================== */

/* --- §4.6 Statement with accent tail -------------------------------- */
.mp-statement { font-size: var(--mp-t-d2); max-width: 22ch; }
.mp-statement em {
  font-style: normal; color: var(--chapter-accent);
  font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 1;
}

/* Section header block (eyebrow + statement + optional lede) */
.mp-section-head { display: grid; gap: var(--mp-s-4); max-width: 760px; margin-bottom: var(--mp-s-12); }
.mp-section-head--split { grid-template-columns: 7fr 5fr; gap: var(--mp-s-10); max-width: none; align-items: end; }
.mp-section-head--split .mp-lede { margin-top: var(--mp-s-2); }
.mp-hero { color: var(--mp-ink); }
@media (max-width: 767px) { .mp-section-head--split { grid-template-columns: 1fr; } }

/* --- §10.1 Hero ------------------------------------------------------ */
.mp-hero {
  position: relative; overflow: hidden;
  min-height: min(92vh, 940px); display: flex; align-items: flex-end;
  background: var(--mp-bone);
}
.mp-hero__media { position: absolute; inset: 0; z-index: 0; }
.mp-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.mp-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(242,238,230,.95) 0%, rgba(242,238,230,.62) 8%, rgba(242,238,230,0) 20%),
    linear-gradient(90deg, rgba(242,238,230,.98) 0%, rgba(242,238,230,.95) 32%, rgba(242,238,230,.70) 47%, rgba(19,18,16,.58) 60%, rgba(19,18,16,.86) 100%);
}
.mp-hero__inner {
  position: relative; z-index: 2; width: 100%; padding-top: 140px; padding-bottom: clamp(56px, 8vw, 120px);
}
.mp-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-template-rows: 1fr auto; gap: var(--mp-s-8); min-height: min(58vh, 560px); }
.mp-hero__kicker { grid-column: 8 / span 5; grid-row: 1; text-align: left; align-self: start; }
.mp-hero__kicker .mp-eyebrow { margin-bottom: var(--mp-s-3); color: rgba(251,249,245,.74); }
.mp-hero__kicker .mp-eyebrow { max-width: none; }
.mp-hero__kicker p:not(.mp-eyebrow) { font-size: var(--mp-t-h4); color: var(--mp-porcelain); max-width: 22ch; line-height: 1.35; }
.mp-hero__head { grid-column: 1 / span 7; grid-row: 2; }
.mp-hero__head h1 { font-size: var(--mp-t-d1); max-width: 18ch; }
.mp-hero__sub { grid-column: 8 / span 5; grid-row: 2; }
.mp-hero__sub p { color: rgba(251,249,245,.86); max-width: 40ch; }
.mp-hero__cta { margin-top: var(--mp-s-6); display: flex; gap: var(--mp-s-3); flex-wrap: wrap; }
.mp-hero__cta .mp-btn--ghost { color: var(--mp-porcelain); }

@media (max-width: 1023px) {
  .mp-hero { min-height: auto; flex-direction: column; align-items: stretch; }
  .mp-hero__inner { padding-top: var(--mp-s-8); padding-bottom: var(--mp-s-10); }
  .mp-hero__media { position: relative; height: 46vw; min-height: 320px; order: -1; }
  .mp-hero__grid { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; gap: var(--mp-s-6); }
  .mp-hero__kicker, .mp-hero__head, .mp-hero__sub { grid-column: 1; grid-row: auto; }
  .mp-hero__kicker p:not(.mp-eyebrow), .mp-hero__sub p { color: var(--mp-stone-600); }
  .mp-hero__kicker .mp-eyebrow { color: var(--mp-stone-600); }
  .mp-hero__cta .mp-btn--ghost { color: var(--mp-text-link); }
  .mp-hero__media::after { background: linear-gradient(180deg, rgba(242,238,230,0) 40%, rgba(242,238,230,.92) 100%); }
}

/* --- §10.2 Proof strip ----------------------------------------------- */
.mp-proof { background: var(--mp-porcelain); }
.mp-proof__inner {
  min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: var(--mp-s-6);
  font-family: var(--mp-font-mono); font-size: var(--mp-t-micro); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mp-stone-600);
}
.mp-proof__inner span { display: inline-flex; align-items: center; gap: 8px; }
.mp-proof__inner .mp-icon { color: var(--mp-ember); }
@media (max-width: 767px) {
  .mp-proof__inner { flex-wrap: wrap; padding-block: var(--mp-s-5); gap: var(--mp-s-3); justify-content: flex-start; }
}

/* --- Section vertical rhythm ----------------------------------------- */
.mp-section { padding-block: var(--mp-section-y); }
.mp-section--alt { background: var(--mp-bg-alt); }
.mp-section--tight { padding-block: var(--mp-s-12); }

/* --- §10.5 Statement split (icon run + macro) ------------------------- */
.mp-statement-split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--mp-s-10); align-items: center; }
.mp-statement-split .mp-iconrun { margin-top: var(--mp-s-8); }
.mp-statement-split__media { border-radius: var(--mp-r-lg); overflow: hidden; aspect-ratio: 3/2; }
.mp-statement-split__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .mp-statement-split { grid-template-columns: 1fr; } }

/* --- §10.8 Plan teaser ------------------------------------------------ */
.mp-planteaser { display: grid; grid-template-columns: 5fr 7fr; gap: var(--mp-s-10); align-items: center; }
.mp-planteaser__media { border-radius: var(--mp-r-lg); overflow: hidden; aspect-ratio: 4/5; position: relative; }
.mp-planteaser__media img { width: 100%; height: 100%; object-fit: cover; }
.mp-planteaser__media figcaption {
  position: absolute; inset: auto 0 0 0; padding: 16px 20px; color: var(--mp-porcelain);
  font-family: var(--mp-font-mono); font-size: var(--mp-t-micro); letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(transparent, rgba(19,18,16,.72));
}
.mp-planteaser__quiz { background: var(--mp-surface); border: 1px solid var(--mp-clay); border-radius: var(--mp-r-lg); padding: var(--mp-s-8); box-shadow: var(--mp-e-2); }
.mp-quiz__step { margin-top: var(--mp-s-6); }
.mp-quiz__label { font-family: var(--mp-font-mono); font-size: var(--mp-t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--mp-stone-500); margin-bottom: var(--mp-s-3); }
.mp-quiz__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-s-3); }
.mp-choice {
  min-height: 132px; border-radius: var(--mp-r-lg); border: 1px solid var(--mp-clay);
  background: var(--mp-porcelain); color: var(--mp-ink); padding: var(--mp-s-5); display: flex; flex-direction: column; gap: var(--mp-s-2);
  align-items: flex-start; text-align: left; cursor: pointer; transition: border-color var(--mp-dur-2), background var(--mp-dur-2), transform var(--mp-dur-2);
}
.mp-choice:hover { border-color: var(--mp-border-strong); transform: translateY(-2px); }
.mp-choice[aria-checked="true"] { border: 2px solid var(--mp-ember); background: var(--mp-ember-100); }
.mp-choice .mp-icon { width: 32px; height: 32px; color: var(--mp-stone-600); }
.mp-choice[aria-checked="true"] .mp-icon { color: var(--mp-ember); }
.mp-choice b { font-family: var(--mp-font-display); font-size: var(--mp-t-h4); font-weight: 400; }
.mp-choice small { color: var(--mp-stone-600); font-size: var(--mp-t-xs); }
.mp-quiz__foot { margin-top: var(--mp-s-6); display: flex; justify-content: space-between; align-items: center; }
.mp-quiz__counter { font-family: var(--mp-font-mono); font-size: var(--mp-t-micro); letter-spacing: .14em; color: var(--mp-stone-500); }

@media (max-width: 1023px) { .mp-planteaser { grid-template-columns: 1fr; } }

/* --- Supplements band -------------------------------------------------- */
.mp-supps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mp-s-6); }
@media (max-width: 1023px) { .mp-supps { grid-template-columns: 1fr; } }

/* --- Hero entrance (§6.2.1) ------------------------------------------- */
.mp-hero[data-entered="true"] .mp-hero__media img { animation: mp-hero-zoom var(--mp-dur-5) var(--mp-ease-out) both; }
.mp-hero .mp-hero__head h1 { animation: mp-hero-rise var(--mp-dur-5) var(--mp-ease-out) both; animation-delay: 120ms; }
.mp-hero .mp-hero__kicker { animation: mp-hero-rise var(--mp-dur-5) var(--mp-ease-out) both; animation-delay: 200ms; }
.mp-hero .mp-hero__sub { animation: mp-hero-rise var(--mp-dur-5) var(--mp-ease-out) both; animation-delay: 320ms; }
@keyframes mp-hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes mp-hero-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }