/*
 * The Advance Media — Section styles
 * One block per section type in the renderer vocabulary (inc/sections.php).
 * Adding a section type means adding a block here, a partial in
 * template-parts/sections/, and a case in inc/sections.php. See ADR-002.
 */

/* ================================================================= HERO */

.tam-hero {
	position: relative;
	padding-top: calc(var(--header-h) + var(--sp-6));
	padding-bottom: var(--sp-7);
	overflow: hidden;
}

@media (min-width: 1024px) {
	.tam-hero {
		padding-top: calc(var(--header-h) + var(--sp-7));
		padding-bottom: var(--sp-8);
	}
}

.tam-hero__grid {
	display: grid;
	gap: var(--sp-6);
	align-items: center;
}

@media (min-width: 1024px) {
	.tam-hero__grid {
		grid-template-columns: 1.08fr 0.92fr;
		gap: var(--sp-7);
	}
}

.tam-hero__copy {
	max-width: 44rem;
}

.tam-hero h1 {
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
}

.tam-hero__lead {
	margin-top: var(--sp-4);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--tam-muted);
	max-width: 40rem;
}

.tam-hero__trust {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
	font-size: 0.875rem;
	color: var(--tam-muted);
}

.tam-hero__trust::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--tam-gold);
	flex: none;
}

/*
 * Hero visual: interior photograph paired with a minimal abstract
 * growth-system panel. No fake dashboard, no invented metrics (spec §14, §25).
 */
.tam-hero__visual {
	position: relative;
}

.tam-hero__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--tam-beige);
}

.tam-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1023px) {
	.tam-hero__media {
		aspect-ratio: 16 / 10;
	}
}

.tam-hero__panel {
	background: var(--tam-charcoal);
	color: var(--tam-ink-on-dark);
	border-radius: var(--r-sm);
	padding: var(--sp-4);
	box-shadow: var(--tam-shadow-lift);
}

@media (min-width: 1024px) {
	.tam-hero__panel {
		position: absolute;
		left: calc(var(--sp-6) * -1);
		bottom: var(--sp-5);
		width: min(300px, 78%);
	}
}

@media (max-width: 1023px) {
	.tam-hero__panel {
		margin-top: calc(var(--sp-4) * -1);
		margin-inline: var(--sp-4);
		position: relative;
	}
}

.tam-hero__panel-title {
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--tam-gold);
	margin-bottom: var(--sp-3);
}

.tam-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tam-flow li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.875rem;
	padding: 0.42rem 0;
	color: var(--tam-ink-on-dark);
}

.tam-flow li + li {
	border-top: 1px solid var(--tam-line-dark);
}

.tam-flow li::before {
	content: "";
	width: 5px;
	height: 5px;
	flex: none;
	background: var(--tam-gold);
	transform: rotate(45deg);
}

/* --- compact page hero (inner pages) --- */

.tam-pagehero {
	padding-top: calc(var(--header-h) + var(--sp-5));
	padding-bottom: var(--sp-6);
	border-bottom: 1px solid var(--tam-line);
}

.tam-pagehero__copy {
	max-width: 52rem;
}

.tam-pagehero h1 {
	margin-top: var(--sp-1);
}

.tam-pagehero__lead {
	margin-top: var(--sp-4);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--tam-muted);
	max-width: var(--measure);
}

/* ============================================================== PROBLEM */

.tam-leaks {
	display: grid;
	gap: 0;
	margin-top: var(--sp-5);
	border-top: 1px solid var(--tam-line);
}

@media (min-width: 700px) {
	.tam-leaks {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--sp-6);
	}
}

.tam-leaks li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--tam-line);
	font-size: var(--fs-small);
}

.tam-leaks li .tam-icon {
	width: 18px;
	height: 18px;
	stroke: var(--tam-gold);
	margin-top: 3px;
}

.tam-closer {
	margin-top: var(--sp-6);
	padding-left: var(--sp-4);
	border-left: 2px solid var(--tam-gold);
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	line-height: 1.35;
	max-width: 40rem;
}

/* ============================================================ PROCESS */

/*
 * Growth-system process. Vertical stepped list on mobile, staggered
 * two-column architecture on desktop. Gold numerals, hairline connectors.
 */
.tam-process {
	counter-reset: tamstep;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--tam-line);
}

.tam-process__item {
	display: grid;
	gap: var(--sp-2);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--tam-line);
	align-items: start;
}

@media (min-width: 860px) {
	.tam-process__item {
		grid-template-columns: 92px 1fr 1.1fr;
		gap: var(--sp-5);
		padding: var(--sp-5) 0;
	}
}

.tam-process__num {
	font-family: var(--ff-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--tam-gold);
}

