/* ==========================================================================
   ART CENTRRAL — signage "shot" component
   ==========================================================================

   Pure-CSS renderings of the signage types ART CENTRRAL makes: illuminated
   acrylic, neon, built-up 3D letters, clip-on light box, flex banner, glass
   film, name plate, print set, standee.

   WHY THESE EXIST
   ---------------
   They are the site's art direction until the client's own photographs land.
   Two reasons they are used in preference to stock photography:

     1. They are one coherent set — same light, same angle, same palette — so
        the service grid and portfolio read as a designed range rather than a
        scrapbook. This is most of what makes the approved design look premium.
     2. They are original. Stock photographs of signage are, unavoidably,
        photographs of OTHER companies' signs and branding, sitting in a grid
        captioned as ART CENTRRAL's work.

   Each one is replaced by a real <img> the moment a photograph exists for that
   slot — see wp-build/09-client-photos.php. Nothing here needs unpicking
   first; the page build simply emits an Image widget instead.

   Themeable per instance with --shot-glow and --shot-accent.
   ========================================================================== */

.ac-shot {
	--shot-wall: #1b1c20;
	--shot-wall-2: #2a2c33;
	--shot-ink: #ffffff;
	--shot-glow: #ffffff;
	--shot-accent: var(--ac-primary, #e4572e);

	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(160deg, var(--shot-wall-2), var(--shot-wall));
	isolation: isolate;

	/* Type inside a shot scales with the shot's own width, not the viewport,
	   so the same markup reads correctly as a hero and as a grid thumbnail. */
	container-type: inline-size;
}

/* Vignette and light fall, so each one reads as a photographed surface
   rather than a flat graphic. */
.ac-shot::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.14), transparent 55%),
		radial-gradient(100% 100% at 50% 110%, rgba(0,0,0,.42), transparent 60%);
}

.ac-shot__sign {
	position: relative;
	z-index: 2;
	padding: 0 8%;
	margin: 0;
	text-align: center;
	font-family: var(--ac-font-head, "Manrope", sans-serif);
	font-weight: 800;
	font-size: clamp(15px, 4.4cqw, 30px);
	letter-spacing: .16em;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--shot-ink);
}

.ac-shot__sub {
	display: block;
	margin-top: .5em;
	font-size: .42em;
	letter-spacing: .3em;
	font-weight: 600;
	opacity: .72;
}

