/**
 * Keystone Theme - Homepage Styles
 * Loaded on is_home() / is_front_page() only.
 *
 * Widths follow the theme's constrained layout:
 *   Content: 840px   Wide: 1340px
 * All homepage sections sit inside an alignwide (1340px) wrapper.
 */

/* ------------------------------------------------------------------ */
/* FEATURED HERO CARD                                                   */
/* ------------------------------------------------------------------ */

.keystone-hp-featured {
	display: block;
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: #111828;
	margin-bottom: var(--wp--preset--spacing--50);
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
	transition: box-shadow 0.2s ease;
}

.keystone-hp-featured:hover {
	box-shadow: 0 2px 3px rgba(0,0,0,0.3), 0 6px 10px 4px rgba(0,0,0,0.15);
}

.keystone-hp-featured__img {
	width: 100%;
	height: 460px;
	background-size: cover;
	background-position: center;
	display: block;
	transition: transform 0.4s ease;
}

.keystone-hp-featured:hover .keystone-hp-featured__img {
	transform: scale(1.04);
}

.keystone-hp-featured__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(4,7,18,0.94) 0%, rgba(4,7,18,0.15) 55%, transparent 100%);
}

.keystone-hp-featured__body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 32px;
}

.keystone-hp-featured__cat {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 600;
	background: rgba(255,255,255,0.16);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.26);
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.keystone-hp-featured__title {
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	line-height: 1.22;
	margin: 0 0 16px;
	width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.keystone-hp-featured__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: rgba(255,255,255,0.65);
}

.keystone-hp-featured__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1.5px solid rgba(255,255,255,0.2);
}

/* ------------------------------------------------------------------ */
/* H1 + TAGLINE INTRO BLOCK                                             */
/* ------------------------------------------------------------------ */

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

.keystone-hp-intro__h1 {
	font-size: 40px;
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: -0.5px;
	margin: 0 0 10px;
}

.keystone-hp-intro__tagline {
	font-size: 15px;
	color: var(--wp--preset--color--accent-4);
	line-height: 1.6;
	max-width: 840px; /* matches theme contentSize */
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* SECTION WRAPPER + LABEL                                              */
/* ------------------------------------------------------------------ */

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

.keystone-hp-section__label {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 6px;
}

.keystone-hp-section__sub {
	font-size: 14px;
	color: var(--wp--preset--color--accent-4);
	margin: 0 0 20px;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* MOST VIEWED — stacked list                                           */
/* ------------------------------------------------------------------ */

.keystone-hp-mv__item {
	display: flex;
	gap: 12px;
	padding: 11px 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
}

.keystone-hp-mv__item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.keystone-hp-mv__thumb {
	width: 72px;
	height: 58px;
	border-radius: 8px;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
}

.keystone-hp-mv__title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	margin: 3px 0;
}

.keystone-hp-mv__meta {
	font-size: 11px;
	color: var(--wp--preset--color--accent-4);
}

.keystone-hp-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 600;
	background: var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------ */
/* DARK IMAGE-ON-TOP CARD                                               */
/* Shared by 4-col (recently published) and 3-col (recently reviewed)  */
/* ------------------------------------------------------------------ */

.keystone-hp-card {
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	background: #111828;
	text-decoration: none;
	transition: transform 0.18s ease;
}

.keystone-hp-card:hover {
	transform: translateY(-3px);
}

.keystone-hp-card__img {
	width: 100%;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
}

.keystone-hp-card__img--tall   { height: 212px; }
.keystone-hp-card__img--medium { height: 175px; }
.keystone-hp-card__img--short  { height: 140px; }

.keystone-hp-card__body {
	padding: 13px 14px 15px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.keystone-hp-card__author-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.keystone-hp-card__avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1.5px solid rgba(255,255,255,0.1);
}

.keystone-hp-card__author-name {
	font-size: 11px;
	font-weight: 600;
	color: #d8dce8;
	line-height: 1.2;
}

.keystone-hp-card__author-role {
	font-size: 10px;
	color: #6878a0;
	line-height: 1.2;
}

.keystone-hp-card__title {
	font-size: 13px;
	font-weight: 600;
	color: #e4e8f2;
	line-height: 1.42;
	margin-bottom: 7px;
	flex: 1;
}

.keystone-hp-card__footer {
	font-size: 10px;
	color: #5870a0;
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.keystone-hp-card__dot {
	color: #3a4868;
}

/* ------------------------------------------------------------------ */
/* GRIDS                                                                */
/* ------------------------------------------------------------------ */

.keystone-hp-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 16px;
}

/* 4-col cards are narrower so reduce their height */
.keystone-hp-grid-4 .keystone-post-card {
	min-height: 320px;
}

.keystone-hp-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 16px;
}

