/*
 * /concepten/ — Concepten (design/Portfolio.dc.html)
 * Every rule is scoped to .vvpage-concepten.
 *
 * The concept grid is a real Query Loop (SITE_PLAN §3): all per-card chrome
 * (browser frame, address bar, floating phone mock) is drawn with CSS
 * pseudo-elements on the core block classes — no hand-written card markup.
 */

/* =========================================================================
   0. PAGE SHELL
   ========================================================================= */
.vvpage-concepten { overflow-x: clip; }

/* Direct children of the page wrapper break out globally — style.css §3.6. */

/* =========================================================================
   1. PAGE INTRO
   Promoted to style.css §9.1 as the global .vv-page-intro component.
   ========================================================================= */
/* vv/page-intro — promoted to style.css §9.1 as the global .vv-page-intro
   component; the markup in content/concepten.html now uses those classes. */

/* =========================================================================
   2. CONCEPT GRID — Query Loop (concept, perPage -1, menu_order ASC, 2 cols)
   ========================================================================= */
.vvpage-concepten .vv-concepten__grid-section {
	padding: 0 var(--gutter) 96px;
}

.vvpage-concepten .vv-concept-grid { margin: 0; }

.vvpage-concepten .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 32px;
}
.vvpage-concepten .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- 2.1 The card ------------------------------------------------------ */
.vvpage-concepten .wp-block-post {
	/* one place to retune the mock geometry (see the responsive steps) */
	--mock-pad: 28px;   /* sand-2 padding around the browser frame */
	--mock-bar: 29px;   /* fake address-bar height                  */
	--shot-h: 260px;    /* top-cropped screenshot height            */
	--phone-w: 88px;
	--phone-h: 182px;

	position: relative;
	display: flex;
	flex-direction: column;
	/* The design's copy column is padding:26px 28px 28px — the 28px bottom gap
	   belongs to the CARD, not to the last child, so a concept without tags
	   (or without an excerpt) keeps the same breathing room. */
	padding-bottom: 28px;
	background: #fff;
	border: 1px solid rgba(44, 36, 32, .08);
	border-radius: 20px;
	overflow: hidden;
	transition: box-shadow .3s, transform .3s;
}
.vvpage-concepten .wp-block-post:hover {
	box-shadow: 0 24px 60px rgba(44, 36, 32, .12);
}
.vvpage-concepten .wp-block-post > * { margin-block-start: 0; margin-block-end: 0; }
.vvpage-concepten .wp-block-post > :not(.wp-block-post-featured-image) {
	padding-inline: 28px;
}

/* ---- 2.2 Browser mock — CSS-only chrome around the featured image ------- */
.vvpage-concepten .wp-block-post-featured-image {
	position: relative;
	margin: 0;
	background: var(--sand-2);
	/* top padding = sand-2 pad + address bar; +1px sides = the frame border */
	padding: calc(var(--mock-pad) + var(--mock-bar)) calc(var(--mock-pad) + 1px) 0;
}

/* the white frame: rounded top, no bottom border, lifted */
.vvpage-concepten .wp-block-post-featured-image::before {
	content: "";
	position: absolute;
	top: var(--mock-pad);
	left: var(--mock-pad);
	right: var(--mock-pad);
	bottom: 0;
	background: #fff;
	border: 1px solid rgba(44, 36, 32, .08);
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	box-shadow: 0 12px 32px rgba(44, 36, 32, .12);
	z-index: 0;
}

/* the address bar: three traffic-light dots + the hairline under them */
.vvpage-concepten .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	top: calc(var(--mock-pad) + 1px);
	left: calc(var(--mock-pad) + 1px);
	right: calc(var(--mock-pad) + 1px);
	height: calc(var(--mock-bar) - 1px);
	border-bottom: 1px solid rgba(44, 36, 32, .07);
	background-image:
		radial-gradient(circle at 3.5px 3.5px, #D9987A 3.5px, transparent 3.5px),
		radial-gradient(circle at 3.5px 3.5px, #C8DAC4 3.5px, transparent 3.5px),
		radial-gradient(circle at 3.5px 3.5px, #7A9E82 3.5px, transparent 3.5px);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: 7px 7px, 7px 7px, 7px 7px;
	background-position: 12px center, 24px center, 36px center;
	z-index: 2;
	pointer-events: none;
}

.vvpage-concepten .wp-block-post-featured-image img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: var(--shot-h);
	object-fit: cover;
	object-position: top;
	border-radius: 0;
}

/* ---- 2.3 Address-bar text (_concept_mock_url) --------------------------
   Core Query Loop cannot print post meta. The pill below only renders when a
   render filter puts data-vv-mock-url="…" on the per-post wrapper; without it
   the address bar stays clean chrome (dots only). Nothing to remove later. */
.vvpage-concepten .wp-block-post[data-vv-mock-url]::before {
	content: attr(data-vv-mock-url);
	position: absolute;
	top: calc(var(--mock-pad) + 6px);
	left: calc(var(--mock-pad) + 12px + 31px + 8px);
	max-width: 60%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--font-b);
	font-size: 10px;
	line-height: 13px;
	color: var(--ink-2);
	background: var(--sand);
	border-radius: 5px;
	padding: 2px 8px;
	z-index: 3;
	pointer-events: none;
}

