/*
 * Membaz Site Content: styles for the installed pages.
 * Builds on the Membaz theme's tokens (--mbz-*) and card styles; adds only what
 * the new pages need: lead text, screenshot frames, numbered steps and FAQs.
 */

/* Opening line of each inner page. */
.mbz-lead { font-size: 21px; line-height: 1.55; color: var(--mbz-ink, #1b2f4b); }
.mbz-small { font-size: 14px !important; color: var(--mbz-soft, #52657d); margin-top: 20px; }

/* Lists of outcomes straight after the lead get a little breathing room. */
.mbz-lead + .wp-block-list { margin-bottom: 2em; }

/* Screenshots drawn as a framed window, matching the brand book. */
.mbz-frame img {
	border: 1px solid var(--mbz-border, #dbe6f3);
	border-top: 26px solid var(--mbz-mist, #f4f8fd);
	border-radius: var(--mbz-radius-card, 10px);
	box-shadow: 0 24px 60px rgba(27, 47, 75, 0.12);
	background: #fff;
}
.mbz-frame figcaption { font-size: 13px; color: var(--mbz-soft, #52657d); margin-top: 12px; }
.mbz-phone img { max-width: 320px; margin: 0 auto; display: block; }
.mbz-card-img img { max-width: 260px; margin: 0 auto; display: block; border-radius: 14px; box-shadow: 0 24px 60px rgba(27, 47, 75, 0.2); }
.mbz-card-img figcaption { text-align: center; font-size: 13px; color: var(--mbz-soft, #52657d); }

/* Let a short row of cards fill the width instead of leaving an empty column. */
.wp-block-group.mbz-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Grids and columns inside inner pages sit a little apart from the text. */
.wp-block-post-content > .mbz-grid,
.wp-block-post-content > .wp-block-columns { margin-top: 32px; margin-bottom: 32px; }
.wp-block-post-content > .wp-block-columns { gap: 48px; }
.mbz-section .wp-block-columns { gap: 56px; }
.mbz-section .mbz-grid { margin-top: 32px; }

/* Numbered steps: a blue badge counts each card automatically.
 * Selectors carry .wp-block-group so they outrank the theme's card padding,
 * whichever stylesheet loads last. */
.wp-block-group.mbz-steps { counter-reset: mbz-step; }
.wp-block-group.mbz-steps > .wp-block-group.mbz-card { counter-increment: mbz-step; position: relative; padding-top: 76px; }
.wp-block-group.mbz-steps > .wp-block-group.mbz-card::before {
	content: counter(mbz-step);
	position: absolute; top: 24px; left: 24px;
	width: 36px; height: 36px; border-radius: 18px;
	background: var(--mbz-action, #2563b0); color: #fff;
	font-weight: 600; font-size: 15px; line-height: 36px; text-align: center;
}

/* Linked card titles read as headings, not as underlined links. */
.mbz-linkcard h3 a::after { content: " →"; color: var(--mbz-action, #2563b0); }

/* Questions and answers. */
.mbz-faq { margin-top: 56px; }
.mbz-faq .wp-block-details {
	border: 1px solid var(--mbz-border, #dbe6f3); border-radius: var(--mbz-radius-card, 10px);
	padding: 16px 20px; margin: 0 0 12px; background: #fff;
}
.mbz-faq summary { font-weight: 600; color: var(--mbz-ink, #1b2f4b); cursor: pointer; }
.mbz-faq .wp-block-details p { margin: 12px 0 0; }

@media (max-width: 781px) {
	.mbz-lead { font-size: 18px; }
	.wp-block-post-content > .wp-block-columns, .mbz-section .wp-block-columns { gap: 24px; }
}