/*
 * Scott Pool 2026 -- News & Updates (Phase 33).
 *
 * Two pieces, both scoped to their own classes so nothing else on the site
 * is affected:
 *
 *   1. .sp-news-grid -- article cards for any core Query Loop. Add the class
 *      to a Query Loop block (Advanced > Additional CSS class(es)) and its
 *      Post Template becomes the campaign card grid: 3 columns >1024px,
 *      2 columns 768-1024px, 1 column <=767px. Card order follows the
 *      block order inside the Post Template: Featured Image, Category,
 *      Title, Excerpt, Read More, Date.
 *
 *   2. .sp-article -- the Single Post template (templates/single.html):
 *      category / title / date header band, featured image, a 720px reading
 *      column, and the "Explore More News & Updates" section (.sp-news-more).
 *
 * Tokens only -- every color, size, space, and motion value comes from
 * theme.json presets or tokens.css; nothing new is introduced.
 */

/* ===================================================================
   1. Article card grid (.sp-news-grid)
   =================================================================== */

/* Two-class selector out-specifies core's generated single-class
   .wp-container-core-post-template-* grid rule, so the responsive column
   counts below win whatever Columns value is set in the editor. */
.sp-news-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--8);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-news-grid .wp-block-post {
	display: flex;
	flex-direction: column;
	/* Core's own <=600px rule (grid-template-columns: 1fr) out-specifies
	   ours, and a plain 1fr track grows to a card's min-content width -- a
	   title with non-breaking spaces pushed cards ~20px off a 375px screen.
	   min-width: 0 keeps the track at the container width either way. */
	min-width: 0;
	margin: 0;
	background: var(--surface-card);
	border: var(--border-width-hairline) solid var(--border-subtle);
	border-top: var(--border-width-accent) solid var(--wp--preset--color--primary-navy);
	transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.sp-news-grid .wp-block-post:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(var(--hover-lift));
}

/* Core's flow-layout block gap adds margin-block-start to every child after
   the first; spacing is set explicitly below instead (same fix as .sp-grid
   in base.css). */
.sp-news-grid .wp-block-post > * {
	margin-block: 0;
}
.sp-news-grid .wp-block-post > :not(.wp-block-post-featured-image) {
	padding-inline: var(--wp--preset--spacing--6);
}
.sp-news-grid .wp-block-post > :not(.wp-block-post-featured-image):first-child {
	/* Post with no featured image: keep the text off the top rule. */
	padding-top: var(--wp--preset--spacing--6);
}

/* Featured image -- every card (News & Updates grid and the Single Post
   "Explore More" cards) shows the whole graphic, full card width, never
   cropped (article graphics carry designed text). A uniform 1200:630
   frame (the campaign graphic size) keeps every card's text on the same
   line; a graphic of another shape is shown whole inside it on navy rather
   than cropped. The !important rules beat the inline aspect-ratio /
   object-fit core prints when a Featured Image block still has an Aspect
   Ratio set (the older 3:2 pattern and single.html), so those are fixed
   too. No hover zoom -- it would clip the graphic's edges. */
.sp-news-grid .wp-block-post-featured-image {
	overflow: hidden;
	aspect-ratio: 1200 / 630;
	background: var(--wp--preset--color--primary-navy);
}
.sp-news-grid .wp-block-post-featured-image a,
.sp-news-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
}
.sp-news-grid .wp-block-post-featured-image img {
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
}

/* Category -- campaign eyebrow (matches .sp-eyebrow). */
.sp-news-grid .wp-block-post-terms {
	padding-top: var(--wp--preset--spacing--6);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--campaign-red);
}
.sp-news-grid .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}
/* The parent theme's global styles set white-space: nowrap on Post Terms
   links, so a long category ("Jacksonville Property Insights") ran past
   the card edge wherever cards are narrower than at full desktop width
   (phones, tablets, 1025-1199px). Let category names wrap there. At 1200px
   and up the longest current name still fits inside the card, and wrapping
   it would push that card's title out of line with its row. */
