/**
 * News and Events
 *
 * Deliberately small. Layout, spacing, shadows, and rounding come from
 * Bootstrap 5.2.3 and existing theme classes (.section, .r-container,
 * .font-1, .font-2, .accent-color, .text-gray, .bg-accent-color).
 *
 * Only rules that those cannot express live here.
 *
 * Brand accent is #339b47. Eyebrow/link text uses the lighter rgb(71,192,95)
 * that .accent-color already resolves to, so it is not redeclared.
 */

/* ---------- Card ---------- */

.apc-news-card {
	transition: box-shadow .2s ease, transform .2s ease;
}

.apc-news-card:hover,
.apc-news-card:focus-within {
	box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .1) !important;
	transform: translateY(-2px);
}

.apc-news-card__media {
	aspect-ratio: 16 / 10;
	background: #f1f4f1;
}

.apc-news-card__img {
	object-fit: cover;
}

.apc-news-card__placeholder {
	background: linear-gradient(135deg, #eef3ee, #dfeade);
}

/* Card meta sits at utility scale rather than the 18px eyebrow size. */
.apc-news-card__meta {
	font-size: .82rem;
	letter-spacing: .04em;
	font-weight: 600;
}

.apc-news-card__location {
	font-size: .9rem;
}

/*
 * Theme h2 is 72px / h3 is large. Card titles need to sit at the same
 * scale as the Core Values card h5 (Abhaya Libre 24px).
 */
.apc-news-card__title {
	font-size: 1.5rem;
	line-height: 1.2;
}

.apc-news-card__title a {
	color: #212529;
	text-decoration: none;
}

.apc-news-card__title a:hover,
.apc-news-card__title a:focus {
	color: #339b47;
	text-decoration: underline;
}

.apc-news-card__excerpt {
	font-size: .95rem;
	line-height: 1.6;
}

.apc-news-card__link {
	color: #339b47;
	text-decoration: none;
	align-self: flex-start;
}

.apc-news-card__link:hover,
.apc-news-card__link:focus {
	color: #267837;
	text-decoration: underline;
}

/* ---------- Banner heading ---------- */

/*
 * Theme h1.entry-title is 100px, sized for one-word page titles like
 * "About". News titles are full sentences, so cap the scale here.
 */
.single-news_event .entry-title,
.post-type-archive-news_event .entry-title {
	font-size: clamp(2rem, 4.5vw, 3.75rem);
	line-height: 1.1;
	max-width: 20ch;
}

/* ---------- Single entry ---------- */

/* Flyer sits in its own column beside the text. Let it fill that column. */
.apc-news-feature img {
	width: 100%;
	height: auto;
	display: block;
}

.apc-news-content {
	font-size: 1.125rem;
	line-height: 1.65;
	color: rgb(22, 22, 22);
}

.apc-news-content p {
	margin-bottom: 1.25rem;
}

/*
 * .entry-content on this theme carries block-editor styles. Reset the two
 * that fight the template: forced center alignment and top margin on the
 * first child.
 */
.apc-news-content > *:first-child {
	margin-top: 0;
}

/* ---------- Gallery ---------- */

.apc-news-gallery__item {
	aspect-ratio: 4 / 3;
}

.apc-news-gallery__item img {
	object-fit: cover;
	transition: transform .25s ease;
}

.apc-news-gallery__item:hover img,
.apc-news-gallery__item:focus img {
	transform: scale(1.04);
}

/* ---------- Pagination ---------- */

.apc-news-pagination .page-numbers {
	display: inline-block;
	padding: .5rem .9rem;
	margin: 0 .15rem;
	border-radius: .5rem;
	color: #339b47;
	text-decoration: none;
	font-weight: 600;
}

.apc-news-pagination .page-numbers.current {
	background: #339b47;
	color: #fff;
}

.apc-news-pagination .page-numbers:hover:not(.current) {
	background: #eef5ef;
}

/* ---------- CTA phone button ---------- */

/*
 * On the About page this renders as a solid white pill with green text,
 * set by an inline <style> block inside page-about-company.php using
 * !important. Something in the theme overrides .btn inside
 * .bg-accent-color, which is why that page needed !important and why
 * plain rules here lost. Matching the same approach, scoped to news pages.
 *
 * Longer term this belongs in css/style.css so every template inherits it
 * instead of each one redefining it.
 */
.single-news_event .btn-phone-cta,
.post-type-archive-news_event .btn-phone-cta {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #339b47 !important;
}

.single-news_event .btn-phone-cta i,
.post-type-archive-news_event .btn-phone-cta i {
	color: #339b47 !important;
}

.single-news_event .btn-phone-cta:hover,
.single-news_event .btn-phone-cta:focus,
.post-type-archive-news_event .btn-phone-cta:hover,
.post-type-archive-news_event .btn-phone-cta:focus {
	background-color: #f0faf2 !important;
	border-color: #f0faf2 !important;
	color: #238036 !important;
}

.single-news_event .btn-phone-cta:hover i,
.post-type-archive-news_event .btn-phone-cta:hover i {
	color: #238036 !important;
}

/* ---------- Focus and motion ---------- */

.apc-news-card__link:focus-visible,
.apc-news-card__title a:focus-visible,
.apc-news-gallery__item:focus-visible {
	outline: 3px solid #339b47;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.apc-news-card,
	.apc-news-gallery__item img {
		transition: none;
	}

	.apc-news-card:hover,
	.apc-news-card:focus-within,
	.apc-news-gallery__item:hover img {
		transform: none;
	}
}