/* =========================================================================
   SUMBRA — Ideas Article
   Scoped to single Ideas articles only.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero.
   ------------------------------------------------------------------------- */
.sumbra-idea-hero { padding-top: var(--sumbra-space-xl); padding-bottom: var(--sumbra-space-lg); }
.sumbra-idea-hero__breadcrumb { font-size: 0.85rem; color: var(--sumbra-piedra); margin-bottom: var(--sumbra-space-md); }
.sumbra-idea-hero__breadcrumb a { color: var(--sumbra-piedra); }
.sumbra-idea-hero__breadcrumb a:hover { color: var(--sumbra-carbon); }
.sumbra-idea-hero__title { max-width: 20ch; margin-top: var(--sumbra-space-2xs); }
.sumbra-idea-hero__dek { max-width: 62ch; margin-top: var(--sumbra-space-sm); }
.sumbra-idea-hero__meta { font-size: 0.85rem; color: var(--sumbra-piedra); margin-top: var(--sumbra-space-md); display: flex; gap: var(--sumbra-space-xs); }
.sumbra-idea-hero__media { margin-top: var(--sumbra-space-lg); aspect-ratio: 16/9; overflow: hidden; }
.sumbra-idea-hero__media .sumbra-media__img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   Mobile TOC — native <details>, zero JS. Hidden on desktop.
   ------------------------------------------------------------------------- */
.sumbra-idea-toc--mobile { display: none; }
.sumbra-idea-toc--mobile details { border-top: 1px solid var(--sumbra-lino); border-bottom: 1px solid var(--sumbra-lino); padding: var(--sumbra-space-sm) 0; margin-bottom: var(--sumbra-space-lg); }
.sumbra-idea-toc--mobile summary {
	font-family: var(--sumbra-font-body);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--sumbra-carbon);
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: 10px 0;
}
.sumbra-idea-toc--mobile ol { list-style: none; margin: var(--sumbra-space-sm) 0 0; padding: 0; }
.sumbra-idea-toc--mobile ol.sumbra-idea-toc--numbered { counter-reset: sumbra-toc; }
.sumbra-idea-toc--mobile li { padding: 0; border-top: 1px solid var(--sumbra-lino); min-height: 44px; display: flex; align-items: stretch; }
.sumbra-idea-toc--mobile li:first-child { border-top: none; }
.sumbra-idea-toc--mobile ol.sumbra-idea-toc--numbered li { counter-increment: sumbra-toc; }
.sumbra-idea-toc--mobile ol.sumbra-idea-toc--numbered li::before {
	content: counter(sumbra-toc, decimal-leading-zero) / "";
	color: var(--sumbra-piedra);
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: center;
	padding-right: 10px;
}
.sumbra-idea-toc--mobile a {
	color: var(--sumbra-carbon);
	display: flex;
	align-items: center;
	flex: 1;
	min-height: 44px;
}

/* -------------------------------------------------------------------------
   Layout: desktop sticky rail + article body.
   ------------------------------------------------------------------------- */
.sumbra-idea-layout__grid {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--sumbra-space-xl);
	align-items: stretch;
}
.sumbra-idea-toc--desktop { min-width: 0; }
.sumbra-idea-toc__sticky { position: sticky; top: calc(var(--sumbra-header-height, 84px) + var(--sumbra-space-md)); }
.sumbra-idea-toc__sticky ol { list-style: none; margin: var(--sumbra-space-sm) 0 0; padding: 0; }
.sumbra-idea-toc__sticky ol.sumbra-idea-toc--numbered { counter-reset: sumbra-toc-d; }
.sumbra-idea-toc__sticky li { padding: 6px 0; font-size: 0.9rem; }
.sumbra-idea-toc__sticky ol.sumbra-idea-toc--numbered li { counter-increment: sumbra-toc-d; }
.sumbra-idea-toc__sticky ol.sumbra-idea-toc--numbered li::before { content: counter(sumbra-toc-d, decimal-leading-zero) '  ' / ""; color: var(--sumbra-piedra); font-variant-numeric: tabular-nums; }
.sumbra-idea-toc__sticky a { color: var(--sumbra-piedra); }
.sumbra-idea-toc__sticky a:hover { color: var(--sumbra-carbon); }

