/* =========================================================================
   Alvera — Fase 4b: CSS do artigo individual. Tudo escopado por #alv-article.
   Depende dos tokens de alv-base.css. Patterns 4a → alv-patterns.css.
   ========================================================================= */

/* --- Barra de progresso de leitura --- */
#alv-article .read-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	width: 0;
	background: var(--alvera-orange);
	z-index: 60;
	transition: width .08s linear;
	pointer-events: none;
}

/* --- Hero do artigo --- */
#alv-article .article-hero {
	position: relative;
	background:
		radial-gradient(900px 500px at 80% -20%, rgba(226, 135, 41, .22), transparent 60%),
		radial-gradient(600px 380px at 0% 100%, rgba(254, 249, 231, .08), transparent 55%),
		linear-gradient(180deg, var(--alvera-navy-darker) 0%, var(--alvera-navy) 100%);
	color: #FFFFFF;
	padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
	overflow: hidden;
}
#alv-article .article-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
	pointer-events: none;
}
#alv-article .article-hero .container { position: relative; max-width: 920px; }
#alv-article .breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	font-size: .82rem;
	color: #B5B2C9;
	margin-bottom: 1.5rem;
}
#alv-article .breadcrumbs a { color: var(--alvera-orange); }
#alv-article .breadcrumbs a:hover { color: #FFFFFF; }
#alv-article .breadcrumbs .sep { opacity: .55; }
#alv-article .tag-pill {
	display: inline-block;
	background: rgba(226, 135, 41, .22);
	color: var(--alvera-orange);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: .35rem .8rem;
	border-radius: var(--radius-pill);
	margin-bottom: 1.2rem;
}
#alv-article .article-hero h1 {
	font-family: var(--font-display);
	font-weight: 800;
	color: #FFFFFF;
	font-size: clamp(2rem, 4.2vw, 3.2rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin: 0 0 1rem;
	text-wrap: balance;
}
#alv-article .article-hero .lead {
	color: #CFCDDF;
	font-size: var(--fs-lead);
	max-width: 62ch;
	margin: 0 0 1.75rem;
	text-wrap: pretty;
}
#alv-article .article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: .88rem;
	color: #CFCDDF;
}
#alv-article .article-meta .author { display: flex; align-items: center; gap: .7rem; }
#alv-article .article-meta .avatar {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--alvera-orange), var(--alvera-navy));
	display: grid; place-items: center;
	font-family: var(--font-display);
	font-weight: 800;
	color: #FFFFFF;
	font-size: .9rem;
}
#alv-article .article-meta .avatar span { color: var(--alvera-orange); }
#alv-article .article-meta .author strong { color: #FFFFFF; display: block; font-weight: 700; font-size: .92rem; }
#alv-article .article-meta .author small { color: #B5B2C9; font-size: .78rem; }
#alv-article .article-meta .pill { display: inline-flex; align-items: center; gap: .4rem; color: #CFCDDF; }
#alv-article .article-meta .pill svg { width: 16px; height: 16px; }

/* --- Player de podcast --- */
#alv-article .podcast-block {
	margin-top: clamp(-2.5rem, -3vw, -2rem);
	position: relative;
	z-index: 2;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
#alv-article .podcast-card {
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 1.2rem 1.4rem;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1.2rem;
	align-items: center;
}
#alv-article audio { display: none; }
#alv-article .pod-art {
	width: 72px; height: 72px;
	border-radius: var(--radius-md);
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 6px, rgba(255,255,255,.14) 6px 12px),
		linear-gradient(135deg, var(--alvera-navy), var(--alvera-navy-darker));
	display: grid; place-items: center;
	color: var(--alvera-orange);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .72rem;
	text-align: center;
	line-height: 1.15;
	padding: .4rem;
	letter-spacing: 0.02em;
}
#alv-article .pod-meta { min-width: 0; }
#alv-article .pod-eyebrow {
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--alvera-orange-dark);
	margin-bottom: .25rem;
}
#alv-article .pod-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1rem;
	color: var(--alvera-navy-darker);
	margin: 0;
	line-height: 1.3;
	text-wrap: balance;
	letter-spacing: -0.015em;
}
#alv-article .pod-progress {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-top: .55rem;
	font-size: .74rem;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}
