/**
 * Blog index page styles
 *
 * 1. Featured
 * 2. Post Grid — head, filters, search
 * 3. Post Card
 * 4. Pagination
 * 5. Newsletter CTA
 * 6. Responsive
 */

/* ============================ FEATURED ============================ */
.featured {
	background: var(--color-light-bg);
	padding-block: clamp(3rem, 6vw, 5rem);
}
.featured__grid {
	margin-top: 1.75rem;
}
.featured__media {
	position: relative;
}
.featured__img {
	width: 100%;
	height: 470px;
	object-fit: cover;
}
.featured__tag {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--color-accent-red);
	color: var(--dark-text);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 0.6rem 1.1rem;
}
.featured__body {
	padding-left: clamp(1.5rem, 3vw, 3.5rem);
	padding-top: 1.5rem;
}
.featured__cat {
	color: var(--color-accent-red);
	font-weight: 700;
	font-style: italic;
	font-size: 0.6875rem;
	letter-spacing: 0.4px;
	margin-bottom: 0.5rem;
}
.featured__cat a {
	color: inherit;
	text-decoration: none;
}
.featured__title {
	margin-bottom: 0.75rem;
}
.featured__title a {
	color: var(--heading-color);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
	letter-spacing: -0.3px;
	text-decoration: none;
}
.featured__title a:hover {
	color: var(--color-accent-red);
}
.featured__lead {
	font-size: 1.125rem;
	color: var(--text-color);
	line-height: 1.5;
	margin-bottom: 1rem;
}
.featured__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.125rem;
	padding-block: 1rem;
}
.featured__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	color: var(--text-color);
	font-weight: 600;
	font-size: 0.75rem;
}
.featured__meta-item svg {
	width: 13px;
	height: 13px;
	color: var(--color-accent-red);
	flex-shrink: 0;
}
.featured__cta {
	background: var(--color-accent-red);
	color: var(--dark-text);
	font-weight: 700;
	font-size: 0.8125rem;
	padding: 0.8rem 1.6rem;
}
.featured__cta:hover {
	background: var(--color-nav-bg);
	color: var(--dark-text);
}

/* ============================ POST GRID ============================ */
.post-grid {
	padding-block: clamp(3rem, 6vw, 5rem);
}
.post-grid__lead {
	max-width: 640px;
	margin: 0.75rem auto 0;
	color: var(--text-color);
	font-size: 1rem;
}
.post-grid__filters {
	gap: 0.625rem;
	margin: 2.25rem 0 2.5rem;
}
.post-grid__filter {
	background: var(--background-color);
	border: 1px solid var(--border-color);
	color: var(--heading-color);
	font-weight: 700;
	font-size: 0.75rem;
	padding: 0.7rem 1.25rem;
	text-decoration: none;
}
.post-grid__filter:hover {
	border-color: var(--color-accent-red);
	color: var(--color-accent-red);
}
.post-grid__filter--active,
.post-grid__filter--active:hover {
	background: var(--color-accent-red);
	border-color: var(--color-accent-red);
	color: var(--dark-text);
}
.post-grid__search {
	display: flex;
	margin-left: auto;
	border: 1px solid var(--border-color);
	/* Input and submit are butted together, so the group carries the button
	   radius and clips them rather than each rounding its own corners. */
	border-radius: var(--radius-btn);
	overflow: hidden;
}
.post-grid__search-input {
	border: 0;
	padding: 0.75rem 1rem;
	font-size: 0.8125rem;
	width: 230px;
	max-width: 60vw;
}
.post-grid__search-submit {
	background: var(--color-nav-bg);
	border: 0;
	color: var(--dark-text);
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.post-grid__search-submit:hover {
	background: var(--color-accent-red);
}
.post-grid__search-submit svg {
	width: 15px;
	height: 15px;
}

/* ============================ POST CARD ============================ */
.post-card {
	background: var(--background-color);
	border: 1px solid var(--border-color);
	/* Column flex all the way down so .post-card__foot's margin-top:auto has
	   something to push against — otherwise the author/Read More row floats
	   mid-card on the shorter posts in a row. */
	display: flex;
	flex-direction: column;
}
.post-card__media {
	position: relative;
}
.post-card__img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	display: block;
}
.post-card__date {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--color-accent-red);
	color: var(--dark-text);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5625rem 0.875rem;
}
.post-card__date b {
	font-weight: 800;
	font-size: 1.1875rem;
	line-height: 1;
}
.post-card__date span {
	font-weight: 600;
	font-size: 0.625rem;
	letter-spacing: 1.2px;
	margin-top: 0.25rem;
}
.post-card__body {
	padding: 1.5rem 1.625rem 1.75rem;
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
.post-card__cat {
	color: var(--text-color);
	font-weight: 700;
	font-style: italic;
	font-size: 0.875rem;
	letter-spacing: 0.4px;
	margin-bottom: 0.9rem;
}
.post-card__cat a {
	color: inherit;
	text-decoration: none;
}
.post-card__title {
	margin-bottom: 0.75rem;
}
.post-card__title a {
	color: var(--heading-color);
	font-weight: 800;
	font-size: 1.1875rem;
	line-height: 1.4;
	letter-spacing: -0.3px;
	text-decoration: none;
}
.post-card__title a:hover {
	color: var(--color-accent-red);
}
.post-card__text {
	color: var(--text-color);
	font-size: 0.875rem;
	line-height: 1.75;
	margin-bottom: 1.25rem;
}
.post-card__foot {
	border-top: 1px solid var(--border-color);
	padding-top: 1.125rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
}
.post-card__author {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	font-weight: 600;
	font-size: 0.75rem;
	color: var(--text-color);
}
.post-card__author img {
	border-radius: 50%;
	width: 28px;
	height: 28px;
}
.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--heading-color);
	font-weight: 700;
	font-size: 0.75rem;
	text-decoration: none;
}
.post-card__more svg {
	width: 13px;
	height: 9px;
	color: var(--color-accent-red);
}
.post-card__more:hover {
	color: var(--color-accent-red);
}

