/*
 * tg-theme — blocks.css
 *
 * Phase 2 supplementary styles for ACF server-rendered blocks.
 * patterns.css covers Phase 1 shared helpers (.tg-band, .tg-eyebrow, .tg-lead, etc.)
 * and remains the source of truth for those. This file adds only what Phase 2 blocks need.
 *
 * Design token rule: NEVER use raw hex or px where a CSS custom property exists.
 *   Color  —  var(--wp--preset--color--{slug})
 *   Font   —  var(--wp--preset--font-family--{slug})
 *   Size   —  var(--wp--preset--font-size--{slug})
 *   Custom —  var(--wp--custom--radius--{slug})
 *             var(--wp--custom--elevation--{slug})
 *
 * Blocks covered:
 *   tg/service-detail   — pillar sections with service card grid
 *   tg/faq              — details/summary accordion
 *   tg/article-card     — archive/manual article card
 *   tg/hero             — supplementary responsive helpers
 *   contact form        — [tg_contact_form] shortcode rendered form
 *   single.html         — article single-page layout helpers
 */

/* ==========================================================================
   SERVICE DETAIL BLOCK  (tg/service-detail)
   ========================================================================== */

.tg-service-detail {
	padding-block: clamp(72px, 8vw, 120px);
	padding-inline: var(--wp--preset--spacing--gutter, 24px);
}

/* Alternating light/warm backgrounds for successive pillar sections */
.tg-service-detail--alt {
	background-color: var(--wp--preset--color--mist);
}

/* Pillar number badge */
.tg-service-detail__pillar-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--terracotta-deep);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	margin-bottom: 14px;
}

.tg-service-detail__header {
	margin-bottom: clamp(32px, 4vw, 52px);
}

/* Service card grid — 2 or 3 columns based on count */
.tg-service-card-grid {
	display: grid;
	gap: clamp(18px, 2.5vw, 28px);
}

.tg-service-card-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.tg-service-card-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
	.tg-service-card-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.tg-service-card-grid--2,
	.tg-service-card-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* Service card */
.tg-service-card {
	background-color: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--lg, 18px);
	padding: 28px 26px 24px;
	border-top: 3px solid var(--wp--preset--color--terracotta-deep);
	box-shadow: var(--wp--custom--elevation--card, 0 2px 6px rgba(22,32,45,.07));
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.tg-service-card:hover {
	box-shadow: var(--wp--custom--elevation--card-hover, 0 6px 22px rgba(22,32,45,.14));
	transform: translateY(-2px);
}

.tg-service-card__heading {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-bottom: 12px;
	line-height: 1.15;
}

.tg-service-card__body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.65;
	margin-bottom: 16px;
}

.tg-service-card__you-get {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--terracotta-deeper);
	font-weight: 600;
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 12px;
	margin-top: 12px;
}

.tg-service-card__who-for {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
	margin-top: 6px;
}

/* ==========================================================================
   FAQ ACCORDION BLOCK  (tg/faq)
   ========================================================================== */

.tg-faq {
	padding-block: clamp(72px, 8vw, 120px);
	padding-inline: var(--wp--preset--spacing--gutter, 24px);
}

.tg-faq__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 800px;
}

/* Individual item */
.tg-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.tg-faq__item:first-child {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

/* summary — the visible trigger */
.tg-faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	cursor: pointer;
	padding: 22px 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--ink);
	list-style: none; /* remove default triangle in all browsers */
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.15s ease;
}

/* Remove default marker in Firefox */
.tg-faq__question::-webkit-details-marker {
	display: none;
}

.tg-faq__question:hover {
	color: var(--wp--preset--color--terracotta-deep);
}

/* Focus ring (keyboard nav) */
.tg-faq__item details summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--terracotta);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Chevron icon — built in CSS, no external icon font needed */
.tg-faq__chevron {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-right: 2px solid var(--wp--preset--color--terracotta-deep);
	border-bottom: 2px solid var(--wp--preset--color--terracotta-deep);
	transform: rotate(45deg);
	transition: transform 0.22s ease;
	margin-top: -4px;
}

/* Rotate chevron when open */
.tg-faq__item details[open] .tg-faq__chevron {
	transform: rotate(225deg);
	margin-top: 4px;
}

/* Answer panel */
.tg-faq__answer {
	padding-bottom: 22px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.7;
	max-width: 68ch;
}

