/* Nedclan Gallery — continuous-scroll image carousel + animated image grid.
   Colours/spacing pull from CSS vars set by Nedclan_Gallery_Shortcodes::inline_theme_vars(). */

.nedclan-gallery-wrap, .nedclan-animimg-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 16px; box-sizing: border-box; }
.nedclan-gallery-wrap *, .nedclan-animimg-wrap * { box-sizing: border-box; }
/* Invisible "sizer": in a content-sized parent (Elementor flex containers, centred columns,
   inline wrappers — common on home pages) a collage of absolutely-positioned photos would
   measure 0px wide and vanish. The sizer tells the parent how wide we'd like to be, while
   still shrinking freely on small screens (a replaced element with a % max-width never
   forces a minimum width). */
.nedclan-gallery-wrap > .ng-sizer, .nedclan-animimg-wrap > .ng-sizer {
	display: block; height: 0; margin: 0; padding: 0; border: 0; visibility: hidden; pointer-events: none;
	width: 1200px; max-width: 100%;
}
.nedclan-scatter > .ng-sizer { width: var(--nas-max, 1100px); }

/* ---- Continuous carousel ---- */
.nedclan-gallery-viewport { overflow: hidden; width: 100%; contain: inline-size; /* the long photo strip must not decide how wide the carousel is — the sizer does */ padding: var(--nedclan-gallery-pad-top, 36px) 0 var(--nedclan-gallery-pad-bottom, 16px); }
.nedclan-gallery-track {
	display: flex; gap: var(--nedclan-gallery-gap, 16px); width: max-content; will-change: transform;
}
.nedclan-gallery-track.is-animating.nedclan-gallery-dir-left { animation: nedclanGalleryScrollLeft var(--nedclan-gallery-speed, 30s) linear infinite; }
.nedclan-gallery-track.is-animating.nedclan-gallery-dir-right { animation: nedclanGalleryScrollRight var(--nedclan-gallery-speed, 30s) linear infinite; }
.nedclan-gallery-track:hover { animation-play-state: paused; }
@keyframes nedclanGalleryScrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nedclanGalleryScrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.nedclan-gallery-item {
	flex: 0 0 var(--gallery-item-width, 260px);
	width: var(--gallery-item-width, 260px);
	position: relative;
	padding-top: 28px; /* room for the heart icon to overlap the top of the box */
}
.nedclan-gallery-item.nedclan-tilt-a { transform: rotate(-3deg); }
.nedclan-gallery-item.nedclan-tilt-b { transform: rotate(3deg); }

