/* =========================================================================
   LCIIT CONTACT INQUIRY PRO — LAYOUTS.CSS
   Structural layout CSS for all 6 layout types.
   This file is always loaded alongside the active theme CSS.
   Theme CSS handles colors/typography; this file handles structure/grid.
   ========================================================================= */

/* -------------------------------------------------------------------------
   SHARED RESETS (apply to all layouts)
   ---------------------------------------------------------------------- */
.lciit-wrapper { position: relative; isolation: isolate; overflow: hidden; }
.lciit-wrapper * { box-sizing: border-box; }
.lciit-wrapper img { max-width: 100%; display: block; }

/* -------------------------------------------------------------------------
   LAYOUT 1: CLASSIC
   Left: Info card | Right: Form card (default 2-col at desktop)
   ---------------------------------------------------------------------- */
.lciit-layout-classic .lciit-hero-inner {
	display: flex; flex-direction: column;
	align-items: center; text-align: center; gap: 24px;
	max-width: 1180px; margin: 0 auto;
}
.lciit-layout-classic .lciit-main-grid {
	display: grid; grid-template-columns: 1fr;
	gap: 24px; max-width: 1180px; margin: 0 auto;
	position: relative; z-index: 1;
}
@media (min-width: 768px) {
	.lciit-layout-classic .lciit-hero-inner { flex-direction: row; text-align: left; justify-content: space-between; gap: 40px; }
	.lciit-layout-classic .lciit-hero-text { flex: 1 1 50%; }
	.lciit-layout-classic .lciit-hero-illustration { flex: 1 1 40%; max-width: 380px; }
	.lciit-layout-classic .lciit-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.lciit-layout-classic .lciit-main-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
	.lciit-layout-classic .lciit-info-card { position: sticky; top: 24px; }
}

/* -------------------------------------------------------------------------
   LAYOUT 2: REVERSED
   Left: Form card | Right: Info card
   ---------------------------------------------------------------------- */
.lciit-layout-reversed .lciit-hero-inner {
	display: flex; flex-direction: column;
	align-items: center; text-align: center; gap: 24px;
	max-width: 1180px; margin: 0 auto;
}
.lciit-layout-reversed .lciit-main-grid {
	display: grid; grid-template-columns: 1fr;
	gap: 24px; max-width: 1180px; margin: 0 auto;
	position: relative; z-index: 1;
}
@media (min-width: 768px) {
	.lciit-layout-reversed .lciit-hero-inner { flex-direction: row-reverse; text-align: right; justify-content: space-between; gap: 40px; }
	.lciit-layout-reversed .lciit-hero-text { flex: 1 1 50%; }
	.lciit-layout-reversed .lciit-hero-illustration { flex: 1 1 40%; max-width: 380px; }
	.lciit-layout-reversed .lciit-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.lciit-layout-reversed .lciit-main-grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
	.lciit-layout-reversed .lciit-info-card { position: sticky; top: 24px; }
}

/* -------------------------------------------------------------------------
   LAYOUT 3: BANNER
   Top: Centered hero | Middle: Horizontal info bar | Bottom: Full-width form
   ---------------------------------------------------------------------- */
.lciit-layout-banner .lciit-hero-centered {
	text-align: center; max-width: 680px;
	margin: 0 auto 32px; position: relative; z-index: 1;
}
.lciit-layout-banner .lciit-hero-subtitle { margin: 0 auto; }

.lciit-info-banner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 16px; max-width: 1180px; margin: 0 auto 28px;
}
@media (min-width: 768px) {
	.lciit-info-banner { grid-template-columns: repeat(4, 1fr); }
}

