/* ==========================================================================
   ZCP Frontend — Intersection Page Styles
   BEM prefix: zcp-
   Design values come from CSS custom properties set inline by the template.
   ========================================================================== */

/* ── Page wrapper ───────────────────────────────────────────────────────── */

.zcp-page {
	max-width: var(--zcp-content-width, 1100px);
	margin: 0 auto;
	padding: 0 20px 60px;
}

.zcp-main {
	padding-top: 32px;
}

/* ── Page header ────────────────────────────────────────────────────────── */

.zcp-page__header {
	margin-bottom: 32px;
}

.zcp-page__title {
	font-size: var(--zcp-size-title, clamp(24px, 4vw, 36px));
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 10px;
	line-height: 1.2;
}

.zcp-page__breadcrumb {
	font-size: 14px;
	color: #6b7280;
	margin: 0;
}

.zcp-page__crumb-label {
	font-weight: 600;
	color: #374151;
}

.zcp-page__crumb-value {
	color: #6b7280;
}

.zcp-page__crumb-sep {
	margin: 0 8px;
	color: #d1d5db;
}

/* ── Descriptions ───────────────────────────────────────────────────────── */

.zcp-top-description,
.zcp-bottom-description {
	font-size: 16px;
	line-height: 1.8;
	margin-bottom: 40px;
}

/* With background (default) */
.zcp-top-description:not(.zcp-top-description--plain),
.zcp-bottom-description:not(.zcp-bottom-description--plain) {
	padding: 28px 32px;
	background: var(--zcp-desc-bg, #f9fafb);
	border: 1px solid #e5e5e5;
	border-radius: var(--zcp-desc-radius, 12px);
}

/* Plain text — no background, no card */
.zcp-top-description--plain,
.zcp-bottom-description--plain {
	padding: 0;
	background: none;
	border: none;
}

/* ── Content blocks ─────────────────────────────────────────────────────── */

.zcp-block {
	margin-bottom: 48px;
}

.zcp-block__heading {
	font-size: var(--zcp-size-section, 20px);
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: var(--zcp-line-height, 3px) solid var(--zcp-line-color, #ff4e33);
}

.zcp-block__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 900px) {
	.zcp-block__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.zcp-block__grid {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		gap: 16px;
		padding-bottom: 12px;
	}

	/* Multiple posts — fixed 260px scroll cards */
	.zcp-card {
		min-width: 260px;
		scroll-snap-align: start;
		flex-shrink: 0;
	}

	/* Single post in section — full width */
	.zcp-block__grid--single .zcp-card {
		min-width: 100%;
		flex-shrink: 1;
	}
}

/* ── Post cards ─────────────────────────────────────────────────────────── */

.zcp-card {
	background: var(--zcp-card-bg, #ffffff);
	border: var(--zcp-card-border-w, 0px) solid var(--zcp-card-border, transparent);
	border-radius: var(--zcp-card-radius, 16px);
	box-shadow: var(--zcp-card-shadow, 0 2px 12px rgba(0,0,0,0.07));
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.2s;
	display: flex;
	flex-direction: column;
}

.zcp-card:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,.12);
	transform: translateY(-2px);
}

/* ── Card thumbnail (CSS colour block) ──────────────────────────────────── */

.zcp-card__thumb {
	height: 140px;
	width: 100%;
	flex-shrink: 0;
	/* background colour set inline per-CPT by template */
}

/* ── Card body (wraps title + excerpt + footer) ─────────────────────────── */

.zcp-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Cards without thumbnail keep padding on the card itself */
.zcp-card:not(.zcp-card--has-thumb) {
	padding: 20px;
}

.zcp-card:not(.zcp-card--has-thumb) .zcp-card__body {
	padding: 0;
}

.zcp-card__title {
	font-size: var(--zcp-size-card, 16px);
	font-weight: 600;
	margin: 0 0 10px;
	line-height: 1.4;
}

.zcp-card__link {
	color: #1a1a1a;
	text-decoration: none;
}

.zcp-card__link:hover {
	color: var(--zcp-card-accent, #ff4e33);
}

.zcp-card__excerpt {
	font-size: 14px;
	color: #6b7280;
	line-height: 1.6;
	margin: 0 0 16px;
	flex-grow: 1;
}

.zcp-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid #f3f4f6;
}

.zcp-card__date {
	font-size: 12px;
	color: #9ca3af;
}

