/*
Statics Blog — theme-specific CSS.
Only covers components that don't already exist in styles.css / design-system.css
(breadcrumbs, pagination, post layout, author card, searchable select, newsletter).
Everything else (cards, buttons, forms, hero, containers, grid) is inherited
from the shared design system for pixel-consistency with the main site.
*/

/* ---------- Page hero centering ----------
   The shared .page-hero h1/.lede rules (styles.css) hardcode text-align:left
   for the page heroes that use a left/right split layout elsewhere on the
   main site. category.php/tag.php/author.php/page.php/archive.php/search.php
   all wrap their hero content in <div class="container center"> instead, so
   that left-align (more specific than .center's inherited text-align) needs
   an explicit override here to actually center. */
.page-hero .center h1,
.page-hero .center .lede,
.page-hero .center .author-hero-role {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* Author bio (author.php), category/tag descriptions - all free-text fields
   an editor can fill with any amount of copy, unlike the rest of this hero.
   Clamp so a long/unedited one (e.g. a placeholder bio never trimmed down)
   can't turn the hero into several mobile screens of text before the actual
   page content (stats, filters, posts) appears. */
.page-hero .center .lede {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

/* ---------- Category hero image (inc/category-hero.php) ---------- */
.page-hero.has-image {
	background-size: cover;
	background-position: center;
}
.page-hero.has-image .eyebrow {
	color: #f87171;
	background: rgba(220, 38, 38, 0.15);
	border: 1px solid rgba(220, 38, 38, 0.28);
}
.page-hero.has-image h1,
.page-hero.has-image .lede {
	color: #fff;
}

/* ---------- Blog landing hero (index.php has no preview-cards column, so
   the 2-col .blog-hero-grid layout leaves the copy block sitting in the
   1fr column - shifted left of true center. Collapse it to one column,
   centered, when there's nothing to sit next to it.) ---------- */
.blog-hero-grid.blog-hero-grid--solo {
	grid-template-columns: 1fr;
}

/* ---------- Blog landing hero — shorter section (index.php has no eyebrow/
   stats/actions rows anymore, so it doesn't need the same vertical padding
   as the static site's .blog-hero which sits next to a tall preview-cards
   column - kept short here so the post grid peeks into view on load). ---------- */
.blog-hero.blog-hero--compact {
	padding: clamp(28px, 4vw, 44px) 0 clamp(24px, 3vw, 32px);
}
.blog-hero--compact .blog-hero-copy {
	gap: 14px;
}

/* The title wraps at a manual <br> ("...that" / "actually move the needle.")
   for a deliberate 2-line title. .blog-hero-copy is a centered flex column,
   so without an explicit width the h1 only sizes to fit its content - and
   the shared h1 { text-wrap: balance } rule (design-system.css) then
   re-wraps each half again to "balance" line lengths, breaking the layout
   into 3+ lines. Giving it real width plus normal wrapping makes the
   manual break the only one that fires on any but the narrowest screens. */
.blog-hero--compact .blog-hero-copy h1 {
	width: 100%;
	max-width: 780px;
	text-wrap: normal;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	background: var(--white);
}
.breadcrumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.82rem;
	color: var(--muted);
}
.breadcrumbs-list li { display: flex; align-items: center; gap: 8px; }
.breadcrumbs-list a { color: var(--muted); text-decoration: none; }
.breadcrumbs-list a:hover { color: var(--red); }
.breadcrumbs-list i { font-size: 0.65rem; opacity: 0.6; }
.breadcrumbs-list span[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Pagination ---------- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}
.pagination-item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: var(--radius-sm, 6px);
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink);
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.pagination-item .page-numbers:hover { border-color: var(--red); color: var(--red); }
.pagination-item .page-numbers.current { background: var(--red); border-color: var(--red); color: var(--white); }
.pagination-item .page-numbers.dots { border: none; background: none; }

/* ---------- Global blog card ----------
   Full-bleed top image, a category + read-time row, title/excerpt, and an
   author byline (avatar, name, role) with the publish date. This is the
   one card design used everywhere template-parts/content-card.php renders
   a post: the archive listing, search results, and the single-post
   related-articles carousel. */
