/*
 * MiGreat block styles.
 *
 * Loaded on the frontend AND inside the Gutenberg editor (via
 * `enqueue_block_assets`) so authors see what visitors see.
 *
 * Each migreat-built section is wrapped in
 *   <div class="wp-block-group migreat-section migreat-section--{type}">
 * which lets us scope image aspect-ratios, column counts, and gaps per
 * section type without giving every block fragile inline width/height
 * attributes (which trip Gutenberg's "attempt block recovery" validator).
 *
 * Per-preset overrides — column counts, gaps, padding, max-width, and
 * the actual aspect-ratio numbers — are appended at runtime by
 * MiGreat_Preset_CSS::inline_css() and printed via wp_add_inline_style.
 */

/* ─── Section wrapper baseline ───────────────────────────────────── */
.migreat-section { box-sizing: border-box; }
.migreat-section > .wp-block-heading { margin-top: 0; }
.migreat-section .wp-block-columns { gap: 32px; }
.migreat-section .wp-block-image { margin: 0; }
.migreat-section .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* ─── Hero — wp:cover does positioning natively; we just nudge contents ─ */
.migreat-section--hero.wp-block-cover {
	min-height: 560px;
	color: #fff;
}
.migreat-section--hero.wp-block-cover .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: min(960px, 92%);
	margin: 0 auto;
	text-align: center;
}
.migreat-section--hero.wp-block-cover .wp-block-buttons {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

/* ─── Default per-section image aspect ratios ────────────────────── */
.migreat-section--hero figure.wp-block-image img,
.migreat-section--content figure.wp-block-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.migreat-section--features figure.wp-block-image img,
.migreat-section--cta figure.wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.migreat-section--team figure.wp-block-image img,
.migreat-section--testimonials figure.wp-block-image img,
.migreat-section--stats figure.wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
}

.migreat-section--logos figure.wp-block-image img {
	aspect-ratio: 3 / 2;
	object-fit: contain;
	max-width: 180px;
	margin: 0 auto;
}

.migreat-section--footer figure.wp-block-image img {
	aspect-ratio: auto;
	object-fit: contain;
	max-width: 160px;
}

/* ─── Section padding fallback (overridden inline by section_open) ─ */
.migreat-section { padding-block: 80px; }

/* ─── Stats sections — center the big numbers ───────────────────── */
.migreat-section--stats .wp-block-column { text-align: center; }
.migreat-section--stats .wp-block-column p[style*="font-size:56px"] {
	margin-bottom: 8px;
}

/* ─── FAQ — give wp:details room to breathe ─────────────────────── */
.migreat-section--faq .wp-block-details {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding-block: 16px;
}
.migreat-section--faq .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}
.migreat-section--faq .wp-block-details[open] summary { margin-bottom: 12px; }

/* ─── Logos — render as a flex grid so analyzed column count works ─ */
.migreat-section--logos .wp-block-columns {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
}

/* ─── Mobile fallbacks ──────────────────────────────────────────── */
@media (max-width: 768px) {
	.migreat-section { padding-block: 48px; }
	.migreat-section .wp-block-columns { gap: 24px; }
}