/* ------------------------------------------------------------------ */
/* TEXT LINK ROWS — below card grids                                    */
/* ------------------------------------------------------------------ */

.keystone-hp-trow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	text-decoration: none;
	color: inherit;
}

.keystone-hp-trow:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.keystone-hp-trow:hover .keystone-hp-trow__title {
	color: var(--wp--preset--color--accent-3);
}

.keystone-hp-trow__title {
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	line-height: 1.4;
	display: inline-block;
	transition: transform 0.2s ease, color 0.2s ease;
}

.keystone-hp-trow:hover .keystone-hp-trow__title {
	transform: translateX(4px);
	color: var(--wp--preset--color--accent-3);
}

.keystone-hp-trow__date {
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-4);
	flex-shrink: 0;
	margin-left: 24px;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* AD BANNER                                                            */
/* ------------------------------------------------------------------ */

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

.keystone-hp-ad__link {
	display: block;
	text-decoration: none;
}

.keystone-hp-ad__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.keystone-hp-ad__img--mobile {
	display: none;
}

@media (max-width: 1024px) {
	.keystone-hp-ad__img--desktop { display: none; }
	.keystone-hp-ad__img--mobile  { display: block; }
}

/* KeystoneAds live slot divs — JS serves into these, CSS hides the off-breakpoint one */
.keystone-hp-ad__slot {
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

.keystone-hp-ad__slot--mobile {
	display: none;
}

/* Rendered ad link + image inside a slot */
.keystone-hp-ad__slot .keystoneads-link {
	display: block;
	text-decoration: none;
}

.keystone-hp-ad__slot .keystoneads-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

@media (max-width: 1024px) {
	.keystone-hp-ad__slot--desktop { display: none; }
	.keystone-hp-ad__slot--mobile  { display: block; }
}

/* ------------------------------------------------------------------ */
/* CATEGORY GRID                                                        */
/* ------------------------------------------------------------------ */

.keystone-hp-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 11px;
	width: 100%;
}

.keystone-hp-cat {
	position: relative;
	border-radius: 11px;
	overflow: hidden;
	height: 74px;
	min-width: 0;
	display: block;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
	transition: box-shadow 0.2s ease;
}

.keystone-hp-cat:hover {
	box-shadow: 0 2px 3px rgba(0,0,0,0.3), 0 6px 10px 4px rgba(0,0,0,0.15);
}

.keystone-hp-cat__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.keystone-hp-cat__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.38);
}

.keystone-hp-cat__content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
}

.keystone-hp-cat__name {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}

.keystone-hp-cat__count {
	font-size: 11px;
	color: rgba(255,255,255,0.85);
	background: rgba(255,255,255,0.15);
	padding: 2px 7px;
	border-radius: 9px;
}

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

@media (max-width: 900px) {
	.keystone-hp-featured__img   { height: 340px; }
	.keystone-hp-featured__title { font-size: 22px; }
	.keystone-hp-intro__h1       { font-size: 32px; }
	.keystone-hp-grid-4          { grid-template-columns: repeat(2, 1fr); }
	.keystone-hp-grid-3          { grid-template-columns: repeat(2, 1fr); }
	.keystone-hp-cats            { grid-template-columns: repeat(3, 1fr); }
}

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

@media (max-width: 600px) {
	/* Reduce the large top gap between header and first ad unit */
	main > .wp-block-group > .alignwide {
		padding-top: var(--wp--preset--spacing--20) !important;
	}

	.keystone-hp-featured__img   { height: 240px; }
	.keystone-hp-featured__body  { padding: 16px; }
	.keystone-hp-featured__title { font-size: 18px; margin-bottom: 10px; }
	.keystone-hp-intro__h1       { font-size: 26px; }
	.keystone-hp-intro__tagline  { font-size: 13px; }

	/* 4-col → horizontal scroll */
	.keystone-hp-grid-4 {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		padding-bottom: 4px;
		scrollbar-width: none;
	}
	.keystone-hp-grid-4::-webkit-scrollbar { display: none; }
	.keystone-hp-grid-4 .keystone-post-card { flex-shrink: 0; width: 75vw; min-height: 380px; }

	/* 3-col → stacked */
	.keystone-hp-grid-3          { grid-template-columns: 1fr; }

	/* Categories → 2-col grid */
	.keystone-hp-cats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 9px;
	}
	.keystone-hp-cat { width: auto; height: 60px; flex-shrink: unset; }

	.keystone-hp-mv__thumb { width: 62px; height: 50px; }
}

/* Spacing between card grids and the text rows that follow them.
 * Applies on homepage sections and anywhere else the pattern is used. */
.keystone-latest-posts__grid + .keystone-hp-trow,
.keystone-hp-grid-4 + .keystone-hp-trow,
.keystone-hp-grid-3 + .keystone-hp-trow {
	margin-top: var(--wp--preset--spacing--50);
}