#alv-article .pod-bar {
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: var(--color-border);
	position: relative;
	cursor: pointer;
}
#alv-article .pod-bar::after {
	content: "";
	position: absolute;
	inset: 0 calc(100% - var(--pod-pct, 0%)) 0 0;
	background: var(--alvera-orange);
	border-radius: 999px;
}
#alv-article .pod-bar::before {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--pod-pct, 0%);
	transform: translate(-50%, -50%);
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--alvera-orange);
	box-shadow: 0 2px 6px rgba(226, 135, 41, .5);
}
#alv-article .pod-actions { display: flex; align-items: center; gap: .55rem; }
#alv-article .pod-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--alvera-navy-darker);
	width: 36px; height: 36px;
	border-radius: 50%;
	display: grid; place-items: center;
	cursor: pointer;
	transition: background .15s, transform .12s;
	flex-shrink: 0;
}
#alv-article .pod-btn:hover { background: var(--color-bg-alt); color: var(--alvera-navy-darker); }
#alv-article .pod-btn:active { transform: scale(.95); }
#alv-article .pod-btn svg { width: 20px; height: 20px; }
#alv-article .pod-btn--play {
	width: 52px; height: 52px;
	background: var(--alvera-orange);
	color: #FFFFFF;
	box-shadow: 0 6px 18px rgba(226, 135, 41, .42);
}
#alv-article .pod-btn--play:hover { background: var(--alvera-orange-dark); color: #FFFFFF; }
#alv-article .pod-btn--play svg { width: 24px; height: 24px; margin-left: 2px; }
#alv-article .pod-btn--play.is-playing svg { margin-left: 0; }
#alv-article .pod-rate {
	appearance: none;
	border: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	color: var(--alvera-navy-darker);
	font: inherit;
	font-size: .82rem;
	font-weight: 700;
	border-radius: var(--radius-md);
	padding: .35rem .55rem;
	cursor: pointer;
}
#alv-article .pod-volume { display: flex; align-items: center; gap: .4rem; }
#alv-article .pod-volume svg { width: 18px; height: 18px; color: var(--color-text-muted); }
#alv-article .pod-volume input[type="range"] {
	appearance: none;
	width: 70px; height: 3px;
	background: var(--color-border);
	border-radius: 999px;
	outline: 0;
}
#alv-article .pod-volume input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--alvera-orange);
	cursor: pointer;
}
#alv-article .pod-volume input[type="range"]::-moz-range-thumb {
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--alvera-orange);
	border: 0;
	cursor: pointer;
}

