/**
 * Programs Page Styles
 * Showcases all CHV programs organized by user need
 *
 * @package CHV_Theme
 */

/* ============================================
   Hero Section
   ============================================ */
.chv-programs-hero {
	background: linear-gradient(120deg, #1a5a9e 0%, var(--chv-primary-blue) 60%, var(--chv-secondary-blue) 100%);
	color: var(--chv-text-light);
	padding: var(--chv-spacing-section) var(--chv-page-padding);
	width: 100%;
	box-sizing: border-box;
}

.chv-programs-hero-content {
	max-width: var(--chv-container-max);
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: var(--chv-spacing-xl);
}

.chv-programs-hero-text {
	flex: 1;
	text-align: left;
}

.chv-programs-hero-images {
	flex: 1;
	max-width: 500px;
}

.chv-hero-image-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--chv-spacing-sm);
}

.chv-hero-image-grid img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: var(--chv-radius-lg);
	box-shadow: var(--chv-shadow-lg);
}

.chv-programs-hero-title {
	font-size: var(--chv-font-hero);
	font-weight: var(--chv-font-weight-bold);
	margin: 0 0 var(--chv-spacing-md) 0;
	line-height: 1.2;
}

.chv-programs-hero-subtitle {
	font-size: var(--chv-font-lg);
	margin: 0;
	opacity: 0.95;
	line-height: var(--chv-line-height-relaxed);
}

/* ============================================
   Shared Section Styles
   ============================================ */
.chv-programs-page .chv-section {
	padding: var(--chv-spacing-section) var(--chv-page-padding);
	width: 100%;
	box-sizing: border-box;
}

.chv-programs-page .chv-section-container {
	max-width: var(--chv-container-max);
	margin: 0 auto;
}

.chv-section-intro {
	font-size: var(--chv-font-lg);
	text-align: center;
	max-width: 800px;
	margin: 0 auto var(--chv-spacing-xl) auto;
	color: var(--chv-text-gray);
	line-height: var(--chv-line-height-relaxed);
}

/* All content sections use light background */
.chv-programs-page .chv-section {
	background: var(--chv-light-blue-bg);
}

/* ============================================
   Programs Overview Table (Option A Layout)
   ============================================ */

.chv-programs-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--chv-text-light);
	border-radius: var(--chv-radius-xl);
	overflow: hidden;
	box-shadow: var(--chv-shadow-md);
}

.chv-programs-row {
	border-bottom: 1px solid var(--chv-border-light);
}

.chv-programs-row:last-child {
	border-bottom: none;
}

.chv-programs-category {
	width: 200px;
	padding: var(--chv-spacing-xl);
	vertical-align: middle;
	background: var(--chv-light-blue-bg);
	border-right: 1px solid var(--chv-border-light);
}

.chv-programs-category h3 {
	font-size: var(--chv-font-lg);
	font-weight: var(--chv-font-weight-bold);
	color: var(--chv-primary-blue);
	margin: 0;
	line-height: 1.3;
}

.chv-programs-items {
	padding: var(--chv-spacing-lg);
	vertical-align: top;
}

.chv-program-item {
	display: flex;
	gap: var(--chv-spacing-md);
	padding: var(--chv-spacing-md) 0;
	border-bottom: 1px solid var(--chv-border-light);
}

.chv-program-item:first-child {
	padding-top: 0;
}

.chv-program-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.chv-program-icon {
	flex-shrink: 0;
	color: var(--chv-accent-warm);
	line-height: 0;
	padding-top: 2px;
}

.chv-program-icon svg {
	width: 24px;
	height: 24px;
}

.chv-program-content {
	flex: 1;
}

.chv-program-content h4 {
	font-size: var(--chv-font-base);
	font-weight: var(--chv-font-weight-bold);
	color: var(--chv-text-dark);
	margin: 0 0 var(--chv-spacing-xs) 0;
}

.chv-program-content p {
	font-size: var(--chv-font-sm);
	line-height: var(--chv-line-height-relaxed);
	color: var(--chv-text-gray);
	margin: 0 0 var(--chv-spacing-sm) 0;
}

.chv-program-link {
	display: inline-block;
	font-size: var(--chv-font-sm);
	font-weight: var(--chv-font-weight-semibold);
	color: var(--chv-primary-blue);
	text-decoration: none;
	transition: var(--chv-transition);
}

