/*
 * Card and list details theme.json cannot express.
 *
 * Cards are core groups in a Query Loop. Plain Stretch Links makes the whole
 * card one link (the title's link is stretched, so there is one link per card
 * for screen readers), and Plain Hover Effects gives the hover. This sheet
 * adds the keyboard focus ring on the whole card, and the title colour change.
 */

/*
 * Level badge colours for the PST Tutorials facts block, which reads these
 * names (with the same values as fallbacks). The values live in theme.json
 * (settings.custom.level).
 */
:root {
	--pst-level-beginner: var(--wp--custom--level--beginner--text);
	--pst-level-beginner-bg: var(--wp--custom--level--beginner--background);
	--pst-level-intermediate: var(--wp--custom--level--intermediate--text);
	--pst-level-intermediate-bg: var(--wp--custom--level--intermediate--background);
	--pst-level-advanced: var(--wp--custom--level--advanced--text);
	--pst-level-advanced-bg: var(--wp--custom--level--advanced--background);
}

/*
 * Card family (patterns/card-*.php). The look of a bordered card is the Card
 * block style (styles/blocks/card.json): background, Line border, radius md,
 * no padding, no gap. `.pst-card` is the behaviour every card shares,
 * bordered or not (the row card has no border): one stretched link, the
 * focus ring on the whole card and the title colour on hover.
 */
.is-style-card,
.pst-card {
	position: relative;
}

/* Clip the image to the rounded corners. */
.is-style-card {
	overflow: hidden;
}

/*
 * Cards fill their grid cell (min-height: 100% in the patterns); in that
 * stretched flex column the image must keep its aspect ratio, not shrink.
 */
.is-style-card.is-layout-flex > * {
	flex-shrink: 0;
}

.is-style-card .wp-block-post-featured-image,
.pst-card .wp-block-post-featured-image {
	overflow: hidden;
}

/*
 * A definite width, so the browser sizes the figure from the card's width
 * and not from the image file's (an upload narrower than the card otherwise
 * leaves the figure shorter than its 3:2 image).
 */
.is-style-card.is-layout-flex > .wp-block-post-featured-image {
	width: 100%;
}

/* Focus ring around the whole card (2px ring, like the theme's links). */
.is-style-card:has(:focus-visible),
.pst-card:has(:focus-visible) {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 4px;
	border-radius: var(--wp--preset--border-radius--md);
}

.is-style-card :focus-visible,
.pst-card :focus-visible {
	outline: none;
}

.is-style-card .wp-block-post-title a,
.pst-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* One native title link covers an editorial card, with topic links above it. */
.is-style-editorial-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (hover: hover) {

	.pst-card:hover .wp-block-post-title a {
		color: var(--wp--preset--color--action);
	}
}

/* Respect the reader's motion preference for plugin-powered card effects. */
@media (prefers-reduced-motion: reduce) {

	.pst-card.plain-hover-effects,
	.pst-card.plain-hover-effects img {
		transition: none !important;
	}

	.pst-card.plain-hover-effects--image-zoom img {
		scale: none !important;
	}
}

/* Empty download columns collapse; the remaining column fills the row. */
.pst-download-columns > .wp-block-column {
	min-width: 0;
}

.pst-download-columns > .wp-block-column:only-child {
	flex-basis: 100% !important;
	max-width: 860px;
	margin-inline: 0;
}

.pst-download-gallery-column {
	min-width: 0;
}

/* Pages without a comparison keep one set of download actions. */
.pst-download-offers-column > .wp-block-pst-download-actions {
	max-width: 480px;
}

/* Preview thumbnails share the large image's ratio and fill their frames. */
.pst-download-anchor {
	display: block;
	height: 0;
	scroll-margin-top: calc(var(--pst-header-offset, 0px) + var(--wp-admin--admin-bar--position-offset, 0px) + 16px);
}

.pst-download-gallery-column .wp-block-plainplugins-field-gallery__thumbs a {
	min-height: 0;
	overflow: hidden;
}

.pst-download-gallery-column .wp-block-plainplugins-field-gallery--preview .wp-block-plainplugins-field-gallery__thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--pp-preview-aspect, 4 / 3);
	object-fit: cover;
}

.pst-download-header .wp-block-breadcrumbs a,
.pst-download-header .wp-block-post-terms a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.pst-download-sidebar.is-position-sticky {
	position: static;
	top: calc(var(--wp-admin--admin-bar--position-offset, 0px) + var(--pst-header-offset, 0px) + var(--wp--preset--spacing--50)) !important;
}

@media (min-width: 783px) {

	.pst-download-sidebar.is-position-sticky:has([data-pst-sticky="true"]) {
		position: sticky;
	}
}

/* "Plain" list style (inc/block-styles.php): no bullets. */
.wp-block-list.is-style-plain {
	list-style: none;
}

.wp-block-list.is-style-plain a {
	color: inherit;
}

.wp-block-list.is-style-plain a:hover {
	color: var(--wp--preset--color--action);
	text-decoration: none;
}

/* Tip section style: the text colour of its label. */
.is-style-tip strong:first-child {
	color: var(--wp--custom--tip--text);
}

/*
 * Tutorial sidebar: stays in view below the header, which is sticky on
 * tutorials with steps (assets/css/site-header.css; site-chrome.js publishes
 * its height). Replaces the top: 0 the position support writes.
 */
.pst-sidebar__sticky.is-position-sticky {
	top: calc(var(--wp-admin--admin-bar--position-offset, 0px) + var(--pst-header-offset, 0px) + var(--wp--preset--spacing--50)) !important;
}

/* Native blocks keep reading order; the sidebar relocates on desktop. */
@media (max-width: 782px) {

	.pst-tutorial-extras.is-position-sticky {
		position: static;
		margin-bottom: var(--wp--preset--spacing--70);
	}

	.pst-tutorial-extras .pst-tutorial-newsletter {
		padding: 0 !important; /* Overrides this native panel's desktop block settings. */
		background: transparent !important;
		border: 0 !important;
		box-shadow: none;
	}

	.pst-related-tutorials {
		margin-bottom: var(--wp--preset--spacing--50) !important;
	}
}

/* Mobile footer: visible link groups, without another disclosure layer. */
@media (max-width: 781px) {

	.pst-footer .pst-footer__columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50);
	}

	.pst-footer__columns > .wp-block-column:first-child,
	.pst-footer__columns > .wp-block-column:last-child {
		grid-column: 1 / -1;
	}

	.pst-footer-site-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	}
}