/**
 * The frame's FEATURED IMAGE on every step of the shape flow — the 200×200
 * step-2 tiles (phase 105) and the larger picture on the size and build
 * screens (phase 106) — for /survey/, /design/ and the product pages.
 *
 * Its own file because the product pages do not load design-flow.css; all
 * three enqueuers load this one (includes/frontend-assets.php,
 * includes/product-pages.php). Tokens only for backgrounds.
 */
/* ---- Step 2: featured-image tiles (200×200) ------------------------------ */

/* The shape picker shows each frame's FEATURED IMAGE in a fixed 200×200 box it
   fills (wpwd_design_tile_thumb_html()). Screens 3 and 4 keep their drawing, so
   everything here is keyed on .wpwd-fcard-thumb, which only step 2 prints.

   SIX COLUMNS (phase 108), stepping to 4 / 3 / 2 on the frozen breakpoints
   (tests/phase-53-responsive.php). The old auto-fill 200px track let the
   width decide, which gave five with ragged gaps and a sixth alone on row two.
   :has() scopes it to a grid actually holding thumbs, and outranks .wpwd-sv
   .wpwd-sv-grid--9. Descendant selectors throughout — an optimiser wraps the
   <img> in <picture>. */
.wpwd-pcat-grid.wpwd-fpanel-grid:has(.wpwd-fcard-thumb) {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1100px) {
	.wpwd-pcat-grid.wpwd-fpanel-grid:has(.wpwd-fcard-thumb) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 820px) {
	.wpwd-pcat-grid.wpwd-fpanel-grid:has(.wpwd-fcard-thumb) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* After the 820px step, or that equal-specificity rule would win on phones. */
@media (max-width: 480px) {
	.wpwd-pcat-grid.wpwd-fpanel-grid:has(.wpwd-fcard-thumb) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Elementor survey — Choose Style (same 200×200 thumbs as /design/). */
.wpwd-es--frames .wpwd-es-grid:has(.wpwd-fcard-thumb) {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1100px) {
	.wpwd-es--frames .wpwd-es-grid:has(.wpwd-fcard-thumb) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 820px) {
	.wpwd-es--frames .wpwd-es-grid:has(.wpwd-fcard-thumb) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 480px) {
	.wpwd-es--frames .wpwd-es-grid:has(.wpwd-fcard-thumb) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.wpwd-es--frames .wpwd-es-grid:has(.wpwd-fcard-thumb) > .wpwd-es-col .wpwd-pcat-card {
	position: relative;
	z-index: 1;
}
.wpwd-es--frames .wpwd-es-grid:has(.wpwd-fcard-thumb) > .wpwd-es-col .wpwd-pcat-card:hover,
.wpwd-es--frames .wpwd-es-grid:has(.wpwd-fcard-thumb) > .wpwd-es-col .wpwd-pcat-card:focus-visible,
.wpwd-es--frames .wpwd-es-grid:has(.wpwd-fcard-thumb) > .wpwd-es-col .wpwd-pcat-card:focus-within {
	z-index: 20;
}

/* THE TOOLTIP MUST CLEAR THE NEXT ROW. The bubbles hang below their tile
   (frontend.css / design-flow.css flip them), and a tile on the next row comes
   later in the page, so it painted straight over the bubble. The bubble's own
   z-index only counts inside its card; lifting the hovered CARD is what puts the
   bubble above its neighbours. */
.wpwd-fpanel-grid:has(.wpwd-fcard-thumb) > .wpwd-pcat-card {
	position: relative;
	z-index: 1;
}
.wpwd-fpanel-grid:has(.wpwd-fcard-thumb) > .wpwd-pcat-card:hover,
.wpwd-fpanel-grid:has(.wpwd-fcard-thumb) > .wpwd-pcat-card:focus-visible,
.wpwd-fpanel-grid:has(.wpwd-fcard-thumb) > .wpwd-pcat-card:focus-within {
	z-index: 20;
}
.wpwd-fpanel-grid:has(.wpwd-fcard-thumb) > .wpwd-pcat-card .wpwd-pcat-card-tip {
	max-width: 220px;
	white-space: normal;
}
.wpwd-fcard .wpwd-pcat-card-arts:has(.wpwd-fcard-thumb) {
	width: 100%;
	max-width: 200px;
	margin-inline: auto;
	height: auto;
	aspect-ratio: 1 / 1;
	min-height: 0;
	padding: 0;
	overflow: hidden;
}
.wpwd-fcard .wpwd-pcat-card-arts .wpwd-fcard-thumb,
.wpwd-fcard .wpwd-pcat-card-arts img.wpwd-fcard-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	padding: 0;
	object-fit: cover;
	display: block;
}
.wpwd-fcard .wpwd-pcat-card-arts .wpwd-fcard-thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: var(--section-bg);
	border: 1px dashed var(--border);
	color: #5b6b70;
	font-size: 0.85rem;
	text-align: center;
}

/* ---- Screens 3 and 4: the frame's featured image (phase 106) ------------- */

/* The same picture as the step-2 tile, larger, on the size and build screens
   of /survey/, /design/ and the product pages. Nothing redraws it; the size is
   in the caption and panes are picked with buttons. Descendant selectors — the
   optimiser wraps the <img> in <picture>. Tokens only: phase-41 forbids a raw
   background hex in this file. */
.wpwd-frame-photo,
img.wpwd-frame-photo {
	display: block;
	width: 100%;
	max-width: 520px;
	max-height: 520px;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}
.wpwd-frame-photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 360px;
	aspect-ratio: 1 / 1;
	padding: 12px;
	background: var(--section-bg);
	border: 1px dashed var(--border);
	color: var(--secondary);
	text-align: center;
}
.wpwd-dsize-view .wpwd-frame-photo--empty,
.wpwd-dbuild-view .wpwd-frame-photo--empty,
.wpwd-pp-view .wpwd-frame-photo--empty,
.wpwd-pp-size-view .wpwd-frame-photo--empty {
	width: 100%;
}
.wpwd-frame-dims {
	margin: 10px 0 0;
	text-align: center;
	font-size: 0.85rem;
	color: var(--secondary);
}
.wpwd-frame-panes:empty {
	display: none;
}
.wpwd-frame-panes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 10px 0 4px;
}
/* Colour stated on :hover and :focus too — Kadence's button:hover is white text
   on its own background, which would blank the label (memory:
   kadence-button-hover-collision). Teal letters take --primary-dark. */
