/*
 * blocks.css — Component styles for all block types.
 *
 * Loaded by both the CRM editor (base.html.twig) and the published site
 * (site-templates/layout.php). Copied to PUBLISH_PATH by PublishService::copyAssets().
 *
 * One section per block type, ordered alphabetically.
 * Add new block styles here — never inline in templates.
 */


/* ── Hero ────────────────────────────────────────────────────────────────── */

.block-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px var(--page-gutter, 10px);
    min-height: 400px;
    text-align: center;
}

.block-hero--large    { min-height: 600px; }
.block-hero--medium   { min-height: 400px; }
.block-hero--small    { min-height: 240px; }
.block-hero--fullscreen { min-height: 100vh; }

.block-hero__inner {
    max-width: 760px;
    width: 100%;
}

.block-hero--align-left   { text-align: left; justify-content: flex-start; }
.block-hero--align-right  { text-align: right; justify-content: flex-end; }
.block-hero--align-center { text-align: center; justify-content: center; }

.block-hero__heading {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 16px;
}

.block-hero__subheading {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0 0 32px;
    opacity: .8;
}

.block-hero__cta { margin-top: 8px; }


/* ── Image ───────────────────────────────────────────────────────────────── */

.block-image {
    padding: 50px var(--page-gutter, 10px);
}
.block-image__inner {
    width: 100%;
}
.block-image__inner img {
    display: block;
    width: 100%;
    height: auto;
}


/* ── Parralax images ───────────────────────────────────────────────────────────────── */

.bws_parallax-image {
    background-size: auto 120vh;
    background-size: auto 120lvh;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 60vh;
    height: 60lvh;
    overflow: hidden;
}
@media only screen and (min-width: 768px) {
    .bws_parallax-image {
        background-size: auto 120vh;
        background-size: auto 120lvh;
    }
}
@media only screen and (min-width: 1000px) {
    .bws_parallax-image {
        background-size: cover;
        height: 70vh;
        height: 70lvh;
    }
}
/* CSS specific to non iOS devices */
@supports not (-webkit-touch-callout: none) {
    .bws_parallax-image {
        -webkit-background-attachment: fixed;
        background-attachment: fixed;
    }
}
/* CSS specific to iOS devices */
@supports (-webkit-touch-callout: none) {
    @media only screen and (max-width: 1023px) {
        .bws_parallax-image {
            -webkit-background-attachment: fixed;
            background-size: auto 80vh;
            background-size: auto 80lvh;
        }
    }
}

/* ── Rich text ───────────────────────────────────────────────────────────── */

.block-richtext {
    padding: 40px var(--page-gutter, 10px);
}

.block-richtext--align-left   { text-align: left; }
.block-richtext--align-center { text-align: center; }
.block-richtext--align-right  { text-align: right; }

.block-richtext--small  .block-richtext__content { max-width: 480px; }
.block-richtext--medium .block-richtext__content { max-width: 720px; }
.block-richtext--large  .block-richtext__content { max-width: 960px; }
.block-richtext--full   .block-richtext__content { max-width: none; }

.block-richtext--align-center .block-richtext__content { margin-inline: auto; }

.block-richtext__content > * + * { margin-top: .8em; }


/* ── Section ─────────────────────────────────────────────────────────────── */

.block-section {
    width: 100%;
}

.block-section--padding-none   { padding: 0; }
.block-section--padding-small  { padding: 24px var(--page-gutter, 10px); }
.block-section--padding-medium { padding: 60px var(--page-gutter, 10px); }
.block-section--padding-large  { padding: 100px var(--page-gutter, 10px); }

.block-section--boxed  .block-section__inner { max-width: 1200px; margin-inline: auto; }
.block-section--full   .block-section__inner { max-width: none; }


/* ── Text ────────────────────────────────────────────────────────────────── */

.block-text {
    padding: 24px var(--page-gutter, 10px);
}

.block-text--small  .block-text__content { font-size: .9rem; }
.block-text--medium .block-text__content { font-size: 1rem; }
.block-text--large  .block-text__content { font-size: 1.2rem; }

.block-text--align-left   { text-align: left; }
.block-text--align-center { text-align: center; }
.block-text--align-right  { text-align: right; }


/* ── Sliding Titles ────────────────────────────────────────────────────────────────── */

.block-sliding-titles {
    padding-top: 100px;
    padding-bottom: 0;
}
.block-sliding-titles h3 {
    font-size: 9.5cqw;
    outline: none;
}
@container root-canvas (min-width: 550px) {
    .block-sliding-titles h3 {
        font-size: 7.5cqw;
    }
}
@container root-canvas (min-width: 821px) {
    .block-sliding-titles h3 {
        font-size: 4cqw;
    }
}
.block-sliding-titles .bws_h-scroll-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.block-sliding-titles .bws_h-scroll-element {
    width: calc(100% - 4cqw);
    transition: all 0.3s linear;
    text-align: center;
}
.block-sliding-titles .bws_h-scroll-element.reverse {
    padding-left: 4cqw;
}