/* Smooth open/close animation (progressive enhancement; no JS needed) */
@media (prefers-reduced-motion: no-preference) {
	.tg-faq__item details[open] .tg-faq__answer {
		animation: faq-open 0.22s ease both;
	}

	@keyframes faq-open {
		from { opacity: 0; transform: translateY(-6px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* ==========================================================================
   ARTICLE CARD BLOCK  (tg/article-card)
   ========================================================================== */

.tg-article-card {
	background-color: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--lg, 18px);
	overflow: hidden;
	box-shadow: var(--wp--custom--elevation--card, 0 2px 6px rgba(22,32,45,.07));
	transition: box-shadow 0.18s ease, transform 0.18s ease;
	display: flex;
	flex-direction: column;
}

.tg-article-card:hover {
	box-shadow: var(--wp--custom--elevation--card-hover, 0 6px 22px rgba(22,32,45,.14));
	transform: translateY(-2px);
}

.tg-article-card__image-wrap {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.tg-article-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.tg-article-card:hover .tg-article-card__image {
	transform: scale(1.03);
}

.tg-article-card__body {
	padding: 24px 24px 30px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.tg-article-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.tg-article-card__tag {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-deep);
}

.tg-article-card__date {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
}

.tg-article-card__title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--ink);
	line-height: 1.2;
	margin-bottom: 10px;
}

.tg-article-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.tg-article-card__title a:hover {
	color: var(--wp--preset--color--terracotta-deep);
}

.tg-article-card__excerpt {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
	margin-bottom: 18px;
	flex: 1;
}

.tg-article-card__link {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--terracotta-deep);
	text-decoration: none;
	letter-spacing: 0.5px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: gap 0.15s ease;
}

.tg-article-card__link:hover {
	gap: 8px;
}

.tg-article-card__link::after {
	content: '\2192'; /* unicode right arrow — no icon dependency */
	font-size: 1em;
}

/* ==========================================================================
   HERO BLOCK — supplementary responsive helpers  (tg/hero)
   ========================================================================== */

/* Two-button group responsive stacking */
.tg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

@media (max-width: 480px) {
	.tg-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.tg-hero__actions .tg-btn {
		text-align: center;
	}
}

/* Compact hero variant (interior pages) */
.tg-hero--compact {
	padding-block: clamp(48px, 6vw, 72px);
}

.tg-hero--compact .tg-hero__heading {
	font-size: clamp(28px, 4vw, 48px);
}

/* ==========================================================================
   CONTACT FORM  ([tg_contact_form] shortcode)
   ========================================================================== */

.tg-contact-wrap {
	padding-block: clamp(48px, 6vw, 80px);
	/*
	 * Root-cause fix (Phase 3, commit e80a35b follow-up):
	 * The prior fix added padding-inline here, but .tg-contact-wrap already sits
	 * inside .tg-band which supplies padding-inline: 24px. Doubling that caused
	 * the form grid to start at 48px from the band edge — not the symptom, but
	 * wasteful. The REAL cause of right-side asymmetry was inputs/textarea set to
	 * width:100% without box-sizing:border-box: the 14px inline padding on each
	 * input was added ON TOP OF width:100% (content-box), pushing element width
	 * past the container. Because overflow clips at the right-hand edge in LTR
	 * flow, the right side appeared wider/broken. Fix: box-sizing:border-box on
	 * all form fields (see rule below), and remove redundant padding-inline here
	 * so .tg-band supplies the single symmetric 24px gutter.
	 */
	padding-inline: 0;
}

/* Box-sizing fix: inputs/textarea must include padding in their width calculation */
.tg-contact-wrap input[type="text"],
.tg-contact-wrap input[type="email"],
.tg-contact-wrap textarea {
	box-sizing: border-box;
}

/* Two-column responsive: form left, details right */
@media (max-width: 820px) {
	.tg-contact-wrap {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}
}

/* Mobile padding: 16px on each side to match spec visual target */
@media (max-width: 768px) {
	.tg-contact-wrap {
		padding-inline: 0; /* .tg-band provides gutter; mobile gutter matches 16px at this width via clamp */
	}
}

/* Input + textarea focus ring */
.tg-contact-wrap input[type="text"]:focus,
.tg-contact-wrap input[type="email"]:focus,
.tg-contact-wrap textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--terracotta-deep);
	box-shadow: 0 0 0 3px rgba(219, 85, 55, 0.22);
}

/* Input + textarea invalid state */
.tg-contact-wrap input[aria-invalid="true"],
.tg-contact-wrap textarea[aria-invalid="true"] {
	border-color: var(--wp--preset--color--danger, #C0392B);
}

/* Submit button hover */
.tg-contact-wrap button[type="submit"]:hover {
	background-color: var(--wp--preset--color--terracotta-deeper) !important;
}

.tg-contact-wrap button[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--terracotta);
	outline-offset: 3px;
}

/* ==========================================================================
   CONTACT BLOCK  (Phase 5 — inc/sections/contact_block.php BEM classes)
   The section band (.tg-band.tg-contact-block) sets padding-block INLINE in
   inc/sections/contact_block.php to clamp(36px, 4vw, 60px) top/bottom
   (halved from the prior clamp(72px, 8vw, 120px) / var(--wp--preset--spacing--section)
   per owner request, 2026-08-09). padding-inline is also set inline (24px).
   Do NOT add a padding-block rule here — it will be overridden by the inline
   style and become dead code.
   ========================================================================== */

