/* Viewhill Farm child theme styles. Sections are added by later tasks. */

/* ---------- Hero banner (Weebly-style framed header image) ---------- */
.vhf-hero {
	background: #f6f6f6;
	border-top: 1px solid #d4d4d4;
	border-bottom: 1px solid #d4d4d4;
	padding: 20px 0;
}

.vhf-hero__frame {
	width: fit-content; /* shrink to a small image, cap at the 888px originals */
	max-width: 900px; /* 888px image plus 6px border each side */
	margin: 0 auto;
	border: 6px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	background: #fff;
	line-height: 0;
}

.vhf-hero--landing .vhf-hero__frame {
	max-width: 484px; /* 472px image plus borders */
	margin: 0;
}

.vhf-hero__image {
	display: block;
	/* Never upscale: a small source (the 320px Stallion and Ladies header)
	   shows at its real size, as on the live site, instead of going blurry. */
	width: auto;
	max-width: 100%;
	height: auto;
}

.vhf-hero__title {
	margin: 16px 0 0;
	color: #90cbf5; /* matches the live Weebly site's headline colour */
	font-size: 2rem;
	line-height: 1.2;
}

.vhf-hero--banner .vhf-hero__title {
	text-align: center;
}

/* Page title at the top of the content on standard pages (banner layout). */
.vhf-page-title {
	margin: 0 0 20px;
	color: #90cbf5;
	font-size: 2rem;
	line-height: 1.2;
}

/* Landing layout: image left, text panel right, as on the Weebly landing pages. */
.vhf-hero--landing .vhf-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 484px) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

.vhf-hero--landing .vhf-hero__title {
	margin-top: 0;
}

.vhf-hero__subtitle {
	margin: 16px 0;
	color: #545454;
	font-size: 1.1rem;
	line-height: 1.5;
}

.vhf-hero__button {
	display: inline-block;
}

@media (max-width: 768px) {
	.vhf-hero {
		padding: 12px 0;
	}

	.vhf-hero--landing .vhf-hero__inner {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.vhf-hero__title {
		font-size: 1.5rem;
	}
}

/* ---------- Brand ---------- */
.vhf-brand {
	max-width: 100%;
	margin: 0 auto 24px;
}

.vhf-brand svg {
	display: block;
	width: 100%;
	height: auto;
}

.site-logo img,
.custom-logo {
	max-height: 60px;
	width: auto;
}

/* ---------- Content ---------- */
.single-page-container,
.single-post-container {
	padding-top: 32px;
}

.entry-content .alignleft { margin: 0 24px 16px 0; }
.entry-content .alignright { margin: 0 0 16px 24px; }

.wp-block-gallery .wp-block-image img { border-radius: 4px; }

.wp-element-caption {
	font-size: 0.85rem;
	color: #6c757d;
}

/* Primo List: image beside text, generous row spacing */
.primo-list--list .primo-list__tile { margin-bottom: 32px; }

/* Blog index cards */
.blog .nv-index-posts .nv-post-thumbnail-wrap img { object-fit: cover; }

/* Leaflet map */
.leaflet-container { border-radius: 4px; }
/* The plugin's tile fade-in (opacity 0 -> 1 on load) reads as a blank map for
   an instant on first paint; skip the animation so tiles are visible as soon
   as they arrive. */
.leaflet-fade-anim .leaflet-tile { transition: none; }

@media (max-width: 768px) {
	/* Floating an aligned image next to a paragraph on a 390px screen leaves
	   only a sliver of width for the text (one or two words per line, seen
	   on the Widgey the Wonder Pony post). Stack instead of wrapping. */
	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		margin: 0 0 16px;
	}

	/* Galleries: no override here on purpose. Gutenberg's own gallery CSS
	   (wp-block-gallery-inline-css) already collapses any columns-N gallery
	   to two equal-width tiles below 600px, using a same-specificity
	   ":not(#individual-image)" selector on every figure. A previous version
	   of this rule set the gallery to `display: grid` and the figures to
	   `width: auto`, meaning core's unconditional `width: calc(50% - gap/2)`
	   rule (still equal or higher specificity, so it still won) resolved
	   against the grid *track* instead of the gallery's full width, so each
	   tile rendered at roughly a quarter of the gallery width instead of
	   half. Leaving the gallery in its native flex layout lets that
	   percentage resolve against the right box, giving two even ~176px
	   columns on a 390px screen (checked on the 14-image Palmers Sissy FM
	   HSH gallery and the 3-image For Sale gallery). A gallery with an odd
	   image count fills its last, unpaired tile to the full row width
	   (core's flex-grow), which reads fine rather than broken. */
}

/* ---------- Footer ---------- */
/* Neve's bottom footer row defaults to the palette's dark background. Match the
   hero band instead: light grey, grey text, mid blue links, one centred line. */
.hfg_footer .footer-bottom {
	--bgcolor: #f6f6f6;
	--color: #545454;
	--rowbcolor: #d4d4d4;
	border-top: 1px solid #d4d4d4;
	margin-top: 48px;
	/* Tall enough that Neve's fixed scroll-to-top button (about 32px, 30px from
	   the bottom) sits inside the band rather than over the page copy. */
	padding: 30px 0;
}

.hfg_footer .footer-bottom-inner .row {
	grid-template-columns: 1fr;
}

.hfg_footer .footer-bottom .builder-item.cr {
	overflow-wrap: anywhere;
}

.hfg_footer .footer-bottom a {
	color: #6ca9d5;
}

@media (min-width: 769px) {
	.hfg_footer .footer-bottom .builder-item.cr {
		white-space: nowrap;
	}
}

/* ---------- Primo List rows: whole photo, no square crop ---------- */
/* The plugin's list layout crops each image into a 220px square. Show the
   complete photo at its own proportions instead, top-aligned beside the text.
   The plugin prints its stylesheet after ours (it enqueues on render), so
   these selectors carry one extra class to win on specificity. */
.primo-list--list .primo-list__tile--list .primo-list__logo {
	aspect-ratio: auto;
	width: 300px;
	height: auto;
	align-self: flex-start;
	overflow: visible;
}

.primo-list--list .primo-list__tile--list .primo-list__zoom,
.primo-list--list .primo-list__tile--list .primo-list__logo > a {
	display: block;
	height: auto;
}

.primo-list--list .primo-list__tile--list img.primo-list__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
}

/* ---------- Gallery captions below the image ---------- */
/* Core overlays gallery captions on the photo in white over a dark gradient;
   the pedigree captions on the Stallion page are several lines long, so show
   them under the image in grey instead. Core's is-cropped rule gives the image
   a zero flex basis and 100% height, which collapses to nothing once the
   caption is in flow, so captioned images get a fixed 4:3 frame. The selectors
   carry .is-cropped to outrank core's. */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption.wp-element-caption {
	position: static;
	margin: 8px 0 0;
	padding: 0;
	background: none;
	color: #545454;
	font-size: 0.85rem;
	line-height: 1.4;
	text-align: left;
	text-shadow: none;
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:has(figcaption) {
	justify-content: flex-start;
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:has(figcaption) img {
	/* !important: core sets flex and height on the same element from a later
	   sheet and the lightbox wrapper; measured live, those two kept winning. */
	flex: 0 0 auto !important;
	width: 100%;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}