/* ==========================================================================
   Widget Plugin – Posts Grid
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid container
   -------------------------------------------------------------------------- */
.wpg-grid {
	--wpg-columns:      3;
	--wpg-gap:          0px;
	--wpg-scale:        1.06;
	--wpg-transition:   420ms;
	--wpg-diag:         40px;
	--wpg-active-flex:  2;    /* flex-grow of the active item */

	display:     flex;
	align-items: stretch;

	/* Fixed breathing room for the scale pop-out effect */
	padding:  20px;
	margin:   -20px;
	overflow: visible;
}

/* --------------------------------------------------------------------------
   Individual post card
   -------------------------------------------------------------------------- */
.wpg-item {
	--wpg-ratio: 16 / 9;

	flex:         1 1 0;
	min-width:    0;
	position:     relative;
	aspect-ratio: var(--wpg-ratio);
	overflow:     hidden;
	cursor:       pointer;

	transform:        scale(1);
	transform-origin: center center;
	transition:
		flex-grow     var(--wpg-transition) cubic-bezier(.4, 0, .2, 1),
		transform     var(--wpg-transition) cubic-bezier(.4, 0, .2, 1),
		box-shadow    var(--wpg-transition) cubic-bezier(.4, 0, .2, 1),
		border-radius var(--wpg-transition) cubic-bezier(.4, 0, .2, 1),
		z-index       0s var(--wpg-transition);
	z-index:    1;
	will-change: transform, flex-grow;
}

/* ---- Diagonal separator -------------------------------------------------- */
/*
 * Every item except the first gets a parallelogram clip:
 *   top-left  = (diag, 0)   →  item starts diag-px to the right at the top
 *   bottom-left = (0, 100%) →  item starts at its box edge at the bottom
 *
 * Combined with margin-left: -diag the box is shifted left so the clip aligns
 * perfectly with the right edge of the previous item at the top, creating a
 * clean "/" diagonal separator between cards.
 */
.wpg-item:not(:first-child) {
	margin-left: calc(-1 * var(--wpg-diag));
	clip-path: polygon(
		0%              0%,
		100%            0%,
		100%            100%,
		var(--wpg-diag) 100%
	);

	/*
	 * drop-shadow traces the clipped shape outline, so the 2px shadow on the
	 * left side appears precisely along the diagonal edge as a separator line.
	 */
	filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.35));
}