.lciit-banner-item {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	padding: 20px 18px; border-radius: 16px;
	background: var(--lciit-card-bg, rgba(255,255,255,0.55));
	border: 1px solid var(--lciit-card-border, rgba(255,255,255,0.65));
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.lciit-banner-item strong {
	display: block; font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--lciit-muted, #5b6178);
}
.lciit-banner-item p {
	margin: 0; font-size: 13px;
	color: var(--lciit-ink, #1b1f3b);
}
.lciit-banner-item a { color: inherit; text-decoration: none; }

.lciit-layout-banner .lciit-form-full {
	max-width: 1180px; margin: 0 auto;
	position: relative; z-index: 1;
}
.lciit-layout-banner .lciit-form-grid { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) {
	.lciit-layout-banner .lciit-form-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* -------------------------------------------------------------------------
   LAYOUT 4: CENTERED
   Narrow centered: heading + 3-col contact strip + wide form
   ---------------------------------------------------------------------- */
.lciit-layout-centered .lciit-centered-wrap {
	max-width: 860px; margin: 0 auto;
	position: relative; z-index: 1;
}
.lciit-layout-centered .lciit-hero-centered {
	text-align: center; margin-bottom: 32px;
}
.lciit-layout-centered .lciit-hero-subtitle { margin: 0 auto; }

.lciit-info-strip {
	display: grid; grid-template-columns: 1fr;
	gap: 16px; margin-bottom: 28px;
}
@media (min-width: 600px) {
	.lciit-info-strip { grid-template-columns: repeat(3, 1fr); }
}

.lciit-strip-item {
	display: flex; flex-direction: column; align-items: center;
	text-align: center; gap: 10px;
	padding: 20px 16px; border-radius: 14px;
	background: var(--lciit-card-bg, rgba(255,255,255,0.55));
	border: 1px solid var(--lciit-card-border, rgba(255,255,255,0.65));
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.lciit-strip-item strong {
	font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.07em;
	color: var(--lciit-muted, #5b6178);
}
.lciit-strip-item p { margin: 0; font-size: 13px; color: var(--lciit-ink, #1b1f3b); }

.lciit-layout-centered .lciit-form-card {
	position: relative; z-index: 1;
}
.lciit-layout-centered .lciit-form-grid { grid-template-columns: 1fr 1fr; }

/* -------------------------------------------------------------------------
   LAYOUT 5: SPLIT SCREEN
   Left: Full-height coloured info panel | Right: Scrollable form panel
   ---------------------------------------------------------------------- */
.lciit-layout-split { padding: 0 !important; min-height: 100vh; }
.lciit-layout-split .lciit-bg-animated { display: none; }

.lciit-split-wrap {
	display: flex; flex-direction: column; min-height: 100vh;
}
@media (min-width: 900px) {
	.lciit-split-wrap { flex-direction: row; }
}

.lciit-split-left {
	position: relative; z-index: 1;
	padding: 48px 36px; display: flex; flex-direction: column;
	background: var(--lciit-card-bg, rgba(0,30,60,0.6));
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 900px) {
	.lciit-split-left {
		width: 42%; min-height: 100vh; position: sticky; top: 0;
		max-height: 100vh; overflow-y: auto;
	}
}

.lciit-split-left-inner { display: flex; flex-direction: column; height: 100%; gap: 20px; }
.lciit-split-left .lciit-hero-title { font-size: clamp(28px, 4vw, 42px); margin: 8px 0; }
.lciit-split-left .lciit-hero-subtitle { font-size: 14px; }
.lciit-split-illustration { max-width: 240px; margin: 8px 0; }
.lciit-split-illustration img { width: 100%; }

/* Info inside split-left: remove card background */
.lciit-split-info .lciit-info-title,
.lciit-split-info .lciit-info-tagline { display: none; }
.lciit-split-info .lciit-btn-outline { display: none; }
.lciit-split-info .lciit-info-list { margin-bottom: 12px; }

.lciit-split-right {
	flex: 1; padding: 48px 32px;
	display: flex; flex-direction: column;
	justify-content: center;
	background: var(--lciit-bg, #f5f7ff);
}
@media (min-width: 900px) { .lciit-split-right { min-height: 100vh; overflow-y: auto; } }

.lciit-split-right .lciit-form-card {
	max-width: 620px; width: 100%; margin: 0 auto;
}
.lciit-split-right .lciit-form-grid { grid-template-columns: 1fr 1fr; }

/* -------------------------------------------------------------------------
   LAYOUT 6: BOTTOM
   Top: Centered hero | Middle: Full-width form | Bottom: 4 info mini-cards
   ---------------------------------------------------------------------- */
.lciit-layout-bottom .lciit-hero-centered {
	text-align: center; max-width: 680px;
	margin: 0 auto 28px; position: relative; z-index: 1;
}
.lciit-layout-bottom .lciit-hero-subtitle { margin: 0 auto; }

.lciit-layout-bottom .lciit-form-full {
	max-width: 1180px; margin: 0 auto 28px;
	position: relative; z-index: 1;
}
.lciit-layout-bottom .lciit-form-grid { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) {
	.lciit-layout-bottom .lciit-form-grid { grid-template-columns: repeat(4, 1fr); }
}

.lciit-info-cards-row {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 16px; max-width: 1180px; margin: 0 auto;
	position: relative; z-index: 1;
}
@media (min-width: 768px) {
	.lciit-info-cards-row { grid-template-columns: repeat(4, 1fr); }
}

.lciit-info-mini-card {
	display: flex; flex-direction: column; align-items: center;
	text-align: center; gap: 10px; padding: 22px 16px;
	border-radius: 18px;
	background: var(--lciit-card-bg, rgba(255,255,255,0.55));
	border: 1px solid var(--lciit-card-border, rgba(255,255,255,0.65));
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	transition: transform 0.3s ease;
}
.lciit-info-mini-card:hover { transform: translateY(-4px); }
.lciit-info-mini-card strong {
	font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.07em;
	color: var(--lciit-muted, #5b6178);
}
.lciit-info-mini-card p { margin: 0; font-size: 13px; color: var(--lciit-ink, #1b1f3b); }

/* -------------------------------------------------------------------------
   SHARED HERO SECTION (used by all layouts that have a hero)
   ---------------------------------------------------------------------- */
.lciit-hero { position: relative; z-index: 1; margin-bottom: 32px; }
.lciit-hero-text { flex: 1 1 50%; }
.lciit-hero-illustration { width: 100%; max-width: 340px; }

/* -------------------------------------------------------------------------
   SHARED FORM GRID RESPONSIVE (single column on mobile for all layouts)
   ---------------------------------------------------------------------- */
@media (max-width: 600px) {
	.lciit-form-grid { grid-template-columns: 1fr !important; }
	.lciit-info-cards-row { grid-template-columns: 1fr 1fr; }
	.lciit-info-banner { grid-template-columns: 1fr; }
	.lciit-info-strip { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.lciit-reveal, .lciit-float, .lciit-shape { animation: none !important; }
	.lciit-info-mini-card:hover { transform: none; }
}