/*
Theme Name: Studio View
Description: Faithful renderer for WP Studio posts (wpstudio.post manifest v1). Full-viewport, tile grid derived from layout.rows, text overlays scaled per tile. Falls back to a plain post view when no manifest is present.
Version: 0.3.0
Requires at least: 6.3
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: studioview
*/

:root {
	--sv-bg: #ccc;          /* page background, per spec */
	--sv-cell-bg: #bbb;     /* behind a tile while its image loads / if it can't fill its cell */
	--sv-fg: #171717;
	--sv-muted: rgba(23, 23, 23, .62);
	--sv-gap: 10px;         /* tile-to-tile gap AND the page's own outer padding -- one fixed value */
	--sv-safe-t: env(safe-area-inset-top, 0px);
	--sv-safe-b: env(safe-area-inset-bottom, 0px);
	--sv-safe-l: env(safe-area-inset-left, 0px);
	--sv-safe-r: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--sv-bg);
	color: var(--sv-fg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: inherit; }

img { max-width: 100%; }

/* ---------------------------------------------------------- the stage --- */

/* Full device width, no pillarboxing: the post is a normal, vertically
   scrolling stack of rows. Each row is exactly as tall as its own aspect
   ratio makes it (set inline per row, server-computed) -- not fit into one
   overall page-height box. Side-swipe/arrow-keys move to the next/previous
   post (assets/js/app.js); this element is just their touch target. */
.sv-deck {
	display: block;
	width: 100%;
}

/* Uniform outer margin around the whole tile grid -- same value as the
   gap between tiles, so spacing reads as one consistent system. Used on
   both single posts and the home page. */
.sv-page-pad {
	padding: var(--sv-gap);
}

.sv-rows {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--sv-gap);
}

.sv-row {
	display: grid;
	gap: var(--sv-gap);
	width: 100%;
	/* aspect-ratio set inline per row: a plain number = width / height */
}

.sv-cell {
	position: relative;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	background: var(--sv-cell-bg);
	container-type: inline-size;
}

.sv-cell img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* whole tile, never cropped, never stretched */
	object-position: center;
}

/* Text overlay: positioned as a fraction of its own tile (server-computed),
   sized in container-query units so it scales with the tile's own rendered
   width regardless of viewport -- the browser-independent geometry the
   protocol calls for. */
.sv-overlay {
	position: absolute;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	pointer-events: none;
}

/* --------------------------------------------------------- home page --- */

.sv-brand, .sv-latest {
	background: var(--sv-cell-bg);
	display: flex;
}

.sv-brand-in {
	margin: auto;
	max-width: 84%;
	text-align: center;
}
.sv-brand-logo img { max-width: 40cqw; margin: 0 auto 4cqw; display: block; }
.sv-brand-name { font-weight: 700; font-size: 6cqw; letter-spacing: .02em; }
.sv-brand-tagline { margin-top: 2cqw; font-size: 3.6cqw; color: var(--sv-muted); }
.sv-brand-legal { margin-top: 6cqw; font-size: 3cqw; color: var(--sv-muted); }
.sv-brand-legal a { text-decoration: underline; }

.sv-latest {
	flex-direction: row;
	align-items: stretch;
	padding: 5cqw;
	gap: 4cqw;
}
.sv-latest-list {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.6cqw;
}
.sv-latest-list a {
	display: block;
	font-size: 3.4cqw;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
}
.sv-latest-list a:hover { text-decoration: underline; }
.sv-latest-image {
	flex: 0 0 auto;
	align-self: center;
	max-width: 40%;
}
.sv-latest-image img { display: block; width: 100%; height: auto; object-fit: contain; }

/* Desktop layout is parked deliberately (mobile-first, per spec) but the
   structure is kept ready for it: .sv-rows/.sv-row/.sv-cell are generic
   enough that a future masonry/grid refactor for wider viewports only
   needs to change this breakpoint, not the PHP that emits the markup. */
@media (min-width: 900px) {
	/* intentionally empty for now */
}

/* ------------------------------------------------------ floating chrome - */

.sv-ctrl {
	position: fixed;
	bottom: calc(16px + var(--sv-safe-b));
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(20, 20, 20, .55);
	backdrop-filter: blur(6px);
	color: var(--sv-fg);
	text-decoration: none;
	border: 0;
	cursor: pointer;
}
.sv-ctrl:hover { background: rgba(30, 30, 30, .7); }
.sv-ctrl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sv-ctrl svg { width: 20px; height: 20px; fill: currentColor; }
.sv-ctrl img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

.sv-logo { left: calc(14px + var(--sv-safe-l)); }
.sv-share { right: calc(14px + var(--sv-safe-r)); }

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------------------------------------------------- plain-post fallback */

.sv-plain {
	max-width: 720px;
	margin: 0 auto;
	padding: calc(32px + var(--sv-safe-t)) 20px calc(64px + var(--sv-safe-b));
	line-height: 1.6;
}
.sv-plain h1 { font-size: 1.6rem; margin: 0 0 .6em; }
.sv-plain .sv-debug {
	margin-top: 2em;
	padding: 12px 14px;
	background: #1c1c1c;
	border-radius: 8px;
	font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
	color: #f0a;
	white-space: pre-wrap;
}