/* Two-column grid: form ~55% left, details ~45% right */
.tg-contact-block__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}

@media (max-width: 860px) {
	.tg-contact-block__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* -------------------------------------------------------------------
   Form column — white raised card against the paper-warm section bg
   ------------------------------------------------------------------- */
.tg-contact-block__form-col {
	background-color: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(28px, 4vw, 44px);
	border: 1px solid var(--wp--preset--color--hairline);
	box-shadow: var(--wp--custom--elevation--md);
}

/* Form heading */
.tg-contact-form__heading {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--ink);
	margin-bottom: 24px;
	line-height: 1.15;
}

/* Field wrapper */
.tg-field {
	margin-bottom: 18px;
}

/* Labels */
.tg-field__label {
	display: block;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin-bottom: 5px;
}

/* Required asterisk and optional tag */
.tg-field__req {
	color: var(--wp--preset--color--terracotta-deep);
	margin-left: 2px;
}

.tg-field__opt {
	font-weight: 400;
	color: var(--wp--preset--color--slate);
	margin-left: 4px;
}

/* Help text */
.tg-field__help {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
	margin-bottom: 5px;
}

/* Inputs and textarea — box-sizing:border-box is the Phase 3 bug fix (padding inside width) */
.tg-field__input,
.tg-field__textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--cloud);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
	padding: 11px 14px;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tg-field__textarea {
	resize: vertical;
	min-height: 120px;
}

/* Focus ring — matches the terracotta ring used on .tg-contact-wrap inputs */
.tg-field__input:focus,
.tg-field__textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--terracotta-deep);
	box-shadow: 0 0 0 3px rgba(219, 85, 55, 0.22);
}

/* Invalid state */
.tg-field__input[aria-invalid="true"],
.tg-field__textarea[aria-invalid="true"] {
	border-color: var(--wp--preset--color--danger, #C0392B);
}

/* Submit button spacing */
.tg-contact-form__submit {
	margin-top: 8px;
	width: 100%;
	text-align: center;
	justify-content: center;
}

/* Submit hover — override via specificity (tg-btn--primary sets background-color) */
.tg-contact-block__form-col .tg-btn--primary:hover {
	background-color: var(--wp--preset--color--terracotta-deeper);
}

.tg-contact-block__form-col .tg-btn--primary:focus-visible {
	outline: 3px solid var(--wp--preset--color--terracotta);
	outline-offset: 3px;
}

/* Form note (privacy/required note below the button) */
.tg-contact-form__note {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
	margin-top: 12px;
	line-height: 1.55;
}

/* Aria-live status region */
.tg-contact-form__status {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-soft);
	min-height: 1.5em;
	margin-bottom: 12px;
}

/* -------------------------------------------------------------------
   Details column — vertical stack with consistent spacing
   ------------------------------------------------------------------- */
.tg-contact-block__details-col {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* Reassurance opening line */
.tg-contact-block__reassure {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
	margin: 0;
}

/* Individual contact detail block (Email, LinkedIn, Location) */
.tg-contact-block__detail {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Detail heading label — small bold Montserrat */
.tg-contact-block__detail-label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

/* Detail paragraph wrapper — remove default margin */
.tg-contact-block__detail p {
	margin: 0;
}

/* Links — brand terracotta accent */
.tg-contact-block__link {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--terracotta-deep);
	text-decoration: none;
	transition: color 0.15s ease;
}

.tg-contact-block__link:hover {
	color: var(--wp--preset--color--terracotta-deeper);
}

/* Location body text — muted, no special treatment beyond ink-soft */
.tg-contact-block__location-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.55;
	margin: 0;
}

/* -------------------------------------------------------------------
   Callbox — sage-tinted tile with left terracotta accent border
   ------------------------------------------------------------------- */
.tg-contact-block__callbox {
	background-color: var(--wp--preset--color--mist);
	border-left: 4px solid var(--wp--preset--color--terracotta-deep);
	border-radius: var(--wp--custom--radius--md);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tg-contact-block__callbox-heading {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0;
	line-height: 1.2;
}

.tg-contact-block__callbox-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   SINGLE POST LAYOUT HELPERS  (single.html, tg-single.php parts)
   ========================================================================== */

.tg-single {
	max-width: 740px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter, 24px);
	padding-bottom: clamp(64px, 8vw, 120px);
}

.tg-single__header {
	padding-block: clamp(48px, 6vw, 72px);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	margin-bottom: 42px;
}

.tg-single__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.tg-single__category {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-deep);
	text-decoration: none;
}

