/* Site studio section breaks (SPSection). Content stays on the active area; "full width" only widens the background. */
.gema-section { position: relative; display: flex; flex-direction: column; padding-top: var(--gs-pad-top, 32px); padding-bottom: var(--gs-pad-bottom, 32px); isolation: isolate; }
.gema-section.gema-align-centre { justify-content: center; }
.gema-section.gema-align-bottom { justify-content: flex-end; }
.gema-section-inner { position: relative; z-index: 2; }
.gema-section-bg, .gema-section-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; pointer-events: none; }
.gema-section-overlay { z-index: 1; }
/* Full width: the background reaches the browser's edges from inside the centred active area. */
.gema-section.gema-bg-full > .gema-section-bg,
.gema-section.gema-bg-full > .gema-section-overlay,
.gema-section.gema-bg-full > .gema-section-divider { left: 50%; right: auto; width: 100vw; margin-left: -50vw; }
/* The page, not the section, stops the 100vw background making a sideways scrollbar: clipping the section itself cut
   the background back to the content's width. "clip" (not hidden) keeps sticky headers working. */
html:has(.gema-section.gema-bg-full), body:has(.gema-section.gema-bg-full) { overflow-x: clip; }
.gema-section.gema-bg-area { overflow: hidden; }
.gema-section-bg[data-parallax]:not([data-parallax="0"]) { top: -15%; bottom: -15%; will-change: transform; }
.gema-section-divider { position: absolute; left: 0; right: 0; z-index: 1; line-height: 0; pointer-events: none; }
.gema-section-divider.top { top: 0; }
.gema-section-divider.bottom { bottom: 0; }
.gema-section-divider svg { display: block; width: 100%; }

/* Colour scheme: text, headings and links below the break follow it. The programme stylesheet colours p, li and headings
   directly, so the scheme targets them too (and outranks "h1:not(.page-title)"). Text inside an element with its own
   mostly opaque background (.gema-own-bg, set by sections.js) keeps the programme's colours; inline colours and element
   custom CSS still win. */
.gema-scheme-dark { color: #eef0f3; }
.gema-section.gema-scheme-dark :is(p, li, label, .text-p, .footer):not(.gema-own-bg *) { color: #eef0f3; }
.gema-section.gema-scheme-dark :is(h1, h2, h3, h4, h5, h6):not(.gema-own-bg *) { color: #ffffff; }
.gema-section.gema-scheme-dark a:not(.btn):not(.item-inner):not(.gema-own-bg *) { color: #ffffff; text-decoration: underline; }
.gema-scheme-light { color: #2a2a2a; }
.gema-section.gema-scheme-light :is(p, li, label, .text-p, .footer):not(.gema-own-bg *) { color: #2a2a2a; }
.gema-section.gema-scheme-light :is(h1, h2, h3, h4, h5, h6):not(.gema-own-bg *) { color: #1a1a1a; }

/* Device visibility, on the same breakpoints as the grid. */
@media (min-width: 992px) { .gema-hide-desktop { display: none !important; } }
@media (min-width: 576px) and (max-width: 991.98px) { .gema-hide-tablet { display: none !important; } }
@media (max-width: 575.98px) { .gema-hide-mobile { display: none !important; } }

/* Studio canvas only. */
.gema-section-preview { outline: 1px dashed rgba(47, 111, 222, .6); outline-offset: -1px; }
.gema-section-marker { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; margin-top: calc(-1 * var(--gs-pad-top, 32px)); margin-bottom: 8px;
    padding: 3px 10px; font: 700 11px system-ui, sans-serif; color: #fff; background: repeating-linear-gradient(90deg, #2f6fde 0 10px, #4f86ea 10px 20px); }
.gema-section-marker span { background: #1b3f86; border-radius: 3px; padding: 1px 6px; }
[data-gema-el] { cursor: pointer; }
.gema-studio-hover { outline: 1px dashed #2f6fde !important; outline-offset: -1px; }
.gema-studio-selected { outline: 2px solid #2f6fde !important; outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) { .gema-section-bg { transform: none !important; } }
.gema-studio-marker { position: absolute; top: -8px; right: -8px; z-index: 50; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #f59e0b; color: #111827; font: 600 11px/20px system-ui, sans-serif; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); pointer-events: none; }

/* Dragging a block in the canvas: the block fades, a copy follows the pointer, a line (or an outline, for "inside") shows
   where it will go. */
body.gema-studio-dragging, body.gema-studio-dragging * { cursor: grabbing !important; user-select: none !important; }
body.gema-studio-dragging.gema-studio-nodrop, body.gema-studio-dragging.gema-studio-nodrop * { cursor: not-allowed !important; }
.gema-studio-moving { opacity: .35; }
.gema-studio-ghost { position: fixed; z-index: 10000; pointer-events: none; opacity: .75; max-width: 420px; max-height: 240px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.25); background: #fff; border-radius: 4px; transform: rotate(1deg); }
.gema-studio-drop { position: fixed; z-index: 9999; pointer-events: none; background: #2f6fde; border-radius: 2px; box-shadow: 0 0 0 2px rgba(47,111,222,.25); }
.gema-studio-drop.inside { background: rgba(47,111,222,.08); border: 2px dashed #2f6fde; box-shadow: none; }