/**
 * WoollyPrints front end.
 *
 * Loaded only on pages that actually render a gallery shortcode.
 *
 * Deliberately restrained about typography and colour: this markup lands inside
 * somebody else's theme, and a gallery that ignores the surrounding type is
 * more obviously "a plugin" than one that inherits it. So there are no font
 * families, no font sizes on the title, and no colours other than a neutral
 * placeholder. Only layout.
 */

.woollyprints-gallery {
	/* The column count comes from an inline custom property so one stylesheet
	   serves every gallery on the page, each with its own setting. */
	display: grid;
	grid-template-columns: repeat(var(--woollyprints-columns, 3), minmax(0, 1fr));
	gap: 1.5rem;
	margin: 1.5em 0;
	padding: 0;
	list-style: none;
}

.woollyprints-gallery__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.woollyprints-gallery__link {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	text-decoration: none;
	color: inherit;
}

.woollyprints-gallery__image {
	display: block;
	overflow: hidden;
	border-radius: 6px;

	/* A fixed square keeps rows aligned whatever shape the photos are, which
	   matters more in a grid than showing every photo whole: ragged rows read
	   as broken. */
	aspect-ratio: 1 / 1;

	/*
	 * No backdrop unless the gallery asks for one. Posters are rendered with a
	 * transparent background, so by default a card is the model on the page
	 * rather than the model in a box.
	 */
	background: var(--woollyprints-card-bg, transparent);
}

.woollyprints-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Models with no photo yet. Sized by the wrapper's aspect-ratio, so a gallery
   with some photos and some not still lines up. */
.woollyprints-gallery__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.woollyprints-gallery__title {
	display: block;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.woollyprints-gallery__link:hover .woollyprints-gallery__title,
.woollyprints-gallery__link:focus .woollyprints-gallery__title {
	text-decoration: underline;
}

/* The link, not the image, takes the focus ring, and it needs to be visible
   against any theme. */
.woollyprints-gallery__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 6px;
}

/*
 * Narrow screens.
 *
 * The author's column choice is a maximum, not a promise: four columns on a
 * phone is four unreadable columns. Capped rather than overridden, so a gallery
 * set to one or two columns keeps its own setting all the way down.
 */
