/*
 * dbi services · Neve Child Theme
 * assets/css/front-page.css — homepage-only styles.
 *
 * Loaded only when is_front_page() (see inc/enqueue.php), after
 * dbi-blog.css which provides the .dbi-scope design tokens.
 * Sections: hero, post grid + cards, CTA interrupt, pagination,
 * scroll-reveal.
 *
 * !important is used only where core block-library styles must be
 * overridden (e.g. converting ul.wp-block-post-template from flex
 * to grid) or where Neve's dynamic CSS carries higher specificity.
 *
 * @package dbi-neve-child
 */

/* Remove content max-width constraints on the full-bleed sections */
.dbi-hero.wp-block-group,
.dbi-grid-section.wp-block-group { max-width: none !important; }


/* ════════════════════════════════
   HERO
   ════════════════════════════════ */
/*
 * Kept compact on purpose: the first viewport must show the filter bar
 * and the top of the post grid ("reader value first, brand second" —
 * .agent/docs/design-principles.md §1).
 */
.dbi-hero {
	background: var( --dark ) !important;
	padding: clamp( 48px, 6vw, 72px ) clamp( 24px, 5vw, 80px )
	         clamp( 44px, 5vw, 60px ) !important;
	position: relative;
	overflow: hidden;
}

/* Subtle teal glow */
.dbi-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient( ellipse at 72% 45%, rgba( 0, 170, 160, .10 ) 0%, transparent 55% ),
		radial-gradient( ellipse at 18% 85%, rgba( 0, 170, 160, .06 ) 0%, transparent 50% );
	pointer-events: none;
	z-index: 0;
}

.dbi-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1160px;
	margin: 0 auto;
}

.dbi-hero-h1 {
	font-family: var( --f-display );
	font-size: clamp( 2.2rem, 4.5vw, 3.8rem );
	font-weight: 400;
	color: var( --text-inverse );
	line-height: 1.08;
	letter-spacing: -.015em;
	margin: 0 0 16px;
	text-shadow: 0 2px 24px rgba( 0, 0, 0, .30 );
}
.dbi-hero-h1 em {
	font-style: italic;
	color: var( --teal );
}

.dbi-hero-sub {
	font-family: var( --f-body );
	font-size: clamp( 1rem, 2vw, 1.2rem );
	color: rgba( 240, 239, 235, .80 );
	font-weight: 300;
	max-width: 50ch;
	line-height: 1.72;
	margin: 0;
}

/* Proof line: the live 24-month read count (backlog #20, ADR 0015) —
   one quiet sentence, the number carries the emphasis — followed by
   an in-page link to the "Most read" module (enhancements #43). The
   number is social proof; the link turns it into a path ("what do
   they read?") without adding a block or hero height: same line on
   desktop, wraps under the sentence on narrow widths. Tertiary in
   weight on purpose — the hero's job is still the filter bar and
   the grid below. Content lives in the page (ADR 0009): the link is
   a plain <a href="#most-read"> so the editor keeps it intact. */
.dbi-hero-proof {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 22px;
	font-family: var( --f-body );
	font-size: .82rem;
	letter-spacing: .01em;
	color: rgba( 240, 239, 235, .55 );
	margin: 22px 0 0;
}
/* display: contents — the number is an element child, so as a flex item
   it would sit in its own box with the row gap on both sides; without a
   box its text joins the sentence run and keeps its inherited styles. */
.dbi-hero-proof .dbi-site-reads {
	display: contents;
	color: var( --text-inverse );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
/* The link: hairline underline at rest, teal on hover (interaction
   state, design-principles §4), a small down arrow as the "same page,
   further down" cue; ≥ 24px tall for touch. */
.dbi-hero-proof a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 0;
	color: rgba( 240, 239, 235, .78 );
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba( 240, 239, 235, .35 );
	text-underline-offset: 3px;
	white-space: nowrap;
	transition: color var( --t ) var( --ease ),
	            text-decoration-color var( --t ) var( --ease );
}
.dbi-hero-proof a::after {
	content: "";
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5v11M3.5 9l4.5 4.5L12.5 9'/%3E%3C/svg%3E" ) center / contain no-repeat;
	        mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5v11M3.5 9l4.5 4.5L12.5 9'/%3E%3C/svg%3E" ) center / contain no-repeat;
	transition: transform var( --t ) var( --ease );
}
.dbi-hero-proof a:hover {
	color: var( --teal );
	text-decoration-color: currentColor;
}
.dbi-hero-proof a:focus-visible {
	outline: 2px solid var( --teal );
	outline-offset: 3px;
	border-radius: 2px;
}
@media ( prefers-reduced-motion: no-preference ) {
	.dbi-hero-proof a:hover::after {
		transform: translateY( 2px );
	}
	/* The anchor glides instead of jumping; homepage only (this file). */
	html {
		scroll-behavior: smooth;
	}
}

