/* ========================================
   CONTACT PAGE
======================================== */


/* HERO */

.contact-hero {
	background: var(--color-background-light);
}

.contact-hero-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	align-items: center;
	gap: 4rem;
}

.contact-hero-content {
	max-width: 520px;
}

.contact-hero-content p {
	margin-bottom: 2rem;

	color: var(--color-text-light);
}

.contact-hero-image {
	width: 100%;
	overflow: hidden;
}

.contact-hero-image img {
	display: block;
	width: 100%;
	height: 330px;
	object-fit: cover;
	object-position: center;
}


/* ========================================
   CONTACT INFO
======================================== */

.contact-info-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.contact-info-card {
	padding: 1.75rem 1rem;

	text-align: center;

	background: #ffffff;

	border: 1px solid var(--color-border);
}

.contact-info-icon {
	width: 44px;
	height: 44px;

	margin: 0 auto 0.8rem;

	display: flex;
	align-items: center;
	justify-content: center;

	color: var(--color-primary);

	font-size: 1.7rem;
}

.contact-info-card h3 {
	margin-bottom: 0.6rem;
}

.contact-info-card p {
	margin-bottom: 0.3rem;

	color: var(--color-text-light);

	font-size: 0.82rem;
}


/* ========================================
   FORM
======================================== */

.contact-form-grid {
	display: grid;
	grid-template-columns: 1.4fr 0.6fr;
	align-items: center;

	max-width: 1000px;

	margin-inline: auto;

	gap: 4rem;
}

.contact-form {
	width: 100%;
}

.form-group {
	margin-bottom: 1rem;
}

.form-group label {
	display: block;

	margin-bottom: 0.35rem;

	font-size: 0.85rem;
	font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;

	padding: 0.8rem 0.9rem;

	color: var(--color-text);

	background: #ffffff;

	border: 1px solid var(--color-border);

	font: inherit;
}

.form-group textarea {
	resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: 2px solid var(--color-primary-light);
	border-color: var(--color-primary);
}


/* Response Card */

.response-card {
	padding: 2rem;

	background: #ffffff;

	border: 1px solid var(--color-border);
}

.response-icon {
	width: 48px;
	height: 48px;

	margin-bottom: 1rem;

	display: flex;
	align-items: center;
	justify-content: center;

	color: var(--color-primary);

	font-size: 2rem;
}

.response-card p {
	color: var(--color-text-light);
}


/* ========================================
   MAP
======================================== */

.map-directions-grid {
	display: grid;
	grid-template-columns: 1.3fr 0.7fr;
	align-items: center;

	max-width: 1000px;

	margin-inline: auto;

	gap: 4rem;
}

.map-placeholder {
	overflow: hidden;
}

.map-placeholder img {
	display: block;

	width: 100%;
	height: 250px;

	object-fit: cover;
}

.directions-content {
	max-width: 360px;
}

.directions-content p {
	margin-bottom: 1.5rem;

	color: var(--color-text-light);
}


/* ========================================
   OFFICE HOURS
======================================== */

.office-hours-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	gap: 1rem;
}

.office-hours-card {
	padding: 1.5rem;

	text-align: center;

	background: #ffffff;

	border: 1px solid var(--color-border);
}

.office-hours-card h3 {
	font-size: 0.9rem;
}

.office-hours-card p,
.office-hours-card a {
	margin-bottom: 0;

	color: var(--color-text-light);

	font-size: 0.82rem;
}


/* Pickup Notice */

.pickup-notice {
	display: flex;
	align-items: center;

	max-width: 950px;

	margin: 1.5rem auto 0;

	padding: 1rem 1.5rem;

	gap: 1rem;

	background: #ffffff;

	border: 1px solid var(--color-border);
}

.pickup-notice-icon {
	flex-shrink: 0;

	width: 40px;
	height: 40px;

	display: flex;
	align-items: center;
	justify-content: center;

	color: var(--color-primary);

	font-size: 1.6rem;
}

.pickup-notice p {
	margin: 0;

	color: var(--color-text-light);

	font-size: 0.82rem;
}


/* ========================================
   ADDITIONAL RESOURCES
======================================== */

.contact-resource-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);

	gap: 1rem;
}

.contact-resource-card {
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 1.5rem 1rem;

	text-align: center;
	text-decoration: none;

	color: var(--color-text);

	background: #ffffff;

	border: 1px solid var(--color-border);
}

.contact-resource-icon {
	width: 44px;
	height: 44px;

	margin-bottom: 0.8rem;

	display: flex;
	align-items: center;
	justify-content: center;

	color: var(--color-primary);

	font-size: 1.7rem;
}

.contact-resource-icon img {
	width: 30px;
	height: 30px;

	object-fit: contain;
}

.contact-resource-card h3 {
	font-size: 0.9rem;
}

.contact-resource-card p {
	flex-grow: 1;

	color: var(--color-text-light);

	font-size: 0.78rem;
}

.contact-resource-card span {
	color: var(--color-primary);

	font-size: 1.2rem;
}


/* ========================================
   FINAL CTA
======================================== */

.contact-final-cta {
	padding-block: 2.5rem;

	background: var(--color-background-light);

	border-top: 1px solid var(--color-border);
}

.contact-final-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 3rem;
}

.contact-final-cta-content {
	display: flex;
	align-items: center;

	gap: 1.25rem;
}

.contact-final-cta-icon {
	flex-shrink: 0;

	width: 52px;
	height: 52px;

	display: flex;
	align-items: center;
	justify-content: center;

	color: var(--color-primary);

	font-size: 1.7rem;
}

.contact-final-cta h2 {
	margin-bottom: 0.25rem;

	font-size: 1.5rem;
}

.contact-final-cta p {
	margin: 0;

	color: var(--color-text-light);
}