/*
Theme Name:  GeneratePress Child
Theme URI:   https://serverok.in
Author:      ServerOK
Description: Child theme of GeneratePress. Adds a square card grid to the blog index and archives.
Template:    generatepress
Version:     1.0.2
License:     GNU General Public License v2 or later
Text Domain: sok
*/

/* ------------------------------------------------------------------
   Blog / archive card grid
   All rules are scoped under .sok-post-grid so single posts, pages
   and search results keep GeneratePress' default styling.
   ------------------------------------------------------------------ */

.sok-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 30px;
	margin-bottom: 40px;
}

/* GeneratePress spaces articles with a bottom margin - the grid gap owns that now. */
.sok-post-grid > article {
	display: flex;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
}

/*
 * aspect-ratio with height:auto makes the square a *target*, not a cage:
 * a card with an unusually long title grows instead of clipping its text,
 * and the grid row stretches every sibling to match.
 */
.sok-post-grid .inside-article {
	flex: 1 1 auto;
	min-width: 0;
	aspect-ratio: 1 / 1;
	height: auto;
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 0;
	background-color: var(--base-3, #ffffff);
	border: 1px solid var(--base, #f0f0f0);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	transition: transform .18s ease, box-shadow .18s ease;
}

.sok-post-grid .inside-article:hover,
.sok-post-grid .inside-article:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

/* --- Image --------------------------------------------------------- */

.sok-post-grid .post-image {
	flex: none;
	aspect-ratio: 3 / 2;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 9px 9px 0 0;
	background-color: var(--base-2, #f7f8f9);
}

.sok-post-grid .post-image a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/*
 * The image box is 3/2 to match the 378x250 logo/wordmark tiles that make up
 * most of the featured images. Because the box and the tile now share an
 * aspect ratio, `cover` fills the card edge to edge while trimming under 1%
 * off the tile - the wordmark survives intact. Screenshots in other ratios
 * are cropped to fill, which reads better than the letterboxing `contain`
 * left behind.
 */
.sok-post-grid .post-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.sok-post-grid .inside-article:hover .post-image img {
	transform: scale(1.03);
}

/* Branded placeholder for the posts that have no featured image. */
.sok-post-grid .post-image.sok-post-image--placeholder {
	padding: 0;
}

.sok-post-grid .post-image.sok-post-image--placeholder a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	text-align: center;
	background-image: linear-gradient(135deg, #004aaa 0%, #1e73be 100%);
	color: #ffffff;
}

.sok-post-grid .sok-placeholder-label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .95;
}

/* --- Title + date -------------------------------------------------- */

.sok-post-grid .entry-header {
	padding: 14px 18px 0;
	margin: 0;
}

.sok-post-grid .entry-title {
	font-size: 18px;
	overflow-wrap: anywhere;
	line-height: 1.3;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sok-post-grid .entry-title a {
	text-decoration: none;
	color: var(--contrast, #222222);
}

.sok-post-grid .inside-article:hover .entry-title a {
	color: var(--accent, #1e73be);
}

/* Make the whole card a click target without nesting links. */
.sok-post-grid .entry-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sok-post-grid .entry-header .entry-meta {
	font-size: 13px;
	line-height: 1.4;
	margin-top: 6px;
	/*
	 * Not GP's --contrast-3 (#b2b2be): that is 2.1:1 on the card's white
	 * background, well under the 4.5:1 AA minimum for 13px text. This is the
	 * muted grey the rest of the site uses, at 4.99:1.
	 */
	color: #5a6b80;
}

/* Date only - hide author, categories and comment count inside cards. */
.sok-post-grid .entry-header .byline,
.sok-post-grid .entry-header .comments-link,
.sok-post-grid .entry-header .cat-links,
.sok-post-grid .entry-header .tags-links,
.sok-post-grid footer.entry-meta {
	display: none;
}

/* --- Description --------------------------------------------------- */

.sok-post-grid .entry-summary,
.sok-post-grid .entry-content {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	margin: 0;
	padding: 8px 18px 16px;
	font-size: 14.5px;
	line-height: 1.45;
	overflow-wrap: anywhere;
	color: var(--contrast-2, #575760);
}

.sok-post-grid .entry-summary p,
.sok-post-grid .entry-content p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sok-post-grid .entry-summary p + p,
.sok-post-grid .entry-content p + p {
	display: none;
}

/* --- Responsive ---------------------------------------------------- */

@media (max-width: 1024px) {
	.sok-post-grid {
		gap: 24px;
	}

	.sok-post-grid .entry-title {
		font-size: 18px;
	}
}

/* One column: drop the square so long titles can never clip. */
@media (max-width: 768px) {
	.sok-post-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.sok-post-grid .inside-article {
		aspect-ratio: auto;
	}

	.sok-post-grid .post-image {
		flex: none;
		aspect-ratio: 3 / 2;
	}

	.sok-post-grid .entry-summary p,
	.sok-post-grid .entry-content p {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}
}

/* ------------------------------------------------------------------
   Shared gutter

   #page is a 1200px grid-container with no padding of its own, and the card
   grid's articles are padding:0 (the grid gap owns their spacing), so from
   320px to 1199px the cards, the heading above them and the pagination below
   all sat flush against the viewport edge - no margin at all on a phone.

   Single posts never showed this because GeneratePress pads .inside-article
   by 40px, dropping to 30px at 768px. These are the same two values, so the
   blog's left edge now lines up with an article's, and with the site logo
   above it.

   Gated at 1279px = 1200 + 40 + 40: past that the viewport supplies at least
   40px on each side by itself, so the gutter stays continuous across the
   boundary rather than jumping.
   ------------------------------------------------------------------ */

@media (max-width: 1279px) {
	.sok-post-grid,
	.sok-archive-header,
	.sok-topics,
	.paging-navigation {
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media (max-width: 768px) {
	.sok-post-grid,
	.sok-archive-header,
	.sok-topics,
	.paging-navigation {
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* ------------------------------------------------------------------
   Archive pagination

   GeneratePress prints the_posts_pagination() as bare inline links that
   inherit the 22px body font: left aligned, underlined, and 13-31px tall,
   which is both visually unfinished next to the card grid and well under
   the 44px touch minimum. This turns each one into a chip.

   Scoped to .paging-navigation so single-post prev/next links are untouched.
   ------------------------------------------------------------------ */

.paging-navigation {
	padding-top: 8px;
	padding-bottom: 8px;
}

.paging-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.paging-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Square at 44px for plain numbers; Prev/Next grow with their label. */
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	/*
	 * GP writes Prev/Next as "Next <span>&rarr;</span>" and relies on the
	 * whitespace between them. A flex container drops whitespace-only
	 * children, so the gap has to put that space back.
	 */
	gap: 6px;
	border: 1px solid var(--base, #e2e8f0);
	border-radius: 8px;
	background-color: var(--base-3, #ffffff);
	color: var(--contrast, #0f1c2e);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.paging-navigation a.page-numbers:hover,
.paging-navigation a.page-numbers:focus {
	border-color: #1668d6;
	background-color: #eef4fc;
	color: #0f1c2e;
	text-decoration: none;
}

.paging-navigation a.page-numbers:focus-visible {
	outline: 2px solid #1668d6;
	outline-offset: 2px;
}

/* The page you are on: same fill as the header CTA, 5.27:1 against white. */
.paging-navigation .page-numbers.current {
	border-color: #1668d6;
	background-color: #1668d6;
	color: #ffffff;
	font-weight: 600;
}

/* The gap marker is a label, not a target - no chip, no border. */
.paging-navigation .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	border-color: transparent;
	background-color: transparent;
	color: var(--contrast-2, #5a6b80);
}

.paging-navigation .prev.page-numbers,
.paging-navigation .next.page-numbers {
	padding: 0 18px;
	font-weight: 600;
}

@media (max-width: 768px) {
	/*
	 * Tighter chips so the row still fits a phone. The flex container wraps
	 * rather than overflowing, and 44px of height is kept - only the
	 * horizontal padding gives way.
	 */
	.paging-navigation .nav-links {
		gap: 6px;
	}

	.paging-navigation .page-numbers {
		min-width: 42px;
		min-height: 44px;
		padding: 0 8px;
	}

	.paging-navigation .prev.page-numbers,
	.paging-navigation .next.page-numbers {
		padding: 0 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.paging-navigation .page-numbers {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Blog index heading

   Printed by sok_blog_index_title(). The posts page had no H1 at all -
   GeneratePress only prints one for true archives.
   ------------------------------------------------------------------ */

.sok-archive-header {
	margin: 0 0 32px;
}

.sok-archive-title {
	margin: 0;
	color: #0f1c2e;
	font-size: clamp(30px, 3.2vw, 42px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
}

@media (max-width: 768px) {
	.sok-archive-header {
		margin-bottom: 24px;
	}
}

/* ------------------------------------------------------------------
   Popular topics

   Printed by sok_blog_index_categories() between the blog H1 and the card
   grid. Same chip as the pagination below it - 44px tall, 8px radius, tint
   fill on hover - so the page has one clickable-pill vocabulary rather than
   two.
   ------------------------------------------------------------------ */

.sok-topics {
	margin: -8px 0 32px;
}

.sok-topics__label {
	margin: 0 0 12px;
	color: #5a6b80;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sok-topics__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sok-topics__item {
	margin: 0;
}

.sok-topics__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--base, #e2e8f0);
	border-radius: 8px;
	background-color: var(--base-3, #ffffff);
	color: var(--contrast, #0f1c2e);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.sok-topics__chip:hover,
.sok-topics__chip:focus {
	border-color: #1668d6;
	background-color: #eef4fc;
	color: #0f1c2e;
	text-decoration: none;
}

.sok-topics__chip:focus-visible {
	outline: 2px solid #1668d6;
	outline-offset: 2px;
}

/*
 * The count is a secondary label, not a second link. 13px is below the
 * large-text threshold, so it needs 4.5:1: #5a6b80 is 5.46:1 on white, and
 * the hover pair #3d566f on the #eef4fc fill is 6.88:1.
 */
.sok-topics__count {
	color: #5a6b80;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.sok-topics__chip:hover .sok-topics__count,
.sok-topics__chip:focus .sok-topics__count {
	color: #3d566f;
}

@media (max-width: 768px) {
	.sok-topics {
		margin-bottom: 24px;
	}

	.sok-topics__list {
		gap: 6px;
	}

	.sok-topics__chip {
		padding: 0 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sok-topics__chip {
		transition: none;
	}
}