/* Practice-mode house promo + share bar. Own file: main.css is already 4.7k lines.
   Tokens come from :root in main.css. Nothing here styles pipeline content.
   Breakpoints: 1024 matches reading.js; 1400 is the width where a third column fits
   (264 rail + 720 article + 240 promo + 2x32 gap + padding) without squeezing the article. */

/* ---------- share bar ---------- */
.ink-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block: var(--space-4) 0; }
.ink-share--end { margin-block: var(--space-10) 0; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.ink-share__label { font-size: var(--text-meta); font-weight: var(--weight-label); color: var(--muted); }
.ink-share__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
/* The end-of-article bar sits INSIDE .ink-article-content, whose `a` colour (0,1,1) and
   `li+li` margin (0,1,2) would otherwise win: recolouring the icons and pushing every
   item after the first down. Selectors below match or beat both (RULES §54/§58). */
.ink-share .ink-share__list li, .ink-article-content .ink-share__list li + li { margin: 0; padding: 0; }
.ink-share .ink-share__btn, .ink-article-content .ink-share__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	border: 1px solid var(--line); border-radius: 50%;
	background: var(--bg); color: var(--text); cursor: pointer; text-decoration: none;
	transition: background-color .15s, color .15s, border-color .15s;
}
.ink-share .ink-share__btn:hover, .ink-article-content .ink-share__btn:hover { background: var(--primary-l); border-color: var(--primary); color: var(--primary-d); }
.ink-share .ink-share__btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ink-share .ink-share__btn[hidden] { display: none; }
.ink-share__list li:has(> [hidden]) { display: none; }
.ink-share__status { font-size: var(--text-meta); color: var(--primary-d); min-height: 1.5em; }

/* ---------- promo card ---------- */
.ink-promo { margin-top: var(--space-8); }
.ink-promo__sticky {
	border: 1px solid var(--line); border-radius: 14px;
	background: linear-gradient(180deg, var(--primary-l), var(--bg) 62%);
	padding: var(--space-4); max-width: 420px; margin-inline: auto;
	font-family: var(--font);
}
.ink-promo__media { display: block; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); color: var(--text); }
.ink-promo__media video, .ink-promo__fig { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ink-promo__len { font: 600 13px var(--font); fill: var(--primary-d); }
.ink-promo__title { margin: var(--space-4) 0 var(--space-2); font-size: 1.125rem; font-weight: var(--weight-heading); line-height: var(--leading-heading); color: var(--ink); }
.ink-promo__text { margin: 0 0 var(--space-4); font-size: var(--text-meta); line-height: var(--leading-ui); color: var(--text); }
.ink-promo__cta {
	display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-4);
	border-radius: 10px; background: var(--primary-d); color: #fff; font-weight: var(--weight-heading); text-decoration: none;
}
.ink-promo__cta:hover { background: var(--primary); color: #fff; }
.ink-promo__cta:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.ink-promo__from { margin: var(--space-3) 0 0; font-size: .8125rem; color: var(--muted); text-align: center; }

/* Phones and tablets: the card follows the article, full width, in normal flow. */
@media (max-width: 1399px) {
	.ink-article-layout > .ink-promo { order: 2; }
}

/* Desktop grid below 1400px: under the article, in the article's own column.
   Without this the grid auto-places the card in the left rail's column. */
@media (min-width: 1024px) and (max-width: 1399px) {
	.ink-article-layout > .ink-promo { grid-column: 1; grid-row: 3; }
	.ink-article-layout.has-left > .ink-promo { grid-column: 2; }
}

/* Wide screens: a third column to the right of the article. The article keeps its width. */
@media (min-width: 1400px) {
	body.ink-has-promo .ink-article-layout { max-width: 1330px; }
	body.ink-has-promo .ink-article-layout.has-left { grid-template-columns: var(--sidebar-width) minmax(0, var(--reading-width)) 240px; }
	body.ink-has-promo .ink-article-layout > .ink-promo { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; margin-top: 0; }
	body.ink-has-promo .ink-promo__sticky { position: sticky; top: var(--sticky-top, 112px); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ink-share__btn { transition: none; }
}
@media print {
	.ink-share, .ink-promo { display: none; }
}