.service-card.has-media {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 !important;
}
.service-card.has-media .card-media {
	aspect-ratio: 350 / 210;
}
@media (max-width: 760px) {
	.service-card.has-media .card-media {
		aspect-ratio: 350 / 210 !important;
	}
}
.card-ribbon {
	position: absolute;
	top: 14px;
	left: -42px;
	width: 150px;
	padding: 5px 0;
	background: var(--red);
	color: var(--white);
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: center;
	transform: rotate(-45deg);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	z-index: 1;
}
.card-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px 0;
}
.card-category {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--muted);
}
.card-read-time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.78rem;
	color: var(--muted);
	white-space: nowrap;
}
.service-card.has-media h3 {
	font-size: 20px !important;
	line-height: 1.3 !important;
	margin: 10px 0 6px;
	padding: 0 14px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.service-card.has-media > p {
	font-size: 14px !important;
	color: var(--muted);
	line-height: 1.55 !important;
	padding: 0 14px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding: 12px 14px;
	border-top: 1px solid var(--line);
	white-space: normal;
	overflow: visible;
}
.card-meta-author {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.card-meta-avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.card-meta-author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	overflow: hidden;
}
.card-meta-author-name {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.card-meta-author-role {
	font-size: 0.76rem;
	color: var(--muted);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.card-meta-date {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 0.76rem;
	color: var(--muted);
	white-space: nowrap;
}
.card-meta-date i { font-size: 0.9rem; }

/* ---------- Search page (still used by search.php results template) ---------- */
.search-page-form { display: flex; gap: 8px; }
.search-page-form input[type="search"] {
	flex: 1;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm, 6px);
	padding: 10px 14px;
}
.search-page-form button {
	border: none;
	background: var(--ink);
	color: var(--white);
	border-radius: var(--radius-sm, 6px);
	padding: 0 16px;
	cursor: pointer;
}

/* ---------- Searchable country dropdown ---------- */
.searchable-select-wrap { position: relative; }
.searchable-select-filter {
	margin-bottom: 6px;
}

/* Honeypot field — hidden from real visitors, left for bots to fill in. */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none;
}

/* ---------- Single post hero ----------
   Always a dark hero (matches .blog-hero on /blog.php) so the title reads the
   same whether or not the post has a featured image; when it does, single.php
   sets background-image inline (dark gradient + the image) and adds .has-media. */
.post-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(340px, 46vw, 460px);
	padding: 32px 0 40px;
	text-align: left;
	background: linear-gradient(180deg, #14141f, #0c0c14);
	overflow: hidden;
}
.post-hero.has-media {
	background-size: cover;
	background-position: center;
}
.post-hero-inner .post-hero-meta {
	max-width: 760px;
}
.post-hero .badge {
	color: #f87171;
	background: rgba(220, 38, 38, 0.15);
	border: 1px solid rgba(220, 38, 38, 0.28);
}
.post-hero h1 {
	/* The global base h1 rule sets margin:18px auto 20px (centering the box)
	   and max-width:980px - text-align:left alone only lines text up inside
	   that still-centered box, so margin-left/right need an explicit reset.
	   font-size/line-height also need !important: the shared h1 rule
	   (design-system.css) sets both !important, and at its default size the
	   title ran to 3 lines and dominated the hero. A dedicated size plus
	   nowrap+ellipsis keeps it to a single line so the hero reads as a
	   compact header instead of a full-bleed title card. */
	max-width: 100%;
	margin: 0;
	color: #fff;
	text-align: left;
	font-size: clamp(1.6rem, 2.4vw, 2.3rem) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.post-hero-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9rem;
	margin-top: 16px;
}
.post-hero-author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.post-hero-author img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.post-body-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 60px;
	gap: 40px;
	align-items: start;
}
.post-content { font-size: 1.05rem; line-height: 1.75; color: var(--ink-2, #202026); }
.post-content h2 { margin-top: 2em; }
.post-content h3 { margin-top: 1.6em; }
.post-content img { border-radius: var(--radius-sm, 8px); height: auto; }
.post-content blockquote {
	border-left: 3px solid var(--red);
	padding-left: 20px;
	color: var(--muted);
	font-style: italic;
}
.post-content a { color: var(--red); text-decoration: underline; }

.post-share {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.post-share-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); writing-mode: vertical-rl; }
.post-share a {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--line);
	color: var(--ink);
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.post-share a:hover { background: var(--red); border-color: var(--red); color: var(--white); }

/* ---------- Author box (below post content) ---------- */
.post-author-box {
	display: flex;
	gap: 20px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}
.post-author-photo {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	border-radius: var(--radius-sm, 8px);
	object-fit: cover;
}
.post-author-info { min-width: 0; }
.post-author-label {
	display: block;
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin-bottom: 4px;
}
.post-author-name {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--ink);
	text-decoration: none;
}
.post-author-name:hover { color: var(--red); }
.post-author-role { color: var(--muted); font-size: 0.9rem; margin: 4px 0 10px; }
.post-author-bio { color: var(--ink); font-size: 0.95rem; line-height: 1.6; margin: 0 0 14px; }
.post-author-box .social-row:last-child { margin-bottom: 0; }
.post-author-box .social-row a {
	border-color: var(--line);
	background: var(--soft, #fff6f4);
	color: var(--ink);
}
.post-author-box .social-row a:hover { background: var(--red); border-color: var(--red); color: var(--white); }

@media (max-width: 600px) {
	.post-author-box { flex-direction: column; align-items: flex-start; padding: 20px; }
}

/* ---------- Related articles carousel ----------
   The global blog card (see above) shown 3-up in a horizontal scroll-snap
   track; prev/next buttons slide it by one card width, touch/trackpad
   swipe works natively via scroll-snap. */
.related-carousel {
	position: relative;
	margin-top: 40px;
}
.related-carousel-track {
	display: flex;
	align-items: stretch;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 4px 2px 8px;
}
.related-carousel-track::-webkit-scrollbar { display: none; }
.related-carousel-track > .service-card {
	flex: 0 0 calc((100% - 48px) / 3);
	scroll-snap-align: start;
}
.related-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--white);
	border: 1px solid var(--line);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
	z-index: 1;
}
.related-carousel-btn:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.related-carousel-btn.prev { left: -18px; }
.related-carousel-btn.next { right: -18px; }