/* ============================ PAGINATION ============================ */
.post-grid__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 3rem;
}
.post-grid__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.5rem;
	border: 1px solid var(--border-color);
	color: var(--heading-color);
	font-weight: 700;
	font-size: 0.8125rem;
	text-decoration: none;
}
.post-grid__page:hover {
	border-color: var(--color-accent-red);
	color: var(--color-accent-red);
}
.post-grid__page.current {
	background: var(--color-accent-red);
	border-color: var(--color-accent-red);
	color: var(--dark-text);
}
.post-grid__page.next,
.post-grid__page.prev {
	background: var(--color-nav-bg);
	border-color: var(--color-nav-bg);
	color: var(--dark-text);
	padding: 0 1rem;
}
.post-grid__page.next:hover,
.post-grid__page.prev:hover {
	background: var(--color-accent-red);
	border-color: var(--color-accent-red);
	color: var(--dark-text);
}

/* ============================ NEWSLETTER CTA ============================ */
.newsletter-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 6vw, 4.875rem) 0;
}
.newsletter-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.newsletter-cta__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(12, 12, 12, 0.94) 0%, rgba(12, 12, 12, 0.72) 55%, rgba(12, 12, 12, 0.25) 100%);
}
.newsletter-cta__container {
	position: relative;
}
.newsletter-cta__heading {
	color: var(--dark-text);
	font-weight: 800;
	font-style: italic;
	font-size: clamp(1.75rem, 3.2vw, 2.125rem);
	letter-spacing: -0.3px;
	max-width: 560px;
	margin: 0.75rem 0 1rem;
}
.newsletter-cta__text {
	color: var(--text-color-light);
	font-size: 0.875rem;
	line-height: 1.75;
	max-width: 520px;
	margin-bottom: 1.25rem;
}
.newsletter-cta__form {
	max-width: 520px;
}
/* CF7 wraps the whole form in one <p> with <br> separators, so the input +
   Subscribe row has to be laid out on that <p>, not on the form element. */
.newsletter-cta__form .wpcf7-form p {
	position: relative;
	display: flex;
	gap: 0;
	margin: 0;
}
.newsletter-cta__form .wpcf7-form br {
	display: none;
}
.newsletter-cta__form .wpcf7-form-control-wrap {
	flex: 1 0 0;
}
/* The two controls carry the joined pill's corners themselves. Clipping them
   with overflow on the row instead would also swallow CF7's validation tip,
   which it appends inside the field's own wrapper. */
.newsletter-cta__form input[type="email"] {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--radius-btn) 0 0 var(--radius-btn);
	padding: 0.9rem 1.125rem;
	font-size: 0.8125rem;
}
.newsletter-cta__form input[type="submit"] {
	background: var(--color-accent-red);
	border: 0;
	border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
	color: var(--dark-text);
	font-weight: 700;
	font-size: 0.8125rem;
	padding: 0.9rem 1.6rem;
	white-space: nowrap;
}
/* CF7's spinner is a flex item in this row: left in flow it reserves ~72px
   after Subscribe, so the pill stopped short of its own right edge. */
.newsletter-cta__form .wpcf7-spinner {
	position: absolute;
	right: 1rem;
	bottom: 0.75rem;
	margin: 0;
}
/* Absolute so an invalid address never stretches the pill (the wrap is
   position: relative already, courtesy of CF7). */
.newsletter-cta__form .wpcf7-not-valid-tip {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0.375rem;
	color: var(--color-accent-red);
	font-size: 0.8125rem;
}
.newsletter-cta__form input[type="submit"]:hover {
	background: var(--color-nav-bg);
}
.newsletter-cta__form .wpcf7-response-output {
	color: var(--dark-text);
	margin: 0.75rem 0 0;
	border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================ RESPONSIVE ============================ */

/* --- lg: 992–1199 --- */
@media (max-width: 1199.98px) {
	.featured__body {
		padding-top: 2rem;
	}
}

/* --- md and below: the filter row is too narrow to hold the search box on
       the same line, so give it its own full-width row --- */
@media (max-width: 1199.98px) {
	.post-grid__search {
		width: 100%;
		margin-left: 0;
	}
	.post-grid__search-input {
		max-width: none;
		flex: 1 0 0;
	}
}

/* --- sm: 576–767 --- */
@media (max-width: 767.98px) {
	.newsletter-cta__form .wpcf7-form p {
		flex-direction: column;
	}
	/* Stacked, the joined pill's corners move to top and bottom. */
	.newsletter-cta__form input[type="email"] {
		border-radius: var(--radius-btn) var(--radius-btn) 0 0;
	}
	.newsletter-cta__form input[type="submit"] {
		border-radius: 0 0 var(--radius-btn) var(--radius-btn);
	}
}