/* ==========================================================================
   IMGCARD — the theme's universal artwork frame
   --------------------------------------------------------------------------
   Every artwork slot renders inside .sc-media.imgcard, whether it holds an
   animated SVG scene, an image, or a video. Because the frame lives on the
   wrapper rather than on a section class, the same styling applies wherever
   the widget is dropped — including a bare Elementor Image widget, if you add
   the class manually under Advanced → CSS Classes.

   Variants
     .imgcard            border + shadow + offset outline, natural size, capped
     .imgcard--cover     fills the column at a fixed height (photos, not logos)
     .imgcard--glass     nested glass panel with blur (matches the dark sections)

   Custom properties, all settable from the Elementor panel
     --card-radius   corner radius
     --card-max      width cap so a small SVG is not blown up
     --card-surface  surface behind a transparent logo
     --edge          offset outline colour
     --img-h         height for the cover variant
   ========================================================================== */

.imgcard {
	--card-radius: 14px;
	--card-max: 420px;
	--card-surface: rgba(255, 255, 255, .03);
	--edge: #2E9BDB;
	--card-ease: cubic-bezier(.19, 1, .22, 1);

	position: relative;
	display: block;
	width: auto;
	max-width: 100%;
	margin-inline: 0;
	isolation: isolate;
}

/* The media itself: natural size, capped, never stretched.
   The .attachment-* / .size-* selectors are matched deliberately — WordPress
   puts those classes on the <img>, and a global overflow fix targeting them
   would otherwise outrank a plain `.imgcard img`. */
.imgcard > .sc-media__inner,
.imgcard img,
.imgcard video,
.imgcard .attachment-large,
.imgcard .size-large {
	display: block;
	width: auto;
	max-width: min(100%, var(--card-max));
	height: auto;
	border-radius: var(--card-radius);
	background: var(--card-surface);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .75);
	transition: transform .5s var(--card-ease),
	            box-shadow .5s var(--card-ease),
	            border-color .5s var(--card-ease);
}

/* When the wrapper carries the frame, the inner media must not double it. */
.imgcard > .sc-media__inner {
	position: relative;
	overflow: hidden;
	padding: 0;
}

.imgcard > .sc-media__inner img,
.imgcard > .sc-media__inner video,
.imgcard > .sc-media__inner iframe,
.imgcard > .sc-media__inner svg {
	border: 0;
	box-shadow: none;
	background: none;
	border-radius: 0;
	max-width: 100%;
}

/* A scene or an embed fills its box; a plain image keeps its own proportions. */
.sc-media__inner > svg,
.sc-media__inner > iframe,
.sc-media__inner > video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-media__inner > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Aspect ratios, applied to the inner box so all three media types agree. */
.sc-media--r1-1 > .sc-media__inner { aspect-ratio: 1 / 1; }
.sc-media--r4-3 > .sc-media__inner { aspect-ratio: 4 / 3; }
.sc-media--r3-4 > .sc-media__inner { aspect-ratio: 3 / 4; }
.sc-media--r16-9 > .sc-media__inner { aspect-ratio: 16 / 9; }
.sc-media--r3-2 > .sc-media__inner { aspect-ratio: 3 / 2; }

/* Padding only makes sense around a logo on a light surface. */
.imgcard.sc-media--image > .sc-media__inner { padding: 0; }

/* ---- the offset frame behind the artwork ---- */
.imgcard::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 14px;
	top: 14px;
	width: min(100%, var(--card-max));
	height: 100%;
	border: 1px solid var(--edge);
	border-radius: var(--card-radius);
	opacity: 0;
	transform: translate(-8px, -8px);
	animation: imgcard-frame .9s var(--card-ease) .25s forwards;
	pointer-events: none;
}

@keyframes imgcard-frame {
	to { opacity: .5; transform: none; }
}

.imgcard:hover > .sc-media__inner,
.imgcard:hover > img {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, .25);
	box-shadow: 0 30px 56px -28px rgba(0, 0, 0, .85), 0 0 34px rgba(46,155,219, .14);
}

/* ---- variant: fill the column at a fixed height ---- */
.imgcard--cover > .sc-media__inner,
.imgcard--cover img,
.imgcard--cover .attachment-large,
.imgcard--cover .size-large {
	width: 100%;
	max-width: 100%;
	height: var(--img-h, 420px);
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center;
	padding: 0;
	background: none;
}

.imgcard--cover::before { width: 100%; }

/* ---- variant: nested glass panel ---- */
.imgcard--glass {
	--card-max: 100%;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 32px;
	background: rgba(255, 255, 255, .03);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
	transition: transform .5s var(--card-ease), border-color .5s var(--card-ease), box-shadow .5s var(--card-ease);
}

.imgcard--glass > .sc-media__inner {
	width: 100%;
	max-width: 100%;
	border: 0;
	border-radius: 20px;
	box-shadow: none;
	background: none;
}

.imgcard--glass::before { display: none; }

.imgcard--glass:hover {
	transform: translateY(-6px);
	border-color: rgba(110, 190, 240, .6);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(46,155,219, .2);
}

.imgcard--glass:hover > .sc-media__inner { transform: none; box-shadow: none; }

/* ---- caption ---- */
.sc-media .cap {
	display: block;
	margin-top: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--grey, #A6A1B0);
}

/* ---- responsive + reduced motion ---- */
@media (max-width: 767px) {
	.imgcard { --card-max: 100%; }
	.imgcard::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.imgcard::before { animation: none; opacity: .5; transform: none; }
	.imgcard:hover > .sc-media__inner,
	.imgcard:hover > img,
	.imgcard--glass:hover { transform: none; }
	.sc-media__video { display: none; }
}