/**
 * BVI Spring Regatta — Site Updates
 * Front-end card grid.
 *
 * Colours come from CSS custom properties set inline by the shortcode, so the
 * settings screen can recolour the block without regenerating this file.
 */

.bvisr-updates {
	/* Defaults sampled from bvispringregatta.org. The shortcode overrides
	   these inline from Settings, so this file never needs regenerating. */
	--bvisr-accent: #003366;
	--bvisr-accent-alt: #bf5680;
	--bvisr-link: #2b7bb9;
	--bvisr-card-bg: #ffffff;
	--bvisr-text: #333333;
	--bvisr-muted: #757575;
	--bvisr-font: inherit;
	--bvisr-radius: 6px;
	--bvisr-gap: 26px;
	--bvisr-border: #e6e6e6;
	--bvisr-shadow: 0 1px 2px rgba(0, 39, 90, 0.05), 0 8px 24px rgba(0, 39, 90, 0.06);
	--bvisr-shadow-hover: 0 2px 4px rgba(0, 39, 90, 0.07), 0 18px 40px rgba(0, 39, 90, 0.14);

	display: block;
	box-sizing: border-box;
	margin: 0 0 2.5rem;
	font-family: var(--bvisr-font);
	container-type: inline-size;
}

.bvisr-updates *,
.bvisr-updates *::before,
.bvisr-updates *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ Grid */

.bvisr-updates__grid {
	display: grid;
	grid-template-columns: repeat(var(--bvisr-cols, 3), minmax(0, 1fr));
	gap: var(--bvisr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bvisr-updates__grid::before,
.bvisr-updates__grid::after {
	content: none;
}

.bvisr-updates--cols-1 .bvisr-updates__grid { --bvisr-cols: 1; }
.bvisr-updates--cols-2 .bvisr-updates__grid { --bvisr-cols: 2; }
.bvisr-updates--cols-3 .bvisr-updates__grid { --bvisr-cols: 3; }
.bvisr-updates--cols-4 .bvisr-updates__grid { --bvisr-cols: 4; }

/* ------------------------------------------------------------------ Card */

.bvisr-update {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bvisr-update::before {
	content: none;
}

.bvisr-update::marker {
	content: "";
}

.bvisr-update__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background: var(--bvisr-card-bg);
	border: 1px solid var(--bvisr-border);
	border-radius: var(--bvisr-radius);
	box-shadow: var(--bvisr-shadow);
	text-decoration: none;
	color: inherit;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

a.bvisr-update__inner:hover,
a.bvisr-update__inner:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--bvisr-shadow-hover);
	border-color: color-mix(in srgb, var(--bvisr-accent) 30%, transparent);
	text-decoration: none;
	color: inherit;
}

a.bvisr-update__inner:focus-visible {
	outline: 3px solid var(--bvisr-accent);
	outline-offset: 3px;
}

/* Pinned cards get a quiet accent rule rather than shouting. The bar is an
   overlay because an inset shadow would sit beneath the featured image. */
.bvisr-update__inner {
	position: relative;
}

.bvisr-update.is-pinned .bvisr-update__inner {
	border-color: color-mix(in srgb, var(--bvisr-accent) 45%, transparent);
}

.bvisr-update.is-pinned .bvisr-update__inner::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--bvisr-accent), var(--bvisr-accent-alt));
	z-index: 2;
	pointer-events: none;
}

/* ----------------------------------------------------------------- Media */

.bvisr-update__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: color-mix(in srgb, var(--bvisr-accent) 8%, #f2f5f7);
	line-height: 0;
}

.bvisr-update__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

a.bvisr-update__inner:hover .bvisr-update__img:not(.bvisr-update__img--placeholder) {
	transform: scale(1.05);
}

.bvisr-update__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--bvisr-accent) 0%, var(--bvisr-accent-alt) 100%);
	color: #ffffff;
}

.bvisr-update__img--placeholder svg {
	width: 34%;
	max-width: 84px;
	height: auto;
}

/* ------------------------------------------------------------------ Body */

.bvisr-update__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.15rem 1.25rem 1.3rem;
}

.bvisr-update__meta {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.55rem;
	align-items: center;
	margin: 0 0 0.6rem;
	padding: 0;
	line-height: 1;
}