@media ( max-width: 640px ) {
	.dbi-hero-h1 { font-size: 2rem; }
}


/* ════════════════════════════════
   GRID SECTION
   ════════════════════════════════ */
.dbi-grid-section {
	background: var( --bg );
	padding: 56px 24px 88px !important;
}

.dbi-grid-section > .wp-block-query {
	max-width: 1160px;
	margin: 0 auto;
}

/* The post-template <ul> becomes our CSS grid */
.dbi-grid-section ul.wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr ) !important;
	gap: 24px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	flex-wrap: initial !important; /* cancel block-library flex */
	align-items: stretch !important; /* equal rows; image-less cards fill with a longer excerpt (design-principles §4) */
}

@media ( max-width: 900px ) {
	.dbi-grid-section ul.wp-block-post-template {
		grid-template-columns: repeat( 2, 1fr ) !important;
	}
}
@media ( max-width: 560px ) {
	.dbi-grid-section ul.wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}


/* ════════════════════════════════
   POST CARD
   ════════════════════════════════ */
.dbi-grid-section li.wp-block-post {
	position: relative; /* containing block for the stretched title link (enhancements #77) */
	background: var( --bg-pure ) !important;
	border: 1px solid var( --border ) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	min-width: 0;
	transition:
		border-color var( --t ) var( --ease ),
		transform    var( --t ) var( --ease ),
		box-shadow   var( --t ) var( --ease );
}
.dbi-grid-section li.wp-block-post:hover {
	border-color: rgba( 0, 170, 160, .30 ) !important;
	transform: translateY( -3px );
	box-shadow: 0 12px 36px rgba( 0, 0, 0, .08 ), 0 4px 10px rgba( 0, 0, 0, .04 );
}

/* Featured image: optional illustration below the excerpt (text-first
   card, design-principles §4), inset in the card body with the small
   radius, never a banner. */
.dbi-grid-section .wp-block-post-featured-image {
	margin: 6px 0 6px !important;
	border-radius: 8px;
	overflow: hidden;
}
.dbi-grid-section .wp-block-post-featured-image a { display: block; overflow: hidden; }
.dbi-grid-section .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1; /* flatter than 16:9 keeps rows compact (design-principles §4) */
	object-fit: cover;
	transition: transform .6s var( --ease );
}
.dbi-grid-section li.wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale( 1.03 );
}

/* Card body padding group */
.dbi-card-body {
	padding: 20px 22px 22px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	flex: 1;
}
/* Classic theme: core wraps the group in .wp-block-group__inner-container,
   so the card-body children (title, excerpt, image, byline) are that
   div's children, not .dbi-card-body's. Make the inner container the
   flex column that fills the card; otherwise the byline's
   margin-top:auto has no flex parent and never reaches the bottom.
   Flow-layout block margins are replaced by the flex gap. */
.dbi-card-body > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	min-width: 0;
}
.dbi-card-body > .wp-block-group__inner-container > :not( .dbi-author-row ) {
	margin-block: 0 !important;
}

/* Category pills */
.dbi-grid-section .wp-block-post-terms {
	font-family: var( --f-body ) !important;
	line-height: 1.4 !important;
}
.dbi-grid-section .wp-block-post-terms a {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: var( --teal-light );
	color: var( --teal-dark ) !important;
	border-radius: 999px;
	font-size: .68rem !important;
	font-weight: 700 !important;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none !important;
	margin-right: 4px;
	transition: background var( --t ), color var( --t );
}
.dbi-grid-section .wp-block-post-terms a:hover {
	background: var( --teal-dark );
	color: #fff !important;
}

/* Title — the largest text in the card: readers scan titles, not
   taxonomy, so it must outweigh the chips and the excerpt. */
.dbi-grid-section .wp-block-post-title,
.dbi-grid-section .wp-block-post-title a {
	font-family: var( --f-display ) !important;
	font-size: clamp( 1.15rem, 1.8vw, 1.35rem ) !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	color: var( --text ) !important;
	text-decoration: none !important;
	margin: 0 !important;
	transition: color var( --t );
}
.dbi-grid-section .wp-block-post-title a:hover { color: var( --teal ) !important; }

/* Whole card clickable, same mechanism as the archive cards
   (dbi-blog.css section 3, enhancements #77). */
.dbi-grid-section .wp-block-post-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.dbi-grid-section .dbi-author-row {
	position: relative;
	z-index: 2;
}