/* Player fixo (sticky) */
#alv-article .podcast-sticky {
	position: fixed;
	left: 16px; right: 16px;
	bottom: 16px;
	z-index: 45;
	background: var(--alvera-navy-darker);
	color: #FFFFFF;
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 50px rgba(0,0,0,.35);
	border: 1px solid rgba(255,255,255,.08);
	padding: .85rem 1rem;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: center;
	max-width: 1180px;
	margin-inline: auto;
	transform: translateY(140%);
	opacity: 0;
	transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .25s;
	pointer-events: none;
}
#alv-article .podcast-sticky.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
#alv-article .podcast-sticky .pod-art {
	width: 52px; height: 52px;
	font-size: .62rem;
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 6px, rgba(255,255,255,.1) 6px 12px),
		linear-gradient(135deg, #3A3680, #15133A);
}
#alv-article .podcast-sticky .pod-eyebrow { color: var(--alvera-orange); }
#alv-article .podcast-sticky .pod-title { color: #FFFFFF; font-size: .92rem; }
#alv-article .podcast-sticky .pod-progress { color: #B5B2C9; }
#alv-article .podcast-sticky .pod-bar { background: rgba(255,255,255,.15); }
#alv-article .podcast-sticky .pod-btn { color: #FFFFFF; }
#alv-article .podcast-sticky .pod-btn:hover { background: rgba(255,255,255,.08); color: #FFFFFF; }
#alv-article .podcast-sticky .pod-btn--play { background: var(--alvera-orange); color: #FFFFFF; }
#alv-article .podcast-sticky .pod-rate { background: rgba(255,255,255,.08); color: #FFFFFF; border-color: rgba(255,255,255,.14); }
#alv-article .podcast-sticky .pod-volume svg { color: rgba(255,255,255,.7); }
#alv-article .podcast-sticky .pod-volume input[type="range"] { background: rgba(255,255,255,.18); }
#alv-article .podcast-sticky .pod-close {
	background: transparent;
	border: 0;
	color: rgba(255,255,255,.6);
	width: 28px; height: 28px;
	border-radius: 50%;
	cursor: pointer;
	display: grid; place-items: center;
	font-size: 1.1rem;
	line-height: 1;
}
#alv-article .podcast-sticky .pod-close:hover { background: rgba(255,255,255,.08); color: #FFFFFF; }
/* Exceção consciente: .wa-float vem do [alv_site_footer], fora de #alv-article. */
body.has-sticky-pod .wa-float { bottom: 120px; }

/* --- Layout artigo + TOC --- */
#alv-article .article-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
}
#alv-article .article-toc { position: relative; }
#alv-article .toc-label {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 1rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--color-border);
}
#alv-article .toc-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
#alv-article .toc-list a {
	display: block;
	padding: .55rem .85rem .55rem 1rem;
	font-size: .88rem;
	line-height: 1.4;
	color: var(--color-text-muted);
	font-weight: 600;
	border-left: 2px solid var(--color-border);
	transition: color .15s, border-color .15s, background .15s;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
#alv-article .toc-list a:hover {
	color: var(--alvera-orange-dark);
	border-left-color: var(--alvera-orange);
	background: var(--alvera-cream);
}
#alv-article .toc-list a.is-active {
	color: var(--alvera-navy-darker);
	border-left-color: var(--alvera-orange);
	font-weight: 800;
	background: var(--alvera-cream);
}
#alv-article .toc-list a .num {
	display: inline-block;
	font-size: .72rem;
	font-weight: 800;
	color: var(--color-text-muted);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	margin-right: .45rem;
}
#alv-article .toc-list a.is-active .num { color: var(--alvera-orange-dark); }
#alv-article .share-row { padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
#alv-article .share-row p {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 .9rem;
}
#alv-article .share-btns { display: flex; flex-wrap: wrap; gap: .45rem; }
#alv-article .share-btn {
	width: 38px; height: 38px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	color: var(--alvera-navy-darker);
	cursor: pointer;
	transition: transform .12s, background .15s, color .15s, border-color .15s;
}
#alv-article .share-btn:hover { transform: translateY(-2px); }
#alv-article .share-btn svg { width: 17px; height: 17px; }
#alv-article .share-btn[data-net="facebook"]:hover { background: #1877F2; color: #FFFFFF; border-color: #1877F2; }
#alv-article .share-btn[data-net="whatsapp"]:hover { background: #25D366; color: #FFFFFF; border-color: #25D366; }
#alv-article .share-btn[data-net="linkedin"]:hover { background: #0A66C2; color: #FFFFFF; border-color: #0A66C2; }
#alv-article .share-btn[data-net="twitter"]:hover { background: #0F1419; color: #FFFFFF; border-color: #0F1419; }
#alv-article .share-btn[data-net="copy"]:hover { background: var(--alvera-navy); color: #FFFFFF; border-color: var(--alvera-navy); }

