/* Mâm landing — media sections: customer gallery + lightbox, YouTube facades, TikTok players.
   Tokens (--mam-*) come from mam-landing.css. */

/* Gallery: bento grid — first photo spans 2×2 on desktop. */
.mam-gallery { padding-block: 80px; }
.mam-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 12px; }
.mam-gallery__item { position: relative; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #E8E4C6; cursor: zoom-in; }
.mam-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.mam-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.mam-gallery__item:hover img { transform: scale(1.04); }
.mam-gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; background: linear-gradient(transparent, rgba(18, 56, 38, .85)); color: var(--mam-cream); font: 600 14px var(--mam-sans); text-align: left; }
.mam-lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1100px); max-height: 92vh; overflow: visible; }
.mam-lightbox::backdrop { background: rgba(18, 26, 20, .88); }
.mam-lightbox img { max-width: 100%; max-height: 82vh; display: block; margin: 0 auto; border-radius: 4px; }
.mam-lightbox p { margin: 10px 0 0; text-align: center; color: var(--mam-cream); font-size: 15px; }
.mam-lightbox__close { position: absolute; top: -44px; right: 0; background: none; border: 1px solid rgba(243, 239, 214, .5); color: var(--mam-cream); border-radius: 3px; padding: 6px 14px; font: 600 14px var(--mam-sans); cursor: pointer; }

/* YouTube facades */
.mam-videos .mam-wrap { padding-block: 72px; }
.mam-yt__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.mam-yt { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.mam-yt__play, .mam-yt iframe { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; overflow: hidden; background: #000; padding: 0; cursor: pointer; display: block; }
.mam-yt__play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: opacity .2s; }
.mam-yt__play:hover img { opacity: 1; }
.mam-yt__icon { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(27, 74, 53, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.mam-yt__icon::after { content: ''; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--mam-cream); }
/* Shorts: vertical cards; the 4:3 thumbnail is cover-cropped to drop its side bars. */
/* Shorts row = same 4.5-per-view horizontal scroller as TikTok (1.5 on phones). */
.mam-yt__grid:has(.mam-yt--short) { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.mam-yt--short { flex: 0 0 calc((100% - 80px) / 4.5); scroll-snap-align: start; }
.mam-yt--short .mam-yt__play, .mam-yt--short iframe { aspect-ratio: 9 / 16; }
.mam-yt figcaption { font-family: var(--mam-serif); font-size: 24px; font-weight: 600; line-height: 1.2; }

/* TikTok players: 9:16 cards, horizontal scroll when they overflow. */
.mam-tiktok { padding-block: 80px; }
.mam-tiktok__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; }
.mam-tt__row { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
/* 4.5 cards per view (the half card hints at horizontal scroll); 1.5 on phones. Gap 20px × 4 visible gaps. */
.mam-tt { flex: 0 0 calc((100% - 80px) / 4.5); scroll-snap-align: start; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: #000; border: 1px solid var(--mam-line); }
.mam-tt iframe { width: 100%; height: 100%; border: 0; display: block; }

.mam-hint { margin-block: 24px; padding: 18px; border: 2px dashed var(--mam-input); border-radius: 4px; color: var(--mam-muted); font-size: 14px; text-align: center; }

@media (max-width: 859px) {
	.mam-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
	.mam-gallery, .mam-tiktok { padding-block: 56px; }
	.mam-tt, .mam-yt--short { flex-basis: calc((100% - 20px) / 1.5); }
}