/* ABOUTME: Frontend styles for the Outreach Toolkit plugin. */
/* ABOUTME: Covers archive (topic cards, results grid) and single (taxonomy badges) views. */
/* Filter bar uses theme's clb-* classes; single metabox uses theme's yak-resource-* classes. */

/* ==========================================================================
   Wide Page Layout
   Mirrors the theme's "Wide Page Content" template at 1200px.
   ========================================================================== */

@media (min-width: 960px) {
	.wide-page-content .content-sidebar-wrap {
		max-width: 1200px;
		padding-inline: 1rem;
	}
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.tdot-breadcrumb {
	margin-bottom: 0.75rem;
	text-align: left;
}

.tdot-breadcrumb__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35em 0.75em;
	font-family: var(--yak-primary-font, inherit);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--yak-color-primary, #003a5d);
	text-decoration: none;
	border: 1px solid rgba(0, 58, 93, 0.15);
	border-radius: 6px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tdot-breadcrumb__link,
.entry-content .tdot-breadcrumb__link {
	background-image: none;
	background-size: auto;
	background-position: initial;
	background-repeat: initial;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.tdot-breadcrumb__link:hover,
.tdot-breadcrumb__link:focus-visible,
.entry-content .tdot-breadcrumb__link:hover,
.entry-content .tdot-breadcrumb__link:focus-visible {
	background: #c5d9e8;
	background-image: none;
	border-color: rgba(0, 58, 93, 0.25);
	text-decoration: none;
}

.tdot-breadcrumb__icon {
	font-size: 0.85em;
}

/* ==========================================================================
   Toolkit Footer Block
   Editable via Toolkit Settings. Calm info block at the bottom of every view.
   ========================================================================== */

.tdot-footer {
	margin-top: 4rem;
	padding: 1.75rem 2rem;
	background: #fef0c7;
	border-radius: 8px;
	border-left: 4px solid var(--yak-color-primary, #003a5d);
}

.tdot-footer__inner {
	font-size: var(--yak-font-sm, 0.9rem);
	line-height: 1.7;
	color: var(--yak-color-text, #333);
}

.tdot-footer__inner p {
	margin-bottom: 0.6em;
}

.tdot-footer__inner p:last-child {
	margin-bottom: 0;
}

.tdot-footer__inner a,
.entry-content .tdot-footer__inner a {
	color: var(--yak-color-primary, #003a5d);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	background-image: none;
	background-size: auto;
	background-position: initial;
	background-repeat: initial;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.tdot-footer__inner a:hover,
.tdot-footer__inner a:focus-visible {
	color: var(--yak-color-primary-dark, #002a44);
}

/* Override theme's 2rem flex gap on the archive wrapper for tighter layout. */
.yak-archive-wrapper:has(.tdot-archive-header),
.yak-archive-wrapper:has(.tdot-taxonomy-hero) {
	gap: 0.25rem;
}

/* Grouped archives: zero gap so hero + nav merge seamlessly. */
.yak-archive-wrapper:has(.tdot-taxonomy-hero--has-nav) {
	gap: 0;
}

/* Topic dropdown — green tint, matching theme's color palette. */
.clb-facet-wrapper--topic select,
.clb-facet-wrapper--topic .facetwp-dropdown {
	background-color: #c8e0d0;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23003a5d' d='M6 9L1 4h10z'/%3E%3C/svg%3E"),
		linear-gradient(135deg, #c8e0d0 0%, #8ab791 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: right 1rem center, 0 0;
	background-size: 12px, 100% 100%;
}

/* ==========================================================================
   Archive: Page Header
   ========================================================================== */

.tdot-archive-header {
	text-align: center;
	margin-bottom: 0.5rem;
}

.tdot-archive-header__title {
	margin-top: 1rem;
	margin-bottom: 0.15rem;
}

.tdot-archive-header__description {
	max-width: 680px;
	margin-inline: auto;
	color: var(--yak-color-text-muted, #555);
	font-size: var(--yak-font-md, 1rem);
	line-height: 1.6;
}

.tdot-archive-header__description--blocks {
	max-width: none;
	text-align: left;
	margin-top: 1.5em;
	color: var(--yak-color-text, #333);
}

/* Landing page content wrapper when [toolkit_filters] shortcode is used.
   Block content flows freely; the shortcode output handles its own layout. */
.tdot-landing-content {
	text-align: left;
	color: var(--yak-color-text, #333);
	font-size: var(--yak-font-md, 1rem);
	line-height: 1.6;
}

/* ==========================================================================
   Taxonomy Hero Header
   Unified hero panel for all taxonomy archives. Background color is
   taxonomy-specific (matching pill colors). The --with-image modifier
   switches to a 2-column grid when an image is available.
   ========================================================================== */

.tdot-taxonomy-hero {
	margin-bottom: 0.75rem;
	padding: 1.25rem 1.5rem;
	background: #f0f6fa;
	border-radius: 12px;
	overflow: hidden;
}

/* Grouped archives: hero merges with nav into one visual panel. */
.tdot-taxonomy-hero--has-nav {
	margin-bottom: 0;
	border-radius: 12px 12px 0 0;
	padding-bottom: 0.75rem;
}

.tdot-taxonomy-hero--has-nav + .tdot-toolkit-archive--grouped .tdot-grouped-nav {
	border-radius: 0 0 12px 12px;
	padding: 0 1.5rem 1rem;
	margin-bottom: 0.75rem;
}

.tdot-taxonomy-hero--toolkit_language.tdot-taxonomy-hero--has-nav + .tdot-toolkit-archive--grouped .tdot-grouped-nav { background: #fef7e0; }
.tdot-taxonomy-hero--toolkit_format.tdot-taxonomy-hero--has-nav + .tdot-toolkit-archive--grouped .tdot-grouped-nav { background: #fceee9; }

.tdot-taxonomy-hero__title-row {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
}

.tdot-taxonomy-hero__title-row .tdot-taxonomy-hero__title {
	flex: 1 1 auto;
}

.tdot-download-all-btn--hero {
	flex-shrink: 0;
	font-size: 0.8rem;
	padding: 0.35rem 0.85rem;
}

/* Taxonomy-specific background tints (softened versions of pill colors). */
.tdot-taxonomy-hero--toolkit_topic    { background: #edf5f1; }
.tdot-taxonomy-hero--toolkit_format   { background: #fceee9; }
.tdot-taxonomy-hero--toolkit_language { background: #fef7e0; }

/* 2-column grid when an image is present. Image stretches to match content height. */
.tdot-taxonomy-hero--with-image {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: stretch;
}

.tdot-taxonomy-hero__image {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	min-height: 200px;
}

.tdot-taxonomy-hero__image picture {
	display: block;
	width: 100%;
	height: 100%;
}

.tdot-taxonomy-hero__img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

/* Keep content column vertically centered within the stretched row. */
.tdot-taxonomy-hero--with-image .tdot-taxonomy-hero__content {
	align-self: center;
}

.tdot-taxonomy-hero__content {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.tdot-taxonomy-hero__title {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.tdot-taxonomy-hero__title-english {
	font-weight: 400;
	opacity: 0.7;
	color: var(--yak-color-primary, #003a5d);
	margin: 0;
}

.tdot-taxonomy-hero__subhead {
	font-size: var(--yak-font-md, 1rem);
	line-height: 1.5;
	color: var(--yak-color-text, #333);
	margin: 0;
}

.tdot-taxonomy-hero__body {
	margin-top: 0.5rem;
	font-size: var(--yak-font-md, 1rem);
	line-height: 1.6;
	color: var(--yak-color-text, #333);
}

.tdot-taxonomy-hero .tdot-archive-header__taxonomy-label {
	margin-bottom: 0;
}

.tdot-filter-hint {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0 0 0.75rem;
	font-size: var(--yak-font-sm, 0.85rem);
	font-style: italic;
	color: var(--yak-color-text-muted, #555);
}

@media (max-width: 768px) {
	.tdot-taxonomy-hero {
		padding: 1rem;
	}

	.tdot-taxonomy-hero--with-image {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.tdot-taxonomy-hero__title {
		font-size: 1.4rem;
	}
}

/* ==========================================================================
   Landing Page: Hide Results Until Filtered
   Scoped to [data-hide-unfiltered] so taxonomy archives are unaffected.
   ========================================================================== */

/* Results stay in the DOM (FacetWP needs to detect .facetwp-template)
   but are visually collapsed until a filter is active. */
[data-hide-unfiltered] .tdot-results {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
}

[data-hide-unfiltered].has-active-filters .tdot-results {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

[data-hide-unfiltered].has-active-filters .tdot-results-prompt {
	display: none;
}

/* Facet element must remain in the DOM for FacetWP's JS API
   but needs to be invisible to users. */
.tdot-hidden-facet {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
}

.tdot-results-prompt {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--yak-color-text-muted, #555);
	font-size: var(--yak-font-md, 1rem);
}

.tdot-results-prompt p {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.tdot-results-summary {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-align: center;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	color: var(--yak-color-primary, #003a5d);
	background: var(--yak-color-bg-light, #f5f7fa);
	border-radius: 8px;
	border-left: 4px solid var(--yak-color-primary, #003a5d);
}

.tdot-results-summary__headline {
	font-size: var(--yak-font-md, 1rem);
	font-weight: 600;
}

.tdot-results-summary__subhead {
	font-size: var(--yak-font-sm, 0.9rem);
	font-weight: 400;
	color: var(--yak-color-text-muted, #555);
	line-height: 1.5;
}

/* ==========================================================================
   Archive: Topic Pills
   Compact, image-free filter buttons that read as navigation, not content.
   ========================================================================== */

.tdot-topic-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--yak-color-border, #ddd);
}

/* Reset aggressively — theme button styles are very strong.
   Styled with a tinted fill to match the FacetWP dropdown controls above. */
button.tdot-topic-pill {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	box-sizing: border-box;
	padding: 0.6rem 1rem;
	border: 2px solid transparent;
	border-radius: 8px;
	background: #b8d4e8;
	color: var(--yak-color-primary, #003a5d);
	font-family: var(--yak-primary-font, inherit);
	font-size: var(--yak-font-sm, 0.85rem);
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

button.tdot-topic-pill::before,
button.tdot-topic-pill::after {
	content: none !important;
	display: none !important;
}

button.tdot-topic-pill:hover,
button.tdot-topic-pill:focus,
button.tdot-topic-pill:focus-visible,
button.tdot-topic-pill:active,
.entry-content button.tdot-topic-pill:hover,
.entry-content button.tdot-topic-pill:focus {
	background: #a2c5dc !important;
	color: var(--yak-color-primary, #003a5d) !important;
	border-color: transparent !important;
	text-decoration: none !important;
	text-transform: none !important;
	outline: none;
	transform: none !important;
	box-shadow: none !important;
}

button.tdot-topic-pill.is-active,
button.tdot-topic-pill.is-active:hover,
.entry-content button.tdot-topic-pill.is-active {
	background: var(--yak-color-primary, #003a5d) !important;
	color: #fff !important;
	border-color: var(--yak-color-primary, #003a5d) !important;
	box-shadow: none !important;
}

button.tdot-topic-pill.is-active .tdot-topic-pill__count {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

button.tdot-topic-pill.is-dimmed,
.entry-content button.tdot-topic-pill.is-dimmed {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

button.tdot-topic-pill.is-dimmed:hover,
.entry-content button.tdot-topic-pill.is-dimmed:hover {
	opacity: 0.9;
}

.tdot-topic-pill__label {
	font-weight: 500;
	line-height: 1.3;
}

.tdot-topic-pill__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.15em 0.5em;
	border-radius: 999px;
	background: rgba(0, 58, 93, 0.12);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: var(--yak-color-primary, #003a5d);
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Reset pill — sits inline in the topic pills row. Transparent bg to stand apart. */
button.tdot-topic-pill--reset {
	background: transparent;
	border-color: transparent;
	color: var(--yak-color-text-muted, #888);
	gap: 0.3rem;
}

button.tdot-topic-pill--reset:hover,
button.tdot-topic-pill--reset:focus-visible,
.entry-content button.tdot-topic-pill--reset:hover,
.entry-content button.tdot-topic-pill--reset:focus-visible {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--yak-color-primary, #003a5d) !important;
}

button.tdot-topic-pill--reset.is-dimmed {
	opacity: 1;
}

/* ==========================================================================
   Archive: Results Grid
   ========================================================================== */

.tdot-results__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tdot-results__empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--yak-color-text-muted, #555);
}

/* ==========================================================================
   Archive: Toolkit Card
   ========================================================================== */

.tdot-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--yak-color-border, #ddd);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.tdot-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* Image container: fixed aspect ratio, handles varying image shapes gracefully. */
.tdot-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--yak-color-bg-light, #f5f5f5);
	overflow: hidden;
}

.tdot-card__image a,
.entry-content .tdot-card__image a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	background-image: none;
	background-size: auto;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

/* Belt: ensure <picture> (injected by image-optimization plugins) fills
   the parent so percentage-based sizing on the inner <img> resolves correctly. */
.tdot-card__image picture {
	display: block;
	width: 100%;
	height: 100%;
}

.tdot-card__thumbnail {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.5rem;
}

.tdot-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1rem;
	gap: 0.5rem;
}

.tdot-card__title {
	font-size: var(--yak-font-md, 1rem);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.tdot-card__title a,
.entry-content .tdot-card__title a {
	color: inherit;
	text-decoration: none;
	background-image: none;
	background-size: auto;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.tdot-card__title a:hover,
.entry-content .tdot-card__title a:hover {
	text-decoration: underline;
	background-image: none;
}

.tdot-card__downloads {
	font-size: var(--yak-font-xs, 0.8rem);
	color: var(--yak-color-text-muted, #666);
}

/* ==========================================================================
   Shared: Taxonomy Pills
   ========================================================================== */

.tdot-card__pills,
.tdot-single__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: auto;
}

.tdot-card__pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.tdot-card__pill,
.tdot-single__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0.2em 0.6em;
	font-size: var(--yak-font-xs, 0.75rem);
	font-weight: 500;
	line-height: 1.3;
	border-radius: 6px;
	white-space: nowrap;
	border: 1px solid transparent;
}

/* Topic pills — green tint. Allow wrapping since topic names can be long. */
.tdot-card__pill--toolkit_topic,
.tdot-single__badge--toolkit_topic {
	background: #c8e0d0;
	color: var(--yak-color-primary, #003a5d);
	white-space: normal;
}

/* Format pills — pink/coral */
.tdot-card__pill--toolkit_format,
.tdot-single__badge--toolkit_format {
	background: #f5c9be;
	color: var(--yak-color-primary, #003a5d);
}

/* Language pills — yellow */
.tdot-card__pill--toolkit_language,
.tdot-single__badge--toolkit_language {
	background: #f9e79f;
	color: var(--yak-color-primary, #003a5d);
}

/* ==========================================================================
   Taxonomy Archive: Header Label
   ========================================================================== */

.tdot-archive-header__taxonomy-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--yak-color-text-muted, #666);
}

/* ==========================================================================
   Single: Badges (below title)
   ========================================================================== */

.tdot-single__badges {
	justify-content: center;
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}

.tdot-single__badges {
	flex-direction: column;
	align-items: center;
}

.tdot-single__badges-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: center;
}

.tdot-single__badge--toolkit_topic {
	white-space: normal;
	text-align: center;
}

.tdot-single__badge {
	font-size: var(--yak-font-sm, 0.85rem);
	padding: 0.3em 0.8em;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

a.tdot-single__badge:hover,
a.tdot-single__badge:focus-visible {
	opacity: 0.75;
	text-decoration: none;
}

/* Standalone feedback button wrapper (used when taxonomy badges are disabled). */
.tdot-single__feedback-standalone {
	display: flex;
	justify-content: center;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

/* Override yak-feedback-button which applies !important on nearly everything.
   Sized to match .tdot-download-all-btn height — outline variant. */
.tdot-single__badge.tdot-single__badge--feedback {
	background: transparent !important;
	background-image: none !important;
	background-size: auto !important;
	color: var(--yak-color-primary, #003a5d) !important;
	border: 2px solid var(--yak-color-primary, #003a5d) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	font-family: var(--yak-primary-font, inherit);
	font-size: var(--yak-font-sm, 0.85rem) !important;
	font-weight: 600 !important;
	padding: 0.45rem 1rem !important;
	opacity: 1 !important;
	gap: 0.5rem;
	cursor: pointer;
	outline: none !important;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease !important;
}

.tdot-single__badge.tdot-single__badge--feedback:hover,
.tdot-single__badge.tdot-single__badge--feedback:focus-visible {
	background: var(--yak-color-primary, #003a5d) !important;
	color: #fff !important;
	border: 2px solid var(--yak-color-primary, #003a5d) !important;
	outline: none !important;
	transform: none !important;
	opacity: 1 !important;
}

/* ==========================================================================
   Remove theme entry borders on plugin-controlled templates
   ========================================================================== */

.type-toolkit_item .entry-header,
.type-toolkit_item .entry-content,
.type-toolkit_item .entry-footer,
.page-template-tdot-promo-materials .entry-header,
.page-template-tdot-promo-materials .entry-footer {
	border: none;
	margin-top: 0;
	padding-top: 0;
}

.type-toolkit_item .yak-resource-metabox::after,
.page-template-tdot-promo-materials .yak-resource-metabox::after {
	display: none;
}

/* ==========================================================================
   Single: Related Toolkit Items
   Compact 3-col grid inside a tinted hero band.
   ========================================================================== */

.tdot-related {
	margin-top: 2.5rem;
	padding: 1.5rem 1.5rem 1.75rem;
	background: #f0f6fa;
	border-radius: 12px;
}

.tdot-related__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--yak-color-primary, #003a5d);
	margin-bottom: 0.75rem;
	text-align: center;
}

/* Force 3-col and shrink cards inside related section. */
.tdot-related .tdot-results__grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

.tdot-related .tdot-card {
	border: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.tdot-related .tdot-card:hover {
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.tdot-related .tdot-card__image {
	aspect-ratio: 16 / 10;
}

.tdot-related .tdot-card__body {
	padding: 0.6rem 0.75rem;
	gap: 0.3rem;
}

.tdot-related .tdot-card__title {
	font-size: 0.8rem;
	line-height: 1.25;
}

.tdot-related .tdot-card__downloads {
	font-size: 0.7rem;
}

.tdot-related .tdot-card__pills {
	gap: 0.25rem;
}

.tdot-related .tdot-card__pill {
	font-size: 0.65rem;
	padding: 0.15em 0.45em;
}

/* ==========================================================================
   Single: Download All Button
   Used in both list and gallery modes when there are >1 file attachments.
   ========================================================================== */

.tdot-download-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.tdot-download-header__actions,
.tdot-gallery-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.tdot-download-all-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 1rem;
	font-family: var(--yak-primary-font, inherit);
	font-size: var(--yak-font-sm, 0.85rem);
	font-weight: 600;
	color: #fff;
	background: var(--yak-color-primary, #003a5d);
	border: 2px solid var(--yak-color-primary, #003a5d);
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}

.tdot-download-all-btn,
.entry-content .tdot-download-all-btn {
	background-image: none;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.tdot-download-all-btn:hover,
.tdot-download-all-btn:focus-visible,
.entry-content .tdot-download-all-btn:hover,
.entry-content .tdot-download-all-btn:focus-visible {
	background: var(--yak-color-primary-dark, #002a44);
	background-image: none;
	border-color: var(--yak-color-primary-dark, #002a44);
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   Single: Gallery Display Mode
   Thumbnail grid with dual-action hover overlay (view / download).
   ========================================================================== */

.tdot-gallery {
	margin-bottom: 2rem;
}

.tdot-gallery-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.tdot-gallery-header__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
}

/* "View Gallery" button in gallery header. */
.tdot-gallery-view-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 1rem;
	font-family: var(--yak-primary-font, inherit);
	font-size: var(--yak-font-sm, 0.85rem);
	font-weight: 600;
	color: #fff;
	background: var(--yak-color-primary, #003a5d);
	border: 2px solid var(--yak-color-primary, #003a5d);
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.tdot-gallery-view-btn:hover,
.tdot-gallery-view-btn:focus-visible {
	background: var(--yak-color-primary-dark, #002a44);
	border-color: var(--yak-color-primary-dark, #002a44);
	color: #fff;
}

.tdot-gallery-grid {
	display: grid;
	grid-template-columns: repeat(var(--tdot-cols-mobile, 2), 1fr);
	gap: 1rem;
}

@media (min-width: 600px) {
	.tdot-gallery-grid {
		grid-template-columns: repeat(var(--tdot-cols-tablet, 3), 1fr);
	}
}

@media (min-width: 960px) {
	.tdot-gallery-grid {
		grid-template-columns: repeat(var(--tdot-cols, 3), 1fr);
	}
}

.tdot-gallery-item {
	margin: 0;
	padding: 0;
	border: 1px solid var(--yak-color-border, #ddd);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.2s ease;
}

.tdot-gallery-item:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tdot-gallery-item__image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--yak-color-bg-light, #f5f5f5);
}

/* Belt: ensure <picture> (injected by image-optimization plugins) fills
   the parent so percentage-based sizing on the inner <img> resolves correctly. */
.tdot-gallery-item__image picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* Suspenders: absolute positioning anchors the <img> directly to the
   aspect-ratio container, bypassing any intermediate wrapper element. */
.tdot-gallery-item__img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Gallery card is an <a> link wrapping the image area. */
.tdot-gallery-item__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.tdot-gallery-item__link,
.entry-content .tdot-gallery-item__link {
	background-image: none;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

/* File-type / link placeholder icon for non-image attachments. */
.tdot-gallery-item__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2.5rem;
	color: var(--yak-color-text-muted, #888);
}

/* Download overlay: single centered icon. */
.tdot-gallery-item__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 1.5rem;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

/* Hover-capable devices: hide overlay until hover. */
@media (hover: hover) {
	.tdot-gallery-item__overlay {
		opacity: 0;
	}

	.tdot-gallery-item:hover .tdot-gallery-item__overlay {
		opacity: 1;
	}
}

/* Touch devices: always show a lighter overlay. */
@media (hover: none) {
	.tdot-gallery-item__overlay {
		opacity: 1;
		background: rgba(0, 0, 0, 0.25);
	}
}

/* Image area that opens the lightbox on click. */
.tdot-gallery-item__image--lightbox {
	cursor: pointer;
}

/* Caption row: name + file type badge + download action. */
.tdot-gallery-item__caption {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.75rem;
	font-size: var(--yak-font-xs, 0.8rem);
	color: var(--yak-color-text, #333);
}

.tdot-gallery-item__name {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tdot-gallery-item__ext {
	flex-shrink: 0;
	padding: 0.1em 0.4em;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var(--yak-color-bg-light, #f0f0f0);
	color: var(--yak-color-text-muted, #666);
	border-radius: 3px;
}

/* Download/action button in the caption row. */
.tdot-gallery-item__download-btn {
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	color: var(--yak-color-primary, #003a5d);
	background: var(--yak-color-bg-light, #f0f0f0);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
	font-size: 0.75rem;
}

.tdot-gallery-item__download-btn:hover,
.tdot-gallery-item__download-btn:focus-visible {
	background: var(--yak-color-primary, #003a5d);
	color: #fff;
	text-decoration: none;
}

.tdot-gallery-item__download-btn,
.entry-content .tdot-gallery-item__download-btn {
	background-image: none;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.entry-content .tdot-gallery-item__download-btn:hover,
.entry-content .tdot-gallery-item__download-btn:focus-visible {
	background-image: none;
	text-decoration: none;
}

/* ==========================================================================
   Single: Sectioned Gallery Mode
   Jump-link nav + stacked section grids with per-section download buttons.
   Auto-triggered when section dividers are present in the repeater.
   ========================================================================== */

/* Smooth scroll for jump-link navigation. Applied to html so anchor links work.
   scroll-padding-top clears the sticky site header on anchor jumps. */
html:has(.tdot-gallery--sectioned) {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

/* Table-of-contents nav below the gallery header. */
.tdot-gallery-nav {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--yak-color-bg-light, #f5f7fa);
	border-radius: 8px;
	border-left: 3px solid var(--yak-color-primary, #003a5d);
	counter-reset: toc-section;
}

.tdot-gallery-nav__heading {
	margin: 0 0 0.5rem;
	font-size: var(--yak-font-sm, 0.85rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--yak-color-text-muted, #666);
}

.tdot-gallery-nav__link {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	padding: 0.4em 0.5em;
	font-family: var(--yak-primary-font, inherit);
	font-size: var(--yak-font-sm, 0.85rem);
	font-weight: 500;
	color: var(--yak-color-primary, #003a5d);
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.15s ease;
	counter-increment: toc-section;
}

.tdot-gallery-nav__link::before {
	content: counter(toc-section) ".";
	flex-shrink: 0;
	font-weight: 700;
	font-size: 0.9em;
	color: var(--yak-color-primary, #003a5d);
	opacity: 0.5;
}

.tdot-gallery-nav__link,
.entry-content .tdot-gallery-nav__link {
	background-image: none;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.tdot-gallery-nav__link:hover,
.tdot-gallery-nav__link:focus-visible,
.entry-content .tdot-gallery-nav__link:hover,
.entry-content .tdot-gallery-nav__link:focus-visible {
	background: rgba(0, 58, 93, 0.06);
	background-image: none;
	text-decoration: none;
}

/* Individual section wrappers — alternating backgrounds.
   scroll-margin-top clears the sticky site header on anchor navigation. */
.tdot-gallery-section {
	padding: 1.25rem 1rem;
	border-radius: 10px;
	margin-bottom: 1rem;
	scroll-margin-top: 120px;
}

.tdot-gallery-section:nth-child(odd of .tdot-gallery-section) {
	background: var(--yak-color-bg-light, #f5f7fa);
}

.tdot-gallery-section:nth-child(even of .tdot-gallery-section) {
	background: transparent;
}

/* Section header: title + download button. */
.tdot-gallery-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.tdot-gallery-section__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--yak-color-primary, #003a5d);
}

/* Per-section download button — lighter variant of the main download button. */
.tdot-section-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.85rem;
	font-family: var(--yak-primary-font, inherit);
	font-size: var(--yak-font-xs, 0.8rem);
	font-weight: 600;
	color: var(--yak-color-primary, #003a5d);
	background: transparent;
	border: 1.5px solid var(--yak-color-primary, #003a5d);
	border-radius: 6px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.tdot-section-download-btn,
.entry-content .tdot-section-download-btn {
	background-image: none;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.tdot-section-download-btn:hover,
.tdot-section-download-btn:focus-visible,
.entry-content .tdot-section-download-btn:hover,
.entry-content .tdot-section-download-btn:focus-visible {
	background: var(--yak-color-primary, #003a5d);
	background-image: none;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 768px) {
	.tdot-gallery-nav {
		padding: 0.75rem 1rem;
	}

	.tdot-gallery-nav__link {
		font-size: 0.8rem;
		padding: 0.35em 0.4em;
	}

	.tdot-gallery-section {
		padding: 1rem 0.75rem;
	}

	.tdot-gallery-section__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

/* ==========================================================================
   Grouped Taxonomy Archive
   Sectioned card grids for Language and Format archive views.
   Language archives group by Format; Format archives group by Language.
   ========================================================================== */

.tdot-grouped-archive {
	margin-top: 0;
}

/* Smooth scroll for jump-link navigation on grouped archives. */
html:has(.tdot-grouped-archive) {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

/* Jump-link nav — compact horizontal pill group. */
.tdot-grouped-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 0.75rem;
}

.tdot-grouped-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 0.4em 0.9em;
	font-family: var(--yak-primary-font, inherit);
	font-size: var(--yak-font-sm, 0.85rem);
	font-weight: 600;
	color: var(--yak-color-primary, #003a5d);
	text-decoration: none;
	background: var(--yak-color-bg-light, #f5f7fa);
	border: 1px solid rgba(0, 58, 93, 0.12);
	border-right-width: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tdot-grouped-nav__link:first-child {
	border-radius: 6px 0 0 6px;
}

.tdot-grouped-nav__link:last-child {
	border-right-width: 1px;
	border-radius: 0 6px 6px 0;
}

.tdot-grouped-nav__link:only-child {
	border-radius: 6px;
	border-right-width: 1px;
}

.tdot-grouped-nav__link,
.entry-content .tdot-grouped-nav__link {
	background-image: none;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.tdot-grouped-nav__link:hover,
.tdot-grouped-nav__link:focus-visible,
.entry-content .tdot-grouped-nav__link:hover,
.entry-content .tdot-grouped-nav__link:focus-visible {
	background: var(--yak-color-primary, #003a5d);
	background-image: none;
	color: #fff;
	text-decoration: none;
}

/* Individual grouped section. */
.tdot-grouped-section {
	padding: 1.25rem 1rem;
	border-radius: 10px;
	margin-bottom: 1rem;
	scroll-margin-top: 120px;
}

.tdot-grouped-section:nth-child(odd of .tdot-grouped-section) {
	background: var(--yak-color-bg-light, #f5f7fa);
}

.tdot-grouped-section:nth-child(even of .tdot-grouped-section) {
	background: transparent;
}

.tdot-grouped-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.tdot-grouped-section__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--yak-color-primary, #003a5d);
}

/* Cross-reference link on section heading — links to the other taxonomy archive. */
.tdot-grouped-section__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--yak-color-primary, #003a5d);
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.tdot-grouped-section__link,
.entry-content .tdot-grouped-section__link {
	background-image: none;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.tdot-grouped-section__link:hover,
.tdot-grouped-section__link:focus-visible,
.entry-content .tdot-grouped-section__link:hover,
.entry-content .tdot-grouped-section__link:focus-visible {
	opacity: 0.7;
	background-image: none;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tdot-grouped-section__count {
	font-size: var(--yak-font-sm, 0.85rem);
	font-weight: 500;
	color: var(--yak-color-text-muted, #666);
	white-space: nowrap;
}

/* Cross-archive "View all" link in the section header. */
.tdot-grouped-section__view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--yak-font-sm, 0.8rem);
	font-weight: 500;
	color: var(--yak-color-primary, #003a5d);
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.tdot-grouped-section__view-all,
.entry-content .tdot-grouped-section__view-all {
	background-image: none;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.tdot-grouped-section__view-all:hover,
.tdot-grouped-section__view-all:focus-visible,
.entry-content .tdot-grouped-section__view-all:hover,
.entry-content .tdot-grouped-section__view-all:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 2px;
	background-image: none;
}

.tdot-grouped-section__view-all .fa-arrow-right {
	font-size: 0.75em;
}

/* Sub-heading when multiple toolkit items share a section. */
.tdot-grouped-item__title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--yak-color-text, #333);
	margin: 1.25rem 0 0.75rem;
}

.tdot-grouped-item__title a,
.entry-content .tdot-grouped-item__title a {
	color: inherit;
	text-decoration: none;
	background-image: none;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.tdot-grouped-item__title a:hover,
.entry-content .tdot-grouped-item__title a:hover {
	text-decoration: underline;
	background-image: none;
}

/* Download list inside a grouped section — remove extra outer spacing. */
.tdot-grouped-metabox {
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: none;
}

.tdot-grouped-metabox .yak-resource-metabox__inner {
	padding: 0;
}

@media (max-width: 768px) {
	.tdot-grouped-nav__link {
		font-size: 0.75rem;
		padding: 0.35em 0.65em;
	}

	.tdot-grouped-section {
		padding: 1rem 0.75rem;
	}

	.tdot-grouped-section__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.tdot-grouped-section__title {
		font-size: 1rem;
	}
}

/* ==========================================================================
   Lightbox
   Custom zero-dependency image viewer for gallery mode.
   ========================================================================== */

.tdot-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.52);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.tdot-lightbox.is-open {
	opacity: 1;
}

.tdot-lightbox__content {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90vw;
	max-height: 80vh;
	padding: 1rem;
}

.tdot-lightbox__image-link {
	display: block;
	line-height: 0;
	cursor: pointer;
	text-decoration: none !important;
}

.tdot-lightbox__image {
	max-width: 100%;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	user-select: none;
	cursor: pointer;
}

.tdot-lightbox__close {
	all: unset;
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 2px solid transparent;
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1;
	color: var(--yak-color-text, #333) !important;
	background: rgba(255, 255, 255, 0.6) !important;
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: background-color 0.15s ease, border-color 0.15s ease;
	z-index: 2;
	box-sizing: border-box;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
}

.tdot-lightbox__close:hover,
.tdot-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.9) !important;
	border-color: rgba(0, 0, 0, 0.15);
	color: var(--yak-color-text, #333) !important;
	text-decoration: none;
}

.tdot-lightbox__close::before,
.tdot-lightbox__close::after {
	content: none !important;
	display: none !important;
}

.tdot-lightbox__prev,
.tdot-lightbox__next {
	all: unset;
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 2px solid rgba(0, 0, 0, 0.1);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--yak-color-text, #333) !important;
	cursor: pointer;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	z-index: 2;
	box-sizing: border-box;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
}

.tdot-lightbox__prev {
	left: 1rem;
}

.tdot-lightbox__next {
	right: 1rem;
}

.tdot-lightbox__prev:hover,
.tdot-lightbox__prev:focus-visible,
.tdot-lightbox__next:hover,
.tdot-lightbox__next:focus-visible {
	background: rgba(255, 255, 255, 0.95) !important;
	border-color: rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	color: var(--yak-color-text, #333) !important;
	text-decoration: none;
}

.tdot-lightbox__prev::before,
.tdot-lightbox__prev::after,
.tdot-lightbox__next::before,
.tdot-lightbox__next::after {
	content: none !important;
	display: none !important;
}

.tdot-lightbox__footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 1.5rem 1.5rem;
	background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.92) 100%);
	color: var(--yak-color-text, #333);
	font-size: var(--yak-font-sm, 0.9rem);
	z-index: 1;
}

.tdot-lightbox__caption {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 80vw;
	font-weight: 600;
	font-size: 1rem;
	color: var(--yak-color-text, #333);
	background: rgba(255, 255, 255, 0.8);
	padding: 0.3rem 1rem;
	border-radius: 6px;
}

.tdot-lightbox__counter {
	opacity: 0.55;
	white-space: nowrap;
	font-size: 0.8em;
	color: var(--yak-color-text, #333);
}

.tdot-lightbox__download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.5rem;
	color: #fff !important;
	background: var(--yak-color-primary, #0d3b66) !important;
	border: none;
	border-radius: 8px;
	text-decoration: none !important;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.1s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tdot-lightbox__download:hover,
.tdot-lightbox__download:focus-visible {
	background: var(--yak-color-primary-dark, #092a4a) !important;
	color: #fff !important;
	text-decoration: none !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.tdot-breadcrumb {
		margin-bottom: 0.35rem;
	}

	.tdot-breadcrumb__link {
		font-size: 0.75rem;
	}

	.tdot-archive-header {
		margin-bottom: 0.75rem;
	}

	.tdot-archive-header__title {
		font-size: 1.5rem;
	}

	.tdot-topic-pills {
		gap: 0.4rem;
		margin-bottom: 1rem;
	}

	button.tdot-topic-pill {
		padding: 0.4rem 0.65rem;
		font-size: 0.8rem;
	}

	.tdot-results__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.tdot-card__image {
		aspect-ratio: 16 / 10;
	}

	.tdot-related {
		padding: 1rem;
	}

	.tdot-related .tdot-results__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.5rem;
	}

	.tdot-related .tdot-card__title {
		font-size: 0.7rem;
	}

	.tdot-related .tdot-card__downloads,
	.tdot-related .tdot-card__pills {
		display: none;
	}

	.tdot-gallery-grid {
		gap: 0.75rem;
	}

	.tdot-gallery-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.tdot-lightbox__prev {
		left: 0.5rem;
	}

	.tdot-lightbox__next {
		right: 0.5rem;
	}

	.tdot-lightbox__footer {
		gap: 0.4rem;
		padding: 0.75rem 1rem 1rem;
	}
}

/* ==========================================================================
   Language Switcher Button (inside downloads list)
   Interactive dropdown that links to toolkit_language archives.
   ========================================================================== */

.tdot-lang-switcher {
	position: relative;
}

/* Override browser button defaults so the trigger inherits the theme's
   .yak-resource-attachment__link 3D-button treatment identically to <a> tags.
   Buttons don't inherit font-family/color from class rules — must be explicit. */
button.tdot-lang-switcher__trigger {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	width: 100%;
	font-family: var(--yak-primary-font, inherit);
	font-weight: 600;
	font-style: normal;
	color: var(--yak-color-black, #333);
	text-transform: none;
	text-align: left;
	letter-spacing: normal;
}

button.tdot-lang-switcher__trigger:hover,
button.tdot-lang-switcher__trigger:focus {
	color: var(--yak-color-white, #fff);
}

/* Persistent activated state: visible while the dropdown is open,
   regardless of hover. Uses a mid-tone tint so it reads clearly
   as "active" without full dark-fill (which is reserved for hover). */
button.tdot-lang-switcher__trigger[aria-expanded="true"] {
	background: #c5d9e8 !important;
	background-image: none !important;
	color: var(--yak-color-primary, #003a5d) !important;
	outline: 2px solid var(--yak-color-primary, #003a5d);
	outline-offset: -2px;
}

/* Hover/focus on the already-expanded trigger: darken slightly. */
button.tdot-lang-switcher__trigger[aria-expanded="true"]:hover,
button.tdot-lang-switcher__trigger[aria-expanded="true"]:focus {
	background: #a2c5dc !important;
	background-image: none !important;
	color: var(--yak-color-primary, #003a5d) !important;
}

.tdot-lang-switcher__trigger[aria-expanded="true"] .fa-globe::before {
	content: "\f00d";
	font-family: inherit;
}

.tdot-lang-switcher__dropdown {
	display: none;
	position: absolute;
	z-index: 50;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0.25rem 0 0;
	padding: 0.4rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.tdot-lang-switcher__trigger[aria-expanded="true"] + .tdot-lang-switcher__dropdown {
	display: block;
}

.tdot-lang-switcher__item {
	display: block;
	padding: 0.5rem 1rem;
	font-size: var(--yak-font-sm, 0.85rem);
	color: var(--yak-color-text, #333);
	text-decoration: none;
	transition: background-color 0.12s ease;
}

.tdot-lang-switcher__item,
.entry-content .tdot-lang-switcher__item {
	background-image: none;
	box-decoration-break: slice;
	-webkit-box-decoration-break: slice;
}

.tdot-lang-switcher__item:hover,
.tdot-lang-switcher__item:focus-visible,
.entry-content .tdot-lang-switcher__item:hover,
.entry-content .tdot-lang-switcher__item:focus-visible {
	background: var(--yak-color-bg-light, #f5f7fa);
	background-image: none;
	text-decoration: none;
	color: var(--yak-color-primary, #003a5d);
}