/* The articles: the lists (blog page, categories, tags, search) and one article. Tokens only; logical properties. */

/* ---------- the lists ---------- */
.blog { padding-block-start: var(--wp--preset--spacing--40); }
.page-header--blog { padding-block: var(--wp--preset--spacing--50); }
.page-header__back { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-end: var(--wp--preset--spacing--10); color: rgba(255, 255, 255, 0.82); text-decoration: none; font-weight: var(--wp--custom--weight--strong); font-size: var(--wp--preset--font-size--small); }
.page-header__back:hover { color: var(--wp--custom--tint--lime-bright); }
.icon--back { transform: scaleX(-1); }
[dir="rtl"] .icon--back { transform: none; }
.blog-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: var(--wp--preset--spacing--40); }
.blog-chip {
	display: inline-flex;
	align-items: center;
	min-block-size: 42px;
	padding: 0.3rem 1rem;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-weight: var(--wp--custom--weight--strong);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.blog-chip:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.blog-chip.is-current { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--primary-contrast); }
.blog-list { display: grid; gap: var(--wp--preset--spacing--40); }
.blog-grid { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
	.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.blog-empty { padding: var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radius--large); background: var(--wp--preset--color--surface-alt); text-align: center; color: var(--wp--preset--color--muted); }

/* the card */
.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--custom--shadow--small);
	transition: transform 0.3s cubic-bezier(.2, .8, .3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) {
	.post-card:hover { transform: translateY(-4px); box-shadow: var(--wp--custom--shadow--lift); border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, var(--wp--preset--color--line)); }
	.post-card:hover .post-card__img { transform: scale(1.04); }
	.post-card:hover .post-card__more .icon { transform: translateX(3px); }
	[dir="rtl"] .post-card:hover .post-card__more .icon { transform: scaleX(-1) translateX(3px); }
}
.post-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--wp--custom--gradient--brand); }
.post-card__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2, .8, .3, 1); }
.post-card__art { display: grid; place-items: center; inline-size: 100%; block-size: 100%; color: rgba(255, 255, 255, 0.85); background: radial-gradient(circle at 80% 20%, rgba(155, 225, 93, 0.45), transparent 60%), var(--wp--custom--gradient--brand); }
.post-card__art .icon { inline-size: 3.5rem; block-size: 3.5rem; }
.post-card__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; padding: var(--wp--preset--spacing--30); }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.post-card__cat { padding: 0.05rem 0.65rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--custom--tint--lime-soft); color: var(--wp--preset--color--primary); font-weight: var(--wp--custom--weight--heading); }
.post-card__title { margin: 0; font-size: var(--wp--preset--font-size--medium); line-height: 1.45; }
.post-card__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
/* the whole card is the title's link */
.post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card__title a:focus-visible { outline: none; }
.post-card:has(.post-card__title a:focus-visible) { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.post-card__excerpt { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.98rem; }
.post-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-start: auto; padding-block-start: 0.6rem; border-block-start: 1px solid var(--wp--preset--color--line); font-size: var(--wp--preset--font-size--small); }
.post-card__time { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--wp--preset--color--muted); }
.post-card__time .icon { inline-size: 1rem; block-size: 1rem; }
.post-card__more { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--wp--preset--color--primary); font-weight: var(--wp--custom--weight--heading); }
.post-card__more .icon { inline-size: 1rem; block-size: 1rem; transition: transform 0.25s ease; }
/* the large card: the picture beside the text */
@media (min-width: 900px) {
	.post-card--featured { flex-direction: row; }
	.post-card--featured .post-card__media { flex: 1.15; aspect-ratio: auto; min-block-size: 22rem; }
	.post-card--featured .post-card__body { flex: 1; justify-content: center; padding: var(--wp--preset--spacing--40); gap: 0.8rem; }
}
.post-card--featured .post-card__title { font-size: var(--wp--preset--font-size--large); }
.post-card--featured .post-card__excerpt { font-size: var(--wp--preset--font-size--base); }
.blog-pages ul { list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.blog-pages :is(a, span) { display: inline-grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; padding-inline: 0.8rem; border-radius: var(--wp--custom--radius--pill); border: 1px solid var(--wp--preset--color--line); text-decoration: none; font-weight: var(--wp--custom--weight--strong); color: var(--wp--preset--color--ink); }
.blog-pages .current { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-contrast); }
.blog-pages a:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.blog--related { background: var(--wp--preset--color--surface-alt); }
.blog-related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--20); margin-block-end: var(--wp--preset--spacing--30); }
.blog-related__head .section-head__title { margin: 0; }

