/* Smartize — Projetos: device composition.
 *
 * One stage for every project, so all rows read as one series:
 *  - browser window 16:10 (captures are 1440×900, shown whole, no cropping);
 *  - a realistic iPhone (screen 390:844 — the captures' exact ratio), with titanium rim,
 *    Dynamic Island and side buttons, overlapping the browser's bottom-right corner;
 *  - both devices live inside the stage; nothing hangs outside it.
 * Loaded on /projetos/, project categories and single projects (inc/projects.php).
 */

.shots {
	--phone-w: 22%;
	--pw: 22cqw;                  /* the same width, usable inside the phone */
	--phone-drop: 12%;            /* how far the phone sits below the browser */
	container-type: inline-size;
	position: relative;
	padding: 0 calc(var(--phone-w) * .38) var(--phone-drop) 0;
	isolation: isolate;
}
.shots:not(.has-phone) { padding: 0; }

/* Browser window ------------------------------------------------------------ */
.shot-browser {
	position: relative;
	z-index: 1;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(11, 18, 32, .08),
		0 2px 4px rgba(11, 18, 32, .04),
		0 24px 48px -20px rgba(11, 18, 32, .30);
	transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.shot-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; background: linear-gradient(#f7f8fa, #eef0f3); border-bottom: 1px solid #e3e6ea; }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
.shot-bar i:nth-child(2) { background: #febc2e; }
.shot-bar i:nth-child(3) { background: #28c840; }
.shot-bar span { position: absolute; left: 50%; transform: translateX(-50%); padding: 3px 16px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #e6e8ec; font: 500 .7rem/1.4 var(--font); color: var(--muted-2); }
.shot-browser .shot-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.shot-browser .schema { aspect-ratio: 16 / 10; }

/* iPhone --------------------------------------------------------------------- */
.shot-phone {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	width: var(--phone-w);
	aspect-ratio: 390 / 844;
	box-sizing: content-box;
	width: var(--pw);
	padding: calc(var(--pw) * .045);
	border-radius: calc(var(--pw) * .2);
	background: #111418;
	box-shadow:
		0 0 0 1.5px #9aa0a8,                    /* titanium rim */
		0 0 0 2.5px #2a2e34,
		inset 0 0 0 1px rgba(255, 255, 255, .08),
		0 30px 50px -18px rgba(11, 18, 32, .55),
		0 10px 18px -10px rgba(11, 18, 32, .35);
	transition: transform .7s var(--ease);
}
.shot-phone .shot-img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: top center;
	border-radius: calc(var(--pw) * .155);
}
/* Dynamic Island */
.shot-phone::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: calc(var(--pw) * .085);
	left: 50%;
	width: 31%;
	height: calc(var(--pw) * .085);
	border-radius: 999px;
	background: #000;
	transform: translateX(-50%);
}
/* Glass sheen */
.shot-phone::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 32%) no-repeat;
	border-radius: inherit;
	overflow: visible;
}

/* Hover: the pair lifts together, phone a touch more ----------------------- */
.work-media:hover .shot-browser { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(11, 18, 32, .08), 0 2px 4px rgba(11, 18, 32, .04), 0 32px 60px -22px rgba(11, 18, 32, .34); }
.work-media:hover .shot-phone { transform: translateY(-10px); }

/* List rows ------------------------------------------------------------------ */
.work-rows { gap: clamp(80px, 9vw, 136px); }
.work-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.work-row.is-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.work-row.is-flip .work-media { order: 2; }
.work-body { max-width: 30rem; }
.work-row.is-flip .work-body { justify-self: end; }
.work-meta { margin-bottom: 12px; }
.work-title { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.06; margin-bottom: 16px; }
.work-excerpt { font-size: 1.05rem; line-height: 1.6; margin-bottom: 22px; }

/* Single project ------------------------------------------------------------- */
.project-stage { max-width: 1080px; margin-inline: auto; }
.project-stage .shots { --phone-w: 20%; --pw: 20cqw; }

/* Tablet and phone: devices above the text; on phones the iPhone grows and
   overlaps more, so it stays legible instead of shrinking to an icon. */
@media (max-width: 900px) {
	.work-row, .work-row.is-flip { grid-template-columns: 1fr; gap: 28px; }
	.work-row.is-flip .work-media { order: 0; }
	.work-row.is-flip .work-body { justify-self: start; }
	.work-rows { gap: 80px; }
	.shots { --phone-w: 25%; --pw: 25cqw; }
}
@media (max-width: 600px) {
	.shots { --phone-w: 34%; --pw: 34cqw; --phone-drop: 26%; padding-right: calc(var(--phone-w) * .22); }
	.shot-bar { height: 22px; padding: 0 9px; gap: 5px; }
	.shot-bar i { width: 7px; height: 7px; }
	.shot-bar span { display: none; }
	.shot-browser { border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) {
	.shot-browser, .shot-phone { transition: none; }
}

/* MacBook ------------------------------------------------------------------------
   The browser window becomes a laptop: black bezel with camera, the page inside
   (browser bar included), and an aluminium base with the opening notch.
   Sizes in cqw (the stage's width), so every detail scales together. */
.shots { --lap-bezel: 1.1cqw; padding-left: 5.5%; }
.shots:not(.has-phone) { padding: 0 5.5% 3.2cqw; container-type: inline-size; }
.shot-browser {
	overflow: visible;
	padding: var(--lap-bezel) var(--lap-bezel) calc(var(--lap-bezel) * 1.6);
	border-radius: 1.6cqw 1.6cqw .5cqw .5cqw;
	background: #0c0e11;
	box-shadow:
		0 0 0 1px #2b2f35,
		inset 0 0 0 1px rgba(255, 255, 255, .06),
		0 30px 50px -26px rgba(11, 18, 32, .45);
}
.shot-browser::before { /* camera */
	content: "";
	position: absolute;
	top: calc(var(--lap-bezel) * .38);
	left: 50%;
	width: .45cqw;
	height: .45cqw;
	border-radius: 50%;
	background: #23272d;
	box-shadow: inset 0 0 0 1px #33383f;
	transform: translateX(-50%);
}
.shot-browser::after { /* aluminium base with notch */
	content: "";
	position: absolute;
	left: -6.5%;
	right: -6.5%;
	top: 100%;
	height: 1.7cqw;
	border-radius: 0 0 1.4cqw 1.4cqw / 0 0 1.1cqw 1.1cqw;
	background:
		radial-gradient(ellipse 9% 55% at 50% 0%, #a9aeb6 0 98%, transparent 100%) no-repeat,
		linear-gradient(#e9ebee, #c9cdd3 55%, #9aa0a8);
	box-shadow: 0 1px 0 #7c828a, 0 18px 26px -14px rgba(11, 18, 32, .45);
}
.shot-browser .shot-bar { border-radius: .5cqw .5cqw 0 0; height: 2.2cqw; min-height: 18px; }
.shot-browser .shot-img, .shot-browser .schema { border-radius: 0 0 .25cqw .25cqw; }
.shot-browser > :only-child { border-radius: .5cqw; }
.work-media:hover .shot-browser { transform: translateY(-4px); box-shadow: 0 0 0 1px #2b2f35, inset 0 0 0 1px rgba(255, 255, 255, .06), 0 38px 60px -28px rgba(11, 18, 32, .5); }

/* Phone sits in front of the laptop base, slightly lower. */
.shots.has-phone { --phone-drop: 9%; }
@media (max-width: 600px) {
	.shots { --lap-bezel: 1.4cqw; padding-left: 4%; }
	.shots.has-phone { --phone-drop: 24%; }
	.shot-browser .shot-bar { height: 3.4cqw; min-height: 0; }
}