.zcp-card__read-more {
	font-size: 13px;
	font-weight: 600;
	color: var(--zcp-card-accent, #ff4e33);
	text-decoration: none;
}

.zcp-card__read-more:hover {
	text-decoration: underline;
}

/* ── No content ─────────────────────────────────────────────────────────── */

.zcp-no-content {
	padding: 40px;
	text-align: center;
	background: #f9fafb;
	border-radius: 12px;
	border: 1px dashed #d1d5db;
	color: #9ca3af;
	font-size: 14px;
}

/* ── FAQ section ────────────────────────────────────────────────────────── */

.zcp-faq {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid #e5e5e5;
}

.zcp-faq__heading {
	font-size: var(--zcp-size-faq, 22px);
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 24px;
}

.zcp-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.zcp-faq__item {
	border: none;
	border-radius: var(--zcp-faq-radius, 16px);
	overflow: hidden;
	margin-bottom: 8px;
}

.zcp-faq__question {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--zcp-faq-padding, 20px);
	background: var(--zcp-faq-bg, #f5f3ee);
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
	text-align: left;
	transition: background 0.15s;
	border-radius: var(--zcp-faq-radius, 16px);
}

.zcp-faq__question:hover {
	filter: brightness(0.97);
}

.zcp-faq__question[aria-expanded="true"] {
	background: var(--zcp-faq-open-bg, #f5f3ee);
	color: var(--zcp-faq-open-color, #1a1a1a);
	border-radius: var(--zcp-faq-radius, 16px) var(--zcp-faq-radius, 16px) 0 0;
}

/* ── Chevron icon (default) ─────────────────────────────────────────────── */
.zcp-faq__chevron {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #9ca3af;
	flex-shrink: 0;
	margin-left: 12px;
	transition: transform 0.2s;
}

.zcp-faq__question[aria-expanded="true"] .zcp-faq__chevron {
	transform: rotate(180deg);
	border-top-color: currentColor;
}

/* ── Plus / Minus icon ──────────────────────────────────────────────────── */
.zcp-faq--icon-plus .zcp-faq__chevron {
	width: 20px;
	height: 20px;
	border: none;
	position: relative;
	flex-shrink: 0;
	margin-left: 12px;
}

.zcp-faq--icon-plus .zcp-faq__chevron::before,
.zcp-faq--icon-plus .zcp-faq__chevron::after {
	content: '';
	position: absolute;
	background: #6b7280;
	border-radius: 2px;
	transition: transform 0.2s, opacity 0.2s;
}

/* Horizontal bar */
.zcp-faq--icon-plus .zcp-faq__chevron::before {
	width: 14px;
	height: 2px;
	top: 9px;
	left: 3px;
}

/* Vertical bar (hidden when open = minus) */
.zcp-faq--icon-plus .zcp-faq__chevron::after {
	width: 2px;
	height: 14px;
	top: 3px;
	left: 9px;
}

.zcp-faq--icon-plus .zcp-faq__question[aria-expanded="true"] .zcp-faq__chevron::after {
	opacity: 0;
	transform: rotate(90deg);
}

.zcp-faq__answer {
	padding: var(--zcp-faq-padding, 20px);
	font-size: 15px;
	line-height: 1.7;
	color: #4b5563;
	background: var(--zcp-faq-bg, #f5f3ee);
	border-top: 1px solid rgba(0,0,0,.06);
	border-radius: 0 0 var(--zcp-faq-radius, 16px) var(--zcp-faq-radius, 16px);
}

.zcp-faq__answer[hidden] {
	display: none;
}

/* ── Breadcrumb links ───────────────────────────────────────────────────── */

.zcp-page__crumb-link {
	color: #6b7280;
	text-decoration: none;
	border-bottom: 1px solid #d1d5db;
	transition: color 0.15s, border-color 0.15s;
}

.zcp-page__crumb-link:hover {
	color: var(--zcp-card-accent, #ff4e33);
	border-color: var(--zcp-card-accent, #ff4e33);
}

/* ── Whole card clickable ────────────────────────────────────────────────── */

.zcp-card--clickable {
	position: relative;
}

.zcp-card--clickable:hover {
	box-shadow: 0 4px 20px rgba(0,0,0,.10);
	transform: translateY(-2px);
}

/* Keep links inside still functional */
.zcp-card--clickable .zcp-card__link,
.zcp-card--clickable .zcp-card__read-more {
	position: relative;
	z-index: 2;
}

/* ── Related pages shortcode ─────────────────────────────────────────────── */

.zcp-related-pages {
	margin: 32px 0;
	font-size: 14px;
	line-height: 1.8;
}

.zcp-related-pages__title {
	font-weight: 600;
	color: #374151;
	margin: 0 0 8px;
	font-size: 14px;
}

.zcp-related-pages__list {
	margin: 0;
	color: #6b7280;
}

.zcp-related-pages__link {
	color: var(--zcp-card-accent, #ff4e33);
	text-decoration: none;
	white-space: nowrap;
}

.zcp-related-pages__link:hover {
	text-decoration: underline;
}

.zcp-related-pages__sep {
	color: #d1d5db;
	margin: 0 2px;
}