/* Shark Print A Story -- POD Display Client. Minimal, namespaced, no framework. */

/*
 * Spacing defaults, exposed as CSS custom properties so a specific site can
 * override them from its own theme CSS (redefine on :root, or target
 * .spas-pod-display directly) without needing a plugin settings screen --
 * these are the values every site gets automatically, with zero
 * configuration, which is what keeps every content site's markup visually
 * consistent by default.
 */
.spas-pod-display {
	display: block;
	width: 100%;
	margin: var( --spas-pod-block-margin, 24px ) 0;
}

.spas-pod-display.spas-pod-layout-grid {
	display: grid;
	grid-template-columns: repeat( var( --spas-pod-columns, 1 ), 1fr );
	gap: var( --spas-pod-gap, 16px );
}

.spas-pod-display.spas-pod-columns-1 { --spas-pod-columns: 1; }
.spas-pod-display.spas-pod-columns-2 { --spas-pod-columns: 2; }
.spas-pod-display.spas-pod-columns-3 { --spas-pod-columns: 3; }
.spas-pod-display.spas-pod-columns-4 { --spas-pod-columns: 4; }

@media ( max-width: 900px ) {
	.spas-pod-display.spas-pod-layout-grid.spas-pod-columns-3,
	.spas-pod-display.spas-pod-layout-grid.spas-pod-columns-4 {
		--spas-pod-columns: 2;
	}
}

@media ( max-width: 560px ) {
	.spas-pod-display.spas-pod-layout-grid {
		--spas-pod-columns: 1;
	}
}

.spas-pod-display.spas-pod-layout-single {
	display: block;
}

.spas-pod-card {
	display: flex;
}

.spas-pod-card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	width: 100%;
	padding: var( --spas-pod-card-padding, 12px );
	box-sizing: border-box;
}

/*
 * Shared base for both the <img> and <video> creative -- width/radius/
 * placeholder background only. Sizing itself is intentionally split below:
 * a photo is always cropped to a square (object-fit: cover) so a grid of
 * product photos lines up neatly regardless of each photo's original
 * dimensions. A video is NOT force-cropped to that same square -- creatives
 * get uploaded in whatever aspect ratio they were shot in (square, 16:9,
 * vertical...) with nothing standardizing that on the way in, and cropping
 * a video is far more likely to cut off something that matters (motion,
 * framing) than cropping a still photo. Letting it render at its own
 * natural aspect ratio means it always displays intact, whether it is alone
 * (layout="single") or sitting next to photo cards in a grid -- the only
 * visible cost is that its card may end up a different height than its
 * square neighbours, which is a normal, common trade-off (this is exactly
 * how Pinterest/Instagram-style grids handle mixed media).
 */
.spas-pod-card-media {
	display: block;
	width: 100%;
	border-radius: 4px;
	background: #f2f2f2;
}

img.spas-pod-card-media {
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

video.spas-pod-card-media {
	height: auto;
}

.spas-pod-card-title {
	margin-top: 8px;
	font-weight: 600;
	line-height: 1.3;
}

.spas-pod-card-description {
	margin-top: 4px;
	font-size: 0.9em;
	opacity: 0.85;
}

.spas-pod-card-price {
	margin-top: 6px;
	font-weight: 600;
}

/*
 * style="card" -- a purely visual variant, independent of layout/columns
 * (which only control arrangement). Applied on the container
 * (.spas-pod-style-card), cascading down to every card's link so no
 * per-card JS work is needed. Kept as a separate attribute rather than a
 * third "layout" value on purpose: layout=grid/single + style=plain/card
 * gives 4 clean combinations instead of tangling two different concerns
 * (arrangement vs. appearance) into one.
 */
.spas-pod-style-card .spas-pod-card-link {
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.spas-pod-style-card .spas-pod-card-link:hover {
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
	transform: translateY( -2px );
}

/*
 * The button element also carries WooCommerce/WordPress's own generic
 * ".button" class (see renderCard() in pod-display-client.js) so that, on
 * any theme that styles buttons at all, it automatically looks and hovers
 * exactly like every other button on that site (e.g. "Add to cart") with no
 * per-site configuration needed -- this directly answers "the button should
 * use the site's own default style". To make that possible without a CSS
 * specificity fight, THIS rule is wrapped in :where(), which has zero
 * specificity: a theme's ".button" rule -- even a single plain class
 * selector -- always wins over it regardless of stylesheet load order. What
 * is below only ever applies as a fallback, for a theme that has no
 * ".button" styling of its own, so the button is still never invisible by
 * default (see the currentColor note this replaced, further down in this
 * file's history).
 */
:where( .spas-pod-card-button ) {
	display: inline-block;
	margin-top: 8px;
	padding: 8px 14px;
	border-radius: 4px;
	background: var( --spas-pod-button-bg, #1a1a1a );
	color: var( --spas-pod-button-color, #ffffff );
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

/*
 * Hover feedback for a button carrying a CUSTOM color (shortcode
 * button_color or the site's own "Button color" setting -- see
 * renderCard() in pod-display-client.js, which is the only place this
 * class is ever added). A default (no custom color) button is left
 * completely alone here -- it already gets its theme's own real
 * ".button:hover" look for free, and touching it would fight that.
 *
 * A custom color, however, is set as an INLINE style on the element
 * (background-color/border-color/color), which always outranks a theme's
 * ".button:hover" class rule -- so without this, the button would sit
 * completely static on hover once a custom color is applied, even on
 * themes whose buttons normally react. filter() is used instead of
 * touching background-color again: as a distinct rendering effect (not a
 * color property), it always applies on top of the inline color rather
 * than needing to out-specificity it.
 */
.spas-pod-card-button--custom-color {
	transition: filter 0.15s ease;
}

.spas-pod-card-button--custom-color:hover,
.spas-pod-card-button--custom-color:focus-visible {
	filter: brightness( 0.88 );
}