/**
 * WebCreator - full-width section (markup: docs/page-editor-blocks.md)
 *
 * Loaded only on pages that contain a section (.wc-section) or a slider with data-wc-bleed (wc_block_assets()).
 * No script. Colours come from the theme variables of the colour contract (docs/themes.md, 7):
 *   primary    --wc-primary / --wc-on-primary        secondary  --wc-secondary / --wc-on-secondary
 *   accent     --wc-accent / --wc-on-accent          light      --color-bg-secondary / --wc-text
 *   dark       a fixed dark band with white text     image      photo + a dark or light layer, text colour follows the layer
 * The text colour is always the "on" colour of the surface behind it, so the contrast does not depend on the owner's colours.
 */

/* ---------- full bleed ----------
 * The content sits in a centred container. A block as wide as the window and pulled left by half of the difference
 * (50% of the container - 50 window-widths) starts at the left edge of the window. 100vw includes the scrollbar of a desktop
 * window, so the width is measured on the page wrapper instead: it is a size container (container-type: inline-size) and
 * 100cqw is its width, exactly the visible page. Browsers without container units fall back to 100vw, and the wrapper clips
 * the few pixels of overflow sideways (overflow-x: clip does not make a scroll container). The wrapper is only a container on
 * pages that load this file; a size container is the containing block of fixed elements, so the parallax below does not use fixed. */
.main-wrapper { overflow-x: clip; }
@supports (width: 1cqw) {
    .main-wrapper { container-type: inline-size; }
    /* A size container keeps the bottom margin of the last block inside the wrapper (it no longer collapses into the space above the
     * footer): the margins along the last-child chain at the end of the page are dropped, so the footer stays where it was. */
    .main-wrapper > :last-child,
    .main-wrapper > :last-child > :last-child,
    .main-wrapper > :last-child > :last-child > :last-child,
    .main-wrapper > :last-child > :last-child > :last-child > :last-child,
    .main-wrapper > :last-child > :last-child > :last-child > :last-child > :last-child { margin-bottom: 0; }
}
@supports not (overflow: clip) {
    .main-wrapper { overflow-x: hidden; }
}
.wc-section,
.wc-slider[data-wc-bleed="on"] {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
}
@supports (width: 1cqw) {
    .wc-section,
    .wc-slider[data-wc-bleed="on"] {
        width: 100cqw;
        max-width: 100cqw;
        margin-inline: calc(50% - 50cqw);
    }
}
/* The row and column around a section are plain boxes. Themes style rows (the first row as a split hero, a decoration on it,
 * max-width: 100%, floats); with such styles the column is not centred in the window and the pull-left above misses. The doubled
 * classes make this win over those theme rules without !important. */
.cb-content.cb-content > .row:has(> .column > :is(.wc-section, .wc-slider[data-wc-bleed="on"])) {
    display: block;
    width: auto;
    max-width: none;
    min-height: 0;
    margin-inline: 0;
    padding: 0;
    border: 0;
}
.cb-content.cb-content > .row:has(> .column > :is(.wc-section, .wc-slider[data-wc-bleed="on"]))::before,
.cb-content.cb-content > .row:has(> .column > :is(.wc-section, .wc-slider[data-wc-bleed="on"]))::after { content: none; }
.cb-content.cb-content > .row:has(> .column > :is(.wc-section, .wc-slider[data-wc-bleed="on"])) > .column {
    display: block;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}
/* A section or full-width slider at the very start or end of the page touches the header / footer */
.cb-content > .row:first-child :is(.wc-section, .wc-slider[data-wc-bleed="on"]),
.cb-content > :is(.wc-section, .wc-slider[data-wc-bleed="on"]):first-child { margin-top: 0; }
.cb-page:has(.cb-content > .row:first-child :is(.wc-section, .wc-slider[data-wc-bleed="on"]):first-child) { padding-top: 0; }
.cb-page:has(.cb-content > .row:last-child :is(.wc-section, .wc-slider[data-wc-bleed="on"]):last-child) { padding-bottom: 0; }

