/* ==========================================================================
   blog.css — cards, archives, single post, comments, pagination, 404.
   Loaded on: home, archives, search, single post, 404.
   ========================================================================== */

/* ---- Card ---- */
.shp-card{
	position:relative;
	display:flex;
	flex-direction:column;
	border-radius:var(--shp-radius);
	overflow:hidden;
	background:linear-gradient(170deg, rgba(var(--shp-card-rgb), .95), rgba(var(--shp-dark-rgb), .92));
	border:var(--shp-hair);
	box-shadow:var(--shp-shadow-s);
	transition:transform .55s var(--shp-ease), box-shadow .55s var(--shp-ease), border-color .45s ease;
}
.shp-card:hover{
	transform:translateY(-8px);
	border-color:rgba(var(--shp-primary-rgb), .38);
	box-shadow:var(--shp-shadow-m), 0 0 40px rgba(var(--shp-primary-rgb), .16);
}
.shp-card__link{position:absolute;inset:0;z-index:3;}
.shp-card__media{position:relative;aspect-ratio:4 / 3;overflow:hidden;background:rgba(var(--shp-ink-rgb), .04);}
.shp-card__media img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 1.1s var(--shp-ease), filter .6s ease;}
.shp-card:hover .shp-card__media img{transform:scale(1.07);}
.shp-card__ph{display:grid;place-items:center;block-size:100%;color:rgba(var(--shp-ink-rgb), .18);}
.shp-card__shine{
	position:absolute;
	inset-block:0;
	inset-inline-start:-60%;
	inline-size:45%;
	background:linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
	transform:skewX(-16deg);
	transition:inset-inline-start .9s var(--shp-ease);
	pointer-events:none;
}
.shp-card:hover .shp-card__shine{inset-inline-start:130%;}

.shp-card__body{display:flex;flex-direction:column;gap:12px;padding:24px 26px 28px;flex:1;}
.shp-card__tag{
	align-self:flex-start;
	font-family:var(--shp-font-m);
	font-size:.66rem;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--shp-primary);
	padding:5px 12px;
	border-radius:999px;
	background:var(--shp-primary-soft);
	border:1px solid rgba(var(--shp-primary-rgb), .28);
}
.shp-card__title{font-size:1.3rem;line-height:1.15;transition:color .35s ease;}
.shp-card:hover .shp-card__title{color:var(--shp-primary);}
.shp-card__text{font-size:.94rem;color:var(--shp-muted);}
.shp-card__more{
	margin-block-start:auto;
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:var(--shp-font-m);
	font-size:.72rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--shp-primary);
}
.shp-card__more .shp-icon{transition:transform .4s var(--shp-ease);}
.shp-card:hover .shp-card__more .shp-icon{transform:translateX(5px);}
.shp-rtl .shp-card__more .shp-icon{transform:scaleX(-1);}
.shp-rtl .shp-card:hover .shp-card__more .shp-icon{transform:scaleX(-1) translateX(5px);}

/* ---- Archive ---- */
.shp-archive{padding-block:var(--shp-space-section);}
.shp-searchTop{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:22px;
	flex-wrap:wrap;
	margin-block-end:44px;
}
.shp-searchTop .shp-searchForm{inline-size:min(100%, 460px);}
.shp-searchTop__count{font-family:var(--shp-font-m);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--shp-muted);}

/* ---- Meta ---- */
.shp-meta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-family:var(--shp-font-m);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--shp-muted);}
.shp-meta__item{display:inline-flex;align-items:center;gap:8px;}

