/* Commitment detail pages (LVMH commitment-in-action page, down to the action-plan band):
   full-bleed photo with a centred paper card holding the title, then a centred light sans body,
   an optional button and an optional centred 2x2 photo grid. Rounded corners per Pear. */
.cmd-hero { position: relative; height: max(620px, 100vh); display: grid; justify-items: center; align-items: end; padding: 24px 24px clamp(56px, 13vh, 150px); overflow: hidden; }
.cmd-hero__media { position: absolute; inset: 0; background: var(--ink); }
.cmd-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cmd-hero__card { position: relative; z-index: 2; width: min(600px, 100%); padding: 40px 28px 28px; text-align: center; background: var(--paper); color: var(--ink); border-radius: var(--radius); }
@media (min-width: 768px) { .cmd-hero__card { padding: 56px 64px 32px; } }
.cmd-hero__card .crumbs { justify-content: center; margin-bottom: 20px; }
.cmd-hero__card .crumbs ol { justify-content: center; }
.cmd-hero__title { font-family: var(--sans); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.18; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.cmd-hero__down { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: 16px; border-radius: var(--radius-s); color: var(--ink); transition: transform .4s var(--ease); }
.cmd-hero__down .icon { width: 22px; height: 22px; }
.cmd-hero__down:hover, .cmd-hero__down:focus-visible { transform: translateY(4px); }

.cmd-story { scroll-margin-top: 24px; }
.cmd-story__body { max-width: 734px; margin: 0 auto; text-align: center; }
.cmd-story__body p { font-family: var(--sans); font-weight: 300; font-size: 1.25rem; line-height: 2rem; color: var(--ink); }
.cmd-story__body p + p { margin-top: 24px; }
.cmd-story__body .link-inline { text-decoration: underline; text-underline-offset: 3px; }
.cmd-story__cta { margin-top: 48px; text-align: center; }

.cmd-gallery { padding-top: 0; }
.cmd-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 904px; margin: 0 auto; }
@media (min-width: 768px) { .cmd-gallery__grid { gap: 24px; } }
.cmd-gallery__item { overflow: hidden; border-radius: var(--radius); background: var(--ink); aspect-ratio: 2 / 3; }
.cmd-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }