/* ==========================================================================
   AMŽINAS TAKAS — turinio blokai
   Naudojami tinklaraščio įrašuose ir puslapiuose (žr. CONTENT-SPEC.md).
   Priklauso nuo main.css kintamųjų.
   ========================================================================== */

.prose > * + * { margin-top: 0; }

/* ------------------------------------------------------------- Lentelė -- */

.at-table-wrap {
	margin: 40px 0;
	overflow-x: auto;
	border: var(--line);
	-webkit-overflow-scrolling: touch;
}

.at-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: .93rem;
	background: var(--white);
}
.at-table caption {
	caption-side: top;
	text-align: left;
	padding: 18px 20px;
	background: var(--stone-50);
	border-bottom: var(--line);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--granite-500);
}
.at-table th,
.at-table td {
	text-align: left;
	padding: 13px 20px;
	border-bottom: 1px solid var(--stone-100);
	vertical-align: top;
}
.at-table thead th {
	background: var(--granite-900);
	color: var(--white);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-bottom: 0;
	white-space: nowrap;
}
.at-table tbody tr:last-child td { border-bottom: 0; }
.at-table tbody tr:nth-child(even) { background: var(--stone-50); }
.at-table tbody tr:hover { background: var(--sand-100); }
.at-table td.num,
.at-table th.num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-weight: 700;
	color: var(--granite-900);
}

/* ------------------------------------------------------ Info kortelės -- */

.at-cards {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin: 40px 0;
	background: var(--stone-200);
	border: 1px solid var(--stone-200);
}
.at-cards .at-card {
	background: var(--white);
	padding: 26px 24px;
	border: 0;
	border-radius: 0;
	transition: background .3s var(--ease);
}
.at-cards .at-card::after { content: none; }
.at-cards .at-card:hover { background: var(--stone-50); transform: none; box-shadow: none; }
.at-cards .at-card h3 {
	font-family: var(--font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--copper);
	margin-bottom: 12px;
}
.at-cards .at-card p {
	font-size: .93rem;
	color: var(--granite-500);
	margin: 0;
}
.at-cards .at-card p + p { margin-top: .7em; }

/* -------------------------------------------------------- Statistikos -- */

.at-stats {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	margin: 44px 0;
	background: var(--granite-900);
	color: var(--white);
}
.at-stat {
	padding: 32px 26px;
	border-right: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.at-stat:last-child { border-right: 0; }
.at-stat__num {
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 4vw, 2.9rem);
	font-weight: 600;
	line-height: 1;
	color: var(--sand-300);
	font-variant-numeric: tabular-nums;
}
.at-stat__label {
	font-size: .8rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, .68);
}

@media (max-width: 620px) {
	.at-stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.at-stat:last-child { border-bottom: 0; }
}

/* --------------------------------------------------- Patikros sąrašas -- */

.at-checklist {
	margin: 40px 0;
	padding: 28px 30px;
	background: var(--stone-50);
	border-left: 3px solid var(--moss-700);
}
.at-checklist h3 {
	font-family: var(--font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--moss-700);
	margin-bottom: 18px;
}
.at-checklist ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.at-checklist li {
	position: relative;
	padding-left: 28px;
	font-size: .94rem;
	color: var(--granite-800);
	margin: 0;
}
.at-checklist li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .5em;
	width: 12px;
	height: 6px;
	border-left: 2px solid var(--copper);
	border-bottom: 2px solid var(--copper);
	transform: rotate(-45deg);
}

/* -------------------------------------------------------- Akcentai ----- */

.at-callout {
	margin: 36px 0;
	padding: 22px 26px;
	background: var(--sand-100);
	border-left: 3px solid var(--sand-500);
	font-size: .96rem;
}
.at-callout p { margin: 0; }
.at-callout p + p { margin-top: .8em; }
.at-callout strong { color: var(--granite-900); }

.at-callout--warn {
	background: #FBF0EC;
	border-left-color: var(--copper);
}

/* -------------------------------------------------- Privalumai / minusai */

.at-proscons {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: 40px 0;
	background: var(--stone-200);
	border: 1px solid var(--stone-200);
}
.at-proscons__col {
	background: var(--white);
	padding: 26px 28px;
}
.at-proscons__col h3 {
	font-family: var(--font-body);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.at-proscons__col--pro h3 { color: var(--moss-700); }
.at-proscons__col--con h3 { color: var(--copper-dark); }
.at-proscons__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.at-proscons__col li {
	position: relative;
	padding-left: 22px;
	font-size: .93rem;
	color: var(--granite-500);
	margin: 0;
}
.at-proscons__col li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 11px;
	height: 1px;
	background: var(--granite-300);
}
.at-proscons__col--pro li::before { background: var(--moss-500); }
.at-proscons__col--con li::before { background: var(--copper); }

/* --------------------------------------------------------- Žingsniai --- */

