/*
 * Homepage hero (a Query Loop showing the newest tutorial): text on the
 * left, the featured image as a 4:3 card on the right, on the plain page
 * background. On phones the image sits on top.
 */
.pst-hero__panel .wp-block-post-title a {
	text-decoration: none;
}

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

.pst-hero__panel .wp-block-post-excerpt__excerpt {
	margin: 0;
	max-width: 520px;
}

.pst-hero__panel .wp-block-read-more:hover {
	background-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
	text-decoration: none;
}

@media (max-width: 781px) {

	/* Image first on phones; the text stays first in the reading order. */
	.pst-hero__media {
		order: -1;
	}
}

/*
 * Guide rows outside the directory (the guide search results,
 * templates/search-guides.html, and a guide's subpages): title, summary and
 * labels, in two columns on wide screens.
 */
.pst-guide-list {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: var(--wp--preset--spacing--60);
}

.pst-guide-list > li {
	break-inside: avoid;
}

.pst-guide-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pst-guide-labels {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--muted);
}

.pst-guide-labels a {
	position: relative;
	z-index: 1;
	color: inherit;
}

.pst-guide-row {
	padding-block: 0.6875rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.pst-guide-row .wp-block-post-title {
	margin: 0;
	font-weight: 600;
}

.pst-guide-row .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

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

.pst-guide-row .wp-block-post-excerpt__excerpt {
	margin: 0;
	line-height: 1.35;
}

/*
 * The Guides directory (templates/archive-pst_hint.html): a row of group tabs,
 * then each group as a heading over a grid of guide cards (four columns; one
 * row per guide on phones). The Post Template is the grid. Its list items take
 * no box, so a group heading (pst/query-section at the top of a group's first
 * item) spans the whole row and the cards fill the columns under it.
 */
.pst-guide-index {
	container: pst-guides / inline-size;
}

/*
 * Group tabs: All and each group, underlined when current; A-Z on the right.
 * One line at every width: the groups show their short tab labels (PST
 * Tutorials, term meta pst_group_tab_label), and the filter's "no wrap" layout
 * scrolls sideways when the row is too narrow (plainplugins-taxonomy-filter.css).
 */
.pst-guide-tabs > .pst-guide-groups {
	flex: 1 1 auto;
	min-width: 0;
	column-gap: 20px;
}

.pst-guide-groups .wp-block-plainplugins-taxonomy-filter__item {
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.pst-guide-groups .wp-block-plainplugins-taxonomy-filter__item:hover {
	color: var(--wp--preset--color--contrast);
}

.pst-guide-groups .wp-block-plainplugins-taxonomy-filter__item[aria-current="page"],
.pst-guide-groups .wp-block-plainplugins-taxonomy-filter__item[aria-pressed="true"] {
	border-bottom-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* Inside the tab, so the sideways-scrolling row does not clip the ring. */
.pst-guide-groups .wp-block-plainplugins-taxonomy-filter__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: -2px;
}

/*
 * The Sort control on the right of the tabs looks the same as in the archive
 * toolbars (plainplugins-sort-dropdown.css), 36px high instead of 44px so it
 * sits centred in the 44px tab row and does not touch the row's line.
 */
.pst-guide-tabs > .pst-guide-sort {
	--pqf-control-min-height: 36px;
	--pqf-control-padding: 0 12px;
	flex: none;
	margin: 0;
}

/* The grid. */
.pst-guide-index > .pst-guide-directory {
	margin-top: 40px;
}

.pst-guide-directory > li {
	display: contents;
}

/* Group heading: name, count, and the description under them. */
.pst-guide-directory .pst-guide-section,
.pst-guide-directory .pst-guide-letter {
	grid-column: 1 / -1;
	margin: 0 0 -8px;
}

.pst-guide-directory > li:not(:first-child) > :is(.pst-guide-section, .pst-guide-letter) {
	margin-top: 28px;
}

.pst-guide-section > .wp-block-group {
	align-items: baseline;
}

.pst-guide-section__name,
.pst-guide-letter .wp-block-heading {
	margin: 0;
	font-size: 1.75rem;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.pst-guide-section__count {
	margin: 0;
}

.pst-guide-section__description {
	max-width: 720px;
}

.pst-guide-section__description p {
	margin: 0;
	line-height: 1.5;
}

/* A guide card: thumbnail, title and summary; the title's link covers it. */
.pst-guide-card {
	position: relative;
	min-width: 0;
}

/* The thumbnail keeps its 16:10 height in the card's flex column. */
.pst-guide-card > * {
	flex-shrink: 0;
}

/*
 * A definite width, so the 16:10 tile takes its height from the card's width
 * and not from its icon while the flex column sizes it.
 */
.pst-guide-thumb,
.pst-guide-thumb .wp-block-post-featured-image {
	position: relative;
	width: 100%;
}

.pst-guide-thumb > * {
	margin: 0;
}

.pst-guide-thumb .wp-block-post-featured-image {
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--wp--preset--border-radius--xl);
}

/* The tile a guide without a featured image shows (inc/guide-thumbnail.php). */
.pst-guide-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
}

.pst-guide-tile__icon {
	width: 56px;
	height: 56px;
	stroke-width: 1.5;
}

/* The place in the group, in a white circle; learning order only. */
.pst-guide-thumb > .pst-guide-step {
	display: flex;
	position: absolute;
	top: 10px;
	left: 10px;
	align-items: center;
	margin: 0;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
}

.pst-guide-step:empty,
.pst-guide-directory:not(:has(.is-group-by-taxonomy)) .pst-guide-step {
	display: none;
}

/* "Video" on the thumbnail of a guide with a video. */
.pst-guide-thumb > .pst-guide-video {
	position: absolute;
	right: 10px;
	bottom: 10px;
	align-items: center;
	margin: 0;
	padding: 4px 8px;
	border-radius: var(--wp--preset--border-radius--full);
	background: rgb(22 24 29 / 78%);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.2;
}

.pst-guide-video:has(> p:empty) {
	display: none;
}

.pst-guide-video > * {
	margin: 0;
}

.pst-guide-video .wp-block-icon svg {
	display: block;
	fill: currentcolor;
	stroke: none;
}

.pst-guide-card .pst-guide-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.pst-guide-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (hover: hover) {

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

.pst-guide-card__summary {
	margin: 0;
}

.pst-guide-card__summary .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/*
 * Phones: one guide per row, a small thumbnail beside its title and summary.
 * The tabs scroll sideways, edge to edge.
 */
@container pst-guides (width < 600px) {
	.pst-guide-tabs {
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 16px)) calc(-1 * var(--wp--style--root--padding-right, 16px));
		padding-inline: var(--wp--style--root--padding-left, 16px) var(--wp--style--root--padding-right, 16px);
	}

	.pst-guide-tabs,
	.pst-guide-tabs > .pst-guide-groups {
		gap: 20px;
	}

	.pst-guide-groups .wp-block-plainplugins-taxonomy-filter__item {
		padding: 0 2px;
	}

	.pst-guide-index > .pst-guide-directory {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
		margin-top: 28px;
	}

	.pst-guide-directory .pst-guide-section,
	.pst-guide-directory .pst-guide-letter {
		margin-bottom: 0;
	}

	.pst-guide-directory > li:not(:first-child) > :is(.pst-guide-section, .pst-guide-letter) {
		margin-top: 16px;
	}

	.pst-guide-section__name,
	.pst-guide-letter .wp-block-heading {
		font-size: 1.375rem;
	}

	.pst-guide-section__count {
		font-size: 0.8125rem;
	}

	.pst-guide-section__description p {
		font-size: 0.9375rem;
	}

	.pst-guide-index .pst-guide-card {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 14px;
		align-items: center;
	}

	.pst-guide-card > * {
		margin: 0;
	}

	.pst-guide-tile__icon {
		width: 32px;
		height: 32px;
	}

	.pst-guide-thumb > .pst-guide-video {
		display: none;
	}

	.pst-guide-card .pst-guide-card__title {
		font-size: 1rem;
	}

	.pst-guide-card__summary .wp-block-post-excerpt__excerpt {
		line-height: 1.45;
		-webkit-line-clamp: 2;
	}
}

@media (max-width: 781px) {
	.pst-guide-list {
		columns: 1;
	}
}