@media (max-width: 900px) {
	.related-carousel-btn { display: none; }
	.related-carousel-track { margin: 0 -16px; padding: 4px 16px 8px; }
	.related-carousel-track > .service-card { flex: 0 0 calc((100% - 24px) / 2); }
}

@media (max-width: 600px) {
	.related-carousel-track > .service-card { flex: 0 0 85%; }
}

/* ---------- Prev/next post nav ---------- */
.post-nav-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.post-nav-item a {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
	font-weight: 700;
	transition: border-color 160ms ease;
}
.post-nav-item a:hover { border-color: var(--red); }
.post-nav-next a { text-align: right; }

/* ---------- Author archive hero ----------
   Plain .page-hero > .container.center layout, same as category.php/
   tag.php/archive.php/search.php - full-width section, centered content,
   no boxed/narrower card. Avatar + meta row are the only additions, sized
   to match the .lede's own 850px reading width. Deliberately its own
   avatar component (not the shared .testimonial-portrait, which carries
   slider/mobile rules meant for testimonial cards elsewhere and doesn't
   belong on a plain profile header). */
.author-hero-avatar {
	width: 96px;
	height: 96px;
	margin: 0 auto 20px;
	border-radius: var(--radius-pill);
	overflow: hidden;
	border: 3px solid var(--soft);
	box-shadow: var(--shadow-xs);
}
.author-hero-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.author-hero-role {
	color: var(--muted);
	font-weight: 600;
	margin-top: -6px;
}