/* ---------- 1. Illuminated acrylic / LED board --------------------------- */
.ac-shot--led {
	background:
		linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
		linear-gradient(160deg, #303239, #16171b);
}
.ac-shot--led::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 18% 12%;
	border-radius: 6px;
	background: linear-gradient(180deg, #f8fafc, #d9dee6);
	box-shadow:
		0 0 0 3px rgba(255,255,255,.14),
		0 0 46px 6px rgba(255,255,255,.30),
		0 26px 44px rgba(0,0,0,.45);
}
.ac-shot--led .ac-shot__sign {
	color: #16181d;
	text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* ---------- 2. Neon logo -------------------------------------------------- */
.ac-shot--neon {
	background:
		radial-gradient(70% 60% at 50% 45%, rgba(255,255,255,.10), transparent 70%),
		repeating-linear-gradient(90deg, #17181c 0 38px, #14151a 38px 40px),
		#131418;
}
.ac-shot--neon .ac-shot__sign {
	color: #fff;
	font-weight: 700;
	letter-spacing: .1em;
	text-shadow:
		0 0 6px var(--shot-glow),
		0 0 18px var(--shot-glow),
		0 0 44px var(--shot-glow),
		0 0 82px var(--shot-glow);
}
.ac-shot--neon::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	/* Fallback first for browsers without color-mix(). */
	background: radial-gradient(45% 40% at 50% 50%, rgba(255,255,255,.22), transparent 72%);
	background: radial-gradient(45% 40% at 50% 50%, color-mix(in srgb, var(--shot-glow) 26%, transparent), transparent 72%);
}

/* ---------- 3. Built-up 3D letters ---------------------------------------- */
.ac-shot--3d {
	background: linear-gradient(165deg, #f4f4f1 0%, #e2e2dd 55%, #d3d3cd 100%);
}
.ac-shot--3d::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: repeating-linear-gradient(115deg, rgba(0,0,0,.035) 0 2px, transparent 2px 26px);
}
.ac-shot--3d .ac-shot__sign {
	color: #15161a;
	text-shadow:
		1px 1px 0 #a9aaa5, 2px 2px 0 #9b9c97, 3px 3px 0 #8d8e89,
		4px 4px 0 #7f807b, 6px 7px 14px rgba(0,0,0,.35);
}
.ac-shot--3d .ac-shot__sub { color: var(--shot-accent); opacity: 1; text-shadow: none; }

/* ---------- 4. Clip-on light box ------------------------------------------ */
.ac-shot--box { background: linear-gradient(160deg, #24262c, #14151a); }
.ac-shot--box::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 12% 20%;
	border: 8px solid #b9bec7;
	border-radius: 4px;
	background: linear-gradient(180deg, #ffffff, #eef2f7 60%, #dfe5ec);
	box-shadow: 0 0 40px 8px rgba(255,255,255,.22), inset 0 0 30px rgba(0,0,0,.06);
}
.ac-shot--box .ac-shot__sign { color: #1a1c22; }
.ac-shot--box .ac-shot__sub { color: var(--shot-accent); opacity: 1; }

/* ---------- 5. Flex / vinyl banner ---------------------------------------- */
.ac-shot--flex {
	background: repeating-linear-gradient(135deg, #d1471f 0 46px, #a93816 46px 92px);
	background: repeating-linear-gradient(135deg,
		color-mix(in srgb, var(--shot-accent) 92%, #000) 0 46px,
		color-mix(in srgb, var(--shot-accent) 74%, #000) 46px 92px);
}
.ac-shot--flex::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 16% 9%;
	background: #fbfbf9;
	box-shadow: 0 22px 40px rgba(0,0,0,.28);
	/* Slight trapezoid — a banner never hangs perfectly square. */
	clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
}
.ac-shot--flex .ac-shot__sign { color: #15161a; }

/* ---------- 6. Office branding / glass film -------------------------------- */
.ac-shot--office { background: linear-gradient(180deg, #dfe6ee, #b9c5d2 70%, #9fadbd); }
.ac-shot--office::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,.72) 0 9px, rgba(255,255,255,0) 9px 18px),
		linear-gradient(115deg, rgba(255,255,255,.55) 0 30%, transparent 30% 46%, rgba(255,255,255,.4) 46% 60%, transparent 60%);
}
.ac-shot--office .ac-shot__sign {
	color: #10161f;
	background: rgba(255,255,255,.86);
	padding: .55em 1em;
	border-radius: 2px;
}

/* ---------- 7. Name plate -------------------------------------------------- */
.ac-shot--plate { background: linear-gradient(150deg, #3a3d45, #1e2026); }
.ac-shot--plate::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 26% 15%;
	border-radius: 3px;
	background:
		repeating-linear-gradient(92deg, rgba(255,255,255,.16) 0 1px, transparent 1px 5px),
		linear-gradient(140deg, #cfd4da, #8f959e 45%, #e6eaee 60%, #9aa0a8);
	box-shadow: 0 16px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35);
}
.ac-shot--plate .ac-shot__sign {
	color: #16181d;
	font-size: clamp(13px, 3.4cqw, 22px);
	letter-spacing: .22em;
}

/* ---------- 8. Print set / stationery -------------------------------------- */
.ac-shot--print { background: linear-gradient(160deg, #f5f4f0, #e3e2dc); }
.ac-shot--print::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 22% 18%;
	background: #fff;
	/* Two offset copies behind the top sheet read as a stack. */
	box-shadow:
		0 0 0 1px rgba(0,0,0,.06),
		16px -14px 0 -2px #c94a22,
		30px -28px 0 -4px rgba(0,0,0,.82),
		0 24px 40px rgba(0,0,0,.18);
	box-shadow:
		0 0 0 1px rgba(0,0,0,.06),
		16px -14px 0 -2px color-mix(in srgb, var(--shot-accent) 88%, #000),
		30px -28px 0 -4px rgba(0,0,0,.82),
		0 24px 40px rgba(0,0,0,.18);
}
.ac-shot--print .ac-shot__sign { color: #15161a; }

/* ---------- 9. Standee ------------------------------------------------------ */
.ac-shot--standee { background: linear-gradient(160deg, #eceae4, #d8d5cd); }
.ac-shot--standee::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 8% 33% 6%;
	background: linear-gradient(180deg, #ffffff, #f2f4f7);
	border-radius: 3px 3px 0 0;
	box-shadow: 0 18px 34px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.05);
}
.ac-shot--standee .ac-shot__sign {
	color: #15161a;
	font-size: clamp(11px, 2.6cqw, 18px);
}

/* ---------- aspect helpers -------------------------------------------------- */
.ac-shot--wide   { aspect-ratio: 16 / 9; }
.ac-shot--tall   { aspect-ratio: 3 / 4; }
.ac-shot--square { aspect-ratio: 1 / 1; }
.ac-shot--hero   { aspect-ratio: 5 / 4; }

/* A shot never sets its own min-height: at narrow widths that inflates the
   grid track it sits in and pushes the page wider than the viewport. */
.ac-shot { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
	.ac-shot, .ac-shot > * { transition: none !important; }
}