/* Block styles (app/logic/blocks/styles.py). Every page block's root carries data-block-kind and
   data-block-style, plus its appearance details when they're not the default: data-block-bg (tint / card /
   primary / accent / rose / ink / custom), data-block-align (center / right), data-block-size (small / large /
   xlarge) and data-block-spacing (compact / roomy), each with a -m twin for phones when set separately, plus
   data-block-corners with --block-corners (its own corner rounding) and data-hide-desktop / data-hide-mobile.
   The block's content box (.block-box) carries data-box-bg for a background on a card around the content, and the
   root data-block-card to space the card on every side; a background edge to edge (and every full-width block)
   paints the root instead, as a band (data-block-band).
   Colours come from the site's theme, so every style follows Styling changes. */

:root {
    --block-tint: color-mix(in srgb, var(--color-cta, #FF8FAB) 14%, var(--color-background, #fffafa));
    --block-card-bg: var(--color-accordion-bg, #ffffff);
    --block-card-text: var(--color-accordion-text, var(--color-text, #000000));
    --block-card-border: color-mix(in srgb, var(--color-text, #000000) 10%, transparent);
    --block-accent: var(--color-cta, #FF8FAB);
    --block-accent-text: var(--color-cta-text, #ffffff);
    --block-primary: var(--color-primary, #FFB3C6);
    --block-primary-text: var(--color-text, #000000);
    --block-rose: var(--color-action, color-mix(in srgb, var(--color-cta, #FF8FAB) 65%, var(--color-text, #000000)));
    --block-rose-text: var(--color-action-text, #ffffff);
    --block-ink: color-mix(in srgb, var(--color-text, #000000) 88%, #000000);
    --block-ink-text: var(--color-background, #ffffff);
    /* Cards sit flat on the page: an outline, no drop shadow. Custom CSS can set a shadow here to bring one back. */
    --card-shadow: none;
}

/* --- Corner rounding. Two layers: the block's own box (data-block-corners, --block-corners: the tint / card /
   colour box around its content) and the things inside it (data-item-corners, --item-corners: cards, photos,
   buttons and fields, which take the whole value, 86%, 36% and 29% of it, blocks.registry.corner_radii). Unset,
   both follow the site's rounding. --box-radius is resolved on :root so a block's item corners never leak into
   its box. --- */
:root {
    --box-radius: var(--border-radius-card, 14px);
}
[data-block-corners] {
    --box-radius: var(--block-corners);
}
[data-item-corners] {
    --border-radius-card: var(--item-corners);
    --border-radius-image: calc(var(--item-corners) * 0.86);
    --border-radius: calc(var(--item-corners) * 0.36);
    --border-radius-sm: calc(var(--item-corners) * 0.29);
}

/* --- Items: what the cards, rows and tiles inside a block sit on (data-item-bg). Auto leaves the style and
   theme to it; the others paint every item surface alike, with words in that surface's own colour. --- */
[data-item-bg="card"] { --item-bg: var(--block-card-bg); --item-text: var(--block-card-text); --item-border: var(--block-card-border); }
[data-item-bg="tint"] { --item-bg: var(--block-tint); --item-text: var(--color-text); --item-border: transparent; }
[data-item-bg="page"] { --item-bg: var(--color-background); --item-text: var(--color-text); --item-border: var(--block-card-border); }
[data-item-bg="none"] { --item-bg: transparent; --item-text: inherit; --item-border: color-mix(in srgb, currentColor 18%, transparent); }
[data-item-bg="custom"] { --item-bg: var(--item-custom-bg, var(--block-tint)); --item-text: var(--item-custom-text, var(--color-text)); --item-border: transparent; }
[data-item-bg]:not([data-item-bg="auto"]) :is(.accordion, .event-scorecard, .testimonials.card-style-card .testimonial-card, .wishlist-card, .columns-block.card-style-card .columns-col, [data-block-style="framed"] .site-image-figure, [data-block-style="framed"] .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right), .blog-listing:is([data-block-style="cards"], [data-block-style="featured"], [data-block-style="strip"], [data-block-style="carousel"]) .post-item, .button-group-section .button.secondary, .button-group-section[data-block-style="tiles"] .button, .private-gallery-popup, .contact-block-form) {
    background: var(--item-bg);
    color: var(--item-text);
    border-color: var(--item-border);
    --tm-text: var(--item-text);
    --tm-muted: color-mix(in srgb, var(--item-text) 62%, transparent);
}
/* Cards that keep their own light surface on a coloured block (Items: Auto) keep their own dark words. */
:is([data-block-band][data-block-bg]:not([data-block-bg="tint"]):not([data-block-bg="card"]),
    .block-box:is([data-box-bg="accent"], [data-box-bg="primary"], [data-box-bg="rose"], [data-box-bg="ink"], [data-box-bg="custom"]))
    :is(.event-scorecard, .wishlist-card) {
    color: var(--color-accordion-text, var(--color-text));
}
[data-item-bg="none"] :is(.accordion, .event-scorecard, .testimonials.card-style-card .testimonial-card, .wishlist-card, .columns-block.card-style-card .columns-col, [data-block-style="framed"] .site-image-figure, [data-block-style="framed"] .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right)) {
    box-shadow: none;
}
[data-item-bg]:not([data-item-bg="auto"]) :is(.accordion, .event-scorecard, .wishlist-card, .columns-col) :is(h2, h3, p, .accordion-toggle, .accordion-panel-inner) {
    color: inherit;
}

/* --- Which screens a block shows on --- */
@media (min-width: 701px) {
    [data-hide-desktop] { display: none !important; }
}
@media (max-width: 700px) {
    [data-hide-mobile] { display: none !important; }
}

/* --- Backgrounds -------------------------------------------------------------------------------------------- */

.block-box[data-box-bg] {
    --box-pad: 28px;
    box-sizing: border-box;
    padding: var(--box-pad) 32px;
    border-radius: var(--box-radius, var(--border-radius-card, 16px));
}

.block-box[data-box-bg="tint"] {
    background: var(--block-tint);
}

.block-box[data-box-bg="card"] {
    background: var(--block-card-bg);
    color: var(--block-card-text);
    border: 1px solid var(--block-card-border);
    box-shadow: var(--card-shadow);
}

.block-box[data-box-bg="accent"] {
    background: var(--block-accent);
    color: var(--block-accent-text);
}

.block-box[data-box-bg="primary"] {
    background: var(--block-primary);
    color: var(--block-primary-text);
}

.block-box[data-box-bg="rose"] {
    background: var(--block-rose);
    color: var(--block-rose-text);
}

.block-box[data-box-bg="ink"] {
    background: var(--block-ink);
    color: var(--block-ink-text);
}

.block-box[data-box-bg="custom"] {
    background: var(--block-custom-bg, var(--block-tint));
    color: var(--block-custom-text, var(--color-text));
}

/* Edge to edge (and every full-width block): the whole block is the band, across the page and meeting the blocks
   above and below (data-block-band, styles.background_band). Its content keeps the block's width. */
[data-block-band][data-block-bg="tint"] { --band-bg: var(--block-tint); }
[data-block-band][data-block-bg="card"] { --band-bg: var(--block-card-bg); --band-text: var(--block-card-text); }
[data-block-band][data-block-bg="accent"] { --band-bg: var(--block-accent); --band-text: var(--block-accent-text); }
[data-block-band][data-block-bg="primary"] { --band-bg: var(--block-primary); --band-text: var(--block-primary-text); }
[data-block-band][data-block-bg="rose"] { --band-bg: var(--block-rose); --band-text: var(--block-rose-text); }
[data-block-band][data-block-bg="ink"] { --band-bg: var(--block-ink); --band-text: var(--block-ink-text); }
[data-block-band][data-block-bg="custom"] { --band-bg: var(--block-custom-bg, var(--block-tint)); --band-text: var(--block-custom-text, var(--color-text)); }

[data-block-band][data-block-bg] {
    background: var(--band-bg);
    border-radius: 0;
}

[data-block-band][data-block-bg]:not([data-block-bg="tint"]) {
    color: var(--band-text);
}

/* A block whose root is only as wide as its content (a blog list) paints the band out to the page's edges with a
   shadow, clipped to its own height so it still meets the blocks above and below without overlapping them. */
.blog-listing[data-block-band][data-block-bg]:not([data-block-width="full"]) {
    box-shadow: 0 0 0 100vmax var(--band-bg);
    clip-path: inset(0 -100vmax);
}

/* On a coloured background (accent, primary, rose, ink or custom) the words take that colour's text and links
   are underlined in it rather than in the link colour; buttons take the footer's button colours on the accent
   and primary, and on the dark ones a light outline. */
:is([data-block-band][data-block-bg="primary"], .block-box[data-box-bg="primary"],
    [data-block-band][data-block-bg="rose"], .block-box[data-box-bg="rose"],
    [data-block-band][data-block-bg="ink"], .block-box[data-box-bg="ink"],
    [data-block-band][data-block-bg="custom"], .block-box[data-box-bg="custom"]) :is(h1, h2, h3, h4, p, li, blockquote, a:not(.button)) {
    color: inherit;
}

:is([data-block-band][data-block-bg="primary"], .block-box[data-box-bg="primary"],
    [data-block-band][data-block-bg="rose"], .block-box[data-box-bg="rose"],
    [data-block-band][data-block-bg="ink"], .block-box[data-box-bg="ink"],
    [data-block-band][data-block-bg="custom"], .block-box[data-box-bg="custom"]) a:not(.button) {
    text-decoration: underline;
}

:is([data-block-band][data-block-bg="primary"], .block-box[data-box-bg="primary"]) :is(.button.cta, .button.primary) {
    background-color: var(--color-footer-cta, #ffffff);
    color: var(--color-footer-cta-text, #000000);
}

:is([data-block-band][data-block-bg="rose"], .block-box[data-box-bg="rose"],
    [data-block-band][data-block-bg="ink"], .block-box[data-box-bg="ink"]) :is(.button.cta, .button.primary) {
    background-color: var(--color-background, #ffffff);
    color: var(--color-text, #000000);
}

:is([data-block-band][data-block-bg="rose"], .block-box[data-box-bg="rose"],
    [data-block-band][data-block-bg="ink"], .block-box[data-box-bg="ink"],
    [data-block-band][data-block-bg="custom"], .block-box[data-box-bg="custom"]) .button.secondary {
    background-color: transparent;
    color: inherit;
    border: 1px solid currentColor;
}

/* On the accent colour, words take the colour the theme gives text on its accent buttons, and links are
   underlined in it rather than in the link colour. */
:is([data-block-band][data-block-bg="accent"], .block-box[data-box-bg="accent"]) :is(h1, h2, h3, h4, p, li, blockquote, a:not(.button)) {
    color: inherit;
}

:is([data-block-band][data-block-bg="accent"], .block-box[data-box-bg="accent"]) a:not(.button) {
    text-decoration: underline;
}

[data-block-band][data-block-bg] {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Buttons on an accent background take the footer's button colours so they don't vanish into it. Secondary
   buttons, and every button in the Outline button style, are outlined in the accent's text colour. */
:is([data-block-bg="accent"][data-block-band], .block-box[data-box-bg="accent"]) .button.cta,
:is([data-block-bg="accent"][data-block-band], .block-box[data-box-bg="accent"]) .button.primary {
    background-color: var(--color-footer-cta, #ffffff);
    color: var(--color-footer-cta-text, #000000);
}

:is([data-block-bg="accent"][data-block-band], .block-box[data-box-bg="accent"]) .button.secondary,
.button-group-section[data-block-style="outline"][data-block-bg="accent"] .button {
    background-color: transparent;
    color: var(--block-accent-text);
    border: 1px solid currentColor;
}

:is([data-block-bg="accent"][data-block-band], .block-box[data-box-bg="accent"]) .button.secondary:hover,
.button-group-section[data-block-style="outline"][data-block-bg="accent"] .button:hover {
    background-color: color-mix(in srgb, var(--block-accent-text) 14%, transparent);
    color: var(--block-accent-text);
    border: 1px solid currentColor;
}

/* A form on its own card (Contact form's Card and Booking enquiry styles) isn't on the accent, so its button
   keeps the theme's button colours. */
.contact-block[data-block-bg="accent"]:is([data-block-style="card"], [data-block-style="booking"]) .contact-block-form .button.cta {
    background-color: var(--color-cta);
    color: var(--color-cta-text, #ffffff);
}

.contact-block[data-block-bg="accent"]:is([data-block-style="card"], [data-block-style="booking"]) .contact-block-form .button.cta:hover {
    background-color: var(--color-action, var(--color-cta));
    color: var(--color-action-text, var(--color-cta-text, #ffffff));
}

/* Secondary words, chips and controls on any coloured background (accent, primary, rose, ink or custom) follow
   the colour the words take there, rather than keeping the page's text colour. */
:is([data-block-band][data-block-bg]:not([data-block-bg="tint"]):not([data-block-bg="card"]),
    .block-box:is([data-box-bg="accent"], [data-box-bg="primary"], [data-box-bg="rose"], [data-box-bg="ink"], [data-box-bg="custom"]))
    :is(.gallery-block-head, .gallery-block-heading, .wishlist-sidebar h3, .category-filter, .category-filter.is-active, .private-gallery-signed-in,
        .private-gallery-signed-in a, .testimonials-foot button, .testimonials-head-controls button, .testimonials-dots button, .blog-scroller-arrow,
        .blog-scroller-dot, .post-date, .post-excerpt, .event-scorecard-badge, .columns-head, .columns-intro, .booking-hero, .booking-hero p,
        .wishlist-section .item h1, .wishlist-section .item p) {
    color: inherit;
}
:is([data-block-band][data-block-bg]:not([data-block-bg="tint"]):not([data-block-bg="card"]),
    .block-box:is([data-box-bg="accent"], [data-box-bg="primary"], [data-box-bg="rose"], [data-box-bg="ink"], [data-box-bg="custom"]))
    :is(.category-filter, .testimonials-foot button, .testimonials-head-controls button, .blog-scroller-arrow) {
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* --- Alignment and text size -------------------------------------------------------------------------------- */

[data-block-align="center"] :is(.block-box, .block-box h2, .block-box h3, .block-box p),
[data-block-align="center"].block-box,
[data-block-align="center"].block-box :is(h1, h2, h3, p) {
    text-align: center;
}
[data-block-align="right"].block-box,
[data-block-align="right"].block-box :is(h1, h2, h3, p) {
    text-align: right;
}

[data-block-align="center"] .events-grid :is(.event-scorecard-badge, .event-draft-label) {
    align-self: center;
    justify-self: center;
}

[data-block-align="center"] .event-scorecard-content {
    text-align: center;
}

[data-block-align="center"] .event-scorecard-footer {
    justify-content: center;
}

[data-block-align="center"] .media-text-content {
    text-align: center;
}

[data-block-size="small"] .block-box {
    font-size: 0.9em;
}

[data-block-size="small"] .block-box h2 {
    font-size: 1.25em;
}

[data-block-size="large"] .block-box {
    font-size: 1.15em;
}

[data-block-size="large"] .block-box h2 {
    font-size: clamp(1.8em, 4vw, 2.4em);
    line-height: 1.15;
}

[data-block-size="xlarge"] .block-box {
    font-size: 1.3em;
}

[data-block-size="xlarge"] .block-box h2 {
    font-size: clamp(2.2em, 5vw, 3em);
    line-height: 1.1;
}

[data-block-align="right"] :is(.block-box, .block-box h2, .block-box h3, .block-box p) {
    text-align: right;
}

[data-block-align="right"] .events-grid :is(.event-scorecard-badge, .event-draft-label) {
    align-self: end;
    justify-self: end;
}

[data-block-align="right"] :is(.event-scorecard-content, .media-text-content, .booking-hero .flex-center, .columns-head, .columns-col, .gallery-block-head, .private-gallery-block-inner h1, .wishlist-section .item) {
    text-align: right;
}
[data-block-align="right"] :is(.booking-hero .flex-center) { align-items: flex-end; }
/* A booking widget's heading follows its alignment: Left unless set (the Standard and Calendar card styles are
   Centre, storage._ensure_align_defaults_migration), and its size too. */
.booking-block:not([data-block-align]):not([data-block-style="split"]) .booking-hero .flex-center { align-items: flex-start; text-align: left; }
.booking-block[data-block-size="small"] .booking-hero h1 { font-size: 1.5em; }
.booking-block[data-block-size="large"] .booking-hero h1 { font-size: 2.6em; line-height: 1.1; }
.booking-block[data-block-size="xlarge"] .booking-hero h1 { font-size: 3.2em; line-height: 1.05; }
.booking-block[data-block-size="small"] .booking-hero p { font-size: 0.9em; }
.booking-block[data-block-size="large"] .booking-hero p { font-size: 1.1em; }
.booking-block[data-block-size="xlarge"] .booking-hero p { font-size: 1.2em; }
@media (max-width: 700px) {
    .booking-block[data-block-size-m="small"] .booking-hero h1 { font-size: 1.5em; }
    .booking-block[data-block-size-m="normal"] .booking-hero h1 { font-size: 2em; }
    .booking-block[data-block-size-m="large"] .booking-hero h1 { font-size: 2.4em; line-height: 1.1; }
    .booking-block[data-block-size-m="xlarge"] .booking-hero h1 { font-size: 2.8em; line-height: 1.05; }
}
[data-block-align="right"] .columns-head { align-self: flex-end; }
[data-block-align="center"] :is(.columns-head, .gallery-block-head, .private-gallery-block-inner h1, .booking-hero .flex-center) { text-align: center; }
[data-block-align="center"] .columns-head { align-self: center; }
[data-block-align="center"] .columns-col { text-align: center; }
[data-block-align="left"] :is(.booking-hero .flex-center) { align-items: flex-start; text-align: left; }
[data-block-align="left"] .wishlist-section .item { text-align: left; }

[data-block-align="right"] :is(.event-scorecard-footer, .button-group-row) {
    justify-content: flex-end;
}

/* --- Spacing: padding above and below the block (normal is how blocks have always been spaced) --- */
[data-block-spacing="compact"]:not(.lead) {
    padding-top: 8px;
    padding-bottom: 8px;
}

[data-block-spacing="roomy"]:not(.lead) {
    padding-top: 64px;
    padding-bottom: 64px;
}

[data-block-spacing="compact"][data-block-band][data-block-bg] {
    padding-top: 20px;
    padding-bottom: 20px;
}

[data-block-spacing="roomy"][data-block-band][data-block-bg] {
    padding-top: 88px;
    padding-bottom: 88px;
}

/* A background on a card (data-block-card): the card floats on the page with space above and below it as well as
   at its sides, rather than nearly touching the navbar and the blocks next to it. */
[data-block-card][data-block-bg] {
    --card-gap: 40px;
    padding-top: var(--card-gap);
    padding-bottom: var(--card-gap);
}

[data-block-spacing="compact"][data-block-card][data-block-bg] { --card-gap: 20px; }
[data-block-spacing="roomy"][data-block-card][data-block-bg] { --card-gap: 72px; }

/* A block whose root is its card (a blog list, a login block) takes the gap outside the card instead, with the
   page's 20px gutter at its sides, and is as wide as the other blocks' cards. */
[data-block-card].block-box[data-box-bg][data-block-bg] {
    width: calc(100% - 40px);
    max-width: var(--block-width, var(--container-max-width, 800px));
    padding: 28px 32px;
    margin: var(--card-gap) auto;
}

.block-group-item [data-block-card].block-box[data-box-bg][data-block-bg] {
    width: 100%;
}

/* --- Phones: the -m twins take over where a block sets its phone appearance separately --- */
@media (max-width: 700px) {
    [data-block-align-m="left"].block-box, [data-block-align-m="left"].block-box :is(h1, h2, h3, p) { text-align: left; }
    [data-block-align-m="center"].block-box, [data-block-align-m="center"].block-box :is(h1, h2, h3, p) { text-align: center; }
    [data-block-align-m="right"].block-box, [data-block-align-m="right"].block-box :is(h1, h2, h3, p) { text-align: right; }
    [data-block-align-m="left"] :is(.block-box, .block-box h2, .block-box h3, .block-box p, .event-scorecard-content, .media-text-content) { text-align: left; }
    [data-block-align-m="center"] :is(.block-box, .block-box h2, .block-box h3, .block-box p, .event-scorecard-content, .media-text-content) { text-align: center; }
    [data-block-align-m="right"] :is(.block-box, .block-box h2, .block-box h3, .block-box p, .event-scorecard-content, .media-text-content) { text-align: right; }
    [data-block-align-m="left"] :is(.event-scorecard-footer, .button-group-section .button-group-row, .columns-head, .booking-hero .flex-center) { justify-content: flex-start; text-align: left; align-items: flex-start; }
    [data-block-align-m="center"] :is(.event-scorecard-footer, .button-group-section .button-group-row, .columns-head, .booking-hero .flex-center) { justify-content: center; text-align: center; align-items: center; }
    [data-block-align-m="right"] :is(.event-scorecard-footer, .button-group-section .button-group-row, .columns-head, .booking-hero .flex-center) { justify-content: flex-end; text-align: right; align-items: flex-end; }
    [data-block-align-m="left"] :is(.columns-col, .gallery-block-head, .private-gallery-block-inner h1, .wishlist-section .item) { text-align: left; }
    [data-block-align-m="center"] :is(.columns-col, .gallery-block-head, .private-gallery-block-inner h1, .wishlist-section .item) { text-align: center; }
    [data-block-align-m="right"] :is(.columns-col, .gallery-block-head, .private-gallery-block-inner h1, .wishlist-section .item) { text-align: right; }

    [data-block-size-m="small"] .block-box { font-size: 0.9em; }
    [data-block-size-m="small"] .block-box h2 { font-size: 1.25em; }
    [data-block-size-m="normal"] .block-box { font-size: 1em; }
    [data-block-size-m="normal"] .block-box h2 { font-size: 1.5em; line-height: 1.2; }
    [data-block-size-m="large"] .block-box { font-size: 1.15em; }
    [data-block-size-m="large"] .block-box h2 { font-size: 1.9em; line-height: 1.15; }
    [data-block-size-m="xlarge"] .block-box { font-size: 1.3em; }
    [data-block-size-m="xlarge"] .block-box h2 { font-size: 2.3em; line-height: 1.1; }

    [data-block-spacing-m="compact"]:not(.lead) { padding-top: 8px; padding-bottom: 8px; }
    [data-block-spacing-m="normal"]:not(.lead) { padding-top: 20px; padding-bottom: 20px; }
    [data-block-spacing-m="roomy"]:not(.lead) { padding-top: 48px; padding-bottom: 48px; }
    [data-block-spacing-m="compact"][data-block-band][data-block-bg] { padding-top: 20px; padding-bottom: 20px; }
    [data-block-spacing-m="normal"][data-block-band][data-block-bg] { padding-top: 48px; padding-bottom: 48px; }
    [data-block-spacing-m="roomy"][data-block-band][data-block-bg] { padding-top: 72px; padding-bottom: 72px; }
    /* A card keeps the same gap above and below as at its sides (the page's 20px gutter). */
    [data-block-card][data-block-bg] { --card-gap: 20px; }
    [data-block-spacing="compact"][data-block-card][data-block-bg] { --card-gap: 12px; }
    [data-block-spacing="roomy"][data-block-card][data-block-bg] { --card-gap: 40px; }
    [data-block-spacing-m="compact"][data-block-card][data-block-bg] { --card-gap: 12px; }
    [data-block-spacing-m="normal"][data-block-card][data-block-bg] { --card-gap: 20px; }
    [data-block-spacing-m="roomy"][data-block-card][data-block-bg] { --card-gap: 40px; }
}

/* --- Hero banner --------------------------------------------------------------------------------------------- */

/* Split: words on the page's background, the photo unblurred beside them. */
.lead[data-block-style="split"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* One row the banner's height: sized by content, a tall photo would stretch it past the banner and push
       centred or bottom text out of view. */
    grid-template-rows: minmax(0, 1fr);
    background: var(--hero-bg, var(--color-background));
    color: var(--hero-text, var(--color-text));
    justify-items: stretch;
}

.lead[data-block-style="split"]::after {
    content: none;
}

/* The photo (or slideshow) is pinned to the right half rather than sized as a grid item, so its box never depends
   on the picture's own size and it keeps covering its half, cropped from the centre, while the window resizes. */
/* It reaches --hero-bleed past its half on every side and is clipped back to it, so a blurred photo keeps solid edges. */
.lead[data-block-style="split"] .background-video__media,
.lead[data-block-style="split"] .hero-slideshow {
    position: absolute;
    inset: calc(-1 * var(--hero-bleed)) calc(-1 * var(--hero-bleed)) calc(-1 * var(--hero-bleed)) calc(50% - var(--hero-bleed));
    z-index: 0;
    width: calc(50% + 2 * var(--hero-bleed));
    height: calc(100% + 2 * var(--hero-bleed));
    min-height: 0;
    clip-path: inset(var(--hero-bleed));
    object-fit: cover;
    object-position: center;
}

/* A slideshow's slides fill its (bled, clipped) box. */
.lead[data-block-style="split"] .hero-slideshow .background-video__media,
.lead[data-block-style="stacked"] .hero-slideshow .background-video__media {
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    clip-path: none;
}

.lead[data-block-style="split"] > .flex-center {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-start;
    padding: 32px clamp(20px, 6vw, 72px);
    text-align: left;
}

.lead[data-block-style="split"] #white {
    color: inherit;
}

/* Text position (data-text-position, vertical_horizontal): where the words sit on the banner. On the split style
   they stay in their half, placed within it (on phones, see below). */
.lead[data-text-position] > .flex-center {
    box-sizing: border-box;
    max-width: 100%;
}

.lead[data-text-position]:not([data-text-position^="middle_"]) > .flex-center,
.lead[data-text-position]:not([data-text-position$="_center"]):not([data-block-style="split"]) > .flex-center {
    padding: clamp(28px, 6vw, 72px) clamp(20px, 6vw, 72px);
}

.lead[data-text-position^="top_"] > .flex-center { align-self: start; }
.lead[data-text-position^="middle_"] > .flex-center { align-self: center; }
.lead[data-text-position^="bottom_"] > .flex-center { align-self: end; }

.lead[data-text-position$="_left"] > .flex-center { align-items: flex-start; text-align: left; }
.lead[data-text-position$="_center"] > .flex-center { align-items: center; text-align: center; }
.lead[data-text-position$="_right"] > .flex-center { align-items: flex-end; text-align: right; }

.lead:not([data-block-style="split"])[data-text-position$="_left"] > .flex-center { justify-self: start; }
.lead:not([data-block-style="split"])[data-text-position$="_center"] > .flex-center { justify-self: center; }
.lead:not([data-block-style="split"])[data-text-position$="_right"] > .flex-center { justify-self: end; }

/* On phones the split style's photo fills the banner and its words sit on a box of the page's background over it,
   only as wide as they need, placed by the text position: left and right boxes sit flush against that edge. */
@media (max-width: 700px) {
    .lead[data-block-style="split"] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        padding: 16px 0;
        box-sizing: border-box;
    }

    .lead[data-block-style="split"] .background-video__media,
    .lead[data-block-style="split"] .hero-slideshow {
        inset: calc(-1 * var(--hero-bleed));
        width: calc(100% + 2 * var(--hero-bleed));
        clip-path: none;
    }
    .lead[data-block-style="split"] .hero-slideshow .background-video__media { inset: 0; width: 100%; }

    .lead[data-block-style="split"][data-text-position] > .flex-center {
        grid-column: 1;
        grid-row: 1;
        width: fit-content;
        max-width: min(100% - 32px, 420px);
        padding: 20px 24px;
        background: color-mix(in srgb, var(--hero-backdrop, var(--color-background)) calc(var(--hero-backdrop-alpha, 1) * 100%), transparent);
        color: var(--hero-backdrop-text, var(--color-text));
        border-radius: var(--border-radius-card);
    }

    .lead[data-block-style="split"][data-text-position$="_left"] > .flex-center {
        justify-self: start;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .lead[data-block-style="split"][data-text-position$="_center"] > .flex-center { justify-self: center; }
    .lead[data-block-style="split"][data-text-position$="_right"] > .flex-center {
        justify-self: end;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}


/* --- Hero appearance (blocks.styles._hero_attrs): text size, background, dim, backdrop, height and button.
   Each per-device setting has a -m twin for phones; unset, phones follow desktop. Unset values keep the look
   banners always had. --- */

/* Text size */
.lead[data-block-size="small"] > .flex-center h1 { font-size: 1.5em; }
.lead[data-block-size="large"] > .flex-center h1 { font-size: clamp(2.4em, 5.5vw, 3.4em); line-height: 1.05; }
.lead[data-block-size="large"] > .flex-center p { font-size: 1.1em; }
.lead[data-block-size="xlarge"] > .flex-center h1 { font-size: clamp(2.8em, 7vw, 4.6em); line-height: 1.02; }
.lead[data-block-size="xlarge"] > .flex-center p { font-size: 1.2em; }

/* Background: a colour or gradient instead of the photo (the split style keeps its photo beside the words) */
.lead[data-hero-bg] {
    background: var(--hero-bg);
    color: var(--hero-text);
}
.lead[data-hero-bg="gradient"] {
    background: linear-gradient(135deg, var(--hero-bg), color-mix(in srgb, var(--hero-bg) 25%, var(--color-background)));
}
.lead[data-hero-bg]:not([data-block-style="split"]):not([data-block-style="stacked"]) .background-video__media,
.lead[data-hero-bg]:not([data-block-style="split"]):not([data-block-style="stacked"]) .hero-slideshow,
.lead[data-hero-bg]::after {
    display: none;
}
.lead[data-hero-bg] #white { color: inherit; }

/* Photo dim: the shade over the photo (medium is how it's always been) */
.lead[data-hero-dim]::after {
    background: linear-gradient(rgba(0, 0, 0, calc(var(--hero-dim) * 0.5)), rgba(0, 0, 0, var(--hero-dim)));
}
.lead[data-hero-dim="none"]::after { content: none; }

/* Backdrop: what sits behind the words. See-through is the words straight on the banner. */
.lead[data-hero-backdrop="blur"] > .flex-center,
.lead[data-hero-backdrop="card"] > .flex-center {
    box-sizing: border-box;
    width: fit-content;
    max-width: min(100%, 680px);
    padding: clamp(20px, 3vw, 36px) clamp(24px, 4vw, 44px);
    border-radius: var(--border-radius-card);
}
.lead[data-hero-backdrop="blur"] > .flex-center {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.lead[data-hero-backdrop="card"] > .flex-center,
.lead[data-hero-backdrop="colour"] > .flex-center,
.lead[data-hero-backdrop="gradient"] > .flex-center {
    background: color-mix(in srgb, var(--hero-backdrop) calc(var(--hero-backdrop-alpha) * 100%), transparent);
    color: var(--hero-backdrop-text);
}
.lead[data-hero-backdrop="card"] > .flex-center #white,
.lead[data-hero-backdrop="colour"] > .flex-center #white,
.lead[data-hero-backdrop="gradient"] > .flex-center #white {
    color: inherit;
}
.lead[data-hero-backdrop="colour"]:not([data-block-style="split"]) > .flex-center,
.lead[data-hero-backdrop="gradient"]:not([data-block-style="split"]) > .flex-center {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    padding: clamp(28px, 6vw, 72px) clamp(20px, 6vw, 72px);
}
/* A fade runs from the banner's bottom edge (or the top, for words placed at the top) into the photo, so the
   words sit against that edge whatever the vertical position says. */
.lead[data-hero-backdrop="gradient"]:not([data-block-style="split"]) > .flex-center {
    align-self: end;
    background: linear-gradient(to top, color-mix(in srgb, var(--hero-backdrop) calc(var(--hero-backdrop-alpha) * 100%), transparent) 45%, transparent);
    padding-top: clamp(64px, 12vw, 160px);
}
.lead[data-hero-backdrop="gradient"][data-text-position^="top_"]:not([data-block-style="split"]) > .flex-center {
    align-self: start;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--hero-backdrop) calc(var(--hero-backdrop-alpha) * 100%), transparent) 45%, transparent);
    padding-top: clamp(28px, 6vw, 72px);
    padding-bottom: clamp(64px, 12vw, 160px);
}
/* Split: the words' half is the band; a fade runs into the photo. */
.lead[data-block-style="split"][data-hero-backdrop="gradient"] > .flex-center {
    background: linear-gradient(to right, color-mix(in srgb, var(--hero-backdrop) calc(var(--hero-backdrop-alpha) * 100%), transparent) 60%, transparent);
    padding-right: clamp(40px, 10vw, 120px);
}
/* A card or glass panel fills the words' half with a margin, so the words keep their place in it rather than the
   panel shrinking to them against the banner's edge. */
.lead[data-block-style="split"][data-hero-backdrop="card"] > .flex-center,
.lead[data-block-style="split"][data-hero-backdrop="blur"] > .flex-center {
    width: auto;
    max-width: none;
    margin: clamp(16px, 3vw, 40px);
}

/* Height: tall (85% of the window, as always), full screen, or just the words' height */
.lead[data-hero-height="auto"],
.lead-height.lead-fill[data-hero-height="auto"] {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: clamp(40px, 8vw, 96px);
    padding-bottom: clamp(40px, 8vw, 96px);
}
.lead[data-hero-height="auto"][data-block-style="stacked"] {
    padding-top: 0;
    padding-bottom: 0;
}
.lead[data-hero-height="auto"][data-block-style="stacked"] .background-video__media,
.lead[data-hero-height="auto"][data-block-style="stacked"] .hero-slideshow {
    height: min(60vh, 520px);
}
.lead[data-hero-height="full"] {
    height: calc(100vh - var(--navbar-height, 60px));
    height: calc(100svh - var(--navbar-height, 60px));
    max-height: none;
    min-height: 500px;
}

/* Button: filled (the theme's CTA), outlined in the text colour, or a plain underlined link */
.lead[data-hero-button="outline"] > .flex-center .cta.button {
    background: transparent;
    color: inherit;
    border: 1.5px solid currentColor;
}
.lead[data-hero-button="outline"] > .flex-center .cta.button:hover {
    background: color-mix(in srgb, currentColor 14%, transparent);
}
.lead[data-hero-button="text"] > .flex-center .cta.button {
    background: transparent;
    color: inherit;
    padding: 0;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* Stacked: photo across the top, words underneath on the page (or hero) background; nothing covers the picture */
.lead[data-block-style="stacked"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.3fr) auto;
    background: var(--hero-bg, var(--color-background));
    color: var(--hero-text, var(--color-text));
    justify-items: stretch;
}
.lead[data-block-style="stacked"]::after { content: none; }
.lead[data-block-style="stacked"] .background-video__media,
.lead[data-block-style="stacked"] .hero-slideshow {
    position: relative;
    inset: auto;
    grid-row: 1;
    z-index: 0;
    width: calc(100% + 2 * var(--hero-bleed));
    height: calc(100% + 2 * var(--hero-bleed));
    margin: calc(-1 * var(--hero-bleed));
    clip-path: inset(var(--hero-bleed));
    min-height: 0;
    object-fit: cover;
    animation: none;
}
.lead[data-block-style="stacked"] .hero-slideshow .background-video__media {
    position: absolute;
    inset: 0;
}
.lead[data-block-style="stacked"] > .flex-center {
    grid-row: 2;
    box-sizing: border-box;
    padding: 28px clamp(20px, 6vw, 72px) 36px;
}
.lead[data-block-style="stacked"] #white { color: inherit; }
.lead[data-block-style="stacked"][data-text-position$="_left"] > .flex-center { justify-self: start; }
.lead[data-block-style="stacked"][data-text-position$="_right"] > .flex-center { justify-self: end; }
.lead[data-block-style="stacked"][data-hero-backdrop="colour"] > .flex-center,
.lead[data-block-style="stacked"][data-hero-backdrop="gradient"] > .flex-center {
    background: color-mix(in srgb, var(--hero-backdrop) calc(var(--hero-backdrop-alpha) * 100%), transparent);
    padding: 28px clamp(20px, 6vw, 72px) 36px;
}

/* Phones: the -m twins (position, size, backdrop, height, photo blur) take over where set */
@media (max-width: 700px) {
    .lead[data-hero-blur-m] { --hero-photo-blur: var(--hero-blur-m); }
    .lead[data-text-position-m^="top_"] > .flex-center { align-self: start; }
    .lead[data-text-position-m^="middle_"] > .flex-center { align-self: center; }
    .lead[data-text-position-m^="bottom_"] > .flex-center { align-self: end; }
    /* The box's place across: :not(#hero-m) lifts these over the desktop placement rules, whatever their selectors. */
    .lead[data-text-position-m$="_left"]:not(#hero-m) > .flex-center { justify-self: start; }
    .lead[data-text-position-m$="_center"]:not(#hero-m) > .flex-center { justify-self: center; }
    .lead[data-text-position-m$="_right"]:not(#hero-m) > .flex-center { justify-self: end; }
    .lead[data-block-style="split"][data-text-position-m$="_left"] > .flex-center { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--border-radius-card); border-bottom-right-radius: var(--border-radius-card); }
    .lead[data-block-style="split"][data-text-position-m$="_center"] > .flex-center { border-radius: var(--border-radius-card); }
    .lead[data-block-style="split"][data-text-position-m$="_right"] > .flex-center { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--border-radius-card); border-bottom-left-radius: var(--border-radius-card); }
    .lead[data-text-position-m]:not([data-text-position-m^="middle_"]) > .flex-center,
    .lead[data-text-position-m]:not([data-text-position-m$="_center"]):not([data-block-style="split"]) > .flex-center {
        padding: clamp(28px, 6vw, 72px) clamp(20px, 6vw, 72px);
    }

    .lead[data-block-size-m="small"] > .flex-center h1 { font-size: 1.5em; }
    .lead[data-block-size-m="normal"] > .flex-center h1 { font-size: 2em; line-height: 1.1; }
    .lead[data-block-size-m="large"] > .flex-center h1 { font-size: 2.5em; line-height: 1.05; }
    .lead[data-block-size-m="xlarge"] > .flex-center h1 { font-size: 3.1em; line-height: 1.02; }
    .lead[data-block-size-m="small"] > .flex-center p, .lead[data-block-size-m="normal"] > .flex-center p { font-size: 1em; }
    .lead[data-block-size-m="large"] > .flex-center p { font-size: 1.05em; }
    .lead[data-block-size-m="xlarge"] > .flex-center p { font-size: 1.1em; }

    /* Backdrops on phones: the split style's words sit over the photo like every other style's. */
    .lead[data-hero-backdrop-m] > .flex-center,
    .lead[data-block-style="split"][data-text-position] > .flex-center {
        width: fit-content;
        max-width: min(100% - 32px, 420px);
        border: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    /* The desktop card and glass panels' margin in their half doesn't apply to the box over the photo. */
    .lead[data-block-style="split"][data-text-position] > .flex-center { margin: 0; }
    :is(.lead[data-hero-backdrop="none"]:not([data-hero-backdrop-m]), .lead[data-hero-backdrop-m="none"]) > .flex-center {
        background: none;
        color: inherit;
        padding: 20px 24px;
    }
    :is(.lead[data-block-style="split"][data-hero-backdrop="none"]:not([data-hero-backdrop-m]), .lead[data-block-style="split"][data-hero-backdrop-m="none"]) > .flex-center,
    :is(.lead[data-block-style="split"][data-hero-backdrop="blur"]:not([data-hero-backdrop-m]), .lead[data-block-style="split"][data-hero-backdrop-m="blur"]) > .flex-center {
        color: #ffffff;
        text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
    }
    :is(.lead[data-block-style="split"][data-hero-backdrop="none"]:not([data-hero-backdrop-m]), .lead[data-block-style="split"][data-hero-backdrop-m="none"])::after,
    :is(.lead[data-block-style="split"][data-hero-backdrop="blur"]:not([data-hero-backdrop-m]), .lead[data-block-style="split"][data-hero-backdrop-m="blur"])::after {
        content: '';
    }
    :is(.lead[data-hero-backdrop="blur"]:not([data-hero-backdrop-m]), .lead[data-hero-backdrop-m="blur"]) > .flex-center {
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius: var(--border-radius-card);
        padding: 20px 24px;
    }
    :is(.lead[data-hero-backdrop="card"]:not([data-hero-backdrop-m]), .lead[data-hero-backdrop-m="card"]) > .flex-center {
        background: color-mix(in srgb, var(--hero-backdrop, var(--color-background)) calc(var(--hero-backdrop-alpha, 1) * 100%), transparent);
        color: var(--hero-backdrop-text, var(--color-text));
        border-radius: var(--border-radius-card);
        padding: 20px 24px;
        margin: 0;
    }
    :is(.lead[data-hero-backdrop="colour"]:not([data-hero-backdrop-m]), .lead[data-hero-backdrop-m="colour"]) > .flex-center,
    :is(.lead[data-hero-backdrop="gradient"]:not([data-hero-backdrop-m]), .lead[data-hero-backdrop-m="gradient"]) > .flex-center {
        width: 100%;
        max-width: none;
        justify-self: stretch;
        border-radius: 0;
        background: color-mix(in srgb, var(--hero-backdrop, var(--color-background)) calc(var(--hero-backdrop-alpha, 1) * 100%), transparent);
        color: var(--hero-backdrop-text, var(--color-text));
        padding: 28px 20px;
    }
    :is(.lead[data-hero-backdrop="gradient"]:not([data-hero-backdrop-m]), .lead[data-hero-backdrop-m="gradient"]) > .flex-center {
        align-self: end;
        background: linear-gradient(to top, color-mix(in srgb, var(--hero-backdrop, var(--color-background)) calc(var(--hero-backdrop-alpha, 1) * 100%), transparent) 45%, transparent);
        padding-top: 64px;
    }
    :is(.lead[data-hero-backdrop="gradient"]:not([data-hero-backdrop-m]), .lead[data-hero-backdrop-m="gradient"]):is([data-text-position-m^="top_"], [data-text-position^="top_"]:not([data-text-position-m])) > .flex-center {
        align-self: start;
        background: linear-gradient(to bottom, color-mix(in srgb, var(--hero-backdrop, var(--color-background)) calc(var(--hero-backdrop-alpha, 1) * 100%), transparent) 45%, transparent);
        padding-top: 28px;
        padding-bottom: 64px;
    }
    :is(.lead[data-hero-backdrop="card"]:not([data-hero-backdrop-m]), .lead[data-hero-backdrop-m="card"],
        .lead[data-hero-backdrop="colour"]:not([data-hero-backdrop-m]), .lead[data-hero-backdrop-m="colour"],
        .lead[data-hero-backdrop="gradient"]:not([data-hero-backdrop-m]), .lead[data-hero-backdrop-m="gradient"]) > .flex-center #white {
        color: inherit;
    }
    .lead[data-block-style="split"][data-hero-backdrop-m="colour"],
    .lead[data-block-style="split"][data-hero-backdrop-m="gradient"],
    .lead[data-block-style="split"][data-hero-backdrop-m="none"],
    .lead[data-block-style="split"][data-hero-backdrop-m="blur"] {
        padding: 0;
    }

    .lead[data-hero-height-m="auto"],
    .lead-height.lead-fill[data-hero-height-m="auto"] {
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
        max-height: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .lead[data-hero-height-m="tall"] {
        height: 85vh;
        min-height: 500px;
        max-height: 90%;
        padding-top: 0;
        padding-bottom: 0;
    }
    .lead[data-hero-height-m="full"] {
        height: calc(100svh - 62px);
        max-height: none;
        min-height: 480px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* --- Hero: the words' box and the words in it, placed separately (blocks.styles._hero_attrs) -------------------
   data-hero-text(-m) lines the words up inside their box (their own alignment, else the box's place across);
   data-hero-box(-m) caps the box's width so it can sit left, centre or right with room around it. Band and fade
   backdrops are always the banner's full width, so only their words move. */
.lead.lead[data-hero-text="left"] > .flex-center { align-items: flex-start; text-align: left; }
.lead.lead[data-hero-text="center"] > .flex-center { align-items: center; text-align: center; }
.lead.lead[data-hero-text="right"] > .flex-center { align-items: flex-end; text-align: right; }

.lead[data-hero-box]:not([data-block-style="split"]) > .flex-center { box-sizing: border-box; width: fit-content; }
.lead[data-hero-box="narrow"]:not([data-block-style="split"]) > .flex-center { max-width: min(100%, 420px); }
.lead[data-hero-box="medium"]:not([data-block-style="split"]) > .flex-center { max-width: min(100%, 600px); }
.lead[data-hero-box="wide"]:not([data-block-style="split"]) > .flex-center { max-width: min(100%, 820px); }
.lead[data-hero-box]:is([data-hero-backdrop="colour"], [data-hero-backdrop="gradient"]):not([data-block-style="split"]) > .flex-center {
    width: 100%;
    max-width: none;
}
/* A card or glass panel placed left or right keeps a gap from the banner's edge. */
.lead:is([data-hero-backdrop="card"], [data-hero-backdrop="blur"]):not([data-block-style="split"]):not([data-text-position$="_center"]) > .flex-center {
    margin-inline: clamp(16px, 5vw, 64px);
    max-width: calc(100% - 2 * clamp(16px, 5vw, 64px));
}
.lead:is([data-hero-backdrop="card"], [data-hero-backdrop="blur"])[data-hero-box="narrow"]:not([data-block-style="split"]):not([data-text-position$="_center"]) > .flex-center { max-width: min(420px, 100% - 2 * clamp(16px, 5vw, 64px)); }
.lead:is([data-hero-backdrop="card"], [data-hero-backdrop="blur"])[data-hero-box="medium"]:not([data-block-style="split"]):not([data-text-position$="_center"]) > .flex-center { max-width: min(600px, 100% - 2 * clamp(16px, 5vw, 64px)); }

@media (max-width: 700px) {
    .lead.lead[data-hero-text-m="left"] > .flex-center { align-items: flex-start; text-align: left; }
    .lead.lead[data-hero-text-m="center"] > .flex-center { align-items: center; text-align: center; }
    .lead.lead[data-hero-text-m="right"] > .flex-center { align-items: flex-end; text-align: right; }

    /* On a phone the box is a share of the screen, so a narrow one visibly sits to one side. */
    .lead.lead[data-hero-box-m] > .flex-center { box-sizing: border-box; width: fit-content; }
    .lead.lead[data-hero-box-m]:not([data-block-style="split"]) > .flex-center { margin-inline: 16px; }
    .lead.lead[data-hero-box-m="narrow"] > .flex-center { max-width: min(68%, 100% - 32px); }
    .lead.lead[data-hero-box-m="medium"] > .flex-center { max-width: min(84%, 100% - 32px); }
    .lead.lead[data-hero-box-m="wide"] > .flex-center { max-width: calc(100% - 32px); }
    .lead.lead[data-hero-box-m]:is(
        [data-hero-backdrop="colour"]:not([data-hero-backdrop-m]), [data-hero-backdrop-m="colour"],
        [data-hero-backdrop="gradient"]:not([data-hero-backdrop-m]), [data-hero-backdrop-m="gradient"]) > .flex-center {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
}

/* --- Image --------------------------------------------------------------------------------------------------- */

/* Framed: the photo on a white mount, like a print. Beside words, only the photo (and its caption) is mounted.
   The photo's corners nest inside the mount's: 6px less its 14px border, so square. */
[data-block-style="framed"]:not([data-item-corners]) {
    --frame-radius: 6px;
    --frame-pad: 14px;
    --border-radius-image: max(0px, calc(var(--frame-radius) - var(--frame-pad)));
}
[data-block-style="framed"] .site-image-figure {
    padding: var(--frame-pad, 14px) var(--frame-pad, 14px) 10px;
    background: var(--block-card-bg);
    border: 1px solid var(--block-card-border);
    border-radius: var(--frame-radius, 6px);
    box-shadow: var(--card-shadow);
}

/* With the photo in the middle, the caption and the words under it are written on the mount too, like a
   photograph with writing below. The mount is as wide as the photo's size allows. */
[data-block-style="framed"] .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right) {
    --frame-photo: 600px;
    box-sizing: border-box;
    width: min(100%, calc(var(--frame-photo) + 30px));
    margin-inline: auto;
    padding: var(--frame-pad, 14px) var(--frame-pad, 14px) 18px;
    gap: 14px;
    background: var(--block-card-bg);
    color: var(--block-card-text);
    border: 1px solid var(--block-card-border);
    border-radius: var(--frame-radius, 6px);
    box-shadow: var(--card-shadow);
}
[data-block-style="framed"] .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right).size-narrow { --frame-photo: 340px; }
[data-block-style="framed"] .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right).size-wide { --frame-photo: 900px; }
[data-block-style="framed"] .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right).size-full { width: 100%; }
[data-block-style="framed"] .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right) .site-image-figure {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
[data-block-style="framed"] .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right) .media-text-content {
    padding-inline: 4px;
}

/* --- Photos in text and image blocks on a background ---------------------------------------------------------- */

/* The box's padding is the gap all round: the first and last things in it lose their own margins, and a photo
   in the box needs no margin of its own (the layout's gap spaces it from the words). */
:is([data-block-kind="text"], [data-block-kind="image"]) > .block-box[data-box-bg] > :first-child { margin-top: 0; }
:is([data-block-kind="text"], [data-block-kind="image"]) > .block-box[data-box-bg] > :last-child { margin-bottom: 0; }
:is([data-block-kind="text"], [data-block-kind="image"]) > .block-box[data-box-bg] .media-layout-grid .site-image-figure { margin: 0; }

/* On a card, a photo above or under the words is the top of the card: it runs to the card's top and side edges
   (clipped by its corners), its caption just under it, then the heading and words. Beside the words it stays
   beside them. */
[data-block-kind="text"] > .block-box[data-box-bg="card"]:has(> .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right)) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
[data-block-kind="text"] > .block-box[data-box-bg="card"] > .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right) {
    display: contents;
}
[data-block-kind="text"] > .block-box[data-box-bg="card"] > .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right) .media-image-column {
    order: -1;
    align-items: stretch;
    margin: -28px -32px 22px;
    max-width: none;
}
[data-block-kind="text"] > .block-box[data-box-bg="card"] > .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right) .site-image-figure {
    align-items: stretch;
    border-bottom: 1px solid var(--block-card-border);
    max-width: none;
}
[data-block-kind="text"] > .block-box[data-box-bg="card"] > .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right) :is(.site-image-wrapper, .site-animated-image, .site-animated-video) {
    width: 100%;
    border-radius: 0;
}
/* The caption sits on the photo's bottom left edge, in a small bar in the card's own colour. */
[data-block-kind="text"] > .block-box[data-box-bg="card"] > .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right) .site-image-figure {
    position: relative;
}
[data-block-kind="text"] > .block-box[data-box-bg="card"] > .media-layout-grid:not(.layout-side_left, .layout-side_right, .layout-left, .layout-right) .site-image-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: min(80%, 36em);
    margin: 0;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--block-card-bg) 88%, transparent);
    color: var(--block-card-text);
    text-align: left;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Photos inset in a block's box (a card, tint or colour) have corners running parallel to the box's: outer
   radius = inner radius + padding, so a photo's radius is the box's less the padding between them, square once
   the padding is the larger. A block's own Item corners (data-item-corners) win. Galleries' boxes have their own
   padding (--box-pad). */
.block-box[data-box-bg]:not([data-item-corners] *) {
    --border-radius-image: max(0px, calc(var(--box-radius) - var(--box-pad)));
}

/* --- Booking widget ------------------------------------------------------------------------------------------- */

/* Info + calendar: the heading and words beside the booking form on wide screens. */
@media (min-width: 900px) {
    .booking-block[data-block-style="split"] {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        align-items: start;
        max-width: calc(var(--block-width, 1200px) + 40px);
        margin: 0 auto;
    }

    .booking-block[data-block-style="split"] .booking-hero .flex-center {
        align-items: flex-start;
        text-align: left;
        position: sticky;
        top: calc(var(--navbar-height, 48px) + 24px);
    }
}

/* --- Blog stories ------------------------------------------------------------------------------------------------ */

.blog-listing[data-block-style="cards"] .blog-posts-wrap,
.blog-listing[data-block-style="featured"] .blog-posts-wrap {
    display: grid;
    gap: 24px;
}

.blog-listing[data-block-style="cards"] .blog-posts-wrap {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.blog-listing[data-block-style="featured"] .blog-posts-wrap {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.blog-listing[data-block-style="featured"] .post-item:first-of-type {
    grid-row: span 3;
}

.blog-listing:is([data-block-style="cards"], [data-block-style="featured"]) .post-item {
    padding: 20px;
    border: 1px solid var(--block-card-border);
    border-radius: var(--border-radius-card, 14px);
    background: var(--block-card-bg);
    color: var(--block-card-text);
}

.blog-listing[data-block-style="featured"] .post-item:not(:first-of-type) .post-image,
.blog-listing[data-block-style="featured"] .post-item:not(:first-of-type) .post-excerpt {
    display: none;
}

.blog-listing[data-block-style="featured"] .post-item:not(:first-of-type) .post-title {
    font-size: 1.1rem;
}

.blog-listing:is([data-block-style="cards"], [data-block-style="featured"]) .blog-posts-wrap > :not(.post-item) {
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .blog-listing[data-block-style="featured"] .blog-posts-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-listing[data-block-style="featured"] .post-item:first-of-type {
        grid-row: auto;
    }
}

/* Carousel and Preview strip: the posts are a sideways scroll-snap track (swipe, trackpad or the arrows that
   assets/js/blog-scroller.js shows while there's more to see). The carousel shows one post at a time with dots;
   the strip shows a row of small cards and peeks at the next one. */
.blog-scroller {
    position: relative;
}

.blog-scroller .blog-posts-wrap {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.blog-scroller .blog-posts-wrap::-webkit-scrollbar {
    display: none;
}

.blog-scroller .post-item {
    box-sizing: border-box;
    scroll-snap-align: start;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--block-card-border);
    border-radius: var(--border-radius-card, 14px);
    background: var(--block-card-bg);
    color: var(--block-card-text);
}

/* Each slide is as tall as its own post, centred in the track beside the arrows, so a post without a picture isn't
   stretched to the height of one with a picture. */
.blog-scroller[data-blog-scroller="carousel"] .blog-posts-wrap {
    align-items: center;
}

.blog-scroller[data-blog-scroller="carousel"] .post-item {
    flex: 0 0 100%;
}

/* Room for the next arrow, which overlaps the card's right edge */
.blog-scroller[data-blog-scroller="carousel"] .post-text {
    padding-right: 28px;
}

@media (min-width: 701px) {
    .blog-scroller[data-blog-scroller="carousel"] .post-item.has-post-image {
        flex-direction: row;
        align-items: center;
        gap: 32px;
        padding: 24px;
    }

    .blog-scroller[data-blog-scroller="carousel"] .post-item.has-post-image .post-image {
        order: 0;
        flex: 0 0 55%;
    }

    .blog-scroller[data-blog-scroller="carousel"] .post-item.has-post-image .post-image img {
        aspect-ratio: 4 / 3;
    }
}

.blog-scroller[data-blog-scroller="strip"] .post-item {
    flex: 0 0 clamp(200px, 30%, 280px);
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
}

.blog-scroller[data-blog-scroller="strip"] .post-item .post-image {
    order: 0;
    flex: none;
}

.blog-scroller[data-blog-scroller="strip"] .post-item .post-image img {
    aspect-ratio: 4 / 3;
}

.blog-scroller[data-blog-scroller="strip"] .post-date {
    margin-bottom: 8px;
}

.blog-scroller[data-blog-scroller="strip"] .post-title {
    font-size: 1.05rem;
}

.blog-scroller[data-blog-scroller="strip"] .post-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.92rem;
}

.blog-scroller-arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--block-card-border);
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.2s var(--easing), color 0.2s var(--easing);
}

.blog-scroller-arrow[hidden] {
    display: none;
}

.blog-scroller-arrow:hover {
    background: var(--color-cta);
    color: var(--color-cta-text, #ffffff);
}

.blog-scroller-arrow.is-prev {
    left: -14px;
}

.blog-scroller-arrow.is-next {
    right: -14px;
}

.blog-scroller-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.blog-scroller-dots[hidden] {
    display: none;
}

.blog-scroller-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 22%, transparent);
    cursor: pointer;
    transition: width 0.25s var(--easing), background-color 0.25s var(--easing);
}

.blog-scroller-dot.is-active {
    width: 24px;
    background: var(--color-cta);
}

.blog-listing[data-block-bg="accent"] .blog-scroller-dot {
    background: color-mix(in srgb, var(--color-cta-text, #ffffff) 45%, transparent);
}

.blog-listing[data-block-bg="accent"] .blog-scroller-dot.is-active {
    background: var(--color-cta-text, #ffffff);
}

/* Touch screens swipe; the arrows would only cover the posts. */
@media (hover: none) {
    .blog-scroller-arrow {
        display: none;
    }
}

/* Picture tiles: each post's picture fills a tile with its title over the bottom; a post without a picture
   gets an accent-coloured tile. The whole tile is the link. */
.blog-listing[data-block-style="tiles"] .blog-posts-wrap {
    display: grid;
    /* At most three a row, fewer as the block narrows */
    grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 36px) / 3)), 1fr));
    gap: 18px;
}

.blog-listing[data-block-style="tiles"] .blog-posts-wrap > :not(.post-item) {
    grid-column: 1 / -1;
}

.blog-listing[data-block-style="tiles"] .post-item {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-card, 14px);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-cta), color-mix(in srgb, var(--color-cta) 45%, var(--color-text)));
    isolation: isolate;
}

.blog-listing[data-block-style="tiles"] .post-item .post-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 0;
}

.blog-listing[data-block-style="tiles"] .post-item .post-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.blog-listing[data-block-style="tiles"] .post-item:hover .post-image img {
    transform: scale(1.04);
}

.blog-listing[data-block-style="tiles"] .post-text {
    flex: none;
    padding: 56px 18px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.35) 60%, transparent);
    color: #ffffff;
}

.blog-listing[data-block-style="tiles"] :is(.post-date, .post-draft-label, .post-excerpt) {
    color: rgba(255, 255, 255, 0.85);
}

.blog-listing[data-block-style="tiles"] .post-date {
    margin-bottom: 8px;
}

.blog-listing[data-block-style="tiles"] .post-title {
    font-size: 1.15rem;
}

.blog-listing[data-block-style="tiles"] .post-title a,
.blog-listing[data-block-style="tiles"] .post-title a:hover {
    color: #ffffff;
}

.blog-listing[data-block-style="tiles"] .post-title a::before {
    content: "";
    position: absolute;
    inset: 0;
}

.blog-listing[data-block-style="tiles"] .post-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 6px 0 0;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .blog-listing[data-block-style="tiles"] .post-item {
        aspect-ratio: 4 / 3;
    }
}

/* Headlines: date and title on one line each, no pictures or excerpts. */
.blog-listing[data-block-style="headlines"] .post-item {
    display: grid;
    grid-template-columns: 9.5em minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
    padding: 16px 0;
    border-top: 0;
}

.blog-listing[data-block-style="headlines"] .post-text {
    display: contents;
}

.blog-listing[data-block-style="headlines"] :is(.post-image, .post-excerpt) {
    display: none;
}

.blog-listing[data-block-style="headlines"] .post-date {
    grid-column: 1;
    margin: 0;
}

.blog-listing[data-block-style="headlines"] .post-draft-label {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin: 0;
}

.blog-listing[data-block-style="headlines"] .post-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.1rem;
}

@media (max-width: 600px) {
    .blog-listing[data-block-style="headlines"] .post-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .blog-listing[data-block-style="headlines"] :is(.post-date, .post-draft-label, .post-title) {
        grid-column: 1;
        grid-row: auto;
    }
}

/* --- Accordions ---------------------------------------------------------------------------------------------- */

[data-block-style="lines"] .accordion {
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text, #000000) 15%, transparent);
    border-radius: 0;
    background: transparent;
    color: inherit;
}

[data-block-style="lines"] .accordion-toggle,
[data-block-style="lines"] .accordion-panel-inner {
    padding-left: 0;
    padding-right: 0;
    color: inherit;
}

@media (min-width: 760px) {
    [data-block-style="twocol"] .about-section {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 20px;
        align-items: start;
    }
}

/* --- Events -------------------------------------------------------------------------------------------------- */

[data-block-style="timeline"] .events-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 28px;
}

[data-block-style="timeline"] .events-grid::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 7px;
    width: 2px;
    background: color-mix(in srgb, var(--color-text, #000000) 12%, transparent);
}

[data-block-style="timeline"] .event-scorecard {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 12px 0 24px;
    overflow: visible;
}

[data-block-style="timeline"] .event-scorecard::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--block-accent);
}

[data-block-style="timeline"] .event-scorecard-image {
    width: 100%;
    max-width: 360px;
    margin: 0 0 14px;
    border-radius: var(--border-radius, 8px);
}

[data-block-style="timeline"] .events-grid .event-scorecard-image {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: 0 0 14px;
}

[data-block-style="timeline"] .events-image-bottom .event-scorecard-image {
    margin: 14px 0 0;
}

[data-block-style="timeline"] .event-scorecard:hover {
    transform: none;
    box-shadow: none;
}

[data-block-style="timeline"] .event-scorecard-footer {
    border-top: 0;
    padding-top: 0;
}

[data-block-style="rows"] .events-grid.events-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

[data-block-style="rows"] .event-scorecard {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
}

[data-block-style="rows"] .event-scorecard-image {
    width: 64px;
    aspect-ratio: 1;
    margin: 0;
    flex-shrink: 0;
    border-radius: var(--border-radius, 8px);
}

/* Compact rows keep a small thumbnail at the start of the row, or the end for Right side */
[data-block-style="rows"] .events-grid .event-scorecard.has-image {
    display: flex;
}

[data-block-style="rows"] .events-grid .event-scorecard-image {
    width: 64px;
    height: 64px;
    min-height: 0;
    margin: 0;
    order: 0;
}

[data-block-style="rows"] .events-image-side_right .event-scorecard-image {
    order: 10;
}

/* The date badge sits level with the title, however tall a thumbnail makes the row */
[data-block-style="rows"] .event-scorecard-badge {
    margin: 0;
    flex-shrink: 0;
    align-self: center;
}

[data-block-style="rows"] .event-scorecard-content {
    min-width: 0;
}

[data-block-style="rows"] .event-scorecard-summary {
    display: none;
}

[data-block-style="rows"] .event-scorecard-title {
    margin: 0;
    font-size: 1rem;
}

[data-block-style="rows"] .event-scorecard-footer {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    flex-shrink: 0;
}

/* On phones a row is too narrow for everything on one line: the badge, title and link stack beside the thumbnail */
@media (max-width: 600px) {
    [data-block-style="rows"] .events-grid .event-scorecard.event-scorecard {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px 12px;
        align-items: center;
        justify-items: start;
    }

    [data-block-style="rows"] .events-grid .event-scorecard.has-image {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    [data-block-style="rows"] .events-grid .event-scorecard.has-image > :not(.event-scorecard-image) {
        grid-column: 2;
    }

    [data-block-style="rows"] .events-grid .event-scorecard.has-image .event-scorecard-image {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        width: 64px;
        height: 64px;
        aspect-ratio: 1;
        margin: 0;
    }

    [data-block-style="rows"] .events-grid.events-image-side_right .event-scorecard.has-image {
        grid-template-columns: minmax(0, 1fr) 64px;
    }

    [data-block-style="rows"] .events-grid.events-image-side_right .event-scorecard.has-image > :not(.event-scorecard-image) {
        grid-column: 1;
    }

    [data-block-style="rows"] .events-grid.events-image-side_right .event-scorecard.has-image .event-scorecard-image {
        grid-column: 2;
    }
}

/* --- WhatsApp -------------------------------------------------------------------------------------------------- */

@media (min-width: 600px) {
    .whatsapp-cta-block[data-block-style="inline"] .flex-center {
        flex-direction: row;
        justify-content: space-between;
        gap: 24px;
        text-align: left;
    }

    .whatsapp-cta-block[data-block-style="inline"] h2 {
        margin: 0;
    }
}

/* --- Button group ---------------------------------------------------------------------------------------------- */

.button-group-section[data-block-style="stacked"] .button-group-row {
    flex-direction: column !important;
    align-items: stretch !important;
}

.button-group-section[data-block-style="stacked"] .button {
    text-align: center;
}

.button-group-section[data-block-style="outline"] .button {
    background: transparent;
    color: var(--color-text);
    border: 1px solid currentColor;
}

.button-group-section[data-block-style="outline"] .button:hover {
    background: color-mix(in srgb, var(--color-text, #000000) 8%, transparent);
}

.button-group-section[data-block-style="tiles"] .button-group-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.button-group-section[data-block-style="tiles"] .button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 20px;
    background: var(--block-tint);
    color: var(--color-text);
    text-align: center;
    border-radius: var(--border-radius-card, 14px);
}

/* The row of buttons follows the block's alignment, on phones too (buttons.css centres it with !important). */
.button-group-section .button-group-row { justify-content: flex-start !important; }
.button-group-section[data-block-align="center"] .button-group-row { justify-content: center !important; }
.button-group-section[data-block-align="right"] .button-group-row { justify-content: flex-end !important; }
@media (max-width: 700px) {
    .button-group-section[data-block-align-m="left"] .button-group-row { justify-content: flex-start !important; }
    .button-group-section[data-block-align-m="center"] .button-group-row { justify-content: center !important; }
    .button-group-section[data-block-align-m="right"] .button-group-row { justify-content: flex-end !important; }
}

/* --- Photo gallery --------------------------------------------------------------------------------------------- */

.gallery-block[data-block-bg] .gallery-block-inner {
    max-width: 1240px;
    margin: 24px auto;
}

/* Edge to edge the band's own padding spaces the photos from the blocks above and below. */
.gallery-block[data-block-band][data-block-bg] .gallery-block-inner {
    margin-top: 0;
    margin-bottom: 0;
}

/* On a background the box is the frame: one even gap on every side, about the gap between photos, instead of
   the box's padding plus the gallery's own margins and side padding. */
.gallery-block .block-box[data-box-bg] {
    --box-pad: clamp(16px, 2.2vw, 28px);
    padding: var(--box-pad);
}
.gallery-block .block-box[data-box-bg] :is(.image-gallery, .gallery-block-head, .private-gallery-collection-header, .gallery-collection-description) {
    padding-inline: 0;
}
.gallery-block .block-box[data-box-bg] .gallery-preview {
    width: 100%;
    padding: 0;
}
.gallery-block .block-box[data-box-bg] > :first-child { margin-top: 0; }
/* The gallery's lightbox comes last in the box but is fixed over the page, so the photos before it end the frame. */
.gallery-block .block-box[data-box-bg] > :is(:last-child, :has(+ .lightbox:last-child)) { margin-bottom: 0; }
/* Masonry photos each keep a gap below (dropped at column breaks), so the very last one's comes off the frame. */
:is(.gallery-block, .private-gallery-block)[data-block-style="masonry"] .block-box[data-box-bg] > .image-gallery:is(:last-child, :has(+ .lightbox:last-child)) > :last-child { margin-bottom: 0; }

/* Masonry: photos keep their own shape, in columns. */
:is(.gallery-block, .private-gallery-block)[data-block-style="masonry"] .image-gallery {
    display: block;
    columns: 3 260px;
    column-gap: 20px;
}

:is(.gallery-block, .private-gallery-block)[data-block-style="masonry"] .image-gallery > * {
    break-inside: avoid;
    margin-bottom: 20px;
}

:is(.gallery-block, .private-gallery-block)[data-block-style="masonry"] .image-gallery img {
    height: auto;
}

/* Photos carry their own width and height (photo_card), so each card keeps its shape while it loads. One whose
   size isn't known holds a portrait shape until it arrives, rather than a thin strip around the spinner. */
:is(.gallery-block, .private-gallery-block)[data-block-style="masonry"] .image-gallery img.gallery-preview-img:not([width]) {
    aspect-ratio: auto 4 / 5;
}

/* Carousel: one large photo at a time, swiped or scrolled sideways. */
:is(.gallery-block, .private-gallery-block)[data-block-style="carousel"] .image-gallery {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(80%, 720px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    overscroll-behavior-x: contain;
}

:is(.gallery-block, .private-gallery-block)[data-block-style="carousel"] .image-gallery > * {
    scroll-snap-align: center;
}

:is(.gallery-block, .private-gallery-block)[data-block-style="carousel"] .image-gallery img {
    height: min(70vh, 560px);
}

/* Photo style Instant (photo_style): little instant photos scattered on a page. Each photo is square on a white
   print with the deeper strip at the bottom, at its own angle and offset, overlapping its neighbours a little.
   Hovering (or focusing) one lifts it to the front and straightens it. Masonry keeps its columns with each whole
   photo at its own shape, and a carousel its sideways track; both just take the prints. */
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"]:not([data-block-style="carousel"], [data-block-style="masonry"]) .image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    columns: auto;
    padding: 28px 16px 40px;
}
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery > * {
    --instant-pad: 8px;
    /* The photo nests in the print's 2px corners across its border: 2px less the padding, so square. */
    --border-radius-image: max(0px, calc(2px - var(--instant-pad)));
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    padding: var(--instant-pad) var(--instant-pad) calc(var(--instant-pad) * 4);
    background: #fdfcf9;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    /* Loose prints on a page need a little shadow to sit apart where they overlap. */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 6px 14px rgba(0, 0, 0, 0.07);
    transform: translate(var(--instant-dx, 0px), var(--instant-dy, 0px)) rotate(var(--instant-tilt, 0deg));
    transition: transform 0.25s var(--easing, ease), box-shadow 0.25s var(--easing, ease);
}
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"]:not([data-block-style="carousel"], [data-block-style="masonry"]) .image-gallery > * {
    flex: 0 0 auto;
    width: clamp(150px, 21%, 220px);
    margin: 8px -10px;
}
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery > :nth-child(7n + 1) { --instant-tilt: -5deg; --instant-dx: 4px; --instant-dy: 6px; }
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery > :nth-child(7n + 2) { --instant-tilt: 3deg; --instant-dx: -2px; --instant-dy: -8px; }
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery > :nth-child(7n + 3) { --instant-tilt: -1.5deg; --instant-dx: 6px; --instant-dy: 10px; }
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery > :nth-child(7n + 4) { --instant-tilt: 6deg; --instant-dx: -6px; --instant-dy: -2px; }
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery > :nth-child(7n + 5) { --instant-tilt: -3.5deg; --instant-dx: 2px; --instant-dy: -10px; }
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery > :nth-child(7n + 6) { --instant-tilt: 2deg; --instant-dx: -4px; --instant-dy: 8px; }
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery > :nth-child(7n) { --instant-tilt: -6deg; --instant-dx: 0px; --instant-dy: 0px; }
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery > :is(:hover, :focus-visible, :focus-within) {
    /* Above its neighbours (0), below the sticky navbar (3, navigation.css). No isolation on the gallery:
       Safari misdraws a stacking context of rotated prints under the navbar's backdrop blur. */
    z-index: 2;
    transform: translate(var(--instant-dx, 0px), var(--instant-dy, 0px)) rotate(0deg) scale(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 14px 28px rgba(0, 0, 0, 0.14);
    outline: none;
}
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery img,
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery img:hover {
    transform: none;
}
/* Grid and carousel prints are square, like instant film; Masonry prints keep the whole photo at its own shape. */
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"]:not([data-block-style="masonry"]) .image-gallery img {
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"][data-block-style="masonry"] .image-gallery {
    column-gap: 28px;
    padding: 20px 16px 28px;
}
/* Safari clips whatever pokes above the top of a CSS column and carries whatever hangs below its bottom into the
   next column, so a tilted print starting a column lost its top corner and one ending a column left a stray
   shadow at the top of the next. Each Masonry print keeps clear room above and below it inside itself (transparent
   top and bottom borders, the print painted inside them), and its edge and shadow follow the painted print. */
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"][data-block-style="masonry"] .image-gallery > * {
    margin-bottom: 0;
    border: 0;
    border-block: 20px solid transparent;
    background-clip: padding-box;
    box-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.14)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
    /* Wide Masonry prints tilt half as far and don't shift up or down, so they stay inside that room. */
    transform: translateX(var(--instant-dx, 0px)) rotate(calc(var(--instant-tilt, 0deg) / 2));
}
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"][data-block-style="masonry"] .image-gallery > :is(:hover, :focus-visible, :focus-within) {
    transform: translateX(var(--instant-dx, 0px)) rotate(0deg) scale(1.04);
    box-shadow: none;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.16)) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.14));
}
/* The full-size photo fades in over the preview: inside the print, not over its border. */
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery .gallery-full-img {
    inset: var(--instant-pad) auto auto var(--instant-pad);
    width: calc(100% - var(--instant-pad) * 2);
    height: auto;
}
:is(.gallery-block, .private-gallery-block)[data-photo-style="instant"][data-block-style="carousel"] .image-gallery {
    padding: 20px 24px 28px;
}
@media (max-width: 700px) {
    :is(.gallery-block, .private-gallery-block)[data-photo-style="instant"]:not([data-block-style="carousel"], [data-block-style="masonry"]) .image-gallery > * {
        width: 46%;
        margin: 6px -6px;
    }
}
@media (prefers-reduced-motion: reduce) {
    :is(.gallery-block, .private-gallery-block)[data-photo-style="instant"] .image-gallery > * { transition: none; }
}

