/**
 * Image Grid Assist — front-end styles.
 *
 * @author Divi Assist
 */

/* Width / max-width / module alignment are the module's native Sizing group. */
.dia-image-grid-assist {
	width: 100%;
}

/* ----- Filter bar -------------------------------------------------------- */
.dia-image-grid-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var( --dia-filter-gap, 10px );
	justify-content: var( --dia-filter-justify, center );
	margin-bottom: var( --dia-filter-spacing, 24px );
}

.dia-grid-filter-btn {
	padding: var( --dia-filter-btn-padding, 8px 18px );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var( --dia-filter-color, #4b5563 );
	background: var( --dia-filter-bg, #f1f5f9 );
	border: var( --dia-filter-border-width, 0px ) solid var( --dia-filter-border, transparent );
	border-radius: var( --dia-filter-radius, 999px );
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.dia-grid-filter-btn:hover { background: var( --dia-filter-bg-hover, #e2e8f0 ); }
.dia-grid-filter-btn.is-active {
	color: var( --dia-filter-active-color, #ffffff );
	background: var( --dia-filter-active-bg, #2563eb );
}

/* ----- Grid track -------------------------------------------------------- */
.dia-image-grid {
	display: grid;
	grid-template-columns: repeat( var( --dia-grid-columns, 3 ), 1fr );
	gap: var( --dia-grid-gap, 20px );
}

/* Bento / magazine / asymmetric use fixed rows so spans have height. */
.dia-grid-layout-bento .dia-image-grid,
.dia-grid-layout-magazine .dia-image-grid,
.dia-grid-layout-asymmetric .dia-image-grid {
	grid-auto-rows: var( --dia-grid-row-height, 220px );
	grid-auto-flow: dense;
}

.dia-grid-layout-bento .is-featured,
.dia-grid-layout-asymmetric .is-featured { grid-column: span 2; grid-row: span 2; }
.dia-grid-layout-magazine .is-featured { grid-column: span 2; grid-row: span 2; }

/* Asymmetric: a couple of varied spans for rhythm. */
.dia-grid-layout-asymmetric .dia-image-grid-item:nth-child( 4n + 2 ) { grid-row: span 2; }
.dia-grid-layout-asymmetric .dia-image-grid-item:nth-child( 6n + 5 ) { grid-column: span 2; }

/* Randomize Layout Pattern: extra pseudo-random spans on the fixed-row layouts.
   Masonry/simple have no fixed rows for spans to grow into, so it no-ops there. */
.dia-grid-randomized.dia-grid-layout-bento .dia-image-grid-item:nth-child( 5n + 3 ),
.dia-grid-randomized.dia-grid-layout-magazine .dia-image-grid-item:nth-child( 5n + 3 ),
.dia-grid-randomized.dia-grid-layout-asymmetric .dia-image-grid-item:nth-child( 5n + 3 ) { grid-row: span 2; }
.dia-grid-randomized.dia-grid-layout-bento .dia-image-grid-item:nth-child( 7n + 6 ),
.dia-grid-randomized.dia-grid-layout-magazine .dia-image-grid-item:nth-child( 7n + 6 ),
.dia-grid-randomized.dia-grid-layout-asymmetric .dia-image-grid-item:nth-child( 7n + 6 ) { grid-column: span 2; }

/* Masonry — Packery positions items; the CSS fallback uses CSS columns. */
.dia-grid-layout-masonry:not( .dia-grid-packery ) .dia-image-grid {
	display: block;
	column-count: var( --dia-grid-columns, 3 );
	column-gap: var( --dia-grid-gap, 20px );
}
.dia-grid-layout-masonry:not( .dia-grid-packery ) .dia-image-grid-item {
	break-inside: avoid;
	margin-bottom: var( --dia-grid-gap, 20px );
}
.dia-grid-layout-masonry.dia-grid-packery .dia-image-grid { display: block; }
.dia-grid-layout-masonry.dia-grid-packery .dia-image-grid-item {
	width: calc( ( 100% - var( --dia-grid-gap, 20px ) * ( var( --dia-grid-columns, 3 ) - 1 ) ) / var( --dia-grid-columns, 3 ) );
	/* No margin-bottom here: Packery's gutter already spaces items vertically AND
	   horizontally, so a margin would double the vertical gap. */
}

/* ----- Item + card ------------------------------------------------------- */
.dia-image-grid-item { min-width: 0; }
.dia-image-grid-item.is-load-hidden { display: none; }
.dia-image-grid-item.is-filtered-out { display: none; }

.dia-grid-card {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	/* Default radius; the native Card Border group (Design tab) overrides it. */
	border-radius: 12px;
	overflow: var( --dia-card-overflow, hidden );
	background: var( --dia-card-bg, transparent );
}

/* ----- Image ------------------------------------------------------------- */
.dia-grid-image-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
	line-height: 0;
	aspect-ratio: var( --dia-grid-aspect, auto );
}

/* Grid layouts with fixed rows need the wrap to fill the cell. */
.dia-grid-layout-bento .dia-grid-image-wrap,
.dia-grid-layout-magazine .dia-grid-image-wrap,
.dia-grid-layout-asymmetric .dia-grid-image-wrap,
.dia-grid-layout-simple .dia-grid-image-wrap { aspect-ratio: var( --dia-grid-aspect, auto ); }

.dia-grid-layout-bento .dia-grid-card,
.dia-grid-layout-magazine .dia-grid-card,
.dia-grid-layout-asymmetric .dia-grid-card { height: 100%; }
.dia-grid-layout-bento .dia-grid-image-wrap,
.dia-grid-layout-magazine .dia-grid-image-wrap,
.dia-grid-layout-asymmetric .dia-grid-image-wrap { aspect-ratio: auto; height: 100%; }

.dia-grid-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var( --dia-image-fit, cover );
	object-position: var( --dia-image-position, center );
	opacity: var( --dia-image-opacity, 1 );
	transition: transform var( --dia-hover-duration, 500ms ) var( --dia-hover-easing, ease ), filter 0.35s ease;
}

/* Image filter presets (class-based; see the PHP note on sanitised variables). */
.dia-grid-filter-grayscale .dia-grid-image { filter: grayscale( 1 ); }
.dia-grid-filter-sepia .dia-grid-image { filter: sepia( 0.7 ); }
.dia-grid-filter-blur .dia-grid-image { filter: blur( 2px ); }
.dia-grid-filter-brightness .dia-grid-image { filter: brightness( 1.15 ); }
.dia-grid-filter-contrast .dia-grid-image { filter: contrast( 1.2 ); }
.dia-grid-filter-saturate .dia-grid-image { filter: saturate( 1.4 ); }
.dia-grid-has-filter .dia-grid-card:hover .dia-grid-image { filter: none; }

/* Hover easing presets (class-based, set the shared --dia-hover-easing var). */
.dia-grid-ease-linear { --dia-hover-easing: linear; }
.dia-grid-ease-ease-in { --dia-hover-easing: ease-in; }
.dia-grid-ease-ease-out { --dia-hover-easing: ease-out; }
.dia-grid-ease-ease-in-out { --dia-hover-easing: ease-in-out; }
.dia-grid-ease-smooth { --dia-hover-easing: cubic-bezier( 0.4, 0, 0.2, 1 ); }
.dia-grid-ease-premium { --dia-hover-easing: cubic-bezier( 0.16, 1, 0.3, 1 ); }

.dia-grid-zoom .dia-grid-card:hover .dia-grid-image,
.dia-grid-zoom .dia-grid-card:focus-within .dia-grid-image {
	transform: scale( var( --dia-image-hover-scale, 1.08 ) );
}

/* ----- Overlay ----------------------------------------------------------- */
.dia-grid-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	opacity: var( --dia-overlay-opacity, 1 );
	background: var( --dia-overlay-color, transparent );
	mix-blend-mode: var( --dia-overlay-blend, normal );
	transition: background 0.35s ease;
}
.dia-grid-card:hover .dia-grid-overlay { background: var( --dia-overlay-hover, var( --dia-overlay-color, transparent ) ); }

/* ----- Content box ------------------------------------------------------- */
.dia-grid-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: var( --dia-content-align, flex-start );
	justify-content: var( --dia-content-justify, flex-end );
	gap: 6px;
	padding: var( --dia-content-pad, 20px );
	color: #ffffff;
	text-align: var( --dia-content-text-align, left );
	box-sizing: border-box;
	pointer-events: none;
}
.dia-grid-content::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var( --dia-content-scrim, linear-gradient( to top, rgba( 0, 0, 0, 0.7 ) 0%, rgba( 0, 0, 0, 0 ) 60% ) );
	border-radius: inherit;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.35s ease;
}
.dia-grid-content > * { pointer-events: auto; max-width: var( --dia-content-max-width, 100% ); }

/* Text (size / weight / colour / letter-spacing …) is the native Badge Font
   group; the values below are the defaults it overrides. */
.dia-grid-category {
	display: inline-block;
	align-self: var( --dia-content-align, flex-start );
	padding: var( --dia-category-padding, 3px 10px );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffffff;
	background: var( --dia-category-bg, rgba( 37, 99, 235, 0.9 ) );
	border-radius: var( --dia-category-radius, 4px );
}
.dia-grid-caption { margin: 0; color: var( --dia-caption-color, #ffffff ); font-size: 18px; line-height: 1.3; }
.dia-grid-description { margin: 0; color: var( --dia-desc-color, rgba( 255, 255, 255, 0.88 ) ); font-size: 14px; line-height: 1.5; }
.dia-grid-description :last-child { margin-bottom: 0; }

/* ----- Content visibility + hover effects -------------------------------- */
.dia-grid-visibility-hidden .dia-grid-content { display: none; }
.dia-grid-visibility-always .dia-grid-content { opacity: 1; }

.dia-grid-visibility-on-hover .dia-grid-content,
.dia-grid-visibility-on-focus .dia-grid-content {
	opacity: 0;
	transition: opacity var( --dia-hover-duration, 400ms ) var( --dia-hover-easing, ease ), transform var( --dia-hover-duration, 400ms ) var( --dia-hover-easing, ease );
}
.dia-grid-visibility-on-hover .dia-grid-card:hover .dia-grid-content,
.dia-grid-visibility-on-focus .dia-grid-card:focus-within .dia-grid-content { opacity: 1; transform: none; }

/* Hover-effect starting transforms (applied while not hovered). */
.dia-grid-hover-fade_up .dia-grid-card:not( :hover ) .dia-grid-content { transform: translateY( 18px ); }
.dia-grid-hover-fade_down .dia-grid-card:not( :hover ) .dia-grid-content { transform: translateY( -18px ); }
.dia-grid-hover-slide_up .dia-grid-card:not( :hover ) .dia-grid-content { transform: translateY( 40px ); }
.dia-grid-hover-slide_left .dia-grid-card:not( :hover ) .dia-grid-content { transform: translateX( 30px ); }
.dia-grid-hover-zoom_in .dia-grid-card:not( :hover ) .dia-grid-content { transform: scale( 0.88 ); }
.dia-grid-hover-zoom_out .dia-grid-card:not( :hover ) .dia-grid-content { transform: scale( 1.12 ); }
.dia-grid-hover-blur_in .dia-grid-card:not( :hover ) .dia-grid-content { filter: blur( 6px ); }
.dia-grid-hover-rotate_in .dia-grid-card:not( :hover ) .dia-grid-content { transform: rotate( -4deg ) translateY( 14px ); }
.dia-grid-hover-flip .dia-grid-card:not( :hover ) .dia-grid-content { transform: perspective( 600px ) rotateX( 30deg ); }

/* Shine + gradient sweep effects. */
.dia-grid-hover-shine .dia-grid-image-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	z-index: 2;
	background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, 0.4 ), transparent );
	transform: skewX( -18deg );
	transition: left 0.6s ease;
	pointer-events: none;
}
.dia-grid-hover-shine .dia-grid-card:hover .dia-grid-image-wrap::after { left: 130%; }

/* ----- Lightbox affordance ----------------------------------------------- */
.dia-image-grid-item[data-lightbox-enabled="on"] .dia-grid-card { cursor: zoom-in; }

/* ----- Load more (native Divi button, styled via the Design tab) --------- */
.dia-grid-load-more-wrap { margin-top: 28px; text-align: var( --dia-load-more-align, center ); }
.dia-grid-load-more-wrap .et_pb_button { cursor: pointer; }
.dia-grid-load-more-wrap.is-loading .et_pb_button { opacity: 0.6; pointer-events: none; }
.dia-grid-load-more-wrap.is-complete { display: none; }

.dia-grid-empty { text-align: center; padding: 40px 20px; color: #6b7280; }
.dia-grid-empty-state { padding: 40px; text-align: center; color: #6b7280; border: 1px dashed #cbd5e1; border-radius: 12px; }

/* ----- Lightbox ---------------------------------------------------------- */
.dia-grid-lightbox { position: fixed; inset: 0; z-index: 9999999; display: none; align-items: center; justify-content: center; }
.dia-grid-lightbox.is-open { display: flex; }
.dia-grid-lightbox-overlay { position: absolute; inset: 0; background: var( --dia-lightbox-overlay, rgba( 8, 11, 22, 0.92 ) ); -webkit-backdrop-filter: blur( 2px ); backdrop-filter: blur( 2px ); }
.dia-grid-lightbox-content { position: relative; z-index: 1; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; }
.dia-grid-lightbox-image { max-width: var( --dia-lightbox-max-width, 90vw ); max-height: var( --dia-lightbox-max-height, 82vh ); border-radius: 6px; box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.5 ); }
.dia-grid-lightbox-meta { margin-top: 14px; text-align: center; max-width: 700px; }
.dia-grid-lightbox-caption { color: var( --dia-lightbox-caption, #ffffff ); font-size: 17px; font-weight: 600; }
.dia-grid-lightbox-description { color: var( --dia-lightbox-desc, rgba( 255, 255, 255, 0.75 ) ); font-size: 14px; margin-top: 4px; }
.dia-grid-lightbox-close,
.dia-grid-lightbox-prev,
.dia-grid-lightbox-next {
	position: absolute;
	z-index: 2;
	width: 46px;
	height: 46px;
	border: none;
	border-radius: var( --dia-lightbox-control-radius, 50% );
	background: var( --dia-lightbox-control-bg, rgba( 255, 255, 255, 0.14 ) );
	color: var( --dia-lightbox-control-color, #ffffff );
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.dia-grid-lightbox-close:hover,
.dia-grid-lightbox-prev:hover,
.dia-grid-lightbox-next:hover { background: rgba( 255, 255, 255, 0.28 ); }
.dia-grid-lightbox-close { top: 22px; right: 22px; }
.dia-grid-lightbox-prev { top: 50%; left: 22px; transform: translateY( -50% ); }
.dia-grid-lightbox-next { top: 50%; right: 22px; transform: translateY( -50% ); }
.dia-grid-lightbox-close::before { content: "\00d7"; font-size: 26px; line-height: 1; }
.dia-grid-lightbox-prev::before { content: "\2039"; font-size: 30px; line-height: 1; }
.dia-grid-lightbox-next::before { content: "\203a"; font-size: 30px; line-height: 1; }
.dia-grid-lightbox[data-nav="off"] .dia-grid-lightbox-prev,
.dia-grid-lightbox[data-nav="off"] .dia-grid-lightbox-next { display: none; }

/* ----- Responsive -------------------------------------------------------- */
@media ( max-width: 980px ) {
	.dia-image-grid { grid-template-columns: repeat( var( --dia-grid-tablet-columns, 2 ), 1fr ); }
	.dia-grid-layout-masonry:not( .dia-grid-packery ) .dia-image-grid { column-count: var( --dia-grid-tablet-columns, 2 ); }
}
@media ( max-width: 640px ) {
	.dia-image-grid { grid-template-columns: repeat( var( --dia-grid-mobile-columns, 1 ), 1fr ); }
	.dia-grid-layout-masonry:not( .dia-grid-packery ) .dia-image-grid { column-count: var( --dia-grid-mobile-columns, 1 ); }
	.dia-grid-layout-bento .is-featured, .dia-grid-layout-magazine .is-featured, .dia-grid-layout-asymmetric .is-featured,
	.dia-grid-layout-asymmetric .dia-image-grid-item { grid-column: auto; grid-row: auto; }
	.dia-image-grid-filter { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
	.dia-grid-lightbox-prev { left: 8px; }
	.dia-grid-lightbox-next { right: 8px; }
}

/* ----- Reduced motion ---------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.dia-reduce-motion .dia-grid-image,
	.dia-reduce-motion .dia-grid-content,
	.dia-reduce-motion .dia-grid-overlay { transition: none !important; }
	.dia-reduce-motion .dia-grid-card:hover .dia-grid-image { transform: none; }
}

/* Default heading-level sizes for the title/caption (overridable via the
   Title font group in the Design tab). Applies to whichever h1-h6 tag the
   chosen heading level renders. */
h1.dia-grid-caption { font-size: 31px; }
h2.dia-grid-caption { font-size: 23px; }
h3.dia-grid-caption { font-size: 18px; }
h4.dia-grid-caption { font-size: 15px; }
h5.dia-grid-caption { font-size: 13px; }
h6.dia-grid-caption { font-size: 12px; }