/**
 * Keystone Theme - Category Archive Page Styles
 */

/* ------------------------------------------------------------------ */
/* HEADER: H1 + description                                            */
/* ------------------------------------------------------------------ */

.keystone-cat-header {
	margin-bottom: var(--wp--preset--spacing--50);
}

.keystone-cat-header__h1 {
	font-size: 36px;
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: -0.5px;
	margin: 0 0 10px;
}

.keystone-cat-header__desc {
	font-size: 15px;
	color: var(--wp--preset--color--accent-4);
	line-height: 1.6;
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* FEATURED ARTICLE                                                     */
/* Reuses .keystone-hp-featured from homepage.css                      */
/* ------------------------------------------------------------------ */

.keystone-cat-featured {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------------ */
/* 3×3 CARD GRID                                                        */
/* ------------------------------------------------------------------ */

.keystone-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------------ */
/* AD BANNER (injected between batches)                                */
/* Reuses .keystone-hp-ad from homepage.css                            */
/* ------------------------------------------------------------------ */

.keystone-cat-ad {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------------ */
/* LOAD MORE SENTINEL + SPINNER                                         */
/* ------------------------------------------------------------------ */

.keystone-cat-sentinel {
	height: 1px;
	margin-bottom: var(--wp--preset--spacing--40);
}

.keystone-cat-spinner {
	display: none;
	justify-content: center;
	padding: var(--wp--preset--spacing--40) 0;
}

.keystone-cat-spinner--active {
	display: flex;
}

.keystone-cat-spinner__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-4);
	margin: 0 4px;
	animation: keystone-bounce 1.2s infinite ease-in-out both;
}

.keystone-cat-spinner__dot:nth-child(1) { animation-delay: -0.32s; }
.keystone-cat-spinner__dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes keystone-bounce {
	0%, 80%, 100% { transform: scale(0); }
	40%           { transform: scale(1); }
}

.keystone-cat-end {
	text-align: center;
	font-size: 13px;
	color: var(--wp--preset--color--accent-4);
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

/* ------------------------------------------------------------------ */
/* END-OF-PAGE SECTION: ad + category grid                              */
/* ------------------------------------------------------------------ */

.keystone-cat-end-section {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.keystone-cat-end-section .keystone-hp-section__label {
	margin-bottom: var(--wp--preset--spacing--20);
}

.keystone-cat-end-section .keystone-hp-section__sub {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------------ */
/* RESPONSIVE — TABLET (≤ 900px)                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.keystone-cat-header__h1 { font-size: 28px; }
	.keystone-cat-grid       { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------ */
/* RESPONSIVE — MOBILE (≤ 600px)                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
	main > .wp-block-group > .alignwide {
		padding-top: var(--wp--preset--spacing--20) !important;
	}

	.keystone-cat-header__h1   { font-size: 24px; }
	.keystone-cat-header__desc { font-size: 13px; }
	.keystone-cat-grid         { grid-template-columns: 1fr; }
}