/* ---- 2.4 Floating phone mock (_concept_mobile_image) -------------------
   Same story: the mobile screenshot is meta, so it is opt-in. When a render
   filter sets --vv-concept-mobile:url(…) on the wrapper the phone appears;
   until then the card is the browser mock alone (BUILD_SPEC §9 option a). */
.vvpage-concepten .wp-block-post[style*="--vv-concept-mobile"]::after {
	content: "";
	position: absolute;
	top: calc(var(--mock-pad) + var(--mock-bar) + var(--shot-h) + 34px - var(--phone-h));
	right: 16px;
	width: var(--phone-w);
	height: var(--phone-h);
	border: 5px solid #1c1b18;
	border-radius: 16px;
	background-color: var(--sand);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='8'%3E%3Crect width='26' height='8' rx='4' fill='%231c1b18'/%3E%3C/svg%3E"),
		var(--vv-concept-mobile);
	background-repeat: no-repeat, no-repeat;
	background-position: top 5px center, top center;
	background-size: 26px 8px, cover;
	background-clip: padding-box;
	box-shadow: 0 16px 36px rgba(44, 36, 32, .3);
	z-index: 4;
	pointer-events: none;
}

/* ---- 2.5 Card copy ----------------------------------------------------- */
.vvpage-concepten .wp-block-post-title {
	margin: 26px 0 0;
	font-family: var(--font-d);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
	max-width: 70%;
}

.vvpage-concepten .wp-block-post-excerpt { margin: 12px 0 0; }
.vvpage-concepten .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--ink-2);
}
.vvpage-concepten .wp-block-post-excerpt__more-text,
.vvpage-concepten .wp-block-post-excerpt .wp-block-post-excerpt__more-link { display: none; }

/* ---- 2.6 Tag pills — non-clickable in v1 -------------------------------
   `concept_tag` is not a viewable taxonomy, so core/post-terms renders nothing;
   the mu-plugin (§17) renders the row itself as plain <span> pills — there is no
   anchor and therefore nothing to click. The anchor selectors below stay as a
   safety net for the day the taxonomy is made viewable and core takes over. */
.vvpage-concepten .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: auto 0 0;
	padding-top: 18px;
}
.vvpage-concepten .wp-block-post-terms__separator { display: none; }
.vvpage-concepten .wp-block-post-terms__link,
.vvpage-concepten .wp-block-post-terms a,
.vvpage-concepten .wp-block-post-terms a:hover,
.vvpage-concepten .wp-block-post-terms a:focus {
	display: inline-block;
	font-family: var(--font-b);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.4;
	text-decoration: none;
	color: var(--sage);
	background: var(--sage-lt);
	border-radius: 100px;
	padding: 5px 12px;
	pointer-events: none;
	cursor: default;
}

.vvpage-concepten .vv-concept-grid__empty {
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	color: var(--ink-2);
}

/* =========================================================================
   3. CLOSING BAND — page-specific, replaces the shared CTA band
   ========================================================================= */
.vvpage-concepten .vv-concepten__closing {
	background: var(--sand-2);
}
.vvpage-concepten .vv-concepten__closing-inner {
	max-width: var(--wrap-narrow);
	margin-inline: auto;
	padding: 72px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.vvpage-concepten .vv-concepten__closing-inner > * { margin-block-start: 0; margin-block-end: 0; }
.vvpage-concepten .vv-concepten__closing-text > * { margin-block-start: 0; margin-block-end: 0; }

.vvpage-concepten .vv-concepten__closing-title {
	margin: 0 0 8px;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.15;
	color: var(--ink);
}
.vvpage-concepten .vv-concepten__closing-lead {
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ink-2);
	max-width: 520px;
}
.vvpage-concepten .vv-concepten__closing-actions p { margin: 0; }
.vvpage-concepten .vv-concepten__closing-actions .vv-btn {
	padding: 15px 32px;
	white-space: nowrap;
}

/* =========================================================================
   4. RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
	.vvpage-concepten .vv-concepten__grid-section { padding: 0 24px 72px; }

	.vvpage-concepten .wp-block-post-template,
	.vvpage-concepten .wp-block-post-template.is-layout-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.vvpage-concepten .wp-block-post { --mock-pad: 20px; }
	.vvpage-concepten .wp-block-post > :not(.wp-block-post-featured-image) {
		padding-inline: 22px;
	}
	.vvpage-concepten .wp-block-post-title { max-width: calc(100% - 96px); }
	.vvpage-concepten .wp-block-post { padding-bottom: 24px; }

	.vvpage-concepten .vv-concepten__closing-inner {
		padding: 56px 24px;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.vvpage-concepten .vv-concepten__closing-title { font-size: 27px; }
}

@media (max-width: 600px) {
	.vvpage-concepten .vv-concepten__grid-section { padding: 0 20px 56px; }

	.vvpage-concepten .wp-block-post { --mock-pad: 16px; --shot-h: 200px; }
	.vvpage-concepten .wp-block-post > :not(.wp-block-post-featured-image) {
		padding-inline: 18px;
	}
	.vvpage-concepten .wp-block-post-title { max-width: 100%; font-size: 19px; }

	/* the phone mock has no room next to the copy on a phone */
	.vvpage-concepten .wp-block-post[style*="--vv-concept-mobile"]::after { display: none; }

	.vvpage-concepten .vv-concepten__closing-inner { padding: 44px 20px; }
	.vvpage-concepten .vv-concepten__closing-actions .vv-btn { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.vvpage-concepten .wp-block-post { transition: none; }
}