/* --- Corpo do artigo (prosa) --- */
#alv-article .article-body { max-width: 720px; min-width: 0; }
#alv-article .article-body > * + * { margin-top: 1.25rem; }
#alv-article .article-body p {
	font-size: 1.06rem;
	line-height: 1.72;
	color: #2A2A2A;
	text-wrap: pretty;
}
#alv-article .article-body h2 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	color: var(--alvera-navy-darker);
	margin-top: 3rem;
	margin-bottom: 1rem;
	scroll-margin-top: 100px;
	text-wrap: balance;
	letter-spacing: -0.02em;
}
#alv-article .article-body h3 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.18rem;
	color: var(--alvera-navy-darker);
	margin-top: 2rem;
	margin-bottom: .65rem;
	letter-spacing: -0.015em;
}
#alv-article .article-body ul,
#alv-article .article-body ol {
	padding-left: 1.5rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: #2A2A2A;
}
#alv-article .article-body li { margin-bottom: .55rem; }
#alv-article .article-body a:not(.btn) {
	color: var(--alvera-orange-dark);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(226, 135, 41, .35);
	text-underline-offset: 3px;
}
#alv-article .article-body a:not(.btn):hover { text-decoration-color: var(--alvera-orange-dark); }
#alv-article .article-body strong { color: var(--alvera-navy-darker); font-weight: 700; }
#alv-article .article-body blockquote,
#alv-article .article-body .wp-block-quote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--alvera-cream);
	border-left: 4px solid var(--alvera-orange);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-weight: 500;
	font-size: 1.15rem;
	color: var(--alvera-navy-darker);
	line-height: 1.5;
	text-wrap: pretty;
}
#alv-article .article-body blockquote p,
#alv-article .article-body .wp-block-quote p { font-size: inherit; color: inherit; margin: 0 0 .5rem; }
#alv-article .article-body .wp-block-quote cite {
	display: block;
	font-size: .85rem;
	font-weight: 700;
	font-style: normal;
	color: var(--color-text-muted);
}
#alv-article .article-body .wp-block-table { overflow-x: auto; margin: 1.5rem 0; }
#alv-article .article-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
#alv-article .article-body th,
#alv-article .article-body td {
	padding: .85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}
#alv-article .article-body th {
	background: var(--alvera-navy-dark);
	color: #FFFFFF;
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
#alv-article .article-body tbody tr:nth-child(even) { background: var(--color-bg-alt); }
#alv-article .article-body tbody tr:hover { background: var(--alvera-cream); }
#alv-article .article-body figure { margin: 2rem 0; }
#alv-article .article-body img { border-radius: var(--radius-md); }
#alv-article .article-body figcaption,
#alv-article .article-body .wp-element-caption {
	font-size: .85rem;
	color: var(--color-text-muted);
	margin-top: .75rem;
	text-align: center;
	font-style: italic;
}

/* --- Tags do artigo --- */
#alv-article .article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 2.5rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border);
}
#alv-article .article-tags a {
	display: inline-block;
	padding: .35rem .8rem;
	border-radius: var(--radius-pill);
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	font-size: .82rem;
	font-weight: 700;
	transition: background .15s, color .15s;
}
#alv-article .article-tags a:hover { background: var(--alvera-cream); color: var(--alvera-orange-dark); }

/* --- Bio do autor --- */
#alv-article .author-bio {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	background: linear-gradient(180deg, #FFFFFF, var(--color-bg-alt));
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
	margin-top: 2rem;
	align-items: start;
}
#alv-article .author-bio .photo {
	width: 80px; height: 80px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--alvera-orange), var(--alvera-navy));
	display: grid; place-items: center;
	color: #FFFFFF;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}
#alv-article .author-bio .photo span { color: var(--alvera-orange); }
#alv-article .author-bio h4 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--alvera-navy-darker);
	margin: 0 0 .35rem;
}
#alv-article .author-bio .role {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--alvera-orange-dark);
	margin: 0 0 .5rem;
}
#alv-article .author-bio p:not(.role) { color: var(--color-text-muted); font-size: .95rem; margin: 0 0 .75rem; }