.chv-program-link:hover {
	color: var(--chv-secondary-blue);
}

/* ============================================
   Program Cards Grid (legacy, kept for reference)
   ============================================ */
.chv-programs-grid {
	display: grid;
	gap: var(--chv-spacing-lg);
}

.chv-programs-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.chv-program-card {
	background: var(--chv-text-light);
	padding: var(--chv-spacing-xl);
	border-radius: var(--chv-radius-xl);
	box-shadow: var(--chv-shadow-md);
	transition: var(--chv-transition);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.chv-program-card:hover {
	box-shadow: var(--chv-shadow-lg);
	transform: translateY(-4px);
}

.chv-program-card-icon {
	color: var(--chv-accent-warm);
	margin-bottom: var(--chv-spacing-md);
	line-height: 0;
}

.chv-program-card-title {
	font-size: var(--chv-font-card);
	font-weight: var(--chv-font-weight-bold);
	margin: 0 0 var(--chv-spacing-sm) 0;
	color: var(--chv-text-dark);
}

.chv-program-card-desc {
	font-size: var(--chv-font-base);
	line-height: var(--chv-line-height-relaxed);
	color: var(--chv-text-gray);
	margin: 0 0 var(--chv-spacing-md) 0;
	flex-grow: 1;
}

.chv-program-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--chv-primary-blue);
	font-size: var(--chv-font-base);
	font-weight: var(--chv-font-weight-semibold);
	text-decoration: none;
	transition: var(--chv-transition);
}

.chv-program-card-link:hover {
	color: var(--chv-secondary-blue);
}

.chv-program-card-link::after {
	content: "\2192";
	transition: transform 0.2s ease;
}

.chv-program-card-link:hover::after {
	transform: translateX(4px);
}

/* Support section cards have white background */
.chv-programs-support .chv-program-card {
	background: var(--chv-text-light);
}

/* ============================================
   Detail Sections
   ============================================ */
.chv-program-detail {
	padding-top: 80px;
	padding-bottom: 80px;
}

.chv-detail-title {
	font-size: var(--chv-font-section);
	font-weight: var(--chv-font-weight-bold);
	text-align: center;
	margin: 0 0 var(--chv-spacing-md) 0;
	color: var(--chv-text-dark);
}

.chv-detail-intro {
	font-size: var(--chv-font-lg);
	text-align: center;
	max-width: 900px;
	margin: 0 auto var(--chv-spacing-xl) auto;
	color: var(--chv-text-gray);
	line-height: var(--chv-line-height-relaxed);
}

/* Events Detail Categories */
.chv-detail-categories {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--chv-spacing-lg);
	margin-bottom: var(--chv-spacing-xl);
}

.chv-detail-category {
	background: var(--chv-text-light);
	padding: var(--chv-spacing-lg);
	border-radius: var(--chv-radius-xl);
	box-shadow: var(--chv-shadow-sm);
}

.chv-detail-category h3 {
	font-size: var(--chv-font-lg);
	font-weight: var(--chv-font-weight-bold);
	margin: 0 0 var(--chv-spacing-sm) 0;
	color: var(--chv-primary-blue);
}

.chv-detail-category p {
	font-size: var(--chv-font-base);
	line-height: var(--chv-line-height-relaxed);
	color: var(--chv-text-gray);
	margin: 0 0 var(--chv-spacing-sm) 0;
}

.chv-detail-category p:last-child {
	margin-bottom: 0;
}

.chv-detail-example {
	font-size: var(--chv-font-sm);
	font-style: italic;
	color: var(--chv-text-gray);
}

/* Detail CTA */
.chv-detail-cta {
	text-align: center;
	margin-top: var(--chv-spacing-xl);
}

.chv-detail-button {
	display: inline-block;
	padding: 16px 32px;
	background: var(--chv-primary-blue);
	color: var(--chv-text-light);
	border-radius: var(--chv-radius-lg);
	font-size: var(--chv-font-base);
	font-weight: var(--chv-font-weight-semibold);
	text-decoration: none;
	transition: var(--chv-transition);
	box-shadow: var(--chv-shadow-sm);
}

.chv-detail-button:hover {
	background: var(--chv-secondary-blue);
	transform: translateY(-2px);
	box-shadow: var(--chv-shadow-md);
}

