/* Styles scoped to the La Roche-Posay project. */
.laroche-body { padding-bottom: 1rem; }
.campaign-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.85rem, 2.4vw, 2rem); max-width: 1080px; margin: 1.6rem auto 0; }
.vertical-frame { aspect-ratio: 9/16; }
.campaign-film { min-width: 0; }
.campaign-film figcaption { flex-wrap: wrap; }
.moodboard-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.6rem; }
.reference-item { min-width: 0; }
.reference-image { position: relative; display: grid; place-items: center; background: #eaeae5; }
.reference-image img { width: 100%; height: auto; object-fit: contain; }
.reference-image span { position: absolute; right: .5rem; bottom: .5rem; padding: .25rem .5rem; background: var(--paper); border: 1px solid var(--line); }
.reference-image:hover span { background: var(--accent); }
.reference-item figcaption { color: var(--mute); font-size: .8rem; padding-block: .55rem; border-bottom: 1px solid var(--line); }
.reference-feature { width: min(100%, 980px); margin: 1.6rem auto 2rem; }
.reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1.4rem 1rem; }
.reference-grid .reference-image { aspect-ratio: 4/3; }
.reference-grid .reference-image img { height: 100%; max-height: 100%; width: 100%; position: absolute; inset: 0; }
.case-return { margin-top: 3rem; }

.lightbox { width: min(96vw, 1500px); max-width: 96vw; padding: 0; overflow: hidden; }
.lightbox-toolbar { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; border-bottom: 1px solid #66685b; }
.lightbox-toolbar button, .lightbox-toolbar a { border: 1px solid #888b7b; background: #f7f7f2; color: #151612; font-size: .85rem; font-weight: 650; line-height: 1.1; min-height: 2.35rem; padding: .5rem .7rem; cursor: pointer; }
.lightbox-toolbar .lightbox-close { position: static; margin-left: auto; width: 2.35rem; font-size: 1.35rem; }
.lightbox-toolbar .lightbox-zoom[aria-pressed=true] { background: var(--accent); }
.lightbox-viewport { overflow: auto; max-height: calc(94dvh - 4rem); overscroll-behavior: contain; }
.lightbox-viewport img { max-width: 100%; max-height: calc(94dvh - 4rem); width: auto; height: auto; object-fit: contain; }
.lightbox.is-zoomed .lightbox-viewport img { max-width: none; max-height: none; width: auto; height: auto; margin: 0; }

@media (max-width: 820px) { .moodboard-grid { grid-template-columns: 1fr; gap: 1.4rem; } .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .campaign-grid { grid-template-columns: 1fr; width: min(100%, 320px); gap: 1.8rem; } .reference-grid { gap: 1.2rem .65rem; } .case-return { margin-top: 2rem; } }