.wpwd-frame-panes .wpwd-frame-pane-btn,
.wpwd-frame-panes .wpwd-frame-pane-btn:hover,
.wpwd-frame-panes .wpwd-frame-pane-btn:focus,
.wpwd-ov3d-controls .wpwd-frame-pane-btn,
.wpwd-ov3d-controls .wpwd-frame-pane-btn:hover,
.wpwd-ov3d-controls .wpwd-frame-pane-btn:focus {
	padding: 6px 14px;
	border: 1.5px solid var(--border);
	border-radius: 999px;
	background: var(--white, #fff);
	color: var(--heading);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
}
.wpwd-frame-panes .wpwd-frame-pane-btn[aria-pressed="true"],
.wpwd-frame-panes .wpwd-frame-pane-btn[aria-pressed="true"]:hover {
	border-color: var(--primary);
	color: var(--primary-dark);
}
.wpwd-frame-panes .wpwd-frame-pane-btn:focus-visible,
.wpwd-ov3d-controls .wpwd-frame-pane-btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* Screen 3: the caption goes UNDER the picture. Both stages are flex rows
   written for a lone drawing, which would put the caption beside it. */
.wpwd-dsize-stage:has(.wpwd-frame-dims),
.wpwd-sv-size-stage:has(.wpwd-frame-dims) {
	flex-direction: column;
	align-items: center;
}

/* Screen 4 on the survey's locked desktop layout (survey-theme.css §10) sizes
   the picture by the HEIGHT left in the stage, exactly as it did the drawing.
   Without this the 520px cap overflows the stage and, centred, climbs over the
   "Outside view" label. */
@media (min-width: 1081px) {
	.wpwd-sv--build .wpwd-dbuild-view .wpwd-frame-photo {
		width: auto;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}
	.wpwd-sv--build .wpwd-dbuild-view picture {
		display: contents;
	}
}
@media (min-width: 1081px) and (max-height: 700px) {
	.wpwd-sv--build .wpwd-dbuild-view .wpwd-frame-photo {
		width: 100%;
		height: auto;
		max-width: 480px;
		max-height: none;
	}
}

/* ---- Step 4: the 3D Outside view (phase 107) ----------------------------- */

/* Mounted in the view above the featured image, which stays as the fallback
   and is hidden only once WebGL is running (design-flow.js draw3d()). */
.wpwd-ov3d {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: 560px;
	cursor: grab;
	touch-action: none;
	border-radius: var(--wpwd-radius-sm, 12px);
	overflow: hidden;
}
.wpwd-ov3d.is-dragging {
	cursor: grabbing;
}
.wpwd-ov3d canvas {
	display: block;
}
.wpwd-ov3d-hint {
	position: absolute;
	right: 10px;
	bottom: 8px;
	z-index: 1;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--white, #fff);
	color: var(--secondary);
	font-size: 0.72rem;
	pointer-events: none;
	opacity: 0.85;
}
.wpwd-ov3d-controls {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
}
.wpwd-ov3d-controls[hidden] {
	display: none;
}
@media (min-width: 1081px) {
	.wpwd-sv--build .wpwd-dbuild-view .wpwd-ov3d {
		height: 100%;
		max-height: none;
		aspect-ratio: auto;
	}
}
@media (min-width: 1081px) and (max-height: 700px) {
	.wpwd-sv--build .wpwd-dbuild-view .wpwd-ov3d {
		height: auto;
		aspect-ratio: 1 / 1;
		max-height: 520px;
	}
}

/* `display: block` on the photo would beat the UA [hidden] rule, and the 3D view
   would sit UNDER a picture that was meant to be gone. */
.wpwd-frame-photo[hidden],
.wpwd-ov3d[hidden] {
	display: none !important;
}