/**
 * Homepage sections. Loaded only when a homepage section renders
 * (inc/homepage.php). Layout follows docs/truth-that-frees-homepage.png.
 */

/* Sections sit on cream with a compact rhythm; each pads itself. The
   doubled class beats WordPress's block-gap margin (same specificity, printed
   later), which otherwise adds 24px above every section. */
.ttf-front__content.ttf-front__content > * {
	margin-block: 0;
}

.ttf-home-section,
.ttf-curated,
.ttf-topic-cards,
.ttf-home-split {
	padding-block: var(--wp--preset--spacing--30);
}

.ttf-home-split .ttf-home-section:not(.ttf-verse),
.ttf-home-split .ttf-topic-cards {
	padding-block: 0;
}

.ttf-section-heading {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xx-large);
}

.ttf-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--30);
}

.ttf-section-header .ttf-section-heading {
	margin: 0;
}

/* Latest articles: 4 / 2 / 1 columns. */
.ttf-curated--grid .ttf-card-grid.wp-block-post-template {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

@media (max-width: 999px) {

	.ttf-curated--grid .ttf-card-grid.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 559px) {

	.ttf-curated--grid .ttf-card-grid.wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Paired sections (questions | help, topics | verse): side by side only
   where both halves have room; stacked (full width each) below 1100px. */
.ttf-home-split.wp-block-columns {
	align-items: stretch;
}

@media (max-width: 1099px) {

	.ttf-home-split.wp-block-columns {
		flex-wrap: wrap !important; /* Core sets nowrap from 782px. */
		row-gap: var(--wp--preset--spacing--50);
	}

	.ttf-home-split.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important; /* Override core's equal-width columns. */
	}
}

@media (min-width: 1100px) {

	/* Must beat core's equal-width column rule. */
	.wp-block-columns.ttf-home-split--discover:not(.is-not-stacked-on-mobile) > .wp-block-column:first-child {
		flex-grow: 2.6;
	}
}

/*
 * Questions | Ways we can help. Compact, component-specific sizes taken from
 * the approved design (docs/truth-that-frees-homepage.png): smaller text and
 * tighter spacing than article cards, on purpose. Sizes are presets/tokens;
 * nothing here changes the global scale. No fixed heights: cards grow with
 * their text (zoom, text-spacing overrides).
 */
@media (min-width: 1100px) {

	/* The two halves sit apart, as in the design. */
	.wp-block-columns.ttf-home-split--help {
		column-gap: var(--wp--custom--space--12);
	}

	/* Side by side: always 4 question tiles and 3 help cards per row (the
	   block's minimum column width would otherwise wrap them near 1100px). */
	.ttf-home-split--help .ttf-question-grid.is-layout-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ttf-home-split--help .ttf-action-grid.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Links in these cards: small text, but still a 44px target. The negative
   margin keeps the extra target height from adding visible space. */
.ttf-questions .ttf-more-link,
.ttf-actions .ttf-more-link,
.ttf-questions .ttf-more-link a,
.ttf-actions .ttf-more-link a {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}

.ttf-questions .ttf-more-link a,
.ttf-actions .ttf-more-link a {
	padding-block: calc((var(--wp--custom--touch-target) - 1lh) / 2);
	margin-block: calc((1lh - var(--wp--custom--touch-target)) / 2);
}

.ttf-questions .ttf-more-link a::after,
.ttf-actions .ttf-more-link a::after {
	width: var(--wp--custom--icon--meta);
	height: var(--wp--custom--icon--meta);
}

/* Question tiles: icon above a short question; the question is the link. */
.ttf-question-grid {
	gap: var(--wp--custom--space--4);
}

.ttf-question {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--custom--space--3);
	padding: var(--wp--custom--space--5) var(--wp--custom--space--2);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--surface);
	text-align: center;
}

/* Beats WordPress's block-gap margins (same specificity, printed later). */
.wp-block-group.ttf-question > * {
	margin: 0;
}

/* Icon sizes: card (question tiles) and action (help cards) tokens. */
.ttf-question .wp-block-icon svg {
	width: var(--wp--custom--icon--card);
	height: var(--wp--custom--icon--card);
}

.ttf-action-card .wp-block-icon svg {
	width: var(--wp--custom--icon--action);
	height: var(--wp--custom--icon--action);
}

/*
 * The ministry's reference icons are drawn at a 1.8 stroke on a 48 grid. Any
 * 24-grid (Lucide) icon chosen for these cards gets the same visual weight.
 */
.ttf-question .wp-block-icon svg.ttf-icon:not(.ttf-icon--fine),
.ttf-action-card .wp-block-icon svg.ttf-icon:not(.ttf-icon--fine) {
	stroke-width: 0.9;
}

/* Core (filled) icons chosen by an editor keep their fill. */
.ttf-question .wp-block-icon svg:not(.ttf-icon),
.ttf-action-card .wp-block-icon svg:not(.ttf-icon) {
	fill: var(--wp--preset--color--contrast);
}

.ttf-question .wp-block-icon,
.ttf-action-card .wp-block-icon {
	color: var(--wp--preset--color--contrast);
}

/* Question text: small, semibold sans (not the H3 or card-title size). */
.ttf-question__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

.ttf-question__title a {
	text-decoration: none;
}

.ttf-question__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ttf-question:hover .ttf-question__title a {
	text-decoration: underline;
}

.ttf-question__title a:focus-visible {
	outline: none;
}

.ttf-question:has(.ttf-question__title a:focus-visible) {
	outline: var(--ttf-focus-width) solid var(--ttf-focus-color);
	outline-offset: var(--ttf-focus-offset);
}

.ttf-question p {
	font-size: var(--wp--preset--font-size--x-small);
}