.wpg-item.is-active {
	flex:       var(--wpg-active-flex, 2) 1 0;
	transform:  scale(var(--wpg-scale));
	z-index:    10;
	box-shadow: 0 16px 48px -8px rgba(0, 0, 0, .45);
	transition:
		flex-grow  var(--wpg-transition) cubic-bezier(.4, 0, .2, 1),
		transform  var(--wpg-transition) cubic-bezier(.4, 0, .2, 1),
		box-shadow var(--wpg-transition) cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Image layer
   -------------------------------------------------------------------------- */
.wpg-item__img {
	position: absolute;
	inset: 0;
}

.wpg-item__img a {
	display: block;
	width:   100%;
	height:  100%;
}

.wpg-item__img img {
	display:         block;
	width:           100%;
	height:          100%;
	object-fit:      cover;                                           /* overrideable via Elementor */
	object-position: var(--wpg-img-pos-x, 50%) var(--wpg-img-pos-y, 50%);

	/*
	 * Base zoom controlled by the Elementor "Image Zoom" slider.
	 * The active-state animation multiplies this value so the settle
	 * effect is always relative to the user-defined zoom level.
	 */
	transform:  scale(var(--wpg-img-zoom, 1));
	transition: transform var(--wpg-transition, 420ms) cubic-bezier(.2, 0, .2, 1);
}

.wpg-item.is-active .wpg-item__img img {
	/* Settle animation: starts zoomed-in extra, eases to resting zoom */
	animation: wpg-img-settle var(--wpg-transition, 420ms) cubic-bezier(.2, 0, .2, 1) both;
}

/* Fallback when no thumbnail */
.wpg-no-image {
	width:      100%;
	height:     100%;
	background: linear-gradient(135deg, #c9d6df 0%, #e2ebf0 100%);
}

/* --------------------------------------------------------------------------
   Overlay (gradient + content)
   -------------------------------------------------------------------------- */
.wpg-overlay {
	--wpg-overlay-top:    rgba(0, 0, 0, 0);
	--wpg-overlay-bottom: rgba(0, 0, 0, .82);

	position: absolute;
	inset:    0;
	display:  flex;
	flex-direction: column;
	justify-content: flex-end;

	background: linear-gradient(
		to top,
		var(--wpg-overlay-bottom) 0%,
		rgba(0, 0, 0, .3)         40%,
		var(--wpg-overlay-top)    100%
	);

	opacity:    0;
	transition: opacity var(--wpg-transition) cubic-bezier(.4, 0, .2, 1);
}

.wpg-item.is-active .wpg-overlay {
	/*
	 * Animation handles fade-in when is-active is ADDED (including page load).
	 * The transition on .wpg-overlay handles the fade-out when is-active is REMOVED.
	 * CSS animations take precedence over transitions, so there is no conflict.
	 */
	animation: wpg-overlay-in var(--wpg-transition, 420ms) ease both;
}

/* --------------------------------------------------------------------------
   Category badges – top-left corner
   -------------------------------------------------------------------------- */
.wpg-cats {
	position: absolute;
	top:      1rem;
	left:     1rem;
	right:    1rem;
	display:  flex;
	flex-wrap: wrap;
	gap:      0.35rem;
}

.wpg-cat {
	display:         inline-block;
	padding:         0.2em 0.55em;
	font-size:       0.7rem;
	font-weight:     700;
	text-transform:  uppercase;
	letter-spacing:  0.06em;
	color:           #fff;
	background:      rgba(255, 255, 255, .18);
	border-radius:   4px;
	text-decoration: none;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition:      background .2s ease;
}

.wpg-cat:hover {
	background: rgba(255, 255, 255, .32);
	color:      #fff;
}

/* --------------------------------------------------------------------------
   Content area (bottom of overlay)
   -------------------------------------------------------------------------- */
.wpg-content {
	padding: 1rem 1.125rem 1.125rem;
	display:  flex;
	flex-direction: column;
	gap:      0.45rem;
}

/* Title */
.wpg-title {
	margin:      0;
	font-size:   1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color:       #fff;
}

.wpg-title a {
	color:           inherit;
	text-decoration: none;
}

.wpg-title a:hover {
	text-decoration: underline;
}

/* Excerpt */
.wpg-excerpt {
	margin:      0;
	font-size:   0.83rem;
	line-height: 1.55;
	color:       rgba(255, 255, 255, .88);

	/* Cap at 3 lines for visual consistency */
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

/* Meta row */
.wpg-meta {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         0.5rem 0.85rem;
	font-size:   0.75rem;
	color:       rgba(255, 255, 255, .72);
}

.wpg-meta a {
	color:           inherit;
	text-decoration: none;
}

.wpg-meta a:hover {
	color: #fff;
}

.wpg-meta__date::before   { content: "📅 "; }
.wpg-meta__author::before { content: "✍ "; }
.wpg-meta__reading::after { content: " read"; }

/* Read more button */
.wpg-read-more {
	display:         inline-block;
	align-self:      flex-start;
	padding:         0.4rem 1.1rem;
	font-size:       0.78rem;
	font-weight:     600;
	color:           #fff;
	background:      rgba(255, 255, 255, .2);
	border-radius:   5px;
	text-decoration: none;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition:      background .2s ease, transform .15s ease;
}

.wpg-read-more:hover {
	background: rgba(255, 255, 255, .38);
	color:      #fff;
	transform:  translateY(-1px);
}

/* --------------------------------------------------------------------------
   Switch transition: staggered content entrance
   --------------------------------------------------------------------------
   Every time is-active is toggled onto an item, the browser restarts all
   animations whose selector newly matches — giving us a free "replay on
   every switch" without any JavaScript.
   -------------------------------------------------------------------------- */

/* Overlay: fade in on activation, fade out via transition on deactivation   */
@keyframes wpg-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Image: zoom in from slightly larger → resting scale, relative to user zoom */
@keyframes wpg-img-settle {
	from { transform: scale(calc(var(--wpg-img-zoom, 1) * 1.12)); }
	to   { transform: scale(calc(var(--wpg-img-zoom, 1) * 1.04)); }
}

/* Generic entrance used by all content elements                              */
@keyframes wpg-fade-up {
	from {
		opacity:   0;
		transform: translateY(12px);
	}
	to {
		opacity:   1;
		transform: translateY(0);
	}
}

/*
 * Stagger delays (all use fill-mode "both" so the element starts at the
 * "from" state during its delay and stays at "to" after it finishes).
 */
.wpg-item.is-active .wpg-cats {
	animation: wpg-fade-up 0.45s cubic-bezier(.2, 0, .2, 1)  60ms both;
}

.wpg-item.is-active .wpg-title {
	animation: wpg-fade-up 0.45s cubic-bezier(.2, 0, .2, 1) 130ms both;
}

.wpg-item.is-active .wpg-excerpt {
	animation: wpg-fade-up 0.45s cubic-bezier(.2, 0, .2, 1) 195ms both;
}

.wpg-item.is-active .wpg-meta {
	animation: wpg-fade-up 0.4s  cubic-bezier(.2, 0, .2, 1) 250ms both;
}

.wpg-item.is-active .wpg-read-more {
	animation: wpg-fade-up 0.4s  cubic-bezier(.2, 0, .2, 1) 295ms both;
}

/* --------------------------------------------------------------------------
   Progress bar (autoplay timer)
   -------------------------------------------------------------------------- */
.wpg-progress {
	position:   absolute;
	bottom:     0;
	left:       0;
	right:      0;
	height:     3px;
	overflow:   hidden;
	background: rgba(255, 255, 255, .25);
	z-index:    6;

	/* Invisible on inactive items; fades in with the overlay */
	opacity:    0;
	transition: opacity var(--wpg-transition, 420ms) ease;
}

.wpg-item.is-active .wpg-progress {
	opacity: 1;
}

.wpg-progress__fill {
	position:         absolute;
	inset:            0;
	background:       #fff;
	transform:        scaleX(0);
	transform-origin: left center;
	/* No CSS transition — JS drives this via RAF for perfect pause/resume */
}

/* Paused state: dim the fill slightly so the user sees it's frozen */
.wpg-grid.is-paused .wpg-item.is-active .wpg-progress__fill {
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   "No posts" message
   -------------------------------------------------------------------------- */
.wpg-no-posts {
	padding:     1rem;
	color:       #666;
	font-style:  italic;
}

/* --------------------------------------------------------------------------
   Responsive fallbacks (editor / small screens without Elementor breakpoints)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.wpg-grid { --wpg-columns: 2; }
}

@media (max-width: 640px) {
	.wpg-grid { --wpg-columns: 1; }
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
	.wpg-item,
	.wpg-item__img img,
	.wpg-overlay {
		transition: none !important;
	}

	.wpg-item__img img { transform: scale(var(--wpg-img-zoom, 1)) !important; }

	.wpg-item.is-active .wpg-overlay,
	.wpg-item.is-active .wpg-item__img img,
	.wpg-item.is-active .wpg-cats,
	.wpg-item.is-active .wpg-title,
	.wpg-item.is-active .wpg-excerpt,
	.wpg-item.is-active .wpg-meta,
	.wpg-item.is-active .wpg-read-more {
		animation: none !important;
	}
}