.sumbra-idea-body { min-width: 0; max-width: 72ch; }
.sumbra-idea-body p { font-size: 1.05rem; line-height: 1.7; color: var(--sumbra-carbon); margin-bottom: var(--sumbra-space-md); }
@media (min-width: 1024px) {
	.sumbra-idea-body p { font-size: 1.2rem; }
}
.sumbra-idea-body > p:first-of-type { font-family: var(--sumbra-font-display); font-size: 1.3rem; }

/* Auto-numbered H2 sections — an explicit per-article toggle
   (.sumbra-idea-body--numbered), not always on. Numbering is computed at
   render time from real headings, so reordering sections in the editor
   can never leave a stale number. Base heading quality (size, spacing,
   scroll offset) applies whether or not numbering is enabled. */
.sumbra-idea-body--numbered { counter-reset: sumbra-section; }
.sumbra-idea-body h2 {
	font-family: var(--sumbra-font-display);
	font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.6rem);
	margin-top: var(--sumbra-space-xl);
	margin-bottom: var(--sumbra-space-sm);
	scroll-margin-top: calc(var(--sumbra-header-height, 84px) + 16px);
}
.sumbra-idea-body--numbered h2 { counter-increment: sumbra-section; }
.sumbra-idea-body--numbered h2::before {
	/* The "/ ''" gives this generated content empty alternative text, so
	   screen readers that expose ::before content don't announce the
	   number a second time alongside the heading's own accessible name. */
	content: counter(sumbra-section, decimal-leading-zero) / "";
	display: block;
	font-family: var(--sumbra-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--sumbra-piedra);
	margin-bottom: var(--sumbra-space-xs);
}
.sumbra-idea-hero__caption { font-size: 0.85rem; color: var(--sumbra-piedra); margin-top: var(--sumbra-space-xs); }
.sumbra-idea-body h3 { font-family: var(--sumbra-font-display); font-size: 1.4rem; margin-top: var(--sumbra-space-lg); margin-bottom: var(--sumbra-space-xs); }
.sumbra-idea-body figure { margin: var(--sumbra-space-lg) 0; }
.sumbra-idea-body img { width: 100%; height: auto; display: block; }
.sumbra-idea-body figcaption { font-size: 0.85rem; color: var(--sumbra-piedra); margin-top: var(--sumbra-space-2xs); }
.sumbra-idea-body ul, .sumbra-idea-body ol { padding-left: 1.2em; margin-bottom: var(--sumbra-space-md); }
.sumbra-idea-body li { margin-bottom: 6px; line-height: 1.6; }

@media (max-width: 900px) {
	.sumbra-idea-toc--mobile { display: block; }
	.sumbra-idea-toc--desktop { display: none; }
	.sumbra-idea-layout__grid { grid-template-columns: 1fr; }
	.sumbra-idea-body { max-width: none; }
}

/* -------------------------------------------------------------------------
   Editorial primitives.
   ------------------------------------------------------------------------- */
.sumbra-visual-sequence.wp-block-columns { gap: 4px; margin: var(--sumbra-space-lg) 0; }
.sumbra-visual-sequence .wp-block-column { margin: 0; }
.sumbra-visual-sequence > .wp-block-column > figure.wp-block-image {
	aspect-ratio: 4/3;
	overflow: hidden;
	margin: 0;
}
.sumbra-visual-sequence > .wp-block-column > figure.wp-block-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}
.sumbra-visual-sequence__label { font-size: 0.85rem; color: var(--sumbra-piedra); margin-top: var(--sumbra-space-2xs); }
.sumbra-visual-sequence__label strong { display: block; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--sumbra-carbon); margin-bottom: 2px; }

