/* ==================================================================
   Medisites Core: shared block structure and the Layer 1 options.

   Structure only: layout and spacing, no colours, type, borders, radius,
   shadows or hovers. The look belongs to the site (GeneratePress, GB Global
   Styles and Design Tokens, the child theme).

   Every rule sits inside :where(), so it has zero specificity: styles set on
   a block in the editor, Global Styles and theme CSS all override it. Option
   classes win over the defaults by coming later in the file.

   Spacing reads variables with fallbacks. Set a variable on :root (for
   example as a GB Design Token) to change it sitewide, or on one block to
   change only that block. Breakpoints follow GenerateBlocks: tablet 1024px,
   mobile 767px.

     --ms-section-space        section top and bottom   48px, 80px from 768px
     --ms-section-space-tight  the Tight option         24px, 40px from 768px
     --ms-gutter               content side padding     16px, 32px from 768px
     --ms-gap                  between cards and items  24px
     --ms-split-gap            between side-by-side     32px, 64px from 1025px
                               columns
     --ms-head-space           under a section heading  32px
     --ms-sticky-top           offset for sticky parts  100px (set it to the
                               site's sticky header height)
     --ms-divider              divider line colour      20% of the text colour

   Element strength: the theme styles plain elements. GeneratePress resets margin, padding and
   border on p, h1-h6, li, ol, ul, figure, blockquote and more, and sets list margins. Those
   rules beat zero specificity, so where a block must set margin, padding, border or list style
   on one of those elements, the rule is written as html :where(...) p (two element names):
   it beats the theme's element rules and still loses to any class, so editor styles win.

   Visual options that draw lines or fills (Dividers, Card style and so on)
   use the text colour (currentColor), never a palette, so they follow the
   site's colours.

   Loaded on every page. Each converted block's own CSS is in css/blocks/
   and is printed only on pages that use the block.
   ================================================================== */

/* ---------- Section and content container ---------- */
:where(.ms-block) {
	box-sizing: border-box;
	padding-block: var(--ms-section-space, 48px);
}
:where(.ms-block > .ms-wrap) {
	box-sizing: border-box;
	max-width: var(--gb-container-width, 1240px);
	margin-inline: auto;
	padding-inline: var(--ms-gutter, 16px);
}

/* ---------- Shared parts ---------- */
:where(.ms-block .ms-head) { margin-bottom: var(--ms-head-space, 32px); }

/* Arrow link: text and an icon side by side */
:where(.ms-block .ms-link) {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

/* Icons: a GB Shape block (span.gb-shape.ms-icon) holding an SVG with its own size and stroke */
:where(.ms-block .ms-icon) { display: inline-flex; flex: none; }
:where(.ms-block .ms-icon svg) { display: block; }

/* Button row; buttons take the full width on phones */
:where(.ms-block .ms-actions) { display: flex; flex-wrap: wrap; gap: 12px; }

/* Buttons: an unstyled hook (a.ms-btn, a Text block, or an Element holding an icon and a Text span).
   The look comes from the site; the global button design is still to be decided. */
:where(.ms-block .ms-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

/* Breadcrumb: nav.ms-crumbs > ol > li, a slash between levels */
:where(.ms-block .ms-crumbs ol) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
html :where(.ms-block .ms-crumbs) ol {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
html :where(.ms-block .ms-crumbs) li { margin: 0; }
:where(.ms-block .ms-crumbs li:not(:last-child))::after { content: "/"; margin-left: 8px; }

@media (max-width: 767px) {
	:where(.ms-block .ms-actions .ms-btn) { flex: 1 1 100%; }
}

@media (min-width: 768px) {
	:where(.ms-block) { padding-block: var(--ms-section-space, 80px); }
	:where(.ms-block > .ms-wrap) { padding-inline: var(--ms-gutter, 32px); }
}

/* ---------- Layer 1 options ---------- */

/* Section width: contained insets the section by the gutter */
:where(.ms-block.ms-contained) {
	width: calc(100% - 2 * var(--ms-gutter, 16px));
	max-width: calc(var(--gb-container-width, 1240px) - 2 * var(--ms-gutter, 16px));
	margin-inline: auto;
}

/* Content width */
:where(.ms-block.ms-inner-full > .ms-wrap) { max-width: none; }

/* Background: parked (2026-09-25), not offered in the panel. Named by role (1.1.0) and read from the
   GP palette and Site style tokens (docs/site-style.md). The old names (paper, stone, mist) stay as
   aliases because blocks saved while the option was offered still carry them. */
:where(.ms-block.ms-bg-soft, .ms-block.ms-bg-paper) { background-color: var(--base-2, #FAFAF8); }
:where(.ms-block.ms-bg-alt, .ms-block.ms-bg-stone) { background-color: var(--base, #EFF0F0); }
:where(.ms-block.ms-bg-deep, .ms-block.ms-bg-mist) { background-color: var(--ms-base-deep, color-mix(in oklch, var(--base, #EFF0F0), var(--contrast, #222222) 6%)); }
:where(.ms-block.ms-bg-accent-soft) { background-color: var(--ms-accent-soft, color-mix(in oklch, var(--accent, #1E73BE) 12%, var(--base-3, #FFFFFF))); }

/* Top and bottom spacing */
:where(.ms-block.ms-pt-tight) { padding-top: var(--ms-section-space-tight, 24px); }
:where(.ms-block.ms-pb-tight) { padding-bottom: var(--ms-section-space-tight, 24px); }
:where(.ms-block.ms-pt-none) { padding-top: 0; }
:where(.ms-block.ms-pb-none) { padding-bottom: 0; }

@media (min-width: 768px) {
	:where(.ms-block.ms-contained) {
		width: calc(100% - 2 * var(--ms-gutter, 32px));
		max-width: calc(var(--gb-container-width, 1240px) - 2 * var(--ms-gutter, 32px));
	}
	:where(.ms-block.ms-pt-tight) { padding-top: var(--ms-section-space-tight, 40px); }
	:where(.ms-block.ms-pb-tight) { padding-bottom: var(--ms-section-space-tight, 40px); }
}