.at-steps-list {
	list-style: none;
	counter-reset: at-step;
	margin: 40px 0;
	padding: 0;
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

/* Plačiame puslapyje viena ilga eilučių juosta atrodo tuščiai — žingsnius
   dėliojame kortelėmis. Keturi žingsniai telpa į vieną eilutę. */
@media (min-width: 760px) {
	.at-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.at-steps-list:has( > li:nth-child(4):last-child ) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.at-steps-list:has( > li:nth-child(3):last-child ) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.at-steps-list > li {
	counter-increment: at-step;
	position: relative;
	padding: 22px 22px 24px;
	border: var(--line);
	border-top: 2px solid var(--sand-500);
	background: var(--white);
	margin: 0;
}
.at-steps-list > li::before {
	content: counter(at-step, decimal-leading-zero);
	display: block;
	margin-bottom: 12px;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	color: var(--copper);
	font-variant-numeric: tabular-nums;
}
.at-steps-list h3 {
	font-size: 1.2rem;
	margin: 0 0 .35em;
}
.at-steps-list p {
	margin: 0;
	font-size: .95rem;
	color: var(--granite-500);
}

/* --------------------------------------------------------------- CTA --- */

.at-cta {
	position: relative;
	margin: 52px 0;
	padding: clamp(30px, 5vw, 46px);
	background: var(--granite-900);
	color: rgba(255, 255, 255, .78);
	overflow: hidden;
}
.at-cta::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--moss-700) 0 50%, var(--sand-500) 50% 100%);
}
.at-cta h3 {
	color: var(--white);
	font-size: clamp(1.5rem, 3vw, 2.05rem);
	font-weight: 400;
	margin-bottom: .4em;
	max-width: 24ch;
}
.at-cta p {
	max-width: 52ch;
	font-size: .98rem;
}
.at-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
}
.at-cta .btn {
	background: var(--white);
	border-color: var(--white);
	color: var(--granite-900);
}
.at-cta .btn:hover { color: var(--white); border-color: var(--copper); }
.at-cta .btn--ghost {
	background: transparent;
	color: var(--white);
	border-color: rgba(255, 255, 255, .4);
}

/* --------------------------------------------------------------- DUK --- */

.at-faq {
	margin: 56px 0 0;
	padding-top: 40px;
	border-top: 2px solid var(--granite-900);
}
.at-faq > h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: 28px;
}
.at-faq details {
	border-bottom: var(--line);
}
.at-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 44px 20px 0;
	position: relative;
	font-family: var(--font-display);
	font-size: 1.18rem;
	color: var(--granite-900);
	transition: color .25s var(--ease);
}
.at-faq summary::-webkit-details-marker { display: none; }
.at-faq summary:hover { color: var(--copper); }
.at-faq summary::after,
.at-faq summary::before {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	background: var(--copper);
	transition: transform .3s var(--ease-sharp), opacity .3s var(--ease);
}
.at-faq summary::before { width: 15px; height: 1.5px; margin-top: -.75px; }
.at-faq summary::after { width: 1.5px; height: 15px; margin-top: -7.5px; right: 14.75px; }
.at-faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.at-faq details > div {
	padding: 0 44px 24px 0;
	font-size: .97rem;
	color: var(--granite-500);
	animation: at-faq-open .35s var(--ease-sharp);
}
.at-faq details > div p:last-child { margin-bottom: 0; }

@keyframes at-faq-open {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------- Skaitymo laikas ----- */

.at-reading {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--granite-500);
}
.at-reading::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--copper);
}

/* ------------------------------------------------------- Turinys (TOC) - */

.at-toc {
	margin: 40px 0;
	padding: 26px 28px;
	background: var(--stone-50);
	border: var(--line);
}
.at-toc h2 {
	font-family: var(--font-body);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--granite-500);
	margin-bottom: 16px;
}
.at-toc ol {
	list-style: none;
	counter-reset: at-toc;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 36px;
}
.at-toc li {
	counter-increment: at-toc;
	margin: 0 0 9px;
	break-inside: avoid;
}
.at-toc a {
	display: flex;
	gap: 10px;
	font-size: .91rem;
	text-decoration: none;
	color: var(--granite-800);
}
.at-toc a::before {
	content: counter(at-toc, decimal-leading-zero);
	color: var(--sand-500);
	font-variant-numeric: tabular-nums;
	font-size: .78rem;
	padding-top: 2px;
}
.at-toc a:hover { color: var(--copper); }

@media (max-width: 620px) {
	.at-toc ol { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.at-faq details > div { animation: none; }
}

/* ================================== Importuotas turinys be klasių ======
   Kai administratorius rašo tekstą redaktoriuje, jis neturi .at-* klasių.
   Šios taisyklės suteikia jam tą pačią išvaizdą automatiškai.
   ====================================================================== */

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 36px 0;
	font-size: .96rem;
	background: var(--white);
	border: var(--line);
}
.prose table th,
.prose table td {
	text-align: left;
	padding: 13px 18px;
	border-bottom: 1px solid var(--stone-100);
	vertical-align: top;
}
.prose table thead th {
	background: var(--granite-900);
	color: var(--white);
	font-family: var(--font-display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 0;
}
.prose table tbody tr:last-child td { border-bottom: 0; }
.prose table tbody tr:nth-child(even) { background: var(--stone-50); }

/* Paskutinis stulpelis dažniausiai yra kaina. */
.prose table td:last-child {
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Lentelė siaurame ekrane — slenka pati, ne visas puslapis. */
@media (max-width: 720px) {
	.prose table { display: block; overflow-x: auto; }
}

/* Sąrašai be klasių. */
.prose > ul {
	list-style: none;
	padding-left: 0;
}
.prose > ul > li {
	position: relative;
	padding-left: 26px;
	margin-bottom: .6em;
}
.prose > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 13px;
	height: 2px;
	background: var(--copper);
}

/* Paskutinė pastraipa dažnai yra kvietimas veikti. */
.prose > h2 + p > strong:only-child {
	display: block;
	font-size: 1.1rem;
	color: var(--granite-900);
}

/* Lentelė apvalkale neturi savo paraščių ir rėmelio.
   `.prose table` prideda 36 px iš viršaus ir apačios, o kadangi
   `.at-table-wrap` dėl `overflow-x` sudaro atskirą bloko kontekstą,
   tos paraštės nesusilieja ir matomos kaip tušti tarpai rėmelio viduje. */
.at-table-wrap > table,
.prose .at-table-wrap > table {
	margin: 0;
	border: 0;
}