.tam-process__title {
	font-size: var(--fs-h3);
}

.tam-process__text {
	color: var(--tam-muted);
	font-size: var(--fs-small);
	line-height: 1.65;
}

.tam-process__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin-top: var(--sp-2);
	list-style: none;
	padding: 0;
}

.tam-process__tags li {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--tam-line-strong);
	border-radius: var(--r-pill);
	color: var(--tam-muted);
}

/* =========================================================== COMPARISON */

.tam-compare {
	display: grid;
	gap: var(--sp-4);
	margin-top: var(--sp-5);
}

@media (min-width: 860px) {
	.tam-compare {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-6);
	}
}

.tam-compare__col {
	padding-top: var(--sp-4);
	border-top: 2px solid var(--tam-line-strong);
}

.tam-compare__col--ours {
	border-top-color: var(--tam-gold);
}

.tam-compare__label {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--tam-muted);
	margin-bottom: var(--sp-3);
}

.tam-compare__col--ours .tam-compare__label {
	color: var(--tam-gold);
}

.tam-compare__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tam-compare__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--tam-line);
	font-size: var(--fs-small);
}

.tam-compare__list .tam-icon {
	width: 18px;
	height: 18px;
	margin-top: 3px;
}

.tam-compare__col--theirs .tam-icon {
	stroke: var(--tam-muted);
}

.tam-compare__col--ours .tam-icon {
	stroke: var(--tam-gold);
}

/* ============================================================= MEASURE */

/*
 * "What We Measure" — the honest replacement for fake results (spec §10, §25.7).
 * Deliberately shows metric NAMES with definitions and no numbers.
 */
.tam-measure {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--tam-line);
	margin-top: var(--sp-5);
}

@media (min-width: 700px) {
	.tam-measure {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--sp-7);
	}
}

@media (min-width: 1100px) {
	.tam-measure {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tam-measure__item {
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--tam-line);
}

.tam-measure__name {
	font-family: var(--ff-display);
	font-size: 1.25rem;
	line-height: 1.2;
	margin-bottom: 0.4rem;
}

.tam-measure__def {
	font-size: var(--fs-small);
	color: var(--tam-muted);
	line-height: 1.6;
}

/* ============================================================ PIPELINE */

.tam-pipeline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: stretch;
	margin-top: var(--sp-5);
	list-style: none;
	padding: 0;
}

.tam-pipeline__node {
	flex: 1 1 148px;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--sp-3);
	border: 1px solid var(--tam-line);
	border-radius: var(--r-sm);
	background: var(--tam-white);
	position: relative;
	font-size: 0.875rem;
}

.tam-pipeline__node--accent {
	border-color: var(--tam-gold);
	background: rgba(182, 154, 106, 0.07);
}

.tam-pipeline__step {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tam-gold);
}

.tam-pipeline__label {
	font-weight: 600;
}

.tam-pipeline__note {
	color: var(--tam-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* ============================================== SERVICE / AUDIENCE GRID */

.tam-cardgrid {
	display: grid;
	gap: var(--sp-5) var(--sp-5);
	margin-top: var(--sp-5);
}

@media (min-width: 640px) {
	.tam-cardgrid--2,
	.tam-cardgrid--3,
	.tam-cardgrid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.tam-cardgrid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.tam-cardgrid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ======================================================== FEATURE SPLIT */

.tam-split {
	display: grid;
	gap: var(--sp-5);
	align-items: center;
}

@media (min-width: 900px) {
	.tam-split {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-8);
	}
	.tam-split--reverse .tam-split__media {
		order: 2;
	}
}

.tam-split__media img,
.tam-split__media .tam-imgph {
	aspect-ratio: 5 / 4;
	width: 100%;
	object-fit: cover;
	border-radius: var(--r-sm);
}

.tam-split__body > * + * {
	margin-top: var(--sp-3);
}

/* ============================================================ FOUNDER */

.tam-founder {
	display: grid;
	gap: var(--sp-5);
	align-items: center;
}

@media (min-width: 900px) {
	.tam-founder {
		grid-template-columns: 0.8fr 1.2fr;
		gap: var(--sp-7);
	}
}

.tam-founder__portrait {
	aspect-ratio: 4 / 5;
	max-width: 380px;
	border-radius: var(--r-sm);
	overflow: hidden;
}

.tam-founder__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tam-founder__name {
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	margin-top: var(--sp-4);
}

.tam-founder__role {
	font-size: var(--fs-small);
	color: var(--tam-muted);
	margin-top: 2px;
}

.tam-founder__body > p + p {
	margin-top: var(--sp-3);
}

/* =============================================================== VALUES */

.tam-values {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--tam-line);
	margin-top: var(--sp-5);
}

.tam-values__item {
	display: grid;
	gap: var(--sp-1);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--tam-line);
}

