/**
 * Page Contact
 * Styles spécifiques pour la page de contact (infos + carte)
 *
 * @package TacticHall
 */

/* ==========================================================================
   Section Contact - Utilise .grid-2-2xl + .items-start de base.css
   ========================================================================== */

/* ==========================================================================
   Informations de contact (colonne gauche)
   ========================================================================== */

.contact-info-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.contact-info-block {
	display: flex;
	gap: var(--spacing-sm);
	align-items: flex-start;
	padding: var(--spacing-sm);
	background: var(--color-white);
	border: var(--border-light);
	transition: all var(--transition-slow);
}

.contact-info-block:hover {
	border-color: var(--color-black);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.contact-info-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-black);
	color: var(--color-white);
	border-radius: 4px;
}

.contact-info-icon svg {
	width: 24px;
	height: 24px;
}

.contact-info-content {
	flex: 1;
}

/* Note: Utilise .title-small de global.css dans le template */

.contact-info-content p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-gunmetal);
}

.contact-info-content address {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-gunmetal);
}

.contact-info-content a {
	color: var(--color-black);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--transition-base);
}

.contact-info-content a:hover {
	color: var(--color-gunmetal);
	text-decoration: underline;
}

/* Horaires */
.horaires-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.horaires-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.35rem 0;
	border-bottom: var(--border-light);
}

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

.horaires-day {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-gunmetal);
}

.horaires-time {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-black);
}

/* Réseaux sociaux - Utilise .btn-small de global.css */
.contact-social-links {
	display: flex;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

/* ==========================================================================
   Carte Google Maps (colonne droite)
   ========================================================================== */

/* Utilise .sticky-top-sm de base.css */
.contact-map-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.contact-map {
	width: 100%;
	height: 500px;
	border: var(--border-primary);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contact-map iframe {
	display: block;
}

/* Note: .btn-full-width existe dans global.css */
/* Note: .bg-smoke existe déjà dans base.css, pas besoin de .bg-light */

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

@media (max-width: 1024px) {
	.contact-grid {
		gap: var(--spacing-xl);
	}

	.contact-map {
		height: 400px;
	}
}

@media (max-width: 768px) {
	.contact-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.contact-info-wrapper {
		gap: var(--spacing-md);
	}

	.contact-info-block {
		padding: var(--spacing-sm);
		gap: var(--spacing-sm);
	}

	.contact-info-icon {
		width: 40px;
		height: 40px;
	}

	.contact-info-icon svg {
		width: 20px;
		height: 20px;
	}

	.contact-map-wrapper {
		position: static;
	}

	.contact-map {
		height: 350px;
	}

	.horaires-list li {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
}

@media (max-width: 480px) {
	.contact-info-block {
		flex-direction: column;
		text-align: center;
	}

	.contact-info-icon {
		margin: 0 auto;
	}

	.contact-social-links {
		justify-content: center;
	}

	.contact-map {
		height: 300px;
	}
}