@media (max-width: 782px) {
	.woollyprints-gallery {
		grid-template-columns: repeat(min(var(--woollyprints-columns, 3), 3), minmax(0, 1fr));
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	.woollyprints-gallery {
		grid-template-columns: repeat(min(var(--woollyprints-columns, 3), 2), minmax(0, 1fr));
	}
}

/* -----------------------------------------------------------------------------
 * A print's own page
 *
 * Structure and spacing only. Fonts, text colour and link colour are the
 * theme's, deliberately: this markup lands inside somebody else's design and
 * inheriting it is what makes the plugin look native in a dark theme, a serif
 * theme, or one nobody has written yet. Colours here are all currentColor or a
 * translucent grey, both of which adapt on their own.
 * -------------------------------------------------------------------------- */

.woollyprints-print {
	margin-top: 2em;
}

.woollyprints-section {
	margin: 2em 0;
}

/* Sized relative to the surrounding text rather than in pixels, so it sits in
   whatever type scale the theme has set. */
.woollyprints-section__title {
	font-size: 1.15em;
	margin: 0 0 0.6em;
}

/* -----------------------------------------------------------------------------
 * Media frame
 * -------------------------------------------------------------------------- */

.woollyprints-media {
	margin: 0 0 2em;
}

.woollyprints-media__stage {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(127, 127, 127, 0.12);

	/*
	 * A fixed height, from the Height setting, rather than an aspect ratio.
	 * A ratio grows with the theme's content width: on a 1200 px layout a 4/3
	 * box came out 654 px tall and swamped the page. A height also keeps the
	 * box the same whatever the photo's shape, so switching between a tall
	 * photo and a wide one does not move the page.
	 */
	height: var(--woollyprints-stage, 420px);

	/* Never more than most of the window, however the setting is left. */
	max-height: 70vh;

	/*
	 * The faint wash is for photographs, which are letterboxed inside the box.
	 * A 3D slide overrides it, either with the backdrop colour the site chose
	 * or with nothing at all so the page shows through.
	 */
	background: rgba(127, 127, 127, 0.12);
}

.woollyprints-media__slide:has( > .woollyprints-model ) {
	background: none;
}

.woollyprints-media__slide {
	width: 100%;
	height: 100%;
}

.woollyprints-media__image {
	display: block;
	width: 100%;
	height: 100%;

	/* contain, not cover: a photograph of a part should not be cropped to fit
	   a frame the plugin chose. */
	object-fit: contain;
}

.woollyprints-media__strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.woollyprints-media__thumb {
	width: 72px;
	height: 72px;
	padding: 0;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 4px;
	overflow: hidden;
	background: none;
	cursor: pointer;

	/* Themes style bare buttons in wildly different ways, so the few
	   properties that would break a thumbnail are reset explicitly. */
	line-height: 0;
	box-shadow: none;
}

.woollyprints-media__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* currentColor so the selected state is visible whatever the theme's palette,
   including on dark backgrounds. */
.woollyprints-media__thumb[aria-selected="true"] {
	border-color: currentColor;
	box-shadow: 0 0 0 1px currentColor;
}

.woollyprints-media__thumb:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
 * Breadcrumb
 * -------------------------------------------------------------------------- */

.woollyprints-crumbs {
	margin: 0 0 1.2em;
	font-size: 0.9em;
}

.woollyprints-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woollyprints-crumbs__item {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}

/* The separator is generated rather than written into the markup, so a screen
   reader reads the trail as a list of places and not as a run of slashes. */
.woollyprints-crumbs__item + .woollyprints-crumbs__item::before {
	content: "/";
	opacity: 0.45;
}

.woollyprints-crumbs__item [aria-current="page"] {
	opacity: 0.7;
}

/* -----------------------------------------------------------------------------
 * Downloads
 * -------------------------------------------------------------------------- */

.woollyprints-downloads__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woollyprints-file {
	display: flex;
	align-items: baseline;
	gap: 0.75em;
	padding: 0.5em 0;
	border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.woollyprints-file:last-child {
	border-bottom: 0;
}

.woollyprints-file__link {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.woollyprints-file__size {
	flex: 0 0 auto;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
	font-size: 0.9em;
}

/* -----------------------------------------------------------------------------
 * Print settings, licence and credits
 * -------------------------------------------------------------------------- */

.woollyprints-settings__list {
	margin: 0;
	display: grid;

	/* Two columns where there is room, one where there is not, with no media
	   query: the label column is sized to its content and the value takes the
	   rest. */
	grid-template-columns: minmax(8em, max-content) 1fr;
	gap: 0.4em 1.5em;
}

.woollyprints-settings__row {
	display: contents;
}

.woollyprints-settings__list dt {
	font-weight: 600;
	margin: 0;
}

.woollyprints-settings__list dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.woollyprints-settings__notes {
	margin: 1em 0 0;
}

@media (max-width: 480px) {
	.woollyprints-settings__list {
		grid-template-columns: 1fr;
		gap: 0 0;
	}

	.woollyprints-settings__list dd {
		margin-bottom: 0.6em;
	}
}

/* -----------------------------------------------------------------------------
 * Visually hidden text
 *
 * The plugin's own, deliberately not WordPress's screen-reader-text.
 *
 * That class is defined by the *theme*, not by core, so on the front end it
 * only exists if the active theme happens to ship it. Relying on it means every
 * hidden label becomes visible text in a theme that does not, which is exactly
 * what happened the first time this page was rendered outside a WordPress
 * theme. A prefixed class of our own cannot be missing and cannot clash.
 * -------------------------------------------------------------------------- */

.woollyprints-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;

	/* inset(50%) rather than rect(): the modern spelling, and it does not
	   leave the element occupying a 1px line in some engines. */
	clip-path: inset(50%);
}

/* -----------------------------------------------------------------------------
 * 3D preview
 *
 * The placeholder occupies the stage until the viewer is asked for, so the box
 * is already the right size when the canvas arrives and nothing shifts.
 * -------------------------------------------------------------------------- */

.woollyprints-model {
	position: relative;
	width: 100%;
	height: 100%;
}

.woollyprints-model canvas {
	display: block;
	width: 100%;
	height: 100%;

	/* Dragging to turn the model must not also select the page text around it,
	   and on touch it must not scroll the page out from under the gesture. */
	touch-action: none;
	user-select: none;
}

.woollyprints-model__start {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	padding: 0.5em 1em;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.18);
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	cursor: pointer;

	/* Sits over a photo that could be any colour, so it needs to stay legible
	   without knowing what is behind it. */
	backdrop-filter: blur(6px);
}

.woollyprints-model__start:disabled {
	cursor: default;
	opacity: 0.7;
}

.woollyprints-model__start:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Marks the thumbnails that open a 3D preview rather than a photograph. The
   corner wedge is drawn rather than an icon file: one less asset, and it takes
   the theme's colour on its own. */
.woollyprints-media__thumb--model::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	border: 10px solid transparent;
	border-right-color: currentColor;
	border-bottom-color: currentColor;
	opacity: 0.65;
}

.woollyprints-media__thumb {
	position: relative;
}

.woollyprints-media__thumb-blank {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(127, 127, 127, 0.2);
}