@media (min-width: 800px) {
	.tam-values__item {
		grid-template-columns: 0.9fr 1.6fr;
		gap: var(--sp-5);
		align-items: baseline;
	}
}

.tam-values__title {
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
}

.tam-values__text {
	color: var(--tam-muted);
	font-size: var(--fs-small);
	line-height: 1.65;
}

/* ================================================================= FAQ */

.tam-faq {
	border-top: 1px solid var(--tam-line);
	margin-top: var(--sp-5);
	max-width: 56rem;
}

.tam-faq__item {
	border-bottom: 1px solid var(--tam-line);
}

.tam-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-4);
	width: 100%;
	padding: var(--sp-4) 0;
	text-align: left;
	font-family: var(--ff-display);
	font-size: var(--fs-h4);
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.tam-faq__q::-webkit-details-marker {
	display: none;
}

.tam-faq__icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	stroke: var(--tam-gold);
	transition: transform var(--dur) var(--ease);
}

.tam-faq__item[open] .tam-faq__icon {
	transform: rotate(45deg);
}

.tam-faq__a {
	padding-bottom: var(--sp-4);
	color: var(--tam-muted);
	font-size: var(--fs-small);
	line-height: 1.7;
	max-width: var(--measure);
}

.tam-faq__a > * + * {
	margin-top: var(--sp-2);
}

/* ============================================================ CTA BAND */

.tam-ctaband__inner {
	max-width: 44rem;
}

.tam-ctaband--center .tam-ctaband__inner {
	margin-inline: auto;
	text-align: center;
}

.tam-ctaband--center .tam-btn-row {
	justify-content: center;
}

.tam-ctaband h2 {
	font-size: var(--fs-h1);
}

/* ========================================================== CHECKLIST */

.tam-checklist {
	list-style: none;
	margin: var(--sp-4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}

.tam-checklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--fs-small);
	line-height: 1.6;
}

.tam-checklist .tam-icon {
	width: 19px;
	height: 19px;
	margin-top: 2px;
	stroke: var(--tam-gold);
}

/* Two-column included / not included */
.tam-scope {
	display: grid;
	gap: var(--sp-5);
	margin-top: var(--sp-5);
}

@media (min-width: 800px) {
	.tam-scope {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-6);
	}
}

.tam-scope__col {
	padding: var(--sp-5);
	border-radius: var(--r-md);
	background: var(--tam-white);
	border: 1px solid var(--tam-line);
}

.tam-scope__col--out {
	background: transparent;
	border-style: dashed;
}

.tam-scope__title {
	font-size: var(--fs-h4);
	margin-bottom: var(--sp-2);
}

/* ============================================================ RESOURCES */

.tam-resource {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-4);
	border: 1px solid var(--tam-line);
	border-radius: var(--r-md);
	background: var(--tam-white);
	height: 100%;
	transition: border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.tam-linkcard:hover .tam-resource {
	border-color: var(--tam-gold);
	transform: translateY(-3px);
}

.tam-resource__kind {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tam-gold);
}

.tam-resource__title {
	font-size: var(--fs-h4);
	font-family: var(--ff-display);
	font-weight: 400;
	line-height: 1.3;
}

.tam-resource__text {
	font-size: var(--fs-small);
	color: var(--tam-muted);
	line-height: 1.6;
}

/* ============================================================== POSTS */

.tam-post-card__media {
	aspect-ratio: 16 / 10;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--tam-beige);
	margin-bottom: var(--sp-3);
}

.tam-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.tam-linkcard:hover .tam-post-card__media img {
	transform: scale(1.04);
}

.tam-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tam-gold);
	margin-bottom: var(--sp-2);
}

.tam-post-card__meta span:not(:last-child)::after {
	content: "·";
	margin-left: 0.5rem;
	color: var(--tam-line-strong);
}

.tam-post-card__title {
	font-size: var(--fs-h3);
	line-height: 1.25;
}

.tam-post-card__excerpt {
	margin-top: var(--sp-2);
	font-size: var(--fs-small);
	color: var(--tam-muted);
	line-height: 1.6;
}

/* --------------------------------------------------------- article */

.tam-article__header {
	padding-top: calc(var(--header-h) + var(--sp-5));
	padding-bottom: var(--sp-5);
}

.tam-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
	font-size: 0.8125rem;
	color: var(--tam-muted);
	margin-top: var(--sp-4);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--tam-line);
}