.chv-detail-contact {
	font-size: var(--chv-font-base);
	color: var(--chv-text-gray);
	margin: 0;
}

.chv-detail-contact a {
	color: var(--chv-primary-blue);
	font-weight: var(--chv-font-weight-semibold);
	text-decoration: none;
}

.chv-detail-contact a:hover {
	text-decoration: underline;
}

/* ============================================
   Affinity Groups Detail
   ============================================ */
.chv-affinity-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--chv-spacing-lg);
}

.chv-affinity-category {
	background: var(--chv-text-light);
	padding: var(--chv-spacing-lg);
	border-radius: var(--chv-radius-xl);
	box-shadow: var(--chv-shadow-sm);
}

.chv-affinity-category h3 {
	font-size: var(--chv-font-lg);
	font-weight: var(--chv-font-weight-bold);
	margin: 0 0 var(--chv-spacing-md) 0;
	color: var(--chv-primary-blue);
	padding-bottom: var(--chv-spacing-sm);
	border-bottom: 2px solid var(--chv-border-light);
}

.chv-affinity-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chv-affinity-list li {
	font-size: var(--chv-font-sm);
	line-height: var(--chv-line-height-relaxed);
	color: var(--chv-text-gray);
	padding: var(--chv-spacing-xs) 0;
	border-bottom: 1px solid var(--chv-border-light);
}

.chv-affinity-list li:last-child {
	border-bottom: none;
}

.chv-affinity-list strong {
	color: var(--chv-text-dark);
}

/* ============================================
   Respite Detail
   ============================================ */
.chv-respite-programs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--chv-spacing-lg);
	margin-bottom: var(--chv-spacing-xl);
}

.chv-respite-program {
	background: var(--chv-text-light);
	padding: var(--chv-spacing-lg);
	border-radius: var(--chv-radius-xl);
	box-shadow: var(--chv-shadow-sm);
}

.chv-respite-program h3 {
	font-size: var(--chv-font-lg);
	font-weight: var(--chv-font-weight-bold);
	margin: 0 0 var(--chv-spacing-md) 0;
	color: var(--chv-primary-blue);
}

.chv-respite-program p {
	font-size: var(--chv-font-base);
	line-height: var(--chv-line-height-relaxed);
	color: var(--chv-text-gray);
	margin: 0 0 var(--chv-spacing-sm) 0;
}

.chv-respite-example {
	background: var(--chv-text-light);
	padding: var(--chv-spacing-md);
	border-radius: var(--chv-radius-lg);
	font-size: var(--chv-font-sm);
	color: var(--chv-text-gray);
	margin: var(--chv-spacing-md) 0;
}

.chv-respite-contact {
	font-size: var(--chv-font-sm);
	margin-top: var(--chv-spacing-md);
}

.chv-respite-contact a {
	color: var(--chv-primary-blue);
	font-weight: var(--chv-font-weight-semibold);
	text-decoration: none;
}

.chv-respite-details {
	list-style: none;
	margin: var(--chv-spacing-md) 0 0 0;
	padding: 0;
}

.chv-respite-details li {
	font-size: var(--chv-font-sm);
	line-height: var(--chv-line-height-relaxed);
	color: var(--chv-text-gray);
	padding: var(--chv-spacing-xs) 0;
}

/* ============================================
   Transportation Detail
   ============================================ */
.chv-transport-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--chv-spacing-md);
	margin-bottom: var(--chv-spacing-xl);
}

.chv-transport-category {
	background: var(--chv-text-light);
	padding: var(--chv-spacing-lg);
	border-radius: var(--chv-radius-xl);
	box-shadow: var(--chv-shadow-sm);
}

.chv-transport-category h3 {
	font-size: var(--chv-font-base);
	font-weight: var(--chv-font-weight-bold);
	margin: 0 0 var(--chv-spacing-sm) 0;
	color: var(--chv-primary-blue);
}

.chv-transport-category p {
	font-size: var(--chv-font-sm);
	line-height: var(--chv-line-height-relaxed);
	color: var(--chv-text-gray);
	margin: 0;
}

/* ============================================
   Advocacy Detail
   ============================================ */
.chv-advocacy-initiatives {
	margin-bottom: var(--chv-spacing-xl);
}