/* The private gallery's sign-in over its blurred photos fades them into what the block sits on, so a band or
   a card background shows through rather than the sign-in's own colour. */
[data-block-band][data-block-bg] .private-gallery-access {
    background: color-mix(in oklab, var(--band-bg) 80%, transparent);
}
.block-box[data-box-bg="tint"] .private-gallery-access { background: color-mix(in oklab, var(--block-tint) 80%, transparent); }
.block-box[data-box-bg="card"] .private-gallery-access { background: color-mix(in oklab, var(--block-card-bg) 80%, transparent); }
.block-box[data-box-bg="accent"] .private-gallery-access { background: color-mix(in oklab, var(--block-accent) 80%, transparent); }
.block-box[data-box-bg="primary"] .private-gallery-access { background: color-mix(in oklab, var(--block-primary) 80%, transparent); }
.block-box[data-box-bg="rose"] .private-gallery-access { background: color-mix(in oklab, var(--block-rose) 80%, transparent); }
.block-box[data-box-bg="ink"] .private-gallery-access { background: color-mix(in oklab, var(--block-ink) 80%, transparent); }
.block-box[data-box-bg="custom"] .private-gallery-access { background: color-mix(in oklab, var(--block-custom-bg, var(--block-tint)) 80%, transparent); }

/* --- Wishlist ------------------------------------------------------------------------------------------------ */