.shp-tags{display:flex;gap:9px;flex-wrap:wrap;}
.shp-tags a{
	padding:7px 14px;
	border-radius:999px;
	font-size:.76rem;
	color:var(--shp-body);
	border:var(--shp-hair);
	transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.shp-tags a:hover{color:var(--shp-primary);border-color:rgba(var(--shp-primary-rgb), .45);background:var(--shp-primary-soft);}

/* ---- Pagination ---- */
.shp-pag{margin-block-start:clamp(40px, 5vw, 64px);}
.shp-pag__list{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;}
.shp-pag__item .page-numbers{
	display:grid;
	place-items:center;
	min-inline-size:46px;
	block-size:46px;
	padding-inline:12px;
	border-radius:12px;
	font-family:var(--shp-font-m);
	font-size:.82rem;
	color:var(--shp-body);
	border:var(--shp-hair);
	background:rgba(var(--shp-ink-rgb), .02);
	transition:color .3s ease, border-color .3s ease, background .3s ease, transform .4s var(--shp-ease);
}
.shp-pag__item .page-numbers:hover{color:var(--shp-primary);border-color:rgba(var(--shp-primary-rgb), .45);transform:translateY(-3px);}
.shp-pag__item .page-numbers.current{background:var(--shp-grad);color:#04121C;border-color:transparent;box-shadow:0 10px 26px rgba(var(--shp-primary-rgb), .3);}
.shp-pag__prev{transform:scaleX(-1);}
.shp-rtl .shp-pag__prev{transform:none;}
.shp-rtl .shp-pag__next{transform:scaleX(-1);}

/* ---- Empty state ---- */
.shp-empty{
	text-align:center;
	padding:clamp(48px, 8vw, 96px) 24px;
	border-radius:calc(var(--shp-radius) + 6px);
	border:1px dashed rgba(var(--shp-ink-rgb), .12);
	background:rgba(var(--shp-ink-rgb), .02);
}
.shp-empty__icon{display:grid;place-items:center;inline-size:78px;block-size:78px;margin-inline:auto;border-radius:50%;background:var(--shp-primary-soft);color:var(--shp-primary);}
.shp-empty__title{margin-block:22px 12px;}
.shp-empty__text{color:var(--shp-muted);}
.shp-empty__search{margin-block-start:28px;max-inline-size:420px;margin-inline:auto;}

/* ---- 404 ---- */
.shp-404{min-block-size:60vh;display:grid;place-items:center;text-align:center;}
.shp-404__inner{max-inline-size:640px;}
.shp-404__code{
	display:block;
	font-family:var(--shp-font-h);
	font-size:clamp(6rem, 18vw, 13rem);
	line-height:.85;
	background:var(--shp-grad);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	filter:drop-shadow(0 18px 44px rgba(var(--shp-primary-rgb), .25));
}
.shp-404__title{margin-block:20px 14px;}
.shp-404__text{color:var(--shp-muted);}
.shp-404__search{margin-block-start:30px;}
.shp-404__actions{margin-block-start:26px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---- Comments ---- */
.shp-comments{margin-block-start:56px;padding-block-start:40px;border-block-start:var(--shp-hair);}
.shp-comments__title{font-size:var(--shp-h4);margin-block-end:28px;}
.shp-comments__list{display:grid;gap:22px;}
.shp-comments__list .comment-body{
	padding:24px 26px;
	border-radius:var(--shp-radius);
	border:var(--shp-hair);
	background:rgba(var(--shp-ink-rgb), .02);
}
.shp-comments__list .children{margin-block-start:20px;padding-inline-start:26px;border-inline-start:2px solid rgba(var(--shp-primary-rgb), .25);display:grid;gap:20px;}
.shp-comments__list .comment-meta{display:flex;align-items:center;gap:12px;margin-block-end:14px;font-size:.84rem;}
.shp-comments__list .comment-author img{border-radius:50%;}
.shp-comments__list .comment-author .fn{color:var(--shp-ink);font-weight:600;font-style:normal;}
.shp-comments__list .reply a{font-family:var(--shp-font-m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--shp-primary);}
.shp-comments__formTitle{font-size:var(--shp-h4);margin-block:40px 22px;}
.shp-commentForm .comment-form-comment,.shp-commentForm p{margin-block-end:18px;}
.shp-commentForm .form-submit{margin-block-start:8px;}


/* ==========================================================================
   Single post — a calm reading page
   One narrow column for the words, a slightly wider frame for the picture.
   Sizes stay restrained: the text leads, nothing shouts.
   ========================================================================== */
.shp-article{
	--art-col:720px;
	--art-wide:960px;
	padding-block:clamp(34px, 5vw, 64px) clamp(46px, 6vw, 80px);
}
.shp-article__wrap{
	inline-size:min(100% - var(--shp-gutter) * 2, var(--art-wide));
	margin-inline:auto;
}
.shp-article__head,
.shp-article__body,
.shp-article__foot{max-inline-size:var(--art-col);margin-inline:auto;}

/* ---- Meta row ---- */
.shp-article__meta{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px 18px;
	margin-block-end:clamp(20px, 3vw, 28px);
	font-family:var(--shp-font-m);
	font-size:.68rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--shp-muted);
}
.shp-article__meta > * + *::before{
	content:"";
	display:inline-block;
	inline-size:3px;
	block-size:3px;
	margin-inline-end:18px;
	border-radius:50%;
	background:currentColor;
	opacity:.5;
	vertical-align:middle;
	transform:translateY(-1px);
}
.shp-article__cat{
	color:var(--shp-primary);
	text-decoration:none;
	padding:5px 11px 4px;
	border-radius:999px;
	background:var(--shp-primary-soft);
	border:1px solid rgba(var(--shp-primary-rgb), .22);
	transition:background .3s ease, border-color .3s ease;
}
.shp-article__cat:hover{background:rgba(var(--shp-primary-rgb), .18);border-color:rgba(var(--shp-primary-rgb), .45);}
.shp-article__meta > .shp-article__cat + *::before{display:none;}
.shp-rtl .shp-article__meta{font-family:var(--shp-font-ar);font-size:.82rem;letter-spacing:0;text-transform:none;}

/* ---- Featured image ---- */
.shp-article__media{
	margin:0 0 clamp(28px, 4vw, 44px);
	border-radius:20px;
	overflow:hidden;
	aspect-ratio:21 / 10;
	background:rgba(var(--shp-ink-rgb), .04);
	border:1px solid rgba(var(--shp-ink-rgb), .08);
	box-shadow:0 30px 60px -36px rgba(0,0,0,.75);
}
.shp-article__media img{inline-size:100%;block-size:100%;object-fit:cover;display:block;}

/* ---- Prose ---- */
.shp-prose{
	font-size:1.02rem;
	line-height:1.9;
	color:rgba(var(--shp-ink-rgb), .8);
	overflow-wrap:break-word;
}
.shp-rtl .shp-prose{font-family:var(--shp-font-ar);font-size:1.08rem;line-height:2.05;}
.shp-prose > *:first-child{margin-block-start:0;}
.shp-prose p,
.shp-prose ul,
.shp-prose ol,
.shp-prose blockquote,
.shp-prose figure{margin:0 0 1.15em;}

/*
 * Headings. The old site set sizes and colours inline (font-size:25px,
 * #337ab7 on links and titles…). The stored text keeps them; the page
 * quietly overrides them so every post reads alike.
 * A heading 1 inside a post reads as a section title — the page title above
 * is the only large one.
 */
.shp-prose h1,
.shp-prose h2,
.shp-prose h3,
.shp-prose h4{
	margin:1.9em 0 .7em !important;
	font-family:var(--shp-font-b) !important;
	font-weight:600 !important;
	line-height:1.4 !important;
	color:var(--shp-ink) !important;
	letter-spacing:0;
	text-transform:none;
}
.shp-rtl .shp-prose h1,
.shp-rtl .shp-prose h2,
.shp-rtl .shp-prose h3,
.shp-rtl .shp-prose h4{font-family:var(--shp-font-ar) !important;font-weight:700 !important;}
.shp-prose h1,
.shp-prose h2{
	position:relative;
	font-size:clamp(1.18rem, 1.06rem + .5vw, 1.38rem) !important;
	padding-inline-start:16px;
}
.shp-prose h1::before,
.shp-prose h2::before{
	content:"";
	position:absolute;
	inset-inline-start:0;
	inset-block:.32em;
	inline-size:3px;
	border-radius:3px;
	background:var(--shp-grad);
}
.shp-prose h3{font-size:1.08rem !important;}
.shp-prose h4{font-size:1rem !important;}
.shp-prose > h1:first-child,
.shp-prose > h2:first-child,
.shp-prose > div:first-child > h1:first-child{margin-block-start:0 !important;}

/* Inline styling from the old site: same family, same scale, same colour. */
.shp-prose [style]:not(h1):not(h2):not(h3):not(h4){font-size:inherit !important;}
.shp-prose [style]{color:inherit;text-align:start !important;}
.shp-prose p[style*="color"]{color:var(--shp-ink) !important;font-weight:600;margin-block-start:1.5em;}
.shp-prose h1 a,
.shp-prose h2 a,
.shp-prose h3 a{color:inherit !important;font-weight:inherit !important;}

.shp-prose a{
	color:var(--shp-primary) !important;
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:.22em;
	text-decoration-color:rgba(var(--shp-primary-rgb), .4);
	transition:text-decoration-color .3s ease, color .3s ease;
}
.shp-prose a:hover{text-decoration-color:currentColor;}
.shp-prose h1 a,
.shp-prose h2 a{text-decoration-color:rgba(var(--shp-primary-rgb), .45);}
.shp-prose strong,
.shp-prose b{color:var(--shp-ink);font-weight:600;}

/* Lists: a soft marker in the brand colour, comfortable spacing. */
.shp-prose ul,
.shp-prose ol{padding-inline-start:1.35em;}
.shp-prose li{margin-block-end:.55em;padding-inline-start:.25em;}
.shp-prose li::marker{color:var(--shp-primary);}
.shp-prose ol li::marker{font-family:var(--shp-font-m);font-size:.82em;font-weight:700;}
.shp-prose li > strong:first-child{color:var(--shp-ink);}

.shp-prose blockquote{
	padding:14px 20px;
	border-inline-start:3px solid var(--shp-primary);
	background:rgba(var(--shp-ink-rgb), .03);
	border-radius:0 12px 12px 0;
	color:var(--shp-ink);
}
.shp-rtl .shp-prose blockquote{border-radius:12px 0 0 12px;}
.shp-prose img{max-inline-size:100%;block-size:auto;border-radius:14px;}
.shp-prose hr{border:0;border-block-start:1px solid rgba(var(--shp-ink-rgb), .1);margin:2.2em 0;}
.shp-prose table{inline-size:100%;border-collapse:collapse;font-size:.94em;display:block;overflow-x:auto;}
.shp-prose th,
.shp-prose td{padding:10px 12px;border-block-end:1px solid rgba(var(--shp-ink-rgb), .1);text-align:start;}

/* ---- Footer: back + share ---- */
.shp-article__foot{margin-block-start:clamp(34px, 5vw, 48px);padding-block-start:22px;border-block-start:1px solid rgba(var(--shp-ink-rgb), .09);}
.shp-article__tags{display:flex;gap:8px;flex-wrap:wrap;margin-block-end:18px;}
.shp-article__tags a{
	padding:5px 12px;
	border-radius:999px;
	font-size:.8rem;
	color:var(--shp-muted);
	text-decoration:none;
	border:1px solid rgba(var(--shp-ink-rgb), .12);
	transition:color .3s ease, border-color .3s ease;
}
.shp-article__tags a:hover{color:var(--shp-primary);border-color:rgba(var(--shp-primary-rgb), .45);}
.shp-article__actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.shp-article__back{
	display:inline-flex;
	align-items:center;
	gap:9px;
	font-size:.88rem;
	font-weight:500;
	color:var(--shp-muted);
	text-decoration:none;
	transition:color .3s ease, gap .4s var(--shp-ease);
}
.shp-article__back:hover{color:var(--shp-ink);gap:12px;}
.shp-article__backIcon{transform:scaleX(-1);}
.shp-rtl .shp-article__backIcon{transform:none;}
.shp-article__actions .shp-share__toggle{min-block-size:42px;}

/* ---- Reading bar ---- */
.shp-readbar{
	position:fixed;
	z-index:90;
	inset-inline:0;
	inset-block-start:0;
	block-size:2px;
	pointer-events:none;
	opacity:0;
	transition:opacity .4s ease;
}
.shp-readbar.is-on{opacity:1;}
.shp-readbar span{
	display:block;
	block-size:100%;
	background:var(--shp-grad);
	transform:scaleX(0);
	transform-origin:left center;
	box-shadow:0 0 10px rgba(var(--shp-primary-rgb), .6);
}
.shp-rtl .shp-readbar span{transform-origin:right center;}
.admin-bar .shp-readbar{inset-block-start:32px;}
@media (max-width:782px){.admin-bar .shp-readbar{inset-block-start:46px;}}

/* ---- Previous / next ---- */
.shp-postNav{padding-block:0 clamp(46px, 6vw, 72px);}
.shp-postNav__inner{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
	inline-size:min(100% - var(--shp-gutter) * 2, 960px);
	margin-inline:auto;
}
.shp-postNav__link{
	display:grid;
	grid-template-columns:62px 1fr auto;
	align-items:center;
	gap:14px;
	padding:12px 16px 12px 12px;
	border-radius:16px;
	text-decoration:none;
	background:rgba(var(--shp-ink-rgb), .035);
	border:1px solid rgba(var(--shp-ink-rgb), .08);
	transition:border-color .35s ease, background .35s ease, transform .5s var(--shp-ease);
	min-inline-size:0;
}
.shp-rtl .shp-postNav__link{padding:12px 12px 12px 16px;}
.shp-postNav__link.is-empty{visibility:hidden;}
.shp-postNav__link:hover{border-color:rgba(var(--shp-primary-rgb), .4);background:rgba(var(--shp-primary-rgb), .05);transform:translateY(-3px);}
.shp-postNav__thumb{inline-size:62px;block-size:62px;border-radius:11px;overflow:hidden;background:rgba(var(--shp-ink-rgb), .06);}
.shp-postNav__thumb img{inline-size:100%;block-size:100%;object-fit:cover;}
.shp-postNav__text{display:grid;gap:3px;min-inline-size:0;}
.shp-postNav__label{font-family:var(--shp-font-m);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--shp-primary);}
.shp-rtl .shp-postNav__label{font-family:var(--shp-font-ar);font-size:.78rem;letter-spacing:0;text-transform:none;}
.shp-postNav__title{color:var(--shp-ink);font-size:.92rem;font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.shp-postNav__arrow{color:var(--shp-muted);transition:transform .45s var(--shp-ease), color .3s ease;}
.shp-postNav__link--prev .shp-postNav__arrow{transform:scaleX(-1);}
.shp-rtl .shp-postNav__link--prev .shp-postNav__arrow{transform:none;}
.shp-rtl .shp-postNav__link--next .shp-postNav__arrow{transform:scaleX(-1);}
.shp-postNav__link:hover .shp-postNav__arrow{color:var(--shp-primary);}

@media (max-width:640px){
	.shp-article__media{aspect-ratio:16 / 10;border-radius:16px;}
	.shp-prose{font-size:1rem;line-height:1.85;}
	.shp-rtl .shp-prose{font-size:1.04rem;line-height:2;}
	.shp-postNav__inner{grid-template-columns:1fr;}
	.shp-postNav__link.is-empty{display:none;}
	.shp-article__actions{flex-direction:column-reverse;align-items:stretch;}
	.shp-article__back{justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
	.shp-readbar{display:none;}
}