/* Upp Base: section bands and shared pieces that are not a block's own. */
.upp-band {
	padding-block: var(--wp--preset--spacing--section);
	background: var(--wp--preset--color--light);
}

.upp-band--tint {
	background: var(--wp--preset--color--accent-light);
}

.upp-band > h2 {
	margin-block-start: 0;
}

/* Portfolio loop: two across from tablet up, one below. */
@media (max-width: 767.98px) {
	.upp-portfolio .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Browser frame (inc/browser-frame.php): a screenshot in minimal chrome. */
.upp-frame {
	--upp-frame-bar: 30px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line, #0000001a);
	border-radius: 10px;
	background: var(--wp--preset--color--light, #fff);
	box-shadow: 0 1px 2px rgba(22, 20, 31, 0.05), 0 12px 32px -8px rgba(22, 20, 31, 0.16);
}

.upp-frame__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--upp-frame-bar);
	padding-inline: 12px;
	border-bottom: 1px solid var(--wp--preset--color--line, #0000001a);
	background: var(--wp--preset--color--light, #fff);
}

.upp-frame__dots {
	display: inline-flex;
	flex: none;
	gap: 6px;
}

.upp-frame__dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--line, #0000001a);
}

.upp-frame__address {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	max-width: 60%;
	margin-inline: auto;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-light, #f5f5f5);
	color: var(--wp--preset--color--secondary-text, #555);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.upp-frame__domain {
	overflow: hidden;
	text-overflow: ellipsis;
}

.upp-frame__lock {
	flex: none;
	opacity: 0.7;
}

.upp-frame__screen {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--accent-light, #f5f5f5);
}

.upp-frame__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* Balances the dots so the address pill sits on the frame's centre line. */
.upp-frame__bar::after {
	content: "";
	flex: none;
	width: 36px;
}