.chv-advocacy-initiatives h3 {
	font-size: var(--chv-font-lg);
	font-weight: var(--chv-font-weight-bold);
	text-align: center;
	margin: 0 0 var(--chv-spacing-lg) 0;
	color: var(--chv-text-dark);
}

.chv-initiative-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--chv-spacing-md);
}

.chv-initiative {
	background: var(--chv-text-light);
	padding: var(--chv-spacing-lg);
	border-radius: var(--chv-radius-xl);
	box-shadow: var(--chv-shadow-sm);
}

.chv-initiative h4 {
	font-size: var(--chv-font-base);
	font-weight: var(--chv-font-weight-bold);
	margin: 0 0 var(--chv-spacing-sm) 0;
	color: var(--chv-primary-blue);
}

.chv-initiative p {
	font-size: var(--chv-font-sm);
	line-height: var(--chv-line-height-relaxed);
	color: var(--chv-text-gray);
	margin: 0;
}

.chv-advocacy-lgbt {
	background: var(--chv-text-light);
	padding: var(--chv-spacing-lg);
	border-radius: var(--chv-radius-xl);
	max-width: 800px;
	margin: 0 auto var(--chv-spacing-lg) auto;
	box-shadow: var(--chv-shadow-sm);
}

.chv-advocacy-lgbt h3 {
	font-size: var(--chv-font-lg);
	font-weight: var(--chv-font-weight-bold);
	margin: 0 0 var(--chv-spacing-sm) 0;
	color: var(--chv-primary-blue);
}

.chv-advocacy-lgbt p {
	font-size: var(--chv-font-base);
	line-height: var(--chv-line-height-relaxed);
	color: var(--chv-text-gray);
	margin: 0;
}

/* ============================================
   Contact Section
   ============================================ */
.chv-programs-page .chv-contact-content {
	max-width: 600px;
}

.chv-programs-page .chv-contact-name {
	margin: 0 0 var(--chv-spacing-md) 0;
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablets */
@media (max-width: 992px) {
	.chv-programs-hero-content {
		flex-direction: column;
		text-align: center;
	}

	.chv-programs-hero-text {
		text-align: center;
	}

	.chv-programs-hero-images {
		max-width: 100%;
	}

	.chv-programs-grid-2 {
		grid-template-columns: 1fr;
	}

	.chv-detail-categories {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.chv-affinity-grid {
		grid-template-columns: 1fr;
	}

	.chv-respite-programs {
		grid-template-columns: 1fr;
	}

	.chv-transport-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.chv-transport-highlight {
		grid-column: span 2;
	}

	.chv-initiative-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.chv-resource-cards {
		grid-template-columns: 1fr;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.chv-programs-hero,
	.chv-programs-page .chv-section {
		padding: 50px var(--chv-spacing-md);
	}

	.chv-program-detail {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.chv-program-card {
		padding: var(--chv-spacing-lg);
	}

	/* Programs table mobile - stack vertically */
	.chv-programs-table,
	.chv-programs-table tbody,
	.chv-programs-row,
	.chv-programs-category,
	.chv-programs-items {
		display: block;
		width: 100%;
	}

	.chv-programs-category {
		border-right: none;
		border-bottom: none;
		padding: var(--chv-spacing-lg) var(--chv-spacing-lg) var(--chv-spacing-sm);
	}

	.chv-programs-items {
		padding: var(--chv-spacing-sm) var(--chv-spacing-lg) var(--chv-spacing-lg);
	}

	.chv-programs-row {
		border-bottom: 2px solid var(--chv-border-light);
	}

	.chv-transport-grid {
		grid-template-columns: 1fr;
	}

	.chv-transport-highlight {
		grid-column: span 1;
	}

	.chv-initiative-grid {
		grid-template-columns: 1fr;
	}

	.chv-detail-button {
		width: 100%;
		text-align: center;
		padding: 14px 24px;
	}
}

/* Small Mobile */
@media (max-width: 480px) {
	.chv-programs-hero,
	.chv-programs-page .chv-section {
		padding: 40px var(--chv-spacing-sm);
	}

	.chv-program-card,
	.chv-detail-category,
	.chv-affinity-category,
	.chv-respite-program,
	.chv-transport-category,
	.chv-initiative,
	.chv-lgbt-why,
	.chv-resource-card,
	.chv-lgbt-events,
	.chv-advocacy-join {
		padding: var(--chv-spacing-md);
	}

}