.tam-toc {
	background: var(--tam-beige-soft);
	border-left: 2px solid var(--tam-gold);
	padding: var(--sp-4);
	margin-bottom: var(--sp-6);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.tam-toc__title {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--tam-muted);
	margin-bottom: var(--sp-2);
}

.tam-toc ol {
	margin: 0;
	padding-left: 1.1rem;
	font-size: var(--fs-small);
}

.tam-toc li + li {
	margin-top: 0.35rem;
}

/* ========================================================== CALCULATOR */

.tam-calc {
	display: grid;
	gap: var(--sp-5);
	margin-top: var(--sp-5);
}

@media (min-width: 940px) {
	.tam-calc {
		grid-template-columns: 0.95fr 1.05fr;
		gap: var(--sp-6);
		align-items: start;
	}
}

.tam-calc__panel {
	background: var(--tam-white);
	border: 1px solid var(--tam-line);
	border-radius: var(--r-md);
	padding: var(--sp-5);
}

.tam-calc__out {
	background: var(--tam-charcoal);
	color: var(--tam-ink-on-dark);
	border-radius: var(--r-md);
	padding: var(--sp-5);
	position: sticky;
	top: calc(var(--header-h) + var(--sp-3));
}

.tam-calc__badge {
	display: inline-block;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tam-charcoal);
	background: var(--tam-gold);
	padding: 0.28rem 0.6rem;
	border-radius: var(--r-sm);
	margin-bottom: var(--sp-3);
}

.tam-calc__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tam-calc__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--tam-line-dark);
}

.tam-calc__row dt {
	font-size: var(--fs-small);
	color: var(--tam-muted-on-dark);
}

.tam-calc__row dd {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.5rem;
	line-height: 1;
	white-space: nowrap;
}

.tam-calc__row--total dd {
	color: var(--tam-gold);
	font-size: 1.9rem;
}

.tam-calc__disclaimer {
	margin-top: var(--sp-4);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--tam-muted-on-dark);
}

.tam-range {
	width: 100%;
	accent-color: var(--tam-gold);
	height: 44px;
}

.tam-calc__field {
	margin-bottom: var(--sp-4);
}

.tam-calc__field-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: 0.2rem;
}

.tam-calc__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ============================================================= CONTACT */

.tam-contact {
	display: grid;
	gap: var(--sp-6);
}

@media (min-width: 940px) {
	.tam-contact {
		grid-template-columns: 0.85fr 1.15fr;
		gap: var(--sp-7);
		align-items: start;
	}
}

.tam-contact__block + .tam-contact__block {
	margin-top: var(--sp-5);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--tam-line);
}

.tam-contact__label {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--tam-gold);
	margin-bottom: var(--sp-2);
}

.tam-contact__value {
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	line-height: 1.3;
	text-decoration: none;
	font-style: normal;
}

.tam-contact__value a {
	text-decoration: none;
}

/* Click-to-load map (spec §72 — no heavy iframe before interaction) */
.tam-map {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--tam-beige);
	display: grid;
	place-items: center;
	text-align: center;
	padding: var(--sp-4);
}

.tam-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* =============================================================== 404 */

.tam-404 {
	min-height: 70vh;
	display: grid;
	place-items: center;
	text-align: center;
	padding-top: var(--header-h);
}

.tam-404__inner {
	max-width: 40rem;
}

/* ========================================================= THANK YOU */

.tam-thankyou {
	min-height: 72vh;
	display: grid;
	place-items: center;
	text-align: center;
	padding-top: var(--header-h);
}

.tam-thankyou__inner {
	max-width: 40rem;
}

.tam-thankyou__mark {
	width: 54px;
	height: 54px;
	margin: 0 auto var(--sp-4);
	stroke: var(--tam-gold);
	stroke-width: 1.25;
}

/* ========================================================== CALLOUT */

.tam-callout {
	padding: var(--sp-4) var(--sp-5);
	background: var(--tam-beige-soft);
	border-left: 2px solid var(--tam-gold);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	font-size: var(--fs-small);
	line-height: 1.7;
	margin-top: var(--sp-5);
}

.tam-callout__title {
	font-weight: 600;
	margin-bottom: var(--sp-1);
}

/* ============================================================= TABLE */

.tam-table {
	font-size: var(--fs-small);
	min-width: 560px;
}

.tam-table th,
.tam-table td {
	text-align: left;
	padding: var(--sp-3);
	border-bottom: 1px solid var(--tam-line);
	vertical-align: top;
}

.tam-table thead th {
	font-family: var(--ff-body);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--tam-muted);
	border-bottom-color: var(--tam-line-strong);
}

.tam-table tbody tr:hover {
	background: var(--tam-beige-soft);
}