@media (max-width: 1199px) {
	.sp-news-grid .wp-block-post-terms a {
		white-space: normal;
	}
}
.sp-article__category a {
	white-space: normal;
}
.sp-news-grid .wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* Title -- same visual size whether the page uses H2 or H3 cards. */
.sp-news-grid .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--3) !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 800;
	line-height: 1.2;
	color: var(--text-heading);
	overflow-wrap: break-word;
}
.sp-news-grid .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.sp-news-grid .wp-block-post-title a:hover {
	color: var(--wp--preset--color--campaign-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.sp-news-grid .wp-block-post-excerpt {
	margin-top: var(--wp--preset--spacing--3) !important;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	color: var(--text-body);
}
.sp-news-grid .wp-block-post-excerpt__excerpt {
	margin: 0;
}
/* Exactly one Read More per card (the Read More block below). Post
   Excerpt's own optional "more" link -- the 'Add "read more" link text'
   placeholder in the editor -- prints nothing while empty; this keeps it
   hidden even if text is ever typed into it. */
.sp-news-grid:not(.sp-news-more *) .wp-block-post-excerpt__more-text,
.sp-news-grid:not(.sp-news-more *) .wp-block-post-excerpt__more-link {
	display: none;
}

/* Read More -- same treatment as the is-style-sp-text-link button. Core
   appends a visually hidden ": <post title>" so each link is distinct for
   screen readers. */
.sp-news-grid .wp-block-read-more {
	align-self: flex-start;
	/* margin-top:auto pins Read More + Date to the card bottom, so both
	   line up across a row whatever the title/excerpt length. */
	margin: auto var(--wp--preset--spacing--6) 0 !important;
	padding: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--2) !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	color: var(--wp--preset--color--primary-navy);
	text-decoration: none;
	border-bottom: var(--border-width-rule) solid var(--wp--preset--color--divider);
	transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.sp-news-grid .wp-block-read-more::after {
	content: " \2192";
}
.sp-news-grid .wp-block-read-more:hover {
	color: var(--wp--preset--color--campaign-red);
	border-bottom-color: var(--wp--preset--color--campaign-red);
}

/* Date -- --text-body (not --text-muted) keeps small text above 4.5:1
   contrast. */
.sp-news-grid .wp-block-post-date {
	padding-top: var(--wp--preset--spacing--5);
	padding-bottom: var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--text-body);
}
.sp-news-grid .wp-block-post-date::before {
	content: "";
	display: block;
	height: var(--border-width-hairline);
	margin-bottom: var(--wp--preset--spacing--4);
	background: var(--border-subtle);
}

/* Pagination */
.sp-news-grid .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--12);
	gap: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}
.sp-news-grid .wp-block-query-pagination a,
.sp-news-grid .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--touch-min);
	min-height: var(--touch-min);
	padding: 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--primary-navy);
	text-decoration: none;
	border: var(--border-width-hairline) solid var(--border-default);
}
.sp-news-grid .wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--primary-navy);
}
.sp-news-grid .wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary-navy);
	border-color: var(--wp--preset--color--primary-navy);
	color: var(--wp--preset--color--white);
}

@media (max-width: 1024px) {
	.sp-news-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.sp-news-grid .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--6);
	}
	.sp-news-grid .wp-block-post > :not(.wp-block-post-featured-image) {
		padding-inline: var(--wp--preset--spacing--5);
	}
	.sp-news-grid .wp-block-read-more {
		margin-inline: var(--wp--preset--spacing--5) !important;
	}
}

/* ===================================================================
   2. Single Post (.sp-article -- templates/single.html)
   =================================================================== */

/* Header band reuses .sp-page-hero; only the article-specific parts are
   set here. */
.sp-article__header .sp-container > * {
	margin-block: 0;
}
.sp-article__category a {
	color: inherit;
	text-decoration: none;
}
.sp-article__category a:hover {
	text-decoration: underline;
}
/* Article titles run longer than page titles -- one step below the 64px
   page H1, scaling down to fit phones. */
