/* =============================================================
   ADORNCROFT – BLOG / STUDIO JOURNAL ARCHIVE
   ============================================================= */

:root {
	--ac-cream  : #F7F3EE;
	--ac-dark   : #2B2A29;
	--ac-sand   : #EDE3D7;
	--ac-rule   : rgba(43, 42, 41, 0.2);
	--ac-font-h : 'Cormorant Garamond', Georgia, serif;
	--ac-font-b : 'Satoshi Variable', system-ui, sans-serif;
}

/* ── Astra full-width resets ────────────────────────────────── */
.ast-page-builder-template.blog #page,
.ast-page-builder-template.blog .site,
.ast-page-builder-template.blog .ast-container,
.ast-page-builder-template.blog .site-content,
.ast-page-builder-template.blog #primary,
.ast-page-builder-template.blog #content,
.ast-page-builder-template.blog .site-main,
.ast-page-builder-template.blog .entry-content,
.ast-page-builder-template.blog .ast-article-inner-ctg-style,
.blog #page,
.blog .site,
.blog .ast-container,
.blog .site-content,
.blog #primary,
.blog #content,
.blog .site-main,
.blog .entry-content {
	max-width    : 100% !important;
	width        : 100% !important;
	margin-left  : 0 !important;
	margin-right : 0 !important;
	padding      : 0 !important;
	background   : var(--ac-cream) !important;
	box-sizing   : border-box !important;
}

.blog h1.entry-title,
.blog .ast-page-title-wrap,
.blog .page-title-wrap,
.blog .ast-archive-description {
	display : none !important;
}

/* ── Heading / paragraph margin reset ───────────────────────── */
.ac-blog-page h1, .ac-blog-page h2, .ac-blog-page h3,
.ac-blog-page h4, .ac-blog-page h5, .ac-blog-page h6 { margin: 0; padding: 0; }
.ac-blog-page p                                        { margin: 0; }

/* Let grid items fill their cell */
.ac-blog-grid article.ac-article-card {
	width   : 100% !important;
	padding : 0 !important;
	margin  : 0 !important;
}

/* Sort by wrapper + button */
.ac-sort-wrap {
	position : relative;
}

.ac-blog-sortby {
	display        : inline-flex;
	align-items    : center;
	gap            : 8px;
	font-family    : var(--ac-font-b) !important;
	font-size      : 14px;
	font-weight    : 700;
	line-height    : 16px;
	text-transform : uppercase;
	color          : var(--ac-dark);
	background     : var(--ac-cream);
	border         : 1px solid var(--ac-dark);
	border-radius  : 0;
	padding        : 11px 16px;
	cursor         : pointer;
	white-space    : nowrap;
}

.ac-blog-sortby:hover,
.ac-blog-sortby[aria-expanded="true"] {
	background : var(--ac-dark);
	color      : var(--ac-cream);
}

.ac-blog-sortby:hover svg path,
.ac-blog-sortby[aria-expanded="true"] svg path {
	stroke : var(--ac-cream);
}

/* Dropdown */
.ac-sort-dropdown {
	display        : none;
	position       : absolute;
	top            : calc(100% + 2px);
	right          : 0;
	min-width      : 160px;
	background     : var(--ac-cream);
	border         : 1px solid var(--ac-dark);
	list-style     : none;
	margin         : 0;
	padding        : 0;
	z-index        : 100;
}

.ac-sort-wrap.is-open .ac-sort-dropdown {
	display : block;
}

.ac-sort-dropdown li a {
	display         : block;
	padding         : 10px 16px;
	font-family     : var(--ac-font-b) !important;
	font-size       : 14px;
	font-weight     : 400;
	color           : var(--ac-dark) !important;
	text-decoration : none;
	white-space     : nowrap;
}

.ac-sort-dropdown li a:hover,
.ac-sort-dropdown li a.is-active {
	background  : var(--ac-dark);
	color       : var(--ac-cream) !important;
	font-weight : 700;
}

/* ── Page wrapper ────────────────────────────────────────────── */
.ac-blog-page {
	flex        : 1 1 100%;   /* fill Astra's flex .ast-container */
	min-width   : 0;
	width       : 100%;
	background  : var(--ac-cream);
	font-family : var(--ac-font-b);
	color       : var(--ac-dark);
	padding-bottom : 80px;
}

.ac-blog-page,
.ac-blog-page * {
	font-family : var(--ac-font-b);
}

/* ── Hero ────────────────────────────────────────────────────── */
.ac-blog-hero {
	display         : flex;
	flex-direction  : row;
	justify-content : space-between;
	align-items     : center;
	gap             : 24px;
	padding         : 80px 20px;
}

.ac-blog-title {
	font-family  : var(--ac-font-h);
	font-size    : 76px;
	font-weight  : 700;
	line-height  : 86px;
	color        : var(--ac-dark);
	margin       : 0;
	white-space  : nowrap;
}

.ac-blog-desc {
	font-family : var(--ac-font-b);
	font-size   : 18px;
	font-weight : 400;
	line-height : 28px;
	color       : var(--ac-dark);
	max-width   : 660px;
	margin      : 0;
}

