/*
 * TJ Theme — image placeholder primitives
 *
 * CSS-driven portrait silhouette + generic image placeholder. Used by patterns
 * to render dignified placeholders when no real photo is supplied. Operators
 * swap with their own photos via the WP Media Library.
 *
 * Ported from HV's design system —
 *   design-databank/_inbox/practitioner-management-system-for-health-village-esher/tokens.css
 * which the HV NOTES.md explicitly flags as a "Premium Soft motif, reusable
 * across TJ Theme."
 *
 * Loaded on every page via TJ_Theme_Assets.
 */

/* ─────────────────────────────────────────────────────────────────
 * Portrait silhouette — gradient + head/shoulders pseudo-elements
 * Use:  <div class="tj-placeholder-portrait" data-tone="warm"></div>
 * ───────────────────────────────────────────────────────────────── */

.tj-placeholder-portrait {
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--surface-warm, #ECE6DA) 0%,
		var(--wp--preset--color--rule-soft, #E6E1D6) 100%
	);
	aspect-ratio: 4 / 5;
	width: 100%;
	border-radius: 10px;
}

/* Shoulders */
.tj-placeholder-portrait::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 70%;
	height: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
	border-radius: 999px 999px 0 0;
}

/* Head */
.tj-placeholder-portrait::after {
	content: '';
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(35%);
	width: 26%;
	aspect-ratio: 1;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
	border-radius: 999px;
}

/* Tone variants */
.tj-placeholder-portrait[data-tone="warm"] {
	background: linear-gradient(135deg, #E7DDD2 0%, #C49C8A 100%);
}

.tj-placeholder-portrait[data-tone="sage"] {
	background: linear-gradient(135deg, #DEE7DC 0%, #9DBAA7 100%);
}

.tj-placeholder-portrait[data-tone="cream"] {
	background: linear-gradient(135deg, #F1ECDF 0%, #D7C9A8 100%);
}

.tj-placeholder-portrait[data-tone="dark"] {
	background: linear-gradient(135deg, #2B3433 0%, #18221F 100%);
}

.tj-placeholder-portrait[data-tone="dark"]::before,
.tj-placeholder-portrait[data-tone="dark"]::after {
	background: color-mix(in srgb, var(--wp--preset--color--bg, #F4F1ED) 30%, transparent);
}

/* ─────────────────────────────────────────────────────────────────
 * Generic image placeholder — abstract gradient with uppercase label
 * Use:  <div class="tj-placeholder-image" data-label="Recent work"></div>
 * ───────────────────────────────────────────────────────────────── */

.tj-placeholder-image {
	position: relative;
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--surface-warm, #ECE6DA) 0%,
		color-mix(in srgb,
			var(--wp--preset--color--primary, #2F5F65) 14%,
			var(--wp--preset--color--surface, #FAF7F2)) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--mute);
	font-family: var(--wp--preset--font-family--sans, ui-sans-serif, system-ui, sans-serif);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
}

.tj-placeholder-image::after {
	content: attr(data-label);
}

.tj-placeholder-image[data-ratio="3:2"]  { aspect-ratio: 3 / 2; }
.tj-placeholder-image[data-ratio="4:5"]  { aspect-ratio: 4 / 5; }
.tj-placeholder-image[data-ratio="1:1"]  { aspect-ratio: 1 / 1; }
.tj-placeholder-image[data-ratio="16:9"] { aspect-ratio: 16 / 9; }

/* ─────────────────────────────────────────────────────────────────
 * Image fallback wrapper — used when <img> has src but might fail to load
 * ───────────────────────────────────────────────────────────────── */

.tj-img-frame {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: var(--wp--preset--color--surface-warm, #ECE6DA);
}

.tj-img-frame img,
.tj-img-frame picture,
.tj-img-frame picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}