/* ==========================================================================
   Section-specific layout
   ========================================================================== */

/* ---- Hero ---- */
.hero { background-color: var(--color-inverse-bg); color: var(--color-inverse-text); position: relative; overflow: hidden; }
.hero-slide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--space-8);
	min-height: 520px;
	padding-block: var(--space-10);
	position: relative;
}
.hero-slide__content { position: relative; z-index: 2; }
.hero-slide__content h1 { color: var(--color-inverse-text); margin-bottom: var(--space-4); }
.hero-slide__content p { color: var(--color-inverse-text-muted); max-width: 44ch; margin-bottom: var(--space-6); font-size: 1.05rem; }
.hero-slide__media { position: relative; }
.hero-slide__media img { border-radius: var(--radius-lg); width: 100%; }
.hero-decor { position: absolute; pointer-events: none; opacity: 0.9; }

.hero .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 100%; display: flex; justify-content: space-between; left: 0; padding: 0 var(--container-pad); pointer-events: none; }
.hero .carousel-nav button { pointer-events: all; background-color: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }
.hero .carousel-dots { position: relative; margin-top: var(--space-6); z-index: 3; }

@media (max-width: 768px) {
	.hero-slide { grid-template-columns: 1fr; text-align: left; min-height: auto; padding-block: var(--space-8); }
	.hero-slide__media { order: -1; }
}

/* ---- Quick-links strip ---- */
.quicklinks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 768px) { .quicklinks-grid { grid-template-columns: 1fr; } }

/* ---- Our Story / timeline banner ---- */
.story-banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-4); }
.story-banner img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.story-banner__caption { text-align: center; font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.timeline-panel { max-width: 640px; margin: 0 auto; text-align: center; color: var(--color-text-muted); }
@media (max-width: 768px) {
	.timeline { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
	.timeline::before { display: none; }
	.timeline-item { flex-direction: row; align-items: center; width: 100%; }
	.timeline-item__label { text-align: left; }
}

/* ---- Why choose us ---- */
.why-choose-us__media img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-10); }
.contact-info { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-info__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-info__item svg { width: 22px; height: 22px; color: var(--color-brand); flex-shrink: 0; margin-top: 2px; }
.contact-info__social { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.contact-info__social a {
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	display: flex; align-items: center; justify-content: center;
	color: var(--color-text);
}
.contact-info__social a:hover { background-color: var(--color-brand); border-color: var(--color-brand); color: var(--color-brand-contrast); }

@media (max-width: 768px) {
	.contact-grid { grid-template-columns: 1fr; }
	.contact-info { order: 2; }
}