/*
 * Dr. APK — CPT Dynamic Styles
 * Treatment cards with real photo backgrounds.
 * Result cards with real before/after photo backgrounds.
 * Extends theme.css — enqueued after it on front page only.
 *
 * @package dr-apk
 * @version 1.1.0
 */

/* ══════════════════════════════════════════════════
   TREATMENT HERO PANEL — photo background
   .al-bg--photo overrides the static gradient fallback.
   All other .al-* rules (overlay, cert, content, hover
   zoom) remain unchanged in theme.css.
══════════════════════════════════════════════════ */

/* Photo variant: use background-image set inline via PHP */
.al-bg--photo {
	background-color: var(--navy-mid);
	background-size: cover;
	background-position: center;
	/* Scale animation from theme.css still applies via .al-bg */
}

/* ══════════════════════════════════════════════════
   TREATMENT GRID CARDS — photo backgrounds
   .tx-bg--photo overrides nth-child gradient fallbacks.
   Overlay (.tx-ov), accent (.tx-acc) and hover scale
   remain exactly as defined in theme.css.
══════════════════════════════════════════════════ */

.tx-bg--photo {
	background-color: var(--navy-card);
	background-size: cover;
	background-position: center;
	/* Transform/scale still controlled by .tx-bg rules in theme.css */
}

/*
 * When a photo is present, darken the nth-child gradient
 * fallbacks so they don't compete with the real image.
 * The .tx-ov overlay already handles this at ~94% opacity
 * at bottom — no additional rules needed.
 */

/* ══════════════════════════════════════════════════
   RESULT CARDS — single transformation collage image
   v1.2: replaces before/after dual-image slider.
   .res-card__image-wrap constrains the image to a
   consistent aspect ratio matching the old slider.
══════════════════════════════════════════════════ */

/* Image wrapper — same proportions as the old .rc-sl */
.res-card__image-wrap {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: #0C1420;
}

/* The collage image fills the wrapper */
.res-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.9s var(--ease, cubic-bezier(.16,1,.3,1));
}

.res-card:hover .res-card__image {
	transform: scale(1.04);
}

/* Fallback when no image uploaded */
.res-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, #0A1828 0%, #102035 50%, #0D1A2C 100%);
}

/* Before / After label overlay — purely decorative, positions same as old slider */
.res-card__img-labels {
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	z-index: 2;
}

/* ══════════════════════════════════════════════════
   RESULT GRID: up to 4 cards.
   res-grid uses 1fr 1fr in theme.css — unchanged.
══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   ADMIN-ONLY: meta box image picker styles are
   inlined in the meta box callback itself — no
   admin CSS file needed.
══════════════════════════════════════════════════ */