/**
 * Styles for the [posts] category-section shortcode.
 *
 * Enqueued only on the homepage by sk_category_posts_assets() in
 * inc/shortcodes.php. If you start using [posts] on other pages too, widen the
 * is_front_page() check there so this file loads on those pages as well.
 */

/* ---- Strip the page wrapper's card chrome so the section sits flat ----
   Targets only the .inside-article that CONTAINS our section (the page
   wrapper), never the post cards inside it, and nothing site-wide. */
.inside-article:has(.sk-cat-section) {
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* ---- Section + spacing between stacked sections ---- */
.sk-cat-section { margin: 0 0 60px; }
.sk-cat-section:last-child { margin-bottom: 0; }

/* ---- Centered heading + description ---- */
.sk-cat-head { max-width: 760px; margin: 0 auto 35px; text-align: center; }
.sk-cat-head .sk-cat-title { margin: 0 0 12px; }
.sk-cat-head .sk-cat-desc { margin: 0; opacity: .85; }

/* ---- Responsive grid (self-contained: works in flexbox OR float mode) ---- */
.sk-cat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 768px) {
	.sk-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
	.sk-cat-grid.sk-cat-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.sk-cat-grid.sk-cat-cols-4 { grid-template-columns: repeat(4, 1fr); }
	.sk-cat-grid.sk-cat-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.sk-cat-grid.sk-cat-cols-1 { grid-template-columns: 1fr; }
}

/* ---- Cards: reuse theme .inside-article chrome (border/shadow/padding) ---- */
.sk-cat-grid .sk-cat-card { margin: 0; display: flex; }
.sk-cat-grid .inside-article {
	width: 100%;
	height: 100%;
	padding: 30px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
/* Featured image flush to the card edges (matches site card style) */
.sk-cat-grid .post-image {
	margin: -30px -30px 15px !important; /* beat theme body.home .post-image margins */
	line-height: 0;
}
.sk-cat-grid .post-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 500 / 263; /* uniform landscape crop -> tidy grid */
	object-fit: cover;
}
.sk-cat-grid .entry-header { margin: 0; }
.sk-cat-grid .entry-title {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 12px;
}
.sk-cat-grid .entry-title a { color: inherit; }
.sk-cat-grid .entry-title a:hover { color: #f42b69; text-decoration: none; }
.sk-cat-grid .entry-summary { margin: 0; }
.sk-cat-grid .entry-summary p { margin: 0; }

/* ---- Full-width "More" button (site pink accent) ---- */
.sk-cat-more { margin-top: 35px; }
.sk-cat-more .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	text-align: center;
	font-weight: 600;
	color: #fff;
	background: #f42b69;
	border-radius: 4px;
}
.sk-cat-more .button:hover,
.sk-cat-more .button:focus {
	background: #0d2449;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 767px) {
	.sk-cat-section { margin-bottom: 40px; }
	.sk-cat-grid .inside-article { padding: 20px; }
	.sk-cat-grid .post-image { margin: -20px -20px 15px !important; }
}