/* --- Artigos relacionados --- */
#alv-article .related-section {
	padding: clamp(3rem, 6vw, 5rem) 0;
	background: var(--color-bg-alt);
}
#alv-article .blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}
#alv-article .blog-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
#alv-article .blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
#alv-article .blog-card .thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 16/10;
	background:
		repeating-linear-gradient(45deg, rgba(45, 42, 95, .06) 0 10px, rgba(45, 42, 95, .1) 10px 20px),
		var(--alvera-navy-soft);
	color: var(--alvera-navy);
	font-size: .8rem;
	padding: 1rem;
	text-align: center;
}
#alv-article .blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
#alv-article .blog-card .body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; flex-grow: 1; }
#alv-article .blog-card .tag {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--alvera-orange-dark);
}
#alv-article .blog-card h3 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.18rem;
	margin: 0;
	line-height: 1.22;
	letter-spacing: -0.015em;
}
#alv-article .blog-card h3 a { color: var(--alvera-navy-darker); }
#alv-article .blog-card h3 a:hover { color: var(--alvera-orange-dark); }
#alv-article .blog-card p { font-size: .92rem; color: var(--color-text-muted); margin: 0; flex-grow: 1; }
#alv-article .blog-card .meta {
	display: flex;
	gap: .8rem;
	font-size: .8rem;
	color: var(--color-text-muted);
	align-items: center;
	margin-top: auto;
	padding-top: .75rem;
	border-top: 1px solid var(--color-border);
}
#alv-article .blog-card .meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .4; }
#alv-article .blog-card .read {
	margin-top: .5rem;
	font-weight: 700;
	font-size: .88rem;
	color: var(--alvera-orange-dark);
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
#alv-article .blog-card .read::after { content: "→"; transition: transform .2s ease; }
#alv-article .blog-card:hover .read::after { transform: translateX(3px); }

/* --- CTA banner --- */
#alv-article .cta-banner {
	background: var(--alvera-navy-dark);
	color: #FFFFFF;
	border-radius: var(--radius-lg);
	padding: clamp(2.5rem, 5vw, 4rem);
	display: grid;
	gap: 2rem;
	align-items: center;
	position: relative;
	overflow: hidden;
}
#alv-article .cta-banner::before {
	content: "";
	position: absolute;
	right: -80px; top: -80px;
	width: 320px; height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(226, 135, 41, .35), transparent 65%);
}
#alv-article .cta-banner h2 { color: #FFFFFF; margin-bottom: .6rem; }
#alv-article .cta-banner p { color: #CFCDDF; margin: 0; }
#alv-article .cta-banner .ctas { display: flex; flex-wrap: wrap; gap: .8rem; position: relative; }

/* --- Responsivo --- */
@media (min-width: 800px) {
	#alv-article .cta-banner { grid-template-columns: 1.5fr auto; }
}
@media (min-width: 1024px) {
	#alv-article .article-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 4rem; }
	#alv-article .article-toc {
		position: sticky;
		top: 100px;
		align-self: start;
		max-height: calc(100vh - 130px);
		overflow-y: auto;
		padding-right: 8px;
	}
}
@media (max-width: 720px) {
	#alv-article .podcast-card { grid-template-columns: auto 1fr; }
	#alv-article .podcast-card .pod-actions {
		grid-column: 1 / -1;
		justify-content: space-between;
		padding-top: .5rem;
		border-top: 1px solid var(--color-border);
	}
	#alv-article .podcast-sticky { grid-template-columns: auto 1fr; }
	#alv-article .podcast-sticky .pod-actions {
		grid-column: 1 / -1;
		justify-content: space-between;
		border-top: 1px solid rgba(255,255,255,.1);
		padding-top: .55rem;
	}
	#alv-article .podcast-sticky .pod-rate,
	#alv-article .podcast-sticky .pod-volume { display: none; }
	body.has-sticky-pod .wa-float { bottom: 160px; }
}