.sp-article__title {
	font-size: clamp(2.125rem, 1.4rem + 2.2vw, var(--wp--preset--font-size--h-2));
	line-height: 1.12;
	overflow-wrap: break-word;
}
.sp-article__date {
	margin-top: var(--wp--preset--spacing--5) !important;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--text-body);
}

.sp-article__main {
	padding-top: var(--wp--preset--spacing--12);
}
.sp-article__main > * {
	margin-block: 0;
}
/* Featured image: a little wider than the reading column, natural ratio
   (no crop) on the article itself. */
.sp-article__media {
	max-width: 960px;
}
/* Article text column (and the category/title/date header above it) share
   the featured image's 960px box, so all three line up on one left and
   right edge. Overrides .sp-container--prose's 720px on single posts
   only; the container's own gutter padding is the inner breathing room. */
.sp-article__header .sp-container--prose,
.sp-article__main .sp-container--prose {
	max-width: 960px;
}
.sp-article__main > .sp-article__media {
	margin-bottom: var(--wp--preset--spacing--12);
}
.sp-article__image {
	margin: 0;
}
.sp-article__image img {
	display: block;
	width: 100%;
	height: auto;
}
.sp-article__media:not(:has(img)) {
	display: none;
}

/* Reading column: 720px (.sp-container--prose) at 18px = ~65-70
   characters per line. */
.sp-article__content {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: var(--text-body);
	/* Text pasted with non-breaking spaces (or a long bare URL) can't wrap
	   and widened the whole page on phones; break it at the column edge
	   instead of overflowing. */
	overflow-wrap: break-word;
}
.sp-article__content > * {
	margin-block: 0 var(--wp--preset--spacing--6);
}
.sp-article__content > :last-child {
	margin-bottom: 0;
}
.sp-article__content h2 {
	margin-top: var(--wp--preset--spacing--12);
	margin-bottom: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.2;
}
.sp-article__content h3 {
	margin-top: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.25;
}
.sp-article__content h4 {
	margin-top: var(--wp--preset--spacing--8);
	margin-bottom: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--body-lg);
}
.sp-article__content > :first-child {
	margin-top: 0;
}
.sp-article__content strong {
	font-weight: 700; /* see .sp-card strong in content.css */
}
.sp-article__content ul,
.sp-article__content ol {
	padding-left: 1.4em;
}
.sp-article__content li + li {
	margin-top: var(--wp--preset--spacing--2);
}
.sp-article__content blockquote {
	/* Twenty Twenty-Five's quote style adds large padding all round;
	   reset to a simple accent-ruled quote. */
	margin-inline: 0;
	padding: var(--wp--preset--spacing--2) 0 var(--wp--preset--spacing--2) var(--wp--preset--spacing--6) !important;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.55;
	border-left: var(--border-width-accent) solid var(--wp--preset--color--campaign-red);
	color: var(--text-heading);
}
.sp-article__content blockquote p {
	font-size: inherit;
	line-height: inherit;
}
.sp-article__content img {
	height: auto;
}
.sp-article__content figcaption {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--text-body);
}

/* Explore More News & Updates */
.sp-news-more .sp-container > * {
	margin-block: 0;
}
.sp-news-more__heading {
	margin-bottom: var(--wp--preset--spacing--8) !important;
	font-size: var(--wp--preset--font-size--h-3);
}
.sp-news-more__all {
	margin-top: var(--wp--preset--spacing--8) !important;
}
/* Nothing else published yet -> hide the whole section rather than show an
   empty heading. */
.sp-news-more:not(:has(.wp-block-post)) {
	display: none;
}

@media (max-width: 767px) {
	.sp-article__main {
		padding-top: var(--wp--preset--spacing--8);
	}
	.sp-article__main > .sp-article__media {
		margin-bottom: var(--wp--preset--spacing--8);
	}
	.sp-article__content {
		font-size: var(--wp--preset--font-size--body);
		line-height: 1.65;
	}
	.sp-article__content h2 {
		margin-top: var(--wp--preset--spacing--10);
		font-size: 26px;
	}
	.sp-article__content h3 {
		font-size: 21px;
	}
	.sp-news-more__heading {
		font-size: 28px;
	}
}