/* "More questions?" sits just below the tiles. */
.ttf-questions > .ttf-link-required {
	margin-block-start: var(--wp--custom--space--4);
}

/* "Ways we can help" cards: centred, icon-led, links aligned at the bottom. */
.ttf-action-grid {
	gap: var(--wp--custom--space--4);
}

.ttf-action-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--custom--space--3);
	padding: var(--wp--custom--space--5) var(--wp--custom--space--3);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--surface);
	text-align: center;
}

.wp-block-group.ttf-action-card > * {
	margin: 0;
}

.ttf-action-card h3 {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--snug);
}

.ttf-action-card p:not(.ttf-more-link) {
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.45;
}

.ttf-action-card .ttf-more-link {
	margin-block-start: auto;
	padding-block-start: var(--wp--custom--space--2);
}

/* Photographic topic cards. */
.ttf-topic-cards__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ttf-topic-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 12rem;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

.ttf-topic-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bottom shade so white text stays readable over any photograph. */
.ttf-topic-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, color-mix(in srgb, var(--wp--preset--color--contrast) 92%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent) 45%, color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent) 100%);
}

.ttf-topic-card__body {
	position: relative;
	z-index: 1;
	padding: var(--wp--preset--spacing--30);
}

.ttf-topic-card__body > * {
	margin: 0;
}

.ttf-topic-card__title {
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--snug);
}

.ttf-topic-card__title a {
	color: inherit;
	text-decoration: none;
}

.ttf-topic-card__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ttf-topic-card:hover .ttf-topic-card__title a {
	text-decoration: underline;
}

.ttf-topic-card__title a:focus-visible {
	outline: none;
}

.ttf-topic-card:has(a:focus-visible) {
	outline: var(--ttf-focus-width) solid var(--wp--preset--color--contrast);
	outline-offset: var(--ttf-focus-offset);
}

.ttf-topic-card__description {
	font-size: var(--wp--preset--font-size--medium);
}

/* Verse panel. */
.ttf-verse {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	height: 100%;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--small);
}

.ttf-verse > * {
	margin: 0;
}

.ttf-verse__heading {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Scripture is set in the serif, like other prominent quotations. */
.ttf-verse .ttf-verse__quote {
	position: relative;
	margin: 0;
	padding: 0 0 0 var(--wp--custom--space--10);
	border: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--snug);
}

.ttf-verse .ttf-verse__quote::before {
	content: "\201C" / "";
	position: absolute;
	inset-block-start: -0.35em;
	inset-inline-start: 0;
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 3.5em;
	line-height: 1;
}

.ttf-verse .ttf-verse__quote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast-secondary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
}

.ttf-verse .wp-block-image {
	margin-block-start: auto;
}

.ttf-verse .wp-block-image img {
	display: block;
	width: 100%;
	max-height: 9rem;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--small);
}

/* Newsletter banner: inset, rounded, gold envelope badge. */
.ttf-newsletter__banner {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--medium);
}

.ttf-newsletter__intro {
	gap: var(--wp--preset--spacing--40);
}

.ttf-newsletter__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: calc(var(--wp--custom--icon--feature) * 1.8);
	height: calc(var(--wp--custom--icon--feature) * 1.8);
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.ttf-newsletter__icon svg {
	width: var(--wp--custom--icon--feature);
	height: var(--wp--custom--icon--feature);
}

.ttf-newsletter__icon svg:not(.ttf-icon) {
	fill: currentcolor;
}

.ttf-newsletter .ttf-section-heading {
	margin: 0;
}

.ttf-newsletter p {
	margin: 0;
	max-width: 30rem;
}

.ttf-newsletter .wp-block-button__link {
	min-width: 10rem;
}

/* Featured devotional and editor messages (unchanged from Phase 3). */
.ttf-editor-notice {
	padding: var(--wp--preset--spacing--40);
	border: 2px dashed var(--wp--preset--color--contrast-secondary);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

/* Legacy Phase 3 topic cards pattern (truththatfrees/home-topics). */
.ttf-topics--cards .wp-block-term-template {
	gap: var(--wp--preset--spacing--30);
}

.ttf-topics--cards .wp-block-term-template > li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--base);
}

.ttf-topics--cards .wp-block-term-name {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.ttf-topics.ttf-topics--cards .wp-block-term-name a {
	display: inline;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
}

.ttf-topics--cards .wp-block-term-name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ttf-topics--cards .wp-block-term-description {
	margin: 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* Homepage article cards: compact insets, as in the design. */
.ttf-curated--grid .ttf-card__body {
	padding: var(--wp--preset--spacing--30);
}

/* The design's landscape crop (≈1.9:1). The featured-image block writes its
   ratio inline, so only !important can override it for this grid. */
.ttf-curated--grid .ttf-card__media img {
	aspect-ratio: 1.9 !important;
}

.ttf-curated--grid .ttf-card__excerpt {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
}

/* Section headings below the article row are smaller in the design. */
.ttf-home-split .ttf-section-heading,
.ttf-newsletter .ttf-section-heading {
	font-size: var(--wp--preset--font-size--x-large);
}

/* With the signup form available, it replaces the "Subscribe" button (the
   button stays as the fallback, and keeps the banner's link rules working). */
.ttf-newsletter__banner:has(.ttf-form-block--compact) > .wp-block-buttons {
	display: none;
}

.ttf-newsletter__banner:has(.ttf-form-block--compact) {
	justify-content: flex-start;
	column-gap: var(--wp--custom--space--16);
}

.ttf-newsletter__banner > .ttf-form-block--compact {
	flex: 0 1 35rem;
}

/* Newsletter banner: a little wider than the content, as in the design. */
.ttf-newsletter > .ttf-newsletter__banner.alignwide {
	max-width: min(100%, calc(var(--wp--style--global--wide-size) + 6rem));
}