/* ---------- one article ---------- */
.container--article { max-inline-size: calc(860px + 2 * var(--wp--custom--container--gutter)); }
.article__head {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background: var(--wp--custom--gradient--night);
	color: var(--wp--preset--color--primary-contrast);
	text-align: center;
}
.article__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 0, rgba(155, 225, 93, 0.25), transparent 30rem), radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0) 0 0 / 24px 24px; }
.article__crumbs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem; margin-block-end: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); }
.article__crumbs a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.article__crumbs a:hover { color: var(--wp--custom--tint--lime-bright); }
.article__crumbs .icon { inline-size: 0.9rem; block-size: 0.9rem; opacity: 0.6; }
.article__title { color: var(--wp--preset--color--primary-contrast); font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1.3; margin-inline: auto; max-inline-size: 22em; }
html[lang^="ar"] .article__title { line-height: 1.5; }
.article__lede { max-inline-size: 40rem; margin: 0 auto var(--wp--preset--spacing--20); color: rgba(255, 255, 255, 0.86); font-size: var(--wp--preset--font-size--medium); }
.article__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; margin: 0; color: rgba(255, 255, 255, 0.8); font-size: var(--wp--preset--font-size--small); }
.article__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.article__meta .icon { color: var(--wp--custom--tint--lime-bright); inline-size: 1rem; block-size: 1rem; }
.article__figure { margin-block-start: calc(-1 * var(--wp--preset--spacing--50)); position: relative; z-index: 1; }
.article__img { display: block; inline-size: 100%; block-size: auto; max-block-size: 30rem; object-fit: cover; border-radius: 24px; box-shadow: var(--wp--custom--shadow--large); }
.article__layout { display: grid; gap: var(--wp--preset--spacing--40); padding-block: var(--wp--preset--spacing--50); }
@media (min-width: 1000px) {
	.article__layout { grid-template-columns: minmax(0, 1fr) 17rem; max-inline-size: calc(1100px + 2 * var(--wp--custom--container--gutter)); }
}
.article__body { max-inline-size: 72ch; font-size: 1.075rem; }
html[lang^="ar"] .article__body { font-size: 1.15rem; line-height: 2; }
.article__body > :first-child { margin-block-start: 0; }
.article__body :is(h2, h3) { scroll-margin-block-start: calc(var(--wp--custom--header--height) + 1.5rem); }
.article__body h2 { position: relative; padding-inline-start: 1rem; }
.article__body h2::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0.25em; inline-size: 4px; border-radius: 2px; background: var(--wp--custom--gradient--text); }
.article__body img { border-radius: var(--wp--custom--radius--large); block-size: auto; }
.article__body figure { margin-inline: 0; }
.article__body figcaption { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); text-align: center; margin-block-start: 0.4rem; }
.article__body blockquote { margin-inline: 0; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); border-inline-start: 4px solid var(--wp--preset--color--accent); border-radius: var(--wp--custom--radius--medium); background: var(--wp--custom--tint--lime-soft); font-size: var(--wp--preset--font-size--medium); }
.article__body blockquote p:last-child { margin-block-end: 0; }
.article__body a { color: var(--wp--preset--color--primary); font-weight: var(--wp--custom--weight--strong); }
.article__body table { inline-size: 100%; border-collapse: collapse; margin-block: var(--wp--preset--spacing--20); font-size: 0.95rem; display: block; overflow-x: auto; }
.article__body :is(th, td) { padding: 0.6rem 0.8rem; border: 1px solid var(--wp--preset--color--line); text-align: start; }
.article__body th { background: var(--wp--preset--color--surface-alt); }
.article__body :is(ul, ol) li::marker { color: var(--wp--preset--color--primary); }
.article__body code { padding: 0.1rem 0.35rem; border-radius: 6px; background: var(--wp--preset--color--surface-alt); font-size: 0.9em; }
.article__body pre { overflow-x: auto; padding: var(--wp--preset--spacing--20); border-radius: var(--wp--custom--radius--medium); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); direction: ltr; text-align: left; }
.article__tags { list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.article__tags a { display: inline-flex; padding: 0.2rem 0.8rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--surface-alt); color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--weight--strong); text-decoration: none; }
/* the side column: contents, share, the main action; it stays in view on a wide screen */
.article__side { display: grid; gap: var(--wp--preset--spacing--30); align-content: start; }
@media (min-width: 1000px) {
	.article__side { position: sticky; inset-block-start: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--20)); }
}
.article__side-title { margin: 0 0 0.6rem; font-family: var(--wp--custom--font--heading); font-weight: var(--wp--custom--weight--heading); font-size: 0.98rem; }
.article__toc { padding: var(--wp--preset--spacing--20); border-radius: var(--wp--custom--radius--large); border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); }
.article__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.article__toc a { display: block; padding: 0.3rem 0.6rem; border-radius: var(--wp--custom--radius--small); color: var(--wp--preset--color--muted); text-decoration: none; font-size: 0.92rem; line-height: 1.5; border-inline-start: 2px solid transparent; }
.article__toc a:hover { color: var(--wp--preset--color--primary); background: var(--wp--preset--color--surface-alt); border-inline-start-color: var(--wp--preset--color--accent); }
.article__toc .is-h3 a { padding-inline-start: 1.4rem; font-size: 0.86rem; }
.article__share ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.article__share :is(a, button) { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--primary); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.article__share :is(a, button):hover, .article__copy.is-done { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-contrast); }
.article__promo { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: var(--wp--preset--spacing--30); border-radius: var(--wp--custom--radius--large); background: var(--wp--custom--gradient--night); color: var(--wp--preset--color--primary-contrast); }
.article__promo-icon { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 12px; background: var(--wp--custom--gradient--lime); color: var(--wp--preset--color--accent-contrast); }
.article__promo-title { margin: 0; font-family: var(--wp--custom--font--heading); font-weight: var(--wp--custom--weight--heading); font-size: 1.05rem; line-height: 1.5; }
@media (max-width: 999px) {
	.article__side { grid-row: 1; }
	.article__toc { display: none; }
	.article__promo { display: none; }
}