/* ---------- the band ---------- */
.wc-section {
    --wcs-bg: var(--color-bg-secondary, #f3f4f6);   /* the solid colour behind the text */
    --wcs-fg: var(--wc-text, var(--color-text, #111827));
    --wcs-pad: clamp(3rem, 6vw, 5rem);
    position: relative;
    display: flex;
    align-items: center;
    margin-block: 1.5rem;
    padding-block: var(--wcs-pad);
    overflow: hidden;
    isolation: isolate;
    background: var(--wcs-bg);
    color: var(--wcs-fg);
    line-height: 1.5;
}
.wc-section[data-wc-bg="primary"]   { --wcs-bg: var(--wc-primary, var(--color-primary, #27ae60)); --wcs-fg: var(--wc-on-primary, #111); }
.wc-section[data-wc-bg="secondary"] { --wcs-bg: var(--wc-secondary, #374151); --wcs-fg: var(--wc-on-secondary, #fff); }
.wc-section[data-wc-bg="accent"]    { --wcs-bg: var(--wc-accent, var(--wc-primary, var(--color-primary, #27ae60))); --wcs-fg: var(--wc-on-accent, var(--wc-on-primary, #111)); }
.wc-section[data-wc-bg="dark"]      { --wcs-bg: #1f2937; --wcs-fg: #fff; }
/* Photo: the layer makes the text readable on any picture. Dark layer 65%: white text keeps >= 5.8 : 1 even on a pure white photo;
   light layer 72%: dark text keeps >= 8 : 1 even on a pure black photo. */
.wc-section[data-wc-bg="image"]     { --wcs-bg: #111827; --wcs-fg: #fff; background: #1f2937; }
.wc-section[data-wc-bg="image"][data-wc-overlay="light"] { --wcs-bg: #fff; --wcs-fg: #111827; }
.wc-section[data-wc-bg="image"][data-wc-overlay="none"]  { --wcs-bg: #1f2937; --wcs-fg: #fff; }   /* text sits in a card, see below */

.wc-section > .wc-section-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
}
.wc-section[data-wc-bg="image"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(17, 24, 39, 0.65);
}
.wc-section[data-wc-bg="image"][data-wc-overlay="light"]::before { background: rgba(255, 255, 255, 0.72); }
.wc-section[data-wc-bg="image"][data-wc-overlay="none"]::before { background: none; }

/* height */
.wc-section[data-wc-size="compact"] { --wcs-pad: clamp(1.5rem, 3vw, 2.5rem); }
.wc-section[data-wc-size="large"]   { --wcs-pad: clamp(5rem, 10vw, 9rem); }
.wc-section[data-wc-size="hero"]    { --wcs-pad: clamp(3rem, 6vw, 5rem); min-height: max(60vh, 24rem); }
.wc-section[data-wc-size="flush"]   { --wcs-pad: 0; }
@supports (height: 1svh) {
    .wc-section[data-wc-size="hero"] { min-height: max(60svh, 24rem); }
}

/* "clip" instead of "hidden": hidden makes the band a scroll container, and then the scroll-driven parallax below watches
 * the band (which never scrolls) instead of the page */
@supports (overflow: clip) {
    .wc-section { overflow: clip; }
}

/* ---------- inside ---------- */
.wc-section .wc-section-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--container-max, 1200px);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    text-align: left;
}
.wc-section[data-wc-width="narrow"] .wc-section-inner { max-width: 46rem; }
.wc-section[data-wc-width="full"] .wc-section-inner { max-width: none; padding-inline: clamp(1rem, 4vw, 3rem); }
.wc-section[data-wc-size="flush"] .wc-section-inner { padding-inline: 0; }
.wc-section[data-wc-align="center"] .wc-section-inner { text-align: center; }

.wc-section .wc-section-body { width: fit-content; max-width: 100%; }
.wc-section[data-wc-align="center"] .wc-section-body { margin-inline: auto; }
.wc-section .wc-section-body .wc-section-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-family-heading, inherit);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.15;
    color: inherit;
}
.wc-section .wc-section-body .wc-section-subtitle {
    margin: 0 0 1rem;
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    line-height: 1.35;
    color: inherit;
}
.wc-section .wc-section-body .wc-section-text {
    max-width: 46rem;
    margin: 0 0 1rem;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.6;
    color: inherit;
}
.wc-section[data-wc-align="center"] .wc-section-body .wc-section-text { margin-inline: auto; }
.wc-section .wc-section-body > :last-child { margin-bottom: 0; }

/* Photo without a layer: the text sits in a card in the colour of the theme, so it stays readable */
.wc-section[data-wc-bg="image"][data-wc-overlay="none"] .wc-section-body {
    --wcs-bg: var(--wc-primary, var(--color-primary, #27ae60));
    --wcs-fg: var(--wc-on-primary, #111);
    max-width: min(100%, 44rem);
    padding: 1.75rem 2rem;
    background: var(--wcs-bg);
    color: var(--wcs-fg);
    border-radius: var(--radius-md, 4px);
}

/* ---------- buttons ----------
 * Colours are the pair "text colour / colour behind it" turned round, so a button is as readable as the text next to it. */
.wc-section .wc-section-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.wc-section[data-wc-align="center"] .wc-section-actions { justify-content: center; }
.wc-section .wc-section-actions:first-child { margin-top: 0; }
.wc-section .wc-section-inner a.wc-section-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.75rem;
    padding: 0.7rem 1.5rem;
    border: 2px solid var(--wcs-fg);
    border-radius: var(--wc-btn-radius, var(--radius-md, 4px));
    background: var(--wcs-fg);
    color: var(--wcs-bg);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.wc-section .wc-section-inner a.wc-section-button:hover { background: transparent; color: var(--wcs-fg); text-decoration: none; }
.wc-section .wc-section-inner a.wc-section-button.is-secondary { background: transparent; color: var(--wcs-fg); }
.wc-section .wc-section-inner a.wc-section-button.is-secondary:hover { background: var(--wcs-fg); color: var(--wcs-bg); }
/* On a light band the first button has the colour of the theme */
.wc-section:not([data-wc-bg]) .wc-section-inner a.wc-section-button:not(.is-secondary),
.wc-section[data-wc-bg="light"] .wc-section-inner a.wc-section-button:not(.is-secondary) {
    border-color: var(--wcs-fg);   /* the fill may be light on a light band: the edge in the text colour is >= 4.5 : 1 */
    background: var(--wc-primary, var(--color-primary, #27ae60));
    color: var(--wc-on-primary, #111);
}
.wc-section:not([data-wc-bg]) .wc-section-inner a.wc-section-button:not(.is-secondary):hover,
.wc-section[data-wc-bg="light"] .wc-section-inner a.wc-section-button:not(.is-secondary):hover {
    border-color: var(--wcs-fg);
    background: var(--wc-primary-hover, var(--color-primary-dark, #1e8449));
    color: var(--wc-on-primary-hover, var(--wc-on-primary, #111));
}
/* The ring is drawn outside the button, in the text colour of the band (>= 4.5 : 1 on it), with room around the button */
.wc-section a:focus-visible {
    outline: 3px solid var(--wcs-fg);
    outline-offset: 3px;
}

/* ---------- map or video ---------- */
.wc-section .wc-section-embed { margin-top: 1.5rem; }
.wc-section .wc-section-embed:first-child { margin-top: 0; }
.wc-section .wc-section-embed iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: clamp(18rem, 42vw, 34rem);
    border: 0;
}
.wc-section .wc-section-embed iframe[src*="youtube"],
.wc-section .wc-section-embed iframe[src*="vimeo"] { height: auto; aspect-ratio: 16 / 9; }

/* ---------- parallax ----------
 * The photo is taller than the band and slides slowly while the band passes through the window (a scroll-driven animation:
 * no script, no fixed). Only for a mouse-and-desktop visitor who has not asked for less motion, and only where the browser
 * has scroll-driven animations; touch screens, small windows, "reduce motion" and other browsers see a normal photo. */
@keyframes wc-section-parallax {
    from { transform: translateY(-9%); }
    to { transform: translateY(9%); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .wc-section[data-wc-bg="image"][data-wc-parallax="on"] > .wc-section-image {
            top: -15%;
            bottom: auto;
            height: 130%;
            animation: wc-section-parallax linear both;
            animation-timeline: view();
        }
    }
}
@media (prefers-reduced-motion: reduce) {
    .wc-section .wc-section-inner a.wc-section-button { transition: none; }
}
@media (max-width: 40rem) {
    .wc-section .wc-section-body { width: 100%; }
    .wc-section[data-wc-bg="image"][data-wc-overlay="none"] .wc-section-body { padding: 1.25rem; }
    .wc-section .wc-section-inner a.wc-section-button { flex: 1 1 100%; }
}