/**
 * Blog page template (page-blog.php).
 *
 * Desklog-inspired layout on the Doso blue brand: a solid blue hero band with a
 * centred title, subtitle, pill search bar and Home / Blog breadcrumb, then a
 * uniform responsive grid of post cards with pill pagination.
 *
 * @package Doso
 */

.blog-page{
	--bk-ink:#10141b;        /* headline ink */
	--bk-text:#3a4250;       /* body text */
	--bk-muted:#6b7484;      /* meta / muted */
	--bk-line:#e6e8ed;       /* hairline borders */
	--bk-surface:#f6f7f9;    /* card / section surface */
	--bk-accent:#2563eb;     /* the one accent */
	--bk-accent-soft:#eaf0fe;
	--bk-blue:#15528a;       /* hero band blue */
	--bk-blue-d:#0f3f6e;     /* hero band deep */
	--bk-radius:16px;
	background:#fff;
	color:var(--bk-text);
}

/* ============================ HERO ========================================= */
.blog-hero{
	position:relative;overflow:hidden;text-align:center;
	padding-block:clamp(2.75rem,6vw,4.5rem);
	background:linear-gradient(180deg,var(--bk-blue) 0%,var(--bk-blue-d) 100%);
	color:#fff;
}
.blog-hero__inner{position:relative;z-index:1;max-width:860px;margin-inline:auto}
.blog-hero__title{
	margin:0 0 1rem;font-family:var(--font-head,inherit);font-weight:800;color:#fff;
	line-height:1.1;letter-spacing:-.02em;font-size:clamp(2.1rem,5vw,3.4rem);
}
.blog-hero__sub{
	margin:0 auto 1.9rem;max-width:62ch;color:rgba(255,255,255,.88);
	font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.6;
}

/* ---- Pill search ----------------------------------------------------------- */
.blog-search{
	display:flex;align-items:center;gap:.4rem;max-width:560px;margin:0 auto 1.5rem;
	padding:.4rem .4rem .4rem 1.4rem;background:#fff;border-radius:999px;
	box-shadow:0 22px 45px -22px rgba(0,0,0,.45);
}
.blog-search__field{
	flex:1;min-width:0;border:0;outline:0;background:transparent;
	font-size:1rem;color:var(--bk-ink);padding:.7rem 0;
}
.blog-search__field::placeholder{color:#9aa3b2}
.blog-search__submit{
	flex:none;border:0;cursor:pointer;border-radius:999px;
	padding:.8rem 1.7rem;font-weight:700;font-size:.97rem;color:#fff;
	background:var(--bk-accent);transition:background .2s ease,transform .2s ease;
}
.blog-search__submit:hover{background:#1d4ed8;transform:translateY(-1px)}

/* ---- Breadcrumb ------------------------------------------------------------ */
.blog-crumbs{
	display:flex;align-items:center;justify-content:center;gap:.6rem;
	font-size:.95rem;color:rgba(255,255,255,.8);
}
.blog-crumbs a{color:rgba(255,255,255,.8);text-decoration:none;transition:color .2s ease}
.blog-crumbs a:hover{color:#fff}
.blog-crumbs span[aria-hidden]{opacity:.6}
.blog-crumbs__current{color:#fff;font-weight:600}

/* ============================ BODY ========================================= */
.blog-body{padding-block:clamp(2.5rem,5vw,4rem)}

/* ---- Card grid ------------------------------------------------------------- */
.blog-grid{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
	gap:clamp(1.5rem,3vw,2.25rem);
}
.blog-card{
	display:flex;flex-direction:column;overflow:hidden;
	background:#fff;border:1px solid var(--bk-line);border-radius:var(--bk-radius);
	box-shadow:0 18px 40px -32px rgba(16,20,27,.5);
	transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 30px 55px -30px rgba(16,20,27,.45);border-color:#d7dbe2}
.blog-card__media{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--bk-surface)}
.blog-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.blog-card:hover .blog-card__media img{transform:scale(1.05)}
.blog-card__placeholder{
	display:block;width:100%;height:100%;
	background:linear-gradient(135deg,#e8edf5,#dbe4f0);
}
.blog-card__body{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.4rem 1.5rem}
.blog-card__meta{
	display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.85rem;
	font-size:.82rem;color:var(--bk-muted);
}
.blog-tag{
	display:inline-block;padding:.25rem .7rem;border-radius:999px;
	font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
	color:var(--bk-accent);background:var(--bk-accent-soft);text-decoration:none;
	transition:background .2s ease,color .2s ease;
}
.blog-tag:hover{background:var(--bk-accent);color:#fff;text-decoration:none}
.blog-card__title{
	margin:0 0 .6rem;font-family:var(--font-head,inherit);font-weight:700;
	line-height:1.3;letter-spacing:-.01em;font-size:1.18rem;
}
.blog-card__title a{color:var(--bk-ink);text-decoration:none}
.blog-card__title a:hover{color:var(--bk-accent)}
.blog-card__excerpt{margin-bottom:1.2rem;color:var(--bk-muted);font-size:.94rem;line-height:1.65}
.blog-card__more{
	display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;
	font-weight:700;font-size:.92rem;color:var(--bk-ink);text-decoration:none;
}
.blog-card__more span[aria-hidden]{transition:transform .25s ease}
.blog-card__more:hover{color:var(--bk-accent);text-decoration:none}
.blog-card__more:hover span[aria-hidden]{transform:translateX(4px)}

/* ---- Empty state ----------------------------------------------------------- */
.blog-empty{padding-block:clamp(2rem,5vw,3.5rem);text-align:center;color:var(--bk-muted)}

/* ---- Pagination ------------------------------------------------------------ */
.blog-pagination{margin-top:clamp(2.25rem,4vw,3.25rem)}
.blog-pagination .page-numbers{
	list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0;padding:0;
}
.blog-pagination .page-numbers li{margin:0}
.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers{
	display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
	padding:0 .85rem;border-radius:11px;border:1px solid var(--bk-line);background:#fff;
	font-weight:700;font-size:.92rem;color:var(--bk-ink);text-decoration:none;
	transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.blog-pagination a.page-numbers:hover{border-color:var(--bk-accent);color:var(--bk-accent);transform:translateY(-2px)}
.blog-pagination span.page-numbers.current{background:var(--bk-blue);border-color:var(--bk-blue);color:#fff}
.blog-pagination span.page-numbers.dots{border-color:transparent;background:transparent}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width:560px){
	.blog-search{flex-wrap:wrap;border-radius:18px;padding:.6rem}
	.blog-search__field{padding-inline:.8rem;width:100%}
	.blog-search__submit{width:100%}
}

@media (prefers-reduced-motion:reduce){
	.blog-card,.blog-card__media img,.blog-card__more span[aria-hidden],
	.blog-search__submit,.blog-pagination a.page-numbers{transition:none}
	.blog-card:hover{transform:none}
}