/*
ASANA Article Engine — structural CSS only.

NO brand colors.
NO font families.
NO typography sizes.
NO background colors.
NO shadows.
NO button styling.

ASANA Visual Theme Builder is expected to style:
.asana-article-shell
.asana-article-title
.asana-article-dek
.asana-article-kicker
.asana-breadcrumbs
.asana-article-meta
.asana-article-note
.asana-button
.asana-author
.asana-related-card
and native h1/h2/h3/p/a/table/details elements within the article.
*/

.asana-article-shell {
	width: min(calc(100% - 32px), var(--asana-article-shell-width, 1200px));
	margin-inline: auto;
}

.asana-article-flow {
	width: min(100%, var(--asana-article-content-width, 760px));
	margin-inline: auto;
}

.asana-article-wide {
	width: min(100%, var(--asana-article-wide-width, 1040px));
	margin-inline: auto;
}

.asana-article-section {
	position: relative;
	margin-block: var(--asana-article-section-gap, 56px);
}

.asana-article-header {
	display: grid;
	gap: var(--asana-article-header-gap, 18px);
}

.asana-breadcrumbs,
.asana-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asana-article-inline-gap, 10px);
}

.asana-article-lead-media figure,
.asana-article-media {
	margin-inline: 0;
}

.asana-article-lead-media img,
.asana-article-media img {
	display: block;
	width: 100%;
	height: auto;
}

.asana-article-content > * + * {
	margin-top: var(--asana-article-flow-gap, 1.1em);
}

.asana-article-content h2 {
	margin-top: var(--asana-article-h2-top-gap, 2.2em);
}

.asana-article-content h3 {
	margin-top: var(--asana-article-h3-top-gap, 1.7em);
}

.asana-article-content figure {
	margin-block: var(--asana-article-media-gap, 34px);
}

.asana-article-content table {
	width: 100%;
	border-collapse: collapse;
}

.asana-article-content th,
.asana-article-content td {
	padding: var(--asana-article-table-cell-padding, 10px);
	text-align: left;
	vertical-align: top;
}

.asana-article-content ul,
.asana-article-content ol {
	padding-inline-start: var(--asana-article-list-indent, 1.35em);
}

.asana-article-details > div {
	padding-top: var(--asana-article-details-gap, 14px);
}

.asana-article-toc nav {
	display: grid;
	gap: var(--asana-article-toc-gap, 8px);
	padding-top: var(--asana-article-toc-top-gap, 14px);
}

.asana-toc-link--h3 {
	padding-inline-start: var(--asana-article-toc-child-indent, 18px);
}

.asana-author {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--asana-author-gap, 20px);
}

.asana-author__avatar img {
	display: block;
	width: var(--asana-author-avatar-size, 88px);
	height: var(--asana-author-avatar-size, 88px);
	object-fit: cover;
}

.asana-related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--asana-related-grid-gap, 20px);
}

.asana-related-card img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 760px) {
	.asana-article-shell {
		width: min(calc(100% - 24px), var(--asana-article-shell-width, 1200px));
	}

	.asana-article-section {
		margin-block: var(--asana-article-section-gap-mobile, 40px);
	}

	.asana-author {
		grid-template-columns: 1fr;
	}

	.asana-related-grid {
		grid-template-columns: 1fr;
	}
}


/* v0.3 semantic structure */
.asana-article-surface{position:relative}
.asana-article-details__body{padding-top:14px}
.asana-facts-card{margin-block:38px;padding:clamp(20px,3vw,34px)}
.asana-facts-card>:first-child{margin-top:0!important}
.asana-facts-card ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.asana-author__social{display:flex;flex-wrap:wrap;gap:14px}
.asana-article-content>.asana-key-takeaway,.asana-article-content>.asana-learn,.asana-article-content>.asana-note,.asana-article-content>.asana-tip,.asana-article-content>.asana-definition,.asana-article-content>.asana-sources,.asana-article-content>.asana-callout{margin-block:34px;padding:clamp(20px,3vw,30px)}
@media(max-width:760px){.asana-facts-card ul{grid-template-columns:1fr}}


/* v0.3.1 — automatic Gemstone Library profile */
.asana-gemstone-profile{padding:clamp(24px,4vw,46px)}
.asana-gemstone-profile__top{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:clamp(24px,4vw,48px);align-items:center}
.asana-gemstone-profile__stone{margin:0}
.asana-gemstone-profile__stone img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.asana-gemstone-profile__meanings{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.asana-gemstone-profile__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:30px}
.asana-gemstone-fact{min-width:0;padding:16px 18px}
.asana-gemstone-fact span,.asana-gemstone-fact strong{display:block}
.asana-gemstone-profile__fun{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;margin-top:20px;padding-top:20px}
.asana-gemstone-profile__fun p{margin:0}
.asana-gemstone-intro>p{margin:0}
@media(max-width:760px){
 .asana-gemstone-profile__top{grid-template-columns:1fr}
 .asana-gemstone-profile__stone{max-width:140px}
 .asana-gemstone-profile__facts{grid-template-columns:1fr 1fr}
 .asana-gemstone-profile__fun{grid-template-columns:1fr;gap:5px}
}
@media(max-width:430px){.asana-gemstone-profile__facts{grid-template-columns:1fr}}

/* v0.3.3 — Banner Manager choreography */
.asana-article-content>.asana-article-auto-banner{
	width:min(var(--asana-article-wide-width,1040px),calc(100vw - 32px));
	max-width:none;
	margin:clamp(48px,7vw,82px) 50%;
	transform:translateX(-50%);
}
.asana-article-auto-banner .asana-banner{margin:0}
@media(max-width:760px){
	.asana-article-content>.asana-article-auto-banner{width:calc(100vw - 24px);margin-block:44px}
}


/* v0.3.11 — optional per-post editorial images */
.asana-article-content>.asana-article-editorial-image{
  width:min(var(--asana-article-wide-width,1040px),calc(100vw - 32px));
  max-width:none;
  margin:clamp(52px,7vw,88px) 50%;
  transform:translateX(-50%);
}
.asana-article-editorial-image{margin-inline:0}
.asana-article-editorial-image__img{display:block;width:100%;height:auto}
.asana-article-editorial-image figcaption{margin-top:10px}
.asana-article-gallery{overflow:hidden}
.asana-article-gallery__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(72%,1fr);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;padding-bottom:10px}
.asana-article-gallery__item{scroll-snap-align:start;min-width:0}
.asana-article-gallery__item .asana-article-editorial-image{margin:0}
@media(max-width:760px){
  .asana-article-content>.asana-article-editorial-image{width:calc(100vw - 24px);margin-block:44px}
  .asana-article-gallery__track{grid-auto-columns:88%;gap:12px}
}
