/**
 * Naif Toolkit — Awards frontend styles.
 *
 * Site aesthetic: theme typography (Open Sans), hairline rules, generous
 * whitespace. The accent color arrives as --naif-accent via an inline style;
 * #a08c5f (brass) is the fallback.
 *
 * Text colors INHERIT rather than being fixed greys: a shortcode can be placed
 * in a light content area or over a dark hero image (the project template puts
 * the facts line on a photo with a black overlay and white type), and a
 * hardcoded #666 is unreadable there. Muted variants dim the inherited color
 * with opacity so they stay legible on any background. Hairlines use a
 * mid-grey alpha for the same reason.
 */

/* Wrapper ----------------------------------------------------------------- */

.naif-awards {
	--naif-accent: #a08c5f;
}

.naif-awards--count,
.naif-awards__count {
	display: inline;
}

/* Facts line -------------------------------------------------------------- */

.naif-awards--facts-line {
	margin: 14px 0;
	font-size: 13px;
	line-height: 1.5;
	color: inherit;
}

/* The row stays in normal inline flow — as flex, the chip, the award text and
   the trailing "+N more" each became their own flex item on one non-wrapping
   line, so "+N more" sat beside the wrapped text instead of after the last
   word. Themes pad paragraphs and headings ("p { padding-bottom: 1em }" in
   Divi), so every block the plugin drops into theme content resets both
   margin and padding — here it also keeps the 6px stacking rule below from
   being swamped when limit="0" gives each award its own line. */

.naif-awards__facts-item {
	margin: 0;
	padding: 0;
}

.naif-awards__facts-item + .naif-awards__facts-item {
	margin-top: 6px;
}

.naif-awards__facts-item svg {
	vertical-align: middle;
	margin-right: 8px;
	color: var(--naif-accent, #a08c5f);
}

.naif-awards__facts-more {
	font-size: 13px;
	color: inherit;
	opacity: 0.65;
	text-decoration: none;
}

a.naif-awards__facts-more:hover,
a.naif-awards__facts-more:focus {
	opacity: 1;
}

/* Recognition (laurel row) ------------------------------------------------ */

.naif-awards--recognition {
	margin: 48px 0;
}

.naif-awards__recognition {
	margin: 0;
	padding: 0;
}

.naif-awards__heading {
	margin: 0 0 36px;
	padding: 0;
	text-align: center;
}

.naif-awards__laurels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px 48px;
	margin: 0;
	padding: 0;
}

.naif-awards__laurel-item {
	width: 150px;
	margin: 0;
	text-align: center;
	color: inherit;
}

.naif-awards__laurel-item svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--naif-accent, #a08c5f);
}

.naif-awards__laurel-item img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.naif-awards__laurel-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.naif-awards__caption {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: inherit;
}

/* The two caption spans are emitted back-to-back with no separator, so they
   have to break to their own lines here or the title runs into the meta. */

.naif-awards__caption-title {
	display: block;
}

.naif-awards__caption-meta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: inherit;
	opacity: 0.7;
}

/* Index ------------------------------------------------------------------- */

.naif-awards--index {
	margin: 32px 0;
}

.naif-awards__index {
	margin: 0;
	padding: 0;
}

.naif-awards__group {
	margin: 0 0 40px;
}

.naif-awards__group-title {
	margin: 0 0 4px;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(128, 128, 128, 0.3);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.6;
}

.naif-awards__row {
	padding: 16px 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.naif-awards__row-main {
	display: block;
	color: inherit;
}

.naif-awards__row-org {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: inherit;
	opacity: 0.7;
}

.naif-awards__row-org a {
	color: inherit;
	text-decoration: none;
}

.naif-awards__row-org a:hover {
	color: var(--naif-accent, #a08c5f);
}

.naif-awards__citation {
	margin: 8px 0 0;
	padding: 0;
	font-size: 13px;
	font-style: italic;
	line-height: 1.6;
	color: inherit;
	opacity: 0.8;
}

.naif-awards__related {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: inherit;
	opacity: 0.7;
}

.naif-awards__related a {
	color: inherit;
	text-decoration: none;
}

.naif-awards__related a:hover {
	color: var(--naif-accent, #a08c5f);
}

/* Badge view (shortcode) -------------------------------------------------- */

.naif-awards--badge {
	margin: 16px 0;
}

.naif-awards__badge {
	display: inline-block;
	text-align: right;
	line-height: 1.4;
}

.naif-awards__badge-head {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--naif-accent, #a08c5f);
}

.naif-awards__badge-title {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: inherit;
}

.naif-awards__badge-more {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: inherit;
	opacity: 0.7;
}

/* Works-grid chip (JS-created) -------------------------------------------- */

.naif-award-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	vertical-align: middle;
	white-space: nowrap;
	font-size: 12px;
	line-height: 1;
	color: var(--naif-accent, #a08c5f);
	pointer-events: none;
	position: relative;
}

.naif-award-chip svg {
	display: block;
	flex: none;
}

.naif-award-chip__count {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Hover label. The chip itself keeps pointer-events: none so it never steals
   the card's click, which also means it can never be hovered — so the reveal
   hangs off the card, which the decorator marks with data-naif-chip. */

.naif-award-chip__label {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 20;
	width: max-content;
	max-width: 240px;
	padding: 7px 10px;
	border-radius: 3px;
	background: rgba(20, 20, 20, 0.93);
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: left;
	white-space: pre-line;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	pointer-events: none;
}

[data-naif-chip]:hover .naif-award-chip__label,
[data-naif-chip]:focus-within .naif-award-chip__label {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Slider badge (JS-created) ----------------------------------------------- */

/* Offsets are custom properties so the badge can be nudged per site without
   editing the plugin — sliders usually carry their own caption along the
   bottom edge, and the default clears a caption of roughly 54px. */

.naif-slider-badge {
	position: absolute;
	right: var(--naif-badge-right, 24px);
	bottom: var(--naif-badge-bottom, 88px);
	z-index: 50;
	max-width: 70%;
	text-align: right;
	line-height: 1.4;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.naif-slider-badge.is-visible {
	opacity: 1;
}

.naif-slider-badge__head {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.naif-slider-badge__title {
	display: block;
	margin-top: 3px;
	font-size: 14px;
}

.naif-slider-badge__more {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	opacity: 0.75;
}

/* Accessibility ----------------------------------------------------------- */

.naif-awards a:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.naif-slider-badge,
	.naif-award-chip__label {
		transition: none;
	}
}