/**
 * Πλαίσια μέσα στο κείμενο (orthofocus-text-page-template-final):
 *   «Πλαίσιο πληροφορίας» — χρεώσεις, προθεσμίες, προϋποθέσεις, εξαιρέσεις, σημαντικές διευκρινίσεις.
 *   «Σημείωση» — βοηθητικές, μη κρίσιμες σημειώσεις.
 *
 * Στον editor: block «Ομάδα» (Group) → Στυλ → Πλαίσιο πληροφορίας / Σημείωση
 * (is-style-info-box / is-style-note-box, inc/pages.php). Σε HTML: class="info-box" / class="note-box".
 * Μέσα: πρώτη παράγραφος με έντονο τίτλο (π.χ. «Σημαντική πληροφορία») και μετά το κείμενο.
 *
 * Φορτώνεται και στον editor, ώστε ο διαχειριστής να βλέπει το τελικό αποτέλεσμα.
 */

:is(.is-style-info-box, .info-box, .is-style-note-box, .note-box) {
	--cb-space: 24px;
	--cb-padding: 20px 22px;
	--cb-radius: 12px;
	--cb-border: 4px;
	--cb-gap: 7px;
	--cb-title-size: 13px;
	--cb-text-size: 13px;
	--cb-text-lh: 1.7;
	--cb-info-bg: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));

	box-sizing: border-box;
	margin-block: var(--cb-space);
	padding: var(--cb-padding);
}

/* Πορτοκαλί: σημαντική πληροφορία */
:is(.is-style-info-box, .info-box) {
	border-left: var(--cb-border) solid var(--color-accent);
	border-radius: 0 var(--cb-radius) var(--cb-radius) 0;
	background-color: var(--cb-info-bg);
}

/* Μωβ: δευτερεύουσα σημείωση */
:is(.is-style-note-box, .note-box) {
	border-radius: var(--cb-radius);
	background-color: var(--color-purple-soft);
}

/* Περιεχόμενο: σφιχτές αποστάσεις */
:is(.is-style-info-box, .info-box, .is-style-note-box, .note-box) > :is(p, ul, ol, strong, h2, h3, h4) {
	margin-block: 0;
}

:is(.is-style-info-box, .info-box, .is-style-note-box, .note-box) > :is(p, ul, ol, strong, h2, h3, h4) + * {
	margin-top: var(--cb-gap);
}

/* Τίτλος πλαισίου: έντονο κείμενο */
:is(.is-style-info-box, .info-box, .is-style-note-box, .note-box) > strong {
	display: block;
}

:is(.is-style-info-box, .info-box, .is-style-note-box, .note-box) strong {
	color: var(--color-primary);
	font-size: var(--cb-title-size);
}

:is(.is-style-info-box, .info-box, .is-style-note-box, .note-box) :is(p, li) {
	color: var(--color-text-muted);
	font-size: var(--cb-text-size);
	line-height: var(--cb-text-lh);
}