.nedclan-gallery-heart {
	position: absolute; top: 0; right: 14%; width: 34px; height: 34px; z-index: 2;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.nedclan-gallery-heart.nedclan-heart-animate { animation: nedclanHeartBeat 1.8s ease-in-out infinite; }
@keyframes nedclanHeartBeat {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50% { transform: scale(1.12) rotate(-4deg); }
}

/* ---- Style 2: framed photo card with corner accents + two hearts stacked bottom-left ---- */
.nedclan-gallery-item.nedclan-gallery-style2 { padding-top: 0; }
.nedclan-gallery-frame {
	position: relative; background: var(--nedclan-gallery-frame-color, #F6E3E0);
	padding: var(--ng-mat, 12px) var(--ng-mat, 12px) calc(var(--ng-mat, 12px) + 4px); border-radius: 4px;
}
.nedclan-gallery-corner { position: absolute; width: 18px; height: 18px; background: var(--nedclan-gallery-corner-color, #E8352E); }
.nedclan-corner-tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.nedclan-corner-br { bottom: 0; right: 0; clip-path: polygon(100% 100%, 100% 0, 0 100%); }
.nedclan-gallery-hearts-stack { position: absolute; left: 14px; bottom: -14px; display: flex; align-items: flex-end; gap: -6px; z-index: 2; }
.nedclan-gallery-hearts-stack .nedclan-gallery-heart { position: static; width: 30px; height: 30px; margin-right: -10px; }
.nedclan-gallery-hearts-stack .nedclan-heart-small { width: 20px; height: 20px; margin-bottom: 4px; }
.nedclan-gallery-style2 .nedclan-gallery-box { border-radius: 2px; padding: 0; box-shadow: none; background: transparent; }
/* Style 2's photo sits in the frame's padding instead of the box's, so both styles end up the same width. */
.nedclan-gallery-style2 .nedclan-gallery-box img { border-radius: 0; }

.nedclan-gallery-box {
	background: var(--nedclan-gallery-box-bg, #fff); border-radius: var(--nedclan-gallery-box-radius, 16px);
	overflow: hidden; padding: var(--ng-mat, 12px) var(--ng-mat, 12px) calc(var(--ng-mat, 12px) + 4px);
	box-shadow: 0 10px 24px rgba(0,0,0, var(--nedclan-gallery-shadow-opacity, 0.2));
}
.nedclan-gallery-box img { display: block; width: 100%; height: auto; border-radius: calc(var(--nedclan-gallery-box-radius, 16px) - 6px); }

/* Forced aspect ratios so every box stays uniform regardless of the uploaded image's native size. */
.nedclan-gallery-box.nedclan-ratio-portrait img,
.nedclan-gallery-box.nedclan-ratio-landscape img,
.nedclan-gallery-box.nedclan-ratio-square img { width: 100%; height: 100%; object-fit: cover; }
.nedclan-gallery-box.nedclan-ratio-portrait { aspect-ratio: 4 / 5; }
.nedclan-gallery-box.nedclan-ratio-landscape { aspect-ratio: 4 / 3; }
.nedclan-gallery-box.nedclan-ratio-square { aspect-ratio: 1 / 1; }
.nedclan-gallery-box.nedclan-ratio-portrait img,
.nedclan-gallery-box.nedclan-ratio-landscape img,
.nedclan-gallery-box.nedclan-ratio-square img { height: calc(100% - 4px); }

/* ---- Carousel photo sizes (Gallery → Settings → Carousel — Photo Sizes) ----
   Same size: every photo is cropped to --ng-shape. Varied: each photo gets its own --ng-ar
   (tall / medium / short) and the row is lined up top, centre or bottom. Original: as uploaded. */
.nedclan-gallery-wrap.ng-size-uniform .nedclan-gallery-box img,
.nedclan-gallery-wrap.ng-size-varied .nedclan-gallery-box img {
	width: 100%; height: auto; aspect-ratio: var(--ng-ar, var(--ng-shape, 4 / 5)); object-fit: cover;
}
.nedclan-gallery-wrap.ng-size-uniform .nedclan-gallery-item { --ng-ar: var(--ng-shape, 4 / 5); }
.nedclan-gallery-wrap.ng-focus-top .nedclan-gallery-box img { object-position: 50% 15%; }
.nedclan-gallery-wrap.ng-focus-center .nedclan-gallery-box img { object-position: 50% 50%; }
.nedclan-gallery-wrap.ng-focus-bottom .nedclan-gallery-box img { object-position: 50% 85%; }
.nedclan-gallery-wrap .nedclan-gallery-track { align-items: center; }
.nedclan-gallery-wrap.ng-align-top .nedclan-gallery-track { align-items: flex-start; }
.nedclan-gallery-wrap.ng-align-bottom .nedclan-gallery-track { align-items: flex-end; }

/* ---- Animated image collage — varying box sizes in a Pinterest-style moodboard, not a uniform grid ---- */
.nedclan-animimg-grid {
	display: grid;
	grid-template-columns: repeat(var(--nedclan-animimg-items-desktop, 4), 1fr);
	grid-auto-rows: 90px;
	grid-auto-flow: dense;
	gap: var(--nedclan-animimg-gap, 16px);
}
.nedclan-animimg-box {
	border-radius: var(--nedclan-animimg-box-radius, 16px); overflow: hidden; background: #F5EFE6;
	grid-row: span 3; /* default/medium size */
}
/* Cycles through a few different sizes so the collage reads as scattered rather than a rigid grid. */
.nedclan-animimg-box:nth-child(6n+1) { grid-row: span 4; grid-column: span 2; }
.nedclan-animimg-box:nth-child(6n+3) { grid-row: span 2; }
.nedclan-animimg-box:nth-child(6n+5) { grid-row: span 4; }
.nedclan-animimg-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nedclan-animimg-box.nedclan-ratio-portrait,
.nedclan-animimg-box.nedclan-ratio-landscape,
.nedclan-animimg-box.nedclan-ratio-square { grid-row: span 3; } /* a forced aspect ratio overrides the scattered sizing above, so the box itself defines the shape */
.nedclan-animimg-box.nedclan-ratio-portrait img,
.nedclan-animimg-box.nedclan-ratio-landscape img,
.nedclan-animimg-box.nedclan-ratio-square img { width: 100%; height: 100%; object-fit: cover; }

.nedclan-animimg-float { animation: nedclanAnimimgFloat var(--nedclan-animimg-speed, 4s) ease-in-out infinite; }
@keyframes nedclanAnimimgFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}
.nedclan-animimg-fade { animation: nedclanAnimimgFade var(--nedclan-animimg-speed, 4s) ease-in-out infinite; }
@keyframes nedclanAnimimgFade {
	0%, 100% { opacity: 1; }
	50% { opacity: .55; }
}
.nedclan-animimg-zoom { animation: nedclanAnimimgZoom var(--nedclan-animimg-speed, 4s) ease-in-out infinite; }
@keyframes nedclanAnimimgZoom {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}
.nedclan-animimg-slide-up { animation: nedclanAnimimgSlideUp var(--nedclan-animimg-speed, 4s) ease-in-out infinite; }
@keyframes nedclanAnimimgSlideUp {
	0%, 100% { transform: translateY(6px); }
	50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
	.nedclan-gallery-track.is-animating { animation: none; }
	.nedclan-gallery-heart.nedclan-heart-animate { animation: none; }
	.nedclan-animimg-box[class*="nedclan-animimg-"] { animation: none; }
}

/* ---- Lightbox (click any image to view it enlarged) ---- */
.nedclan-lightbox-trigger { cursor: zoom-in; }
.nedclan-lightbox-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 100000;
	display: flex; align-items: center; justify-content: center; padding: 40px 20px;
}
.nedclan-lightbox-overlay[hidden] { display: none !important; }
.nedclan-lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.nedclan-lightbox-close {
	position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.95); border: none; color: #222; font-size: 28px; line-height: 1;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.nedclan-lightbox-close:hover { background: #fff; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.nedclan-gallery-item { padding-top: 22px; }
	.nedclan-gallery-heart { width: 26px; height: 26px; }
}
@media (max-width: 560px) {
	.nedclan-animimg-grid { grid-template-columns: repeat(var(--nedclan-animimg-items-desktop, 2), 1fr); }
}

/* ==========================================================================
   Scattered collage ([nedclan_animated_images] with Layout = Scattered collage)
   Each photo is placed by --l/--t/--w/--h (desktop) or --ml/--mt/--mw/--mh (phones),
   in % of its cluster, and moves with its own random recipe (--anim, --dx, --dy,
   --rot, --sc, --dur, --delay) written inline by PHP.
   ========================================================================== */
.nedclan-scatter { position: relative; max-width: var(--nas-max, 1100px); padding: 16px; }
.nedclan-scatter .nas-cluster { position: relative; width: 100%; aspect-ratio: var(--nas-ar, 4 / 3); }
.nedclan-scatter .nas-cluster + .nas-cluster { margin-top: 2%; }
.nedclan-scatter .nas-photo {
	position: absolute; margin: 0; padding: 0;
	left: var(--l); top: var(--t); width: var(--w); height: var(--h); z-index: var(--z);
	transition: z-index 0s .2s;
}
.nedclan-scatter .nas-move {
	display: block; width: 100%; height: 100%;
	border-radius: var(--nas-radius, 2px); overflow: hidden; background: #F5EFE6;
	transform-origin: 50% 50%; will-change: transform;
	transition: box-shadow .3s ease;
}
.nedclan-scatter.nas-shadow .nas-move { box-shadow: 0 14px 34px rgba(40, 30, 20, .18); }
.nedclan-scatter .nas-move img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nedclan-scatter.nas-moving .nas-move { animation: var(--anim, nas-drift) var(--dur, 8s) ease-in-out var(--delay, 0s) infinite alternate; }
/* Hover: bring the photo to the front */
.nedclan-scatter .nas-photo:hover { z-index: 20; transition: z-index 0s; }
.nedclan-scatter.nedclan-lightbox-on .nas-move img { cursor: zoom-in; }

@keyframes nas-drift {
	0%   { transform: translate(0, 0) rotate(0deg); }
	50%  { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
	100% { transform: translate(calc(var(--dx) * -0.6), calc(var(--dy) * 0.5)) rotate(calc(var(--rot) * -0.5)); }
}
@keyframes nas-sway {
	0%   { transform: rotate(calc(var(--rot) * -1)) translateX(calc(var(--dx) * -0.5)); }
	100% { transform: rotate(var(--rot)) translateX(calc(var(--dx) * 0.5)); }
}
@keyframes nas-bob {
	0%   { transform: translateY(calc(var(--dy) * -0.6)); }
	60%  { transform: translateY(calc(var(--dy) * 0.6)) translateX(calc(var(--dx) * 0.3)); }
	100% { transform: translateY(calc(var(--dy) * 0.2)) translateX(calc(var(--dx) * -0.3)); }
}
@keyframes nas-breathe {
	0%   { transform: scale(1) rotate(0deg); }
	100% { transform: scale(var(--sc)) rotate(calc(var(--rot) * 0.6)) translate(calc(var(--dx) * 0.3), calc(var(--dy) * -0.3)); }
}

/* More movement styles (picked under Gallery → Settings → Animated Collage) */
@keyframes nas-float {
	0%   { transform: translateY(calc(var(--dy) * -0.8)); }
	100% { transform: translateY(calc(var(--dy) * 0.8)); }
}
.nedclan-scatter .nas-photo[data-move="swing"] .nas-move { transform-origin: 50% -4%; }
@keyframes nas-swing {
	0%   { transform: rotate(calc(var(--rot) * -1.6)); }
	100% { transform: rotate(calc(var(--rot) * 1.6)); }
}
@keyframes nas-tilt3d {
	0%   { transform: perspective(900px) rotateY(calc(var(--rot) * -5)) rotateX(calc(var(--rot) * 2)); }
	100% { transform: perspective(900px) rotateY(calc(var(--rot) * 5)) rotateX(calc(var(--rot) * -2)); }
}
/* Ken Burns: the frame stays put; the picture zooms and pans inside it */
.nedclan-scatter.nas-moving .nas-photo[data-move="kenburns"] .nas-move { animation: none; }
.nedclan-scatter.nas-moving .nas-photo[data-move="kenburns"] .nas-move img { animation: nas-kenburns var(--dur, 8s) ease-in-out var(--delay, 0s) infinite alternate; transform-origin: 50% 40%; }
@keyframes nas-kenburns {
	0%   { transform: scale(1.02) translate(0, 0); }
	100% { transform: scale(calc(var(--sc) + 0.1)) translate(calc(var(--dx) * -0.4), calc(var(--dy) * -0.3)); }
}

/* Entrance — photos start hidden only once the script has marked the collage ready, so they can
   never get stuck invisible if scripts are blocked or delayed. */
.nedclan-scatter.nas-enter.nas-enter-ready .nas-photo {
	opacity: 0;
	transition: opacity .9s ease, transform 1s cubic-bezier(.2,.75,.25,1), filter .9s ease;
	transition-delay: var(--enter-delay, 0s);
}
.nedclan-scatter.nas-enter-fade-up.nas-enter-ready .nas-photo { transform: translateY(46px); }
.nedclan-scatter.nas-enter-zoom-in.nas-enter-ready .nas-photo { transform: scale(.82); }
.nedclan-scatter.nas-enter-scatter-in.nas-enter-ready .nas-photo { transform: translate(var(--ex), var(--ey)) rotate(var(--er)) scale(.9); }
.nedclan-scatter.nas-enter-drop-in.nas-enter-ready .nas-photo { transform: translateY(-80px) rotate(var(--er)); transition-timing-function: ease, cubic-bezier(.3,1.35,.5,1), ease; }
.nedclan-scatter.nas-enter-blur-in.nas-enter-ready .nas-photo { filter: blur(14px); transform: scale(1.04); }
.nedclan-scatter.nas-enter.nas-enter-ready .nas-photo.is-in { opacity: 1; transform: none; filter: none; }
.nedclan-scatter.nas-enter-reset .nas-photo { transition: none !important; }

/* Hover */
.nedclan-scatter.nas-hover-lift .nas-photo .nas-move { transition: box-shadow .3s ease, scale .35s ease; }
.nedclan-scatter.nas-hover-lift .nas-photo:hover .nas-move { scale: 1.05; box-shadow: 0 22px 44px rgba(40, 30, 20, .25); }
.nedclan-scatter.nas-hover-pause .nas-photo:hover .nas-move,
.nedclan-scatter.nas-hover-pause .nas-photo:hover .nas-move img { animation-play-state: paused; }
.nedclan-scatter.nas-hover-zoom .nas-photo .nas-move img { transition: scale .6s ease; }
.nedclan-scatter.nas-hover-zoom .nas-photo:hover .nas-move img { scale: 1.12; }

/* Corner decoration (e.g. your monogram) */
.nedclan-scatter .nas-decor { position: absolute; right: 8px; bottom: 8px; width: var(--nas-decor, 90px); height: auto; z-index: 30; pointer-events: none; }

/* Phones: taller cluster with its own arrangement */
@media (max-width: 640px) {
	.nedclan-scatter { padding: 8px; }
	.nedclan-scatter .nas-cluster { aspect-ratio: var(--nas-mar, 7 / 10); }
	.nedclan-scatter .nas-photo { left: var(--ml); top: var(--mt); width: var(--mw); height: var(--mh); z-index: var(--mz); }
	.nedclan-scatter .nas-decor { width: calc(var(--nas-decor, 90px) * 0.65); }
}
@media (prefers-reduced-motion: reduce) {
	.nedclan-scatter .nas-move, .nedclan-scatter .nas-move img { animation: none !important; }
	.nedclan-scatter.nas-enter.nas-enter-ready .nas-photo { opacity: 1; transform: none; filter: none; transition: none; }
}