/* Excerpt */
.dbi-grid-section .wp-block-post-excerpt__excerpt {
	font-family: var( --f-body ) !important;
	font-size: .86rem !important;
	color: var( --muted ) !important;
	line-height: 1.65 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dbi-grid-section .wp-block-post-excerpt__more-link { display: none !important; }
.dbi-grid-section .wp-block-post-excerpt p { margin: 0 !important; }
/* No image: the excerpt takes the room the image band would have used
   (9 lines ≈ the 2:1 image plus margins; the block's excerptLength is
   60 words). Core's post template puts has-post-thumbnail on the li. */
.dbi-grid-section li.wp-block-post:not( .has-post-thumbnail ) .wp-block-post-excerpt__excerpt {
	-webkit-line-clamp: 9;
}

/* Author row */
.dbi-author-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 10px !important;
	padding-top: 14px !important;
	border-top: 1px solid var( --divider ) !important;
	margin-top: auto !important;
}
.dbi-author-row .wp-block-avatar { flex-shrink: 0; }
.dbi-author-row .wp-block-avatar img {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	display: block;
}
.dbi-author-meta {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	flex: 1;
	min-width: 0;
}
.dbi-author-meta .wp-block-post-author-name {
	font-family: var( --f-body ) !important;
	font-size: .775rem !important;
	font-weight: 600 !important;
	color: var( --text ) !important;
	margin: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dbi-author-meta .wp-block-post-date {
	font-family: var( --f-body ) !important;
	font-size: .70rem !important;
	color: var( --faint ) !important;
	margin: 0 !important;
}


/* CTA card rules moved to cta.css (2026-09-14) — shared with the single-post CTAs. */

/* ════════════════════════════════
   PAGINATION
   ════════════════════════════════ */
.dbi-grid-section .wp-block-query-pagination {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 56px 0 0 !important;
	font-family: var( --f-body ) !important;
}

.dbi-grid-section .wp-block-query-pagination a,
.dbi-grid-section .wp-block-query-pagination-previous a,
.dbi-grid-section .wp-block-query-pagination-next a,
.dbi-grid-section .wp-block-query-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 999px !important;
	border: 1px solid var( --border ) !important;
	font-size: .875rem !important;
	font-weight: 500 !important;
	color: var( --muted ) !important;
	text-decoration: none !important;
	background: var( --bg-pure ) !important;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease !important;
}
.dbi-grid-section .wp-block-query-pagination a:hover,
.dbi-grid-section .wp-block-query-pagination-previous a:hover,
.dbi-grid-section .wp-block-query-pagination-next a:hover {
	background: var( --teal-dark ) !important;
	color: #fff !important;
	border-color: var( --teal-dark ) !important;
}
.dbi-grid-section .wp-block-query-pagination .current,
.dbi-grid-section .page-numbers.current {
	background: var( --teal-dark ) !important;
	color: #fff !important;
	border-color: var( --teal-dark ) !important;
}

/* Empty state */
.dbi-grid-section .wp-block-query-no-results {
	text-align: center;
	padding: 80px 24px;
	font-family: var( --f-body );
	color: var( --muted );
	font-size: 1rem;
}


/* ════════════════════════════════
   SCROLL REVEAL
   Elements with .dbi-reveal fade in when they
   enter the viewport (assets/js/front-page.js).
   ════════════════════════════════ */
@media ( prefers-reduced-motion: no-preference ) {
	.dbi-reveal {
		opacity: 0;
		transform: translateY( 16px );
		transition: opacity .55s var( --ease ), transform .55s var( --ease );
	}
	.dbi-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* ════════════════════════════════════════════════
   Contact modal (homepage) — container styling on
   top of Otter's popup CSS. Markup is seeded (see
   patterns/contact-modal.php); the wrapper carries
   .dbi-scope so the tokens below resolve.
   ════════════════════════════════════════════════ */
#contact-modal-block {
	/* Otter's panel sizes via --width (its --min/--max-width props are
	   not consumed by the content element — measured, not assumed). */
	--width: min( 760px, 94vw );
}

#contact-modal-block .otter-popup__modal_content {
	border: 1px solid var( --border );
	border-radius: 16px;
	padding: 40px;
}

/* Otter's modal body is the scroll container (overflow: auto); a focused
   field's 3px ring drawn as box-shadow is clipped at its edges. 4px of
   inner padding, taken back with the margin, keeps the ring inside the
   scroll box without moving the content (enhancements #69). */
#contact-modal-block .otter-popup__modal_body {
	padding: 4px;
	margin: -4px;
}

#contact-modal-block .otter-popup__modal_body h2 {
	font-family: var( --f-display );
	font-weight: 400;
	margin: 0 0 4px;
}