.tg-single__date {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
}

.tg-single__title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	font-size: clamp(28px, 4.5vw, 52px);
	color: var(--wp--preset--color--ink);
	line-height: 1.1;
	margin-bottom: 18px;
}

.tg-single__lede {
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
	max-width: 60ch;
}

/* Featured image */
.tg-single__featured-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg, 18px);
	margin-bottom: 42px;
	display: block;
}

/* Article body prose */
.tg-single__content {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.78;
}

.tg-single__content h2 {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--ink);
	margin-top: 48px;
	margin-bottom: 16px;
	line-height: 1.2;
}

.tg-single__content h3 {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--ink);
	margin-top: 36px;
	margin-bottom: 12px;
}

.tg-single__content p {
	margin-bottom: 22px;
}

.tg-single__content a {
	color: var(--wp--preset--color--terracotta-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tg-single__content a:hover {
	color: var(--wp--preset--color--terracotta-deeper);
}

.tg-single__content ul,
.tg-single__content ol {
	padding-left: 24px;
	margin-bottom: 22px;
}

.tg-single__content li {
	margin-bottom: 8px;
}

.tg-single__content blockquote {
	border-left: 4px solid var(--wp--preset--color--terracotta-deep);
	margin-left: 0;
	padding-left: 22px;
	color: var(--wp--preset--color--ink);
	font-style: italic;
	margin-bottom: 24px;
}

/* Article back / nav bar */
.tg-single__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--terracotta-deep);
	text-decoration: none;
	margin-bottom: 42px;
	transition: gap 0.15s ease;
}

.tg-single__back::before {
	content: '\2190'; /* left arrow */
}

.tg-single__back:hover {
	gap: 9px;
}

/* Back-link wrapper: consistent bottom margin before the article header */
.tg-single__back-wrap {
	margin-bottom: 0;
	padding-top: clamp(24px, 4vw, 48px);
	padding-inline: var(--wp--preset--spacing--gutter, 24px);
}

/* ==========================================================================
   SINGLE POST — FOOTER CHROME (author + modified date + prev/next nav)
   Used by inc/single-post-acf.php; mirrors the structure from single.html.
   ========================================================================== */

.tg-single__footer {
	padding-inline: var(--wp--preset--spacing--gutter, 24px);
}

/* Author line */
.tg-single__author {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
}

/* Modified date */
.tg-single__modified-wrap {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
}

/* Prev / next navigation links */
.tg-single__nav-prev a,
.tg-single__nav-next a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--terracotta-deep);
	text-decoration: none;
	transition: color 0.15s ease;
}

.tg-single__nav-prev a:hover,
.tg-single__nav-next a:hover {
	color: var(--wp--preset--color--terracotta-deeper);
}

@media (prefers-reduced-motion: reduce) {
	.tg-single__nav-prev a,
	.tg-single__nav-next a {
		transition: none;
	}
}

/* ==========================================================================
   SHARED UTILITY BUTTONS  (.tg-btn)
   Defined here so ACF block render templates can reference them without
   relying on patterns.css being loaded. Pattern of record: patterns.css
   has the final word; these are additive only.
   ========================================================================== */

.tg-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 15px;
	border-radius: var(--wp--custom--radius--md, 10px);
	padding: 15px 26px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
}

/* Button row helper — standard gap; --center for centered bands (CTA) */
.tg-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 34px;
}

.tg-btn-row--center {
	justify-content: center;
}

/* Guard: if .tg-btn ever lands on a wp:button WRAPPER, neutralize the wrapper
   so the button chrome (border/padding/bg) renders once, on the link only.
   (Double-outline bug: wrapper + link each drew a border.) */
.wp-block-button.tg-btn {
	padding: 0;
	border: none;
	background: none;
}

.wp-block-button.tg-btn .wp-block-button__link {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 15px;
	border-radius: var(--wp--custom--radius--md, 10px);
	padding: 15px 26px;
	line-height: 1;
}

.tg-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--terracotta);
	outline-offset: 3px;
}

.tg-btn--primary {
	background-color: var(--wp--preset--color--terracotta-deep);
	color: #fff;
	border: 2px solid transparent;
}

.tg-btn--primary:hover {
	background-color: var(--wp--preset--color--terracotta-deeper);
}

.tg-btn--ghost {
	background-color: transparent;
	color: var(--wp--preset--color--ink-soft);
	border: 2px solid var(--wp--preset--color--hairline);
}

.tg-btn--ghost:hover {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

/* Ghost on dark backgrounds (hero, cta band) */
.tg-btn--ghost-light {
	background-color: transparent;
	color: rgba(255, 255, 255, 0.9);
	border: 2px solid rgba(255, 255, 255, 0.45);
}

.tg-btn--ghost-light:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.75);
}