/* Checklist: one line per gift, no photos. */
.wishlist-section[data-block-style="list"] .wishlist-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.wishlist-section[data-block-style="list"] .wishlist-card {
    flex-direction: row;
    align-items: center;
    padding: 14px 4px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text, #000000) 12%, transparent);
    border-radius: 0;
    background: transparent;
}

.wishlist-section[data-block-style="list"] .wishlist-image-wrapper,
.wishlist-section[data-block-style="list"] .wishlist-note {
    display: none;
}

.wishlist-section[data-block-style="list"] .wishlist-card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    width: 100%;
}

.wishlist-section[data-block-style="list"] .wishlist-card-body h2 {
    flex: 1;
    margin: 0;
    font-size: 1rem;
}

/* By category: the categories as tabs above the gifts. */
.wishlist-section[data-block-style="tabs"] .wishlist-layout {
    flex-direction: column;
    gap: 24px;
}

.wishlist-section[data-block-style="tabs"] .wishlist-sidebar {
    position: static;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.wishlist-section[data-block-style="tabs"] .wishlist-sidebar h3 {
    display: none;
}

.wishlist-section[data-block-style="tabs"] .category-filter {
    padding: 8px 16px;
    border: 1px solid color-mix(in srgb, var(--color-text, #000000) 15%, transparent);
    border-radius: 999px;
}

.wishlist-section[data-block-style="tabs"] .category-filter.is-active {
    background: var(--block-accent);
    border-color: var(--block-accent);
    color: var(--color-cta-text, #ffffff);
}

.wishlist-section[data-block-style="tabs"] .category-filter:hover {
    padding-left: 16px;
}

/* --- Client login ------------------------------------------------------------------------------------------------ */

.login-block-wrapper[data-block-style="plain"] .private-gallery-popup,
.login-block-wrapper[data-block-bg] .private-gallery-popup {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.login-block-wrapper[data-block-bg] {
    border-radius: var(--border-radius-card, 16px);
}

[data-block-band].login-block-wrapper[data-block-bg] {
    max-width: none;
    border-radius: 0;
}

/* --- Testimonials ---------------------------------------------------------------------------------------------- */

.testimonials[data-block-style="single"] .testimonial-quote {
    font-size: 1.35em;
    line-height: 1.45;
}

/* --- Groups ---------------------------------------------------------------------------------------------------- */

.block-group {
    --group-gap: 24px;
    padding: 20px;
    box-sizing: border-box;
}

.block-group-body {
    width: 100%;
    max-width: var(--block-width, var(--container-max-width, 800px));
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* A full-width group on a background is the band; its blocks stay as wide as the page's other blocks. */
.block-group[data-block-width="full"][data-block-band][data-block-bg] :is(.block-group-body, .block-group-tabs) {
    max-width: var(--container-max-width, 800px);
}

/* Blocks inside a group fill the group's width and leave its padding to the group. */
.block-group-item {
    min-width: 0;
}

.block-group-item :is(.item, .blog-listing, .login-block-wrapper) {
    padding-left: 0;
    padding-right: 0;
}

.block-group-item .constrained,
.block-group-item [data-block-width] {
    --block-width: 100%;
}

.block-group-item .lead-height {
    height: auto;
    min-height: 320px;
    border-radius: var(--border-radius-card, 14px);
}

/* Side by side: the blocks in columns, stacking on narrow screens. */
@media (min-width: 760px) {
    .block-group[data-block-style="side"] .block-group-body {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--group-gap);
        align-items: stretch;
    }

    /* Every column fills the row's height, its block's box too, so neighbours line up: headings along the top,
       and a picture with its words (and any link under them) along the bottom, whatever the heading's length. */
    .block-group[data-block-style="side"] .block-group-item {
        display: flex;
        flex-direction: column;
    }

    .block-group[data-block-style="side"] .block-group-item > .item {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .block-group[data-block-style="side"] .block-group-item > .item > .block-box {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .block-group[data-block-style="side"] .block-group-item > .item > .block-box > .media-layout-grid {
        margin-top: auto;
        margin-bottom: 0;
    }

    /* Each column's first heading or paragraph starts at the column's top, so a text block's heading lines up
       with a Contact form's (which has no top margin). */
    .block-group[data-block-style="side"] .block-group-item > .item > .block-box > :first-child:not(.media-layout-grid) {
        margin-top: 0;
    }
}

/* A column is narrower than the window, so a picture beside its words stacks above them when the column is
   too narrow for both (the phone rule in site-images.css only looks at the window's width). */
.block-group[data-block-style="side"] .block-group-item {
    container-type: inline-size;
}

@container (max-width: 599px) {
    .media-layout-grid:is(.layout-side_left, .layout-side_right, .layout-left, .layout-right) {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .media-layout-grid:is(.layout-side_right, .layout-right) .media-image-column {
        order: -1;
    }
}

/* Tinted band: a full-width tinted band with the blocks centred on it. */
.block-group[data-block-style="band"] .block-group-body {
    text-align: center;
}

/* Tabs: one block at a time. */
.block-group-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: var(--block-width, var(--container-max-width, 800px));
    margin: 0 auto 16px;
}

.block-group-tab {
    padding: 8px 18px;
    border: 1px solid color-mix(in srgb, var(--color-text, #000000) 15%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-family: var(--font-bold);
    font-size: 0.85rem;
    cursor: pointer;
}

.block-group-tab[aria-selected="true"] {
    background: var(--block-accent);
    border-color: var(--block-accent);
    color: var(--color-cta-text, #ffffff);
}

.block-group-tab:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

.block-group-item[hidden] {
    display: none;
}

/* Admin preview only: groups get a dashed outline so their edges show (preview_pane's iframe adds the class). */
.admin-preview-outlines .block-group {
    position: relative;
    isolation: isolate; /* keeps the label below the sticky navbar */
    outline: 2px dashed color-mix(in srgb, var(--block-accent) 70%, transparent);
    outline-offset: -6px;
}

.admin-preview-outlines .block-group::before {
    /* The space after an escape ends it and isn't shown, so the dot is followed by two. */
    content: "Group \00B7  " attr(aria-label);
    position: absolute;
    top: 0;
    left: 6px;
    z-index: 2;
    padding: 0 6px;
    border-radius: 0 0 4px 0;
    background: var(--block-accent);
    color: var(--color-cta-text, #ffffff);
    font: 600 11px/18px system-ui, sans-serif;
}

/* --- Contact form block (components/contact_block.html) ------------------------------------------------------ */

.contact-block .contact-block-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-block .contact-block-intro h2 {
    margin: 0 0 8px;
}

.contact-block .contact-block-text > :last-child {
    margin-bottom: 0;
}

.contact-block .contact-block-form {
    box-sizing: border-box; /* the Card styles' padding and border stay inside the block's width */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    text-align: left;
}

.contact-block .cb-field {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.contact-block .cb-field.is-half {
    grid-column: span 1;
}

.contact-block .cb-field label {
    font-family: var(--font-bold);
    font-size: 0.8rem;
}

.contact-block .cb-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 7px;
    border: 1px solid var(--color-input-border, transparent);
    border-radius: var(--border-radius, 5px);
    background-color: var(--color-input-bg, whitesmoke);
    color: var(--color-input-text, inherit);
    font-family: var(--font-normal);
}

.contact-block .cb-age-error,
.contact-block .cb-either-error,
.contact-block .cb-actions,
.contact-block .contact-block-form > :not(.cb-field) {
    grid-column: 1 / -1;
}

.contact-block .cb-actions .form-button {
    width: auto;
    min-width: 180px;
    margin-top: 4px;
    padding: 12px 24px;
}

@media (max-width: 560px) {
    .contact-block .cb-field.is-half {
        grid-column: span 2;
    }

    .contact-block .cb-actions .form-button {
        width: 100%;
    }
}

/* Card: the form on a soft card below the words. */
.contact-block[data-block-style="card"] .contact-block-form,
.contact-block[data-block-style="booking"] .contact-block-form {
    padding: 26px;
    border: 1px solid var(--block-card-border);
    border-radius: var(--border-radius-card, 20px);
    background: var(--block-card-bg);
    color: var(--block-card-text);
    box-shadow: var(--card-shadow);
}

/* Booking enquiry: the button to the right. */
.contact-block[data-block-style="booking"] .cb-actions {
    display: flex;
    justify-content: flex-end;
}

/* Split with details: the words beside the form on wide screens. */
@media (min-width: 760px) {
    .contact-block[data-block-style="split"] .contact-block-inner {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: 32px;
        align-items: start;
    }
}

/* Minimal lines: underlined fields, no boxes. */
.contact-block[data-block-style="minimal"] .contact-block-form {
    row-gap: 22px;
    column-gap: 24px;
}

.contact-block[data-block-style="minimal"] .cb-field label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* With no box of their own, the fields' words and lines take the block's text colour, so they stay
   readable on an Accent or Card background too. */
.contact-block[data-block-style="minimal"] :is(input, textarea, select) {
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
}

.contact-block[data-block-style="minimal"] :is(input, textarea)::placeholder {
    color: inherit;
    opacity: 0.65;
}

/* The date field's calendar icon takes the words' colour too; the browser would otherwise draw it dark grey,
   lost on an Accent or dark Card background. */
.contact-block[data-block-style="minimal"] input[type="date"]::-webkit-calendar-picker-indicator {
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 1v1.5h-2A1.5 1.5 0 0 0 1 4v9.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5V4a1.5 1.5 0 0 0-1.5-1.5h-2V1H10v1.5H6V1zM2.5 6.5h11v7h-11z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 1v1.5h-2A1.5 1.5 0 0 0 1 4v9.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5V4a1.5 1.5 0 0 0-1.5-1.5h-2V1H10v1.5H6V1zM2.5 6.5h11v7h-11z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
    opacity: 0.8;
}

/* The open list of choices keeps the usual field colours. */
.contact-block[data-block-style="minimal"] select option {
    background-color: var(--color-input-bg, #ffffff);
    color: var(--color-input-text, #000000);
}

.contact-block[data-block-style="minimal"] .form-button {
    background: var(--color-text);
    color: var(--color-background);
}

/* Quick message: one row of email, age (when asked), message and send on the band. Centred, the words and form sit in the
   middle; set to Left, they all start at the block's left edge. */
.contact-block[data-block-style="band"] .contact-block-intro {
    align-self: flex-start;
    max-width: 460px;
}

.contact-block[data-block-style="band"][data-block-align="center"] .contact-block-intro {
    align-self: center;
}

.contact-block[data-block-style="band"] .contact-block-form {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.6fr) minmax(0, 1.6fr) auto;
    align-items: end;
    gap: 8px;
    width: 100%;
    max-width: 720px;
    margin: 0;
}

.contact-block[data-block-style="band"][data-block-align="center"] .contact-block-form {
    margin: 0 auto;
}

/* Without the age field (Emails & bookings › Contact form › Fields), the row is just email, message and send
   (phones and Side by side groups still stack it, below). */
@media (min-width: 701px) {
    .contact-block[data-block-style="band"] .contact-block-form:not(:has(.cb-field-age)) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
    }
}

.contact-block[data-block-style="band"]:not([data-block-align="center"]) .privacy-note {
    text-align: left;
}

.contact-block[data-block-style="band"] .cb-field,
.contact-block[data-block-style="band"] .cb-field.is-half,
.contact-block[data-block-style="band"] .cb-actions {
    grid-column: auto;
}

.contact-block[data-block-style="band"] .cb-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.contact-block[data-block-style="band"] :is(input, select) {
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
}

.contact-block[data-block-style="band"] .cb-actions .form-button {
    min-width: 0;
    height: 46px;
    margin: 0;
    border-radius: 999px;
}

.contact-block[data-block-style="band"] .privacy-note,
.contact-block[data-block-style="band"] .contact-block-form > :not(.cb-field):not(.cb-actions) {
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .contact-block[data-block-style="band"] .contact-block-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* In a Side by side group the block is one column, too narrow for the one-row form: stack it. */
.block-group[data-block-style="side"] .contact-block[data-block-style="band"] .contact-block-form,
.block-group[data-block-style="side"] .contact-block[data-block-style="band"] .contact-block-form:not(:has(.cb-field-age)) {
    grid-template-columns: minmax(0, 1fr);
}

/* Contact section (components/contact.html): the band is the block, so its Background replaces the band's Primary
   colour at any width, and Alignment and Text size apply to its words (the band has no .block-box). */
.item.contact-band[data-block-bg="tint"] {
    background: var(--block-tint);
    color: var(--color-text);
}

.item.contact-band[data-block-bg="card"] {
    background: var(--block-card-bg);
    color: var(--block-card-text);
}

.item.contact-band[data-block-bg="accent"] {
    background: var(--block-accent);
    color: var(--block-accent-text);
}

.item.contact-band[data-block-bg] :is(h1, h2, h3, h4, p, li, blockquote) {
    color: inherit;
}

/* Off the band's colour, its buttons take the main button colours again (the footer ones are for Primary). */
.item.contact-band:is([data-block-bg="tint"], [data-block-bg="card"]) .form-button {
    background-color: var(--color-cta);
    color: var(--color-cta-text, #ffffff);
}

.item.contact-band:is([data-block-bg="tint"], [data-block-bg="card"]) .form-button:hover {
    background-color: var(--color-action, var(--color-cta));
    color: var(--color-action-text, var(--color-cta-text, #ffffff));
}

.contact-band[data-block-align="center"] .footer-flex > .flex-center {
    text-align: center;
}

.contact-band[data-block-size="small"] .footer-flex {
    font-size: 13px;
}

.contact-band[data-block-size="small"] .footer-flex > .flex-center h2 {
    font-size: 1.25em;
}

.contact-band[data-block-size="large"] .footer-flex {
    font-size: 16px;
}

.contact-band[data-block-size="large"] .footer-flex > .flex-center h2 {
    font-size: clamp(1.8em, 4vw, 2.4em);
    line-height: 1.15;
}