/* SASA Packaging - Exhibitions page: Pinterest-style picture wall (masonry) + the full-screen viewer.
   Only loaded by /events.html. Colours come from the site palette (sasa-premium.css).

   Layout = masonry columns: horizontal and vertical pictures sit together, each tile keeps the exact shape of its picture
   (--ar = width / height). The shape is saved when the picture is uploaded; older pictures get a soft placeholder shape that
   sasa-events-gallery.js corrects as soon as the picture arrives. */

.evm { margin-top: 30px; }
.evm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.evm-head__title { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--sx-font-head, inherit); font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--sx-ink, #1f2d22); }
.evm-head__title::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--sx-sage-deep, #84a282); }

.evm-mix { columns: 4 230px; column-gap: 12px; }
.evm-tile { --ar: 1.5; position: relative; display: block; width: 100%; margin: 0 0 12px; overflow: hidden; border-radius: 16px; isolation: isolate; text-decoration: none;
	aspect-ratio: var(--ar); break-inside: avoid; -webkit-column-break-inside: avoid; }
.evm-tile img, .evm-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.evm-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15, 24, 17, .5)); opacity: 0; transition: opacity .4s; pointer-events: none; }
.evm-tile:hover > img, .evm-tile:focus-visible > img, .evm-tile:hover > video:first-of-type { transform: scale(1.06); }
.evm-tile:hover::after, .evm-tile:focus-visible::after { opacity: 1; }
.evm-tile:focus-visible { outline: 3px solid var(--sx-sage, #b8cfb3); outline-offset: 2px; }

/* picture: small zoom button on hover */
.evm-tile__zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); color: var(--sx-forest, #2b3f2f); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.evm-tile__zoom svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.evm-tile:hover .evm-tile__zoom, .evm-tile:focus-visible .evm-tile__zoom { opacity: 1; transform: none; }

/* video: soft shade, round play button, hover preview (desktop) */
.evm-tile--video::after { opacity: 1; background: linear-gradient(180deg, rgba(15, 24, 17, .22) 0%, transparent 30%, transparent 60%, rgba(15, 24, 17, .55) 100%); }
.evm-tile__peek { opacity: 0; transition: opacity .35s, transform 1s cubic-bezier(.2, .8, .2, 1); }
.evm-tile.is-peek .evm-tile__peek { opacity: 1; }
.evm-tile__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .24); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .5); transition: transform .35s, opacity .35s; pointer-events: none; }
.evm-tile__play svg { width: 20px; height: 20px; margin-left: 3px; fill: #fff; }
.evm-tile__play::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: evmPulse 2.4s ease-out infinite; }
.evm-tile:hover .evm-tile__play { transform: scale(1.12); }
.evm-tile.is-peek .evm-tile__play { opacity: 0; transform: scale(.7); }
.evm-tile__tag { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 2px 10px; border-radius: 999px; font: 700 .68rem/1.7 var(--sx-font-head, inherit); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(15, 24, 17, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
@keyframes evmPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---- placeholder look: same as the "Our Collections" cards on the home page ----
   soft colour gradient + light glow top-left + darker bottom + dotted pattern + big outline box icon.
   Shows while a picture is loading, and stays if a picture is missing or fails to load.
   Four colours (sage, rose, deep green, mist) take turns. */
.evm-tile {
	--ph-a: #cddfc9; --ph-b: #86a584; --ph-c: #4f6f52;
	background:
		radial-gradient(rgba(255, 255, 255, .34) 1.5px, transparent 2px) 0 0 / 22px 22px,
		radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .45), transparent 55%),
		linear-gradient(180deg, transparent 55%, rgba(31, 45, 34, .28)),
		linear-gradient(160deg, var(--ph-a), var(--ph-b) 62%, var(--ph-c));
}
.evm-tile:nth-child(4n + 2) { --ph-a: #f7e4ec; --ph-b: #e0adc2; --ph-c: #c68aa3; }
.evm-tile:nth-child(4n + 3) { --ph-a: #b4cdaf; --ph-b: #7f9f7d; --ph-c: #3f5f44; }
.evm-tile:nth-child(4n + 4) { --ph-a: #f1ecee; --ph-b: #cfdccb; --ph-c: #92b090; }
.evm-tile::before { content: ""; position: absolute; left: 50%; top: 50%; width: clamp(44px, 34%, 104px); max-height: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20fill='none'%20stroke='white'%20stroke-opacity='.85'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M50%2010%2085%2030v40L50%2090%2015%2070V30z'/%3E%3Cpath%20d='M15%2030l35%2020%2035-20M50%2050v40'/%3E%3C/svg%3E") center / contain no-repeat; }
.evm-tile--video::before { display: none; }   /* videos already show a play button */
.evm img.is-broken { display: none; }   /* a picture that could not load: the placeholder stays visible */

/* ---- reveal when scrolled into view (only if JavaScript added .is-armed) ---- */
.evm.is-armed .evm-tile { animation: evmUp .8s cubic-bezier(.2, .8, .2, 1) backwards paused; animation-delay: calc(min(var(--i, 0), 10) * 70ms); }
.evm.is-armed.is-in .evm-tile { animation-play-state: running; }
@keyframes evmUp { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---- full-screen viewer (pictures and videos) ---- */
.evl-lock { overflow: hidden; }
.evl { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 56px 16px 28px; background: rgba(12, 20, 14, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.evl.is-open { opacity: 1; visibility: visible; }
.evl__stage { display: grid; place-items: center; width: 100%; height: 100%; }
.evl__media { max-width: min(94vw, 1100px); max-height: 80vh; border-radius: 16px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); animation: evlIn .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes evlIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.evl__btn { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .25s, transform .25s; }
.evl__btn:hover { background: rgba(255, 255, 255, .26); transform: scale(1.08); }
.evl__btn:focus-visible { outline: 3px solid var(--sx-sage, #b8cfb3); outline-offset: 2px; }
.evl__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.evl__close { right: 16px; top: 12px; }
.evl__prev { left: 16px; top: 50%; margin-top: -23px; }
.evl__next { right: 16px; top: 50%; margin-top: -23px; }
.evl__count { position: absolute; left: 18px; top: 22px; padding: 4px 14px; border-radius: 999px; font: 600 .85rem/1.6 var(--sx-font-head, inherit); letter-spacing: .06em; color: #fff; background: rgba(255, 255, 255, .14); }
.evl__spin { position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: evlSpin .8s linear infinite; opacity: 0; transition: opacity .2s; pointer-events: none; }
.evl.is-loading .evl__spin { opacity: 1; }
@keyframes evlSpin { to { transform: rotate(360deg); } }
.evl.is-single .evl__prev, .evl.is-single .evl__next { display: none; }

@media (max-width: 720px) {
	.evm-mix { columns: 2; column-gap: 8px; }
	.evm-tile { margin-bottom: 8px; border-radius: 12px; }
	.evm-tile__play { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
	.evl__prev { left: 8px; } .evl__next { right: 8px; }
	.evl__btn { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
	.evm *, .evl, .evl * { animation: none !important; transition: none !important; }
}