.sumbra-image-pair.wp-block-columns { gap: var(--sumbra-space-md); margin: var(--sumbra-space-lg) 0; }
.sumbra-image-pair img { width: 100%; height: auto; }

.sumbra-image-text.wp-block-columns { gap: var(--sumbra-space-lg); align-items: center; margin: var(--sumbra-space-xl) 0; }
.sumbra-image-text img { width: 100%; height: auto; }
.sumbra-image-text h3 { margin-top: 0; }
@media (max-width: 700px) {
	.sumbra-image-text.wp-block-columns { flex-direction: column; }
}

.sumbra-solution-link { margin: var(--sumbra-space-md) 0; }
.sumbra-solution-link a { font-weight: 600; }

.sumbra-pull-observation {
	font-family: var(--sumbra-font-display);
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.4;
	color: var(--sumbra-carbon);
	max-width: 34ch;
	margin: var(--sumbra-space-xl) 0;
	padding-left: var(--sumbra-space-md);
	border-left: 2px solid var(--sumbra-carbon);
}

.sumbra-decision-framework.wp-block-columns { gap: var(--sumbra-space-md); margin: var(--sumbra-space-lg) 0; }
.sumbra-decision-framework .wp-block-column { border-top: 1px solid var(--sumbra-lino); padding-top: var(--sumbra-space-sm); }
.sumbra-decision-framework p { font-size: 0.95rem; }
.sumbra-decision-framework strong { display: block; font-family: var(--sumbra-font-display); font-size: 1.2rem; margin-bottom: 4px; }

.wp-block-table.is-style-sumbra-decision-table table { border-collapse: collapse; width: 100%; }
.wp-block-table.is-style-sumbra-decision-table th,
.wp-block-table.is-style-sumbra-decision-table td { border: none; border-bottom: 1px solid var(--sumbra-lino); padding: 12px 16px 12px 0; text-align: left; }
.wp-block-table.is-style-sumbra-decision-table th { font-family: var(--sumbra-font-body); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sumbra-piedra); font-weight: 600; }

/* Real project evidence. */
.sumbra-article-project {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sumbra-space-lg);
	align-items: center;
	background: var(--sumbra-lino);
	padding: var(--sumbra-space-lg);
	margin: var(--sumbra-space-xl) 0;
}
.sumbra-article-project__media { aspect-ratio: 4/5; overflow: hidden; }
.sumbra-article-project__media .sumbra-media__img { width: 100%; height: 100%; object-fit: cover; }
.sumbra-article-project__title { font-family: var(--sumbra-font-display); font-size: 1.6rem; margin: 4px 0 var(--sumbra-space-xs); }
.sumbra-article-project__location { font-size: 0.85rem; color: var(--sumbra-piedra); margin-bottom: var(--sumbra-space-sm); }
@media (max-width: 700px) {
	.sumbra-article-project { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Related Ideas.
   ------------------------------------------------------------------------- */
.sumbra-idea-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sumbra-space-md); margin-top: var(--sumbra-space-md); }
.sumbra-idea-related__item { display: block; color: inherit; text-decoration: none; }
.sumbra-idea-related__media { aspect-ratio: 4/3; overflow: hidden; margin-bottom: var(--sumbra-space-xs); }
.sumbra-idea-related__media .sumbra-media__img { width: 100%; height: 100%; object-fit: cover; }
.sumbra-idea-related__title { font-family: var(--sumbra-font-display); font-size: 1.1rem; margin: 4px 0; }
.sumbra-idea-related__meta { font-size: 0.8rem; color: var(--sumbra-piedra); margin: 0; }
@media (max-width: 900px) {
	.sumbra-idea-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.sumbra-idea-related__grid { grid-template-columns: 1fr; }
}

/* 5.9.9 — breadcrumb tap targets. */
.sumbra-idea-hero__breadcrumb a { display: inline-block; padding: 12px 2px; margin: -12px -2px; }