/**
 * About Page Section Styles
 *
 * CSS for About landing page sections.
 * Loaded conditionally when core/group blocks are present.
 *
 * @package Condor
 */

/* ==========================================================================
   About Main Container (.about-main.about)
   ========================================================================== */

/* About page main container - uses CSS Grid for layout */
.about-main.about {
	color: var(--wp--preset--color--blue);
	display: grid;
	gap: 0 var(--wp--preset--spacing--60);
	grid-template-columns: repeat(4, 1fr);
	max-width: 1200px;
	margin: 0 auto;

	@media (min-width: 568px) {
		grid-template-columns: repeat(8, 1fr);
	}

	@media (min-width: 768px) {
		grid-template-columns: repeat(5, 1fr);
	}

	@media (min-width: 1024px) {
		grid-template-columns: repeat(8, 1fr);
	}

	> * {
		grid-column: 1 / -1;
	}

	.section-header {
		padding-bottom: var(--wp--preset--spacing--40);
	}

	/* ==========================================================================
	   Overview Section (.overview)
	   ========================================================================== */

	.overview {
		padding-bottom: var(--wp--preset--spacing--60);
	}
}

/* Overview photo — multiple selectors for specificity contexts */
.about-main.about .overview .photo,
.overview > .wp-block-group.photo,
.overview .photo {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	margin-bottom: var(--wp--preset--spacing--60);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
}

.about-main.about .overview .photo-wrapper,
.overview .photo-wrapper {
	aspect-ratio: 16 / 9;
	position: relative;
	overflow: hidden;
}

.about-main.about .overview .photo-wrapper img,
.overview .photo-wrapper img,
.overview .photo-wrapper .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Mission Section (.mission)
   ========================================================================== */

.about-main.about .mission,
.mission {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--60);
}

/* ==========================================================================
   Vision Section (.vision)
   ========================================================================== */

.about-main.about .vision,
.vision {
	margin: var(--wp--preset--spacing--60) 0;
	background: var(--wp--preset--color--bright-red);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--60);
}

/* ==========================================================================
   Organization Section (.organization)
   ========================================================================== */

.about-main.about .organization,
.organization {
	margin: 0 0 var(--wp--preset--spacing--60) 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--blue);
	padding: var(--wp--preset--spacing--60);
}

.about-main.about .organization .graphic,
.organization .graphic {
	padding-top: var(--wp--preset--spacing--60);
}

/* ==========================================================================
   Contact Info Section (.contact-info)
   ========================================================================== */

.about-main.about .contact-info,
.contact-info {
	background: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--60);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
	border-radius: 3px;
}

.contact-info {
	.section-header {
		padding-bottom: 0;
	}

	.info {
		padding-top: 25px;

		@media (min-width: 568px) {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.name {
				width: 100%;
			}

			.basic,
			.hours {
				width: calc(50% - 25px);
			}
		}

		.name {
			padding-bottom: 20px;

			img {
				max-width: 100px;
			}
		}

		.basic {
			div + div {
				padding-top: var(--wp--preset--spacing--40);
			}

			.phone p + p {
				padding-top: 5px;
			}

			.email a {
				text-decoration: underline;
			}
		}

		/* ==========================================================================
		   Hours Section (.hours)
		   ========================================================================== */

		.hours {
			padding-top: 1.25rem;

			@media (min-width: 768px) {
				padding-top: 0;
			}

			h4 {
				padding-bottom: 10px;
				font-weight: bold;
				font-style: italic;
			}

			.note {
				padding-top: 10px;
				font-style: italic;
			}
		}
	}
}

.hours-entry,
.contact-info .info .hours .entry {
	display: flex;
	align-items: flex-start;
}

.hours-entry + .hours-entry,
.contact-info .info .hours .entry + .entry {
	padding-top: 10px;
}

.hours-entry .day,
.contact-info .info .hours .entry .day {
	min-width: 60px;
	text-transform: uppercase;
}