.bvisr-update__badge {
	display: inline-block;
	padding: 0.32em 0.68em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bvisr-accent) 12%, transparent);
	color: var(--bvisr-accent);
	font-family: var(--bvisr-badge-ff, var(--bvisr-font));
	font-size: var(--bvisr-badge-fs, 0.688rem);
	font-weight: var(--bvisr-badge-fw, 700);
	line-height: var(--bvisr-badge-lh, 1.4);
	letter-spacing: var(--bvisr-badge-ls, 0.06em);
	text-transform: var(--bvisr-badge-tt, uppercase);
	white-space: nowrap;
}

.bvisr-update__badge--new {
	background: color-mix(in srgb, var(--bvisr-accent-alt) 16%, transparent);
	color: color-mix(in srgb, var(--bvisr-accent-alt) 78%, #000000);
}

.bvisr-update__date {
	color: var(--bvisr-muted);
	font-family: var(--bvisr-date-ff, var(--bvisr-font));
	font-size: var(--bvisr-date-fs, 0.813rem);
	font-weight: var(--bvisr-date-fw, 500);
	line-height: var(--bvisr-date-lh, 1.4);
	letter-spacing: var(--bvisr-date-ls, 0.01em);
	text-transform: var(--bvisr-date-tt, none);
}

/* Type eyebrow — sits at the right-hand end of the meta row, which puts it
   in the top-right corner of the card body. Outlined rather than filled so it
   reads as a quiet label and never competes with the New / Updated badge. */
.bvisr-update__type {
	margin-left: auto;
	display: inline-block;
	padding: 0.3em 0.55em;
	border: 1px solid var(--bvisr-border);
	border-radius: 3px;
	background: transparent;
	color: var(--bvisr-muted);
	font-family: var(--bvisr-eyebrow-ff, var(--bvisr-font));
	font-size: var(--bvisr-eyebrow-fs, 0.625rem);
	font-weight: var(--bvisr-eyebrow-fw, 600);
	line-height: var(--bvisr-eyebrow-lh, 1.4);
	letter-spacing: var(--bvisr-eyebrow-ls, 0.08em);
	text-transform: var(--bvisr-eyebrow-tt, uppercase);
	white-space: nowrap;
}

/* Card titles sit at UI scale, so weight 500 — the site's nav weight —
   rather than the 200 it uses for large display headings. */
.bvisr-update__title {
	margin: 0 0 0.5rem;
	color: var(--bvisr-text);
	font-family: var(--bvisr-card-title-ff, var(--bvisr-font));
	font-size: var(--bvisr-card-title-fs, 1rem);
	font-weight: var(--bvisr-card-title-fw, 500);
	line-height: var(--bvisr-card-title-lh, 1.3);
	letter-spacing: var(--bvisr-card-title-ls, normal);
	text-transform: var(--bvisr-card-title-tt, none);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

a.bvisr-update__inner:hover .bvisr-update__title {
	color: var(--bvisr-link);
}

.bvisr-update__desc {
	margin: 0 0 1rem;
	color: var(--bvisr-muted);
	font-family: var(--bvisr-desc-ff, var(--bvisr-font));
	font-size: var(--bvisr-desc-fs, 0.875rem);
	font-weight: var(--bvisr-desc-fw, 400);
	line-height: var(--bvisr-desc-lh, 1.5);
	letter-spacing: var(--bvisr-desc-ls, normal);
	text-transform: var(--bvisr-desc-tt, none);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bvisr-update__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: auto;
	color: var(--bvisr-link);
	font-family: var(--bvisr-more-ff, var(--bvisr-font));
	font-size: var(--bvisr-more-fs, 0.875rem);
	font-weight: var(--bvisr-more-fw, 500);
	line-height: var(--bvisr-more-lh, 1.4);
	letter-spacing: var(--bvisr-more-ls, normal);
	text-transform: var(--bvisr-more-tt, none);
}

.bvisr-update__arrow {
	width: 1em;
	height: 1em;
	flex: none;
	transition: transform 0.22s ease;
}

a.bvisr-update__inner:hover .bvisr-update__arrow {
	transform: translateX(3px);
}

/* Only present if the theme has not already defined it. */
.bvisr-updates .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =================================================================
   Compact layout — square thumbnail left, text right.

   The square is given an explicit side length rather than being derived
   from the row height. Deriving it is circular: the media box would size
   from the image's intrinsic dimensions before the text height is known,
   which blows the thumbnail up to full image size. Instead the body
   carries a matching min-height, so the row and the square come out the
   same height on a normal entry, and on an unusually long one the square
   centres and stays small rather than growing taller than the text.
   ================================================================= */

.bvisr-updates--compact {
	--bvisr-gap: 14px;
	--bvisr-thumb: 104px;
	--bvisr-thumb-inset: 0.75rem;
}

.bvisr-updates--compact .bvisr-update__inner {
	flex-direction: row;
	align-items: stretch;
}

.bvisr-updates--compact .bvisr-update__media {
	flex: 0 0 var(--bvisr-thumb);
	align-self: center;
	width: var(--bvisr-thumb);
	height: var(--bvisr-thumb);
	min-height: 0;
	aspect-ratio: auto;
	margin: var(--bvisr-thumb-inset) 0 var(--bvisr-thumb-inset) var(--bvisr-thumb-inset);
	border-radius: 4px;
}

.bvisr-updates--compact .bvisr-update__body {
	justify-content: center;
	min-height: calc(var(--bvisr-thumb) + (var(--bvisr-thumb-inset) * 2));
	padding: 0.9rem 2.9rem 0.9rem 1rem;
}

.bvisr-updates--compact .bvisr-update__meta {
	margin-bottom: 0.4rem;
}

.bvisr-updates--compact .bvisr-update__title {
	margin-bottom: 0.28rem;
}

.bvisr-updates--compact .bvisr-update__desc {
	margin-bottom: 0;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* The "read more" wording collapses to just the arrow, pinned to the right
   edge and vertically centred, so the row stays one clean line of text. */
.bvisr-updates--compact .bvisr-update__more {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	margin: 0;
	gap: 0;
	font-size: 0;
	line-height: 0;
}

.bvisr-updates--compact .bvisr-update__arrow {
	width: 17px;
	height: 17px;
}

a.bvisr-update__inner:hover .bvisr-updates--compact .bvisr-update__arrow,
.bvisr-updates--compact a.bvisr-update__inner:hover .bvisr-update__arrow {
	transform: translateX(3px);
}

/* Pinned marker becomes a spine down the left edge rather than a top rule. */
.bvisr-updates--compact .bvisr-update.is-pinned .bvisr-update__inner::after {
	inset: 0 auto 0 0;
	width: 4px;
	height: auto;
	background: var(--bvisr-accent);
}

.bvisr-updates--compact.bvisr-updates--no-images .bvisr-update__body {
	padding-left: 1.1rem;
}

/* ------------------------------------------------------------ No images */

.bvisr-updates--no-images .bvisr-update__inner {
	border-left: 3px solid var(--bvisr-accent);
}

/* ----------------------------------------------------------- Responsive */

@container (max-width: 900px) {
	.bvisr-updates--cols-3 .bvisr-updates__grid,
	.bvisr-updates--cols-4 .bvisr-updates__grid {
		--bvisr-cols: 2;
	}
}

@container (max-width: 560px) {
	.bvisr-updates__grid {
		--bvisr-cols: 1 !important;
		--bvisr-gap: 18px;
	}

	/* Compact rows stay rows on a phone — just a smaller square and less
	   breathing room, rather than stacking image over text. */
	.bvisr-updates--compact .bvisr-updates__grid {
		--bvisr-gap: 10px;
	}

	/* Set on the grid, not on .bvisr-updates — a container query cannot
	   restyle the element that declares the container. */
	.bvisr-updates--compact .bvisr-updates__grid {
		--bvisr-thumb: 76px;
		--bvisr-thumb-inset: 0.6rem;
	}

	.bvisr-updates--compact .bvisr-update__body {
		padding: 0.75rem 2.3rem 0.75rem 0.85rem;
	}

	/* Scale the configured size rather than replacing it, so a custom
	   size set in Settings is still respected on small screens. */
	.bvisr-updates--compact .bvisr-update__title {
		font-size: calc(var(--bvisr-card-title-fs, 1rem) * 0.94);
	}
}

/* Fallback for browsers without container query support. */
@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.bvisr-updates--cols-3 .bvisr-updates__grid,
		.bvisr-updates--cols-4 .bvisr-updates__grid {
			--bvisr-cols: 2;
		}
	}

	@media (max-width: 560px) {
		.bvisr-updates__grid {
			--bvisr-cols: 1 !important;
			--bvisr-gap: 18px;
		}

		.bvisr-updates--compact .bvisr-updates__grid {
			--bvisr-thumb: 76px;
			--bvisr-thumb-inset: 0.6rem;
			--bvisr-gap: 10px;
		}
	}
}

/* color-mix fallbacks for older browsers. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.bvisr-update__badge {
		background: rgba(11, 79, 138, 0.12);
	}

	.bvisr-update__media {
		background: #f2f5f7;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bvisr-update__inner,
	.bvisr-update__img,
	.bvisr-update__arrow {
		transition: none !important;
	}

	a.bvisr-update__inner:hover {
		transform: none;
	}

	a.bvisr-update__inner:hover .bvisr-update__img {
		transform: none;
	}
}

/* ------------------------------------------------------------------ Print */

@media print {
	.bvisr-update__inner {
		box-shadow: none;
		border: 1px solid #cccccc;
		break-inside: avoid;
	}
}

/* =================================================================
   Theme override guard

   The block is normally dropped into a page-builder module, so its
   h3 / p / ul / li / a live inside the builder's own wrappers. Themes
   and builders routinely style those elements at selectors like
   `.fl-builder-content .fl-rich-text p` — specificity (0,2,1) — which
   outranks the single-class rules above and silently replaces the
   typography configured in Settings with the theme's own.

   These declarations repeat the root class to reach (0,3,0), enough to
   beat realistic builder rules without resorting to !important. The
   values are identical to the ones above: this section changes
   precedence, not design. State rules (hover, badge modifier) are
   repeated at higher specificity so raising the base does not flatten
   them.

   To override any of this from a child theme or Custom CSS, match the
   same shape:
   .bvisr-updates.bvisr-updates .bvisr-update__title { ... }
   ================================================================= */

.bvisr-updates.bvisr-updates {
	font-family: var(--bvisr-font);
}

/* Lists: builders add bullets, indents, margins — and `display: list-item`,
   which silently collapses the grid if only the cosmetic properties are
   guarded. The structural declarations have to be raised as well. */
.bvisr-updates.bvisr-updates .bvisr-updates__grid {
	display: grid;
	grid-template-columns: repeat(var(--bvisr-cols, 3), minmax(0, 1fr));
	gap: var(--bvisr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
}

.bvisr-updates.bvisr-updates .bvisr-update {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
	background: none;
}

.bvisr-updates.bvisr-updates .bvisr-update__inner {
	display: flex;
	width: 100%;
}

.bvisr-updates--compact.bvisr-updates .bvisr-update__inner {
	flex-direction: row;
}

.bvisr-updates--card.bvisr-updates .bvisr-update__inner {
	flex-direction: column;
}

.bvisr-updates.bvisr-updates .bvisr-update__body {
	display: flex;
	flex-direction: column;
}

.bvisr-updates.bvisr-updates .bvisr-update::before {
	content: none;
}

/* Links: builders set colour, underline and hover treatments. */
.bvisr-updates.bvisr-updates a.bvisr-update__inner,
.bvisr-updates.bvisr-updates a.bvisr-update__inner:hover,
.bvisr-updates.bvisr-updates a.bvisr-update__inner:focus {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------- Typography */



.bvisr-updates.bvisr-updates .bvisr-update__meta {
	margin: 0 0 0.6rem;
	padding: 0;
	line-height: 1;
}

.bvisr-updates.bvisr-updates .bvisr-update__badge {
	color: var(--bvisr-accent);
	font-family: var(--bvisr-badge-ff, var(--bvisr-font));
	font-size: var(--bvisr-badge-fs, 0.688rem);
	font-weight: var(--bvisr-badge-fw, 700);
	line-height: var(--bvisr-badge-lh, 1.4);
	letter-spacing: var(--bvisr-badge-ls, 0.06em);
	text-transform: var(--bvisr-badge-tt, uppercase);
}

/* After the base badge rule, so the modifier still wins on equal weight. */
.bvisr-updates.bvisr-updates .bvisr-update__badge--new {
	color: color-mix(in srgb, var(--bvisr-accent-alt) 78%, #000000);
}

.bvisr-updates.bvisr-updates .bvisr-update__date {
	color: var(--bvisr-muted);
	font-family: var(--bvisr-date-ff, var(--bvisr-font));
	font-size: var(--bvisr-date-fs, 0.813rem);
	font-weight: var(--bvisr-date-fw, 500);
	line-height: var(--bvisr-date-lh, 1.4);
	letter-spacing: var(--bvisr-date-ls, 0.01em);
	text-transform: var(--bvisr-date-tt, none);
}

.bvisr-updates.bvisr-updates .bvisr-update__type {
	margin: 0 0 0 auto;
	padding: 0.3em 0.55em;
	color: var(--bvisr-muted);
	font-family: var(--bvisr-eyebrow-ff, var(--bvisr-font));
	font-size: var(--bvisr-eyebrow-fs, 0.625rem);
	font-weight: var(--bvisr-eyebrow-fw, 600);
	line-height: var(--bvisr-eyebrow-lh, 1.4);
	letter-spacing: var(--bvisr-eyebrow-ls, 0.08em);
	text-transform: var(--bvisr-eyebrow-tt, uppercase);
}

.bvisr-updates.bvisr-updates .bvisr-update__title {
	color: var(--bvisr-text);
	font-family: var(--bvisr-card-title-ff, var(--bvisr-font));
	font-size: var(--bvisr-card-title-fs, 1rem);
	font-weight: var(--bvisr-card-title-fw, 500);
	line-height: var(--bvisr-card-title-lh, 1.3);
	letter-spacing: var(--bvisr-card-title-ls, normal);
	text-transform: var(--bvisr-card-title-tt, none);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bvisr-updates.bvisr-updates .bvisr-update__desc {
	color: var(--bvisr-muted);
	font-family: var(--bvisr-desc-ff, var(--bvisr-font));
	font-size: var(--bvisr-desc-fs, 0.875rem);
	font-weight: var(--bvisr-desc-fw, 400);
	line-height: var(--bvisr-desc-lh, 1.5);
	letter-spacing: var(--bvisr-desc-ls, normal);
	text-transform: var(--bvisr-desc-tt, none);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bvisr-updates--compact.bvisr-updates .bvisr-update__desc {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.bvisr-updates.bvisr-updates .bvisr-update__more {
	color: var(--bvisr-link);
	font-family: var(--bvisr-more-ff, var(--bvisr-font));
	font-size: var(--bvisr-more-fs, 0.875rem);
	font-weight: var(--bvisr-more-fw, 500);
	line-height: var(--bvisr-more-lh, 1.4);
	letter-spacing: var(--bvisr-more-ls, normal);
	text-transform: var(--bvisr-more-tt, none);
}

/* Re-raised state rules: the guard above outranks the originals. */
.bvisr-updates.bvisr-updates a.bvisr-update__inner:hover .bvisr-update__title {
	color: var(--bvisr-link);
}

/* Layout-specific margins, re-raised for the same reason. */
.bvisr-updates--compact.bvisr-updates .bvisr-update__title {
	margin: 0 0 0.28rem;
}

.bvisr-updates--compact.bvisr-updates .bvisr-update__desc {
	margin: 0;
}

.bvisr-updates--card.bvisr-updates .bvisr-update__title {
	margin: 0 0 0.5rem;
}

.bvisr-updates--card.bvisr-updates .bvisr-update__desc {
	margin: 0 0 1rem;
}

/* The guard above re-raises font-size and line-height on the "read more"
   link, which would undo the compact layout's arrow-only treatment (it
   collapses the wording with font-size: 0). Re-raised here, after the
   guard, so the compact rule wins again. */
.bvisr-updates--compact.bvisr-updates .bvisr-update__more {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	margin: 0;
	gap: 0;
	font-size: 0;
	line-height: 0;
}