/**
 * Resources library ([fiveforests_resources]).
 * Layout and states follow the "Resources" page in the 5f-2026 Figma file.
 */

.ff-resources {
	display: grid;
	grid-template-columns: 17.5rem minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

/* The site's list style adds a dash and a hanging indent to list items; cancel it here,
   as the theme's "Unstyled" list style does. */
.ff-resources li {
	padding-left: 0;
	text-indent: 0;
}

.ff-resources li::before {
	content: none;
}

/* No script: no category list, grid takes the full width. */
.ff-resources:has(> .ff-resources__filter[hidden]) {
	grid-template-columns: minmax(0, 1fr);
}

/* Category list */
.ff-resources__filter {
	position: sticky;
	top: var(--wp--preset--spacing--medium, 2rem);
}

.ff-resources__label {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--zapf-humanist);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	text-transform: uppercase;
}

.ff-resources__cats {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ff-resources__cat {
	display: inline-block;
	width: 100%;
	padding: 0.625rem 1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--dk-1);
	font-family: var(--wp--preset--font-family--suisse-intl);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body);
	text-align: left;
	cursor: pointer;
}

.ff-resources__cat:hover {
	text-decoration: underline;
}

.ff-resources__cat[aria-pressed="true"] {
	background: var(--wp--preset--color--lt-2);
	color: #2e101a; /* Aubergine, as approved in Figma; not a theme.json palette colour. */
	font-weight: 500;
	text-decoration: none;
}

.ff-resources__cat:focus-visible {
	outline: 2px solid var(--wp--preset--color--dk-1);
	outline-offset: 2px;
}

/* Cards */
.ff-resources__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Short row on a landing page (filter="no"): no category column, three across. */
.ff-resources--row {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.ff-resources--row .ff-resources__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Two class names so this beats the list reset above, which would otherwise strip the padding. */
.ff-resources .ff-resource {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--lt-2);
}

.ff-resources .ff-resource::before {
	display: none!important;
}

.ff-resources .ff-resource[hidden] {
	display: none;
}

.ff-resource:hover,
.ff-resource:focus-within {
	border-color: var(--wp--preset--color--dk-1);
}

/* Icon, title, then the Free/Paid chip pinned to the top right. */
.ff-resource__head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.ff-resource__icon {
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
}

.ff-resource__title {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--wp--preset--font-family--zapf-humanist);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--tight);
	text-indent: 0;
}

.ff-resource__access {
	flex: 0 0 auto;
	align-self: flex-start;
	padding: 0.125rem 0.5rem;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--zapf-humanist);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--line-height--body);
	text-indent: 0;
}

/* Brand colours (not theme.json palette colours), as chosen by Polly. */
.ff-resource__access--free {
	background: #5c2529; /* Wine */
	color: #f6f1eb; /* Cream */
}

.ff-resource__access--paid {
	background: #efe6dc; /* Sand */
	color: #2e101a; /* Aubergine */
}

/* The title link covers the whole card (see ::before below). Three class names so the
   site's link colours do not apply inside the card. */
.ff-resources .ff-resource .ff-resource__link,
.ff-resources .ff-resource .ff-resource__link:visited,
.ff-resources .ff-resource .ff-resource__link:hover,
.ff-resources .ff-resource .ff-resource__link:focus {
	color: inherit;
	text-decoration: none;
}

.ff-resources .ff-resource:hover .ff-resource__link {
	text-decoration: underline;
}

/* The site script marks external links with .is-external-link and appends an arrow
   (svg.external-link-icon). a11y-core sets that class to inline-flex, which parks the
   arrow at the end of the title block; inside cards, flow it after the last word instead. */
.ff-resources .ff-resource .ff-resource__link.is-external-link {
	display: inline;
}

.ff-resources .ff-resource .ff-resource__link .external-link-icon {
	margin-left: 0.3em;
	vertical-align: baseline;
}

.ff-resources .ff-resource .ff-resource__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.ff-resources .ff-resource .ff-resource__link:focus-visible {
	outline: none;
}

.ff-resources .ff-resource .ff-resource__link:focus-visible::before {
	outline: 2px solid var(--wp--preset--color--dk-1);
	outline-offset: 2px;
}

.ff-resource__desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	text-indent: 0;
}

.ff-resources .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Resources library mobile wrap is printed by Breakpoints at the live
 * Design Settings / theme.json mobile width.
 */