.author-hero-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	max-width: 850px;
	margin: 8px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.author-hero-stat {
	color: var(--muted);
	font-size: 0.9rem;
}
.author-hero-stat strong {
	color: var(--ink);
}

.author-hero-meta-divider {
	width: 1px;
	height: 16px;
	background: var(--line);
}

.author-hero-social {
	display: flex;
	gap: 8px;
}
.author-hero-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--muted);
	font-size: 0.82rem;
	transition: border-color 160ms ease, color 160ms ease;
}
.author-hero-social a:hover {
	border-color: var(--red);
	color: var(--red);
}

/* ---------- Search page ---------- */
.search-suggestions-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; }
.no-results { text-align: center; color: var(--muted); padding: 40px 0; }

/* ---------- Archive/blog listing spacing ----------
   The filter-pills row and the card grid below it are two separate
   <section>s, each contributing its own vertical padding on top of
   .filter-pills' own margin - that stacks instead of collapsing into one
   sensible gap. !important is needed here to beat design-system.css's
   ".filter-pills { margin: ... !important }" and the mobile "normalize all
   section padding" rule, both of which otherwise win regardless of these
   selectors' specificity. */
.archive-loop-pills .filter-pills {
	margin-bottom: 0 !important;
}
.archive-loop-pills {
	padding-top: 12px !important;
	padding-bottom: 0 !important;
}

/* The .blog-hero itself also has clamp(52px,7vw,88px) bottom padding (styles.css),
   stacking on top of the pills row's own top padding above - shrink it here
   specifically so the two don't add up to a big gap. */
.blog-hero {
	padding-bottom: 32px !important;
}

/* design-system.css folds .filter-pills into the same "everything becomes a
   2-column grid" mobile rule it uses for card grids (max-width:760px) - fine
   for a grid of cards, but it stretches each category pill to a 50%-width
   cell, so "SEO" balloons to half the row and a lone trailing pill is left
   stranded alone in its own row. The category filter (author.php,
   category.php, archive-loop.php) reads better as the same wrapping pill
   row it is on desktop, just centered for the narrower screen. */
@media (max-width: 760px) {
	.filter-pills {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
	}
}
.archive-loop-grid {
	padding-top: 32px !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.post-body-grid { grid-template-columns: 1fr; }
	.post-share { flex-direction: row; position: static; }
	.post-share-label { writing-mode: horizontal-tb; }
	/* The one-line/ellipsis treatment on .post-hero h1 is a desktop-width
	   convenience (plenty of empty hero space to its right); on narrow
	   screens the title is often most of the viewport width already, so
	   forcing one line there just chops the title off. Let it wrap instead. */
	.post-hero h1 {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}
@media (max-width: 640px) {
	.post-nav-grid { grid-template-columns: 1fr; }
	.post-nav-next a { text-align: left; }
}

/* ---------- Article card grid on mobile ----------
   design-system.css turns any .grid-3 into a horizontal peek/scroll slider
   below 760px (cards at 82vw so the next card's edge shows, inviting a
   swipe) - built for testimonial/service carousels. For a blog listing
   that reads as a broken layout (sliver of the next post visible), so
   here it's put back to one full-width card per row, plain vertical
   scroll, for this grid specifically. */
@media (max-width: 760px) {
	.archive-loop-grid .grid-3.grid-3 {
		display: grid !important;
		grid-template-columns: 1fr !important;
		overflow: visible !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
		scroll-snap-type: none !important;
	}
	.archive-loop-grid .grid-3.grid-3 > * {
		flex: initial !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		scroll-snap-align: none !important;
		animation: none !important;
	}
}

/* ---------- Footer column headings + tag pills ----------
   Both the red h4 underline and the fully-rounded tag pills only exist in
   the shared design system under a ".home-page" body-class scope (the
   static site's real homepage). The blog's <body> never carries that
   class, so without this the headings render underline-less and the tags
   get the design system's plain 7px-radius fallback instead of pills. */
.home-footer h4::after {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin-top: 8px;
	background: var(--red) !important;
}
.home-footer .footer-tags a {
	border-radius: 999px !important;
}