/* ── Controls bar ────────────────────────────────────────────── */
.ac-blog-controls {
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	padding         : 16px 20px;
	border-top      : 1px solid var(--ac-rule);
	border-bottom   : 1px solid var(--ac-rule);
}

.ac-blog-count {
	font-family : var(--ac-font-b);
	font-size   : 14px;
	font-weight : 400;
	line-height : 24px;
	color       : var(--ac-dark);
}

/* ── Article grid ────────────────────────────────────────────── */
.ac-blog-grid {
	display               : grid;
	grid-template-columns : repeat(4, 1fr);
	gap                   : 24px;
	padding               : 48px 20px;
}

/* ── Article card ────────────────────────────────────────────── */
.ac-article-card {
	background     : var(--ac-sand);
	display        : flex;
	flex-direction : column;
}

.ac-article-img-wrap {
	display      : block;
	aspect-ratio : 332 / 240;
	overflow     : hidden;
}

.ac-article-img-wrap img {
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	display    : block;
	transition : transform 0.35s ease;
}

.ac-article-card:hover .ac-article-img-wrap img {
	transform : scale(1.04);
}

.ac-article-img-ph {
	width      : 100%;
	height     : 100%;
	background : #d8cfc5;
}

.ac-article-body {
	padding        : 24px;
	display        : flex;
	flex-direction : column;
	gap            : 16px;
	flex           : 1;
}

.ac-article-date {
	font-family : var(--ac-font-b);
	font-size   : 14px;
	font-weight : 400;
	line-height : 24px;
	color       : var(--ac-dark);
}

.ac-article-title {
	font-family : var(--ac-font-h);
	font-size   : 24px;
	font-weight : 700;
	line-height : 26px;
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-article-title a {
	color           : inherit;
	text-decoration : none;
}

.ac-article-title a:hover {
	text-decoration : underline;
}

/* ── Result count – kill Astra link colour on inner spans ────── */
.ac-blog-count a,
.ac-blog-count span {
	color           : var(--ac-dark) !important;
	text-decoration : none !important;
}

/* ── Pagination ──────────────────────────────────────────────── */
.ac-blog-pagination {
	display         : flex;
	justify-content : center;
	padding         : 32px 20px 48px;
}

.ac-blog-pagination .page-numbers {
	list-style : none;
	display    : flex;
	align-items: center;
	gap        : 4px;
	margin     : 0;
	padding    : 0;
}

.ac-blog-pagination .page-numbers li a,
.ac-blog-pagination .page-numbers li span {
	display         : flex;
	align-items     : center;
	justify-content : center;
	width           : 36px;
	height          : 36px;
	font-family     : var(--ac-font-b) !important;
	font-size       : 14px;
	font-weight     : 400;
	color           : var(--ac-dark) !important;
	text-decoration : none !important;
	border          : 1px solid var(--ac-dark);
	box-sizing      : border-box;
	transition      : background 0.2s, color 0.2s;
}

/* Numbered page links — fill on hover */
.ac-blog-pagination .page-numbers li a:not(.prev):not(.next):hover {
	background : var(--ac-dark);
	color      : var(--ac-cream) !important;
}

/* Current page — filled dark box */
.ac-blog-pagination .page-numbers li span.current {
	background   : var(--ac-dark) !important;
	color        : var(--ac-cream) !important;
	border-color : var(--ac-dark);
	font-weight  : 700;
}

/* Prev / next arrows — same box as numbers */
.ac-blog-pagination .page-numbers li a.prev,
.ac-blog-pagination .page-numbers li a.next {
	border : 1px solid var(--ac-dark);
	width  : 36px;
	height : 36px;
}

.ac-blog-pagination .page-numbers li a.prev svg,
.ac-blog-pagination .page-numbers li a.next svg {
	display : block;
	width   : 12px;
	height  : auto;
}

/* Dots spacer */
.ac-blog-pagination .page-numbers li .dots {
	border  : none;
	cursor  : default;
	width   : 28px;
	letter-spacing: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.ac-blog-grid { grid-template-columns : repeat(3, 1fr); }
}

@media (max-width: 768px) {
	.ac-blog-hero {
		flex-direction : column;
		align-items    : flex-start;
		padding        : 48px 20px;
		gap            : 16px;
	}

	.ac-blog-title {
		font-size   : 48px;
		line-height : 1.1;
		white-space : normal;
	}

	.ac-blog-desc {
		font-size : 16px;
	}

	.ac-blog-grid { grid-template-columns : repeat(2, 1fr); gap : 16px; }
}

@media (max-width: 480px) {
	.ac-blog-title  { font-size : 36px; }
	.ac-blog-grid   { grid-template-columns : repeat(2, 1fr); gap : 12px; padding : 24px 16px; }
	.ac-blog-hero   { padding : 32px 16px; }
	.ac-blog-controls { padding : 12px 16px; }
	.ac-article-body  { padding : 16px; gap : 10px; }
	.ac-article-title { font-size : 18px; line-height : 22px; }
}