/* Section teaser — i2t3 component styles
 * A flexible section with style variants:
 *   plain / color / dark / gradient / divider / bigimage / circle-expand /
 *   customBackground / customBackgroundLight / customBackgroundDark /
 *   parallax / halfSection / angled / changebackground.
 * Optional angled (diagonal) top/bottom edges and borderless / no-margin options.
 * Accent colour via --i2t3-st-accent (Bootstrap context colour).
 */

.i2t3-sectionteaser { padding: 4rem 1rem; margin: 1.875rem 0; position: relative; }
.i2t3-sectionteaser__content { max-width: 56rem; margin-inline: auto; position: relative; z-index: 2; }
.i2t3-sectionteaser__title { margin-bottom: .75rem; }
.i2t3-sectionteaser__text > :last-child { margin-bottom: 0; }

/* Angled (diagonal) clip edges — applied to the whole section */
.i2t3-sectionteaser--angled-top { clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%); margin-top: -1px; }
.i2t3-sectionteaser--angled-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3vw), 0 100%); margin-bottom: -1px; }
.i2t3-sectionteaser--angled-top.i2t3-sectionteaser--angled-bottom { clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%); }

/* No margin / no border */
.i2t3-sectionteaser--nomargin { margin-top: 0; margin-bottom: 0; }
.i2t3-sectionteaser--noborder { border: 0 !important; }

/* Style: color / dark / gradient */
.i2t3-sectionteaser--style-color { background: var(--i2t3-st-accent, #0d6efd); color: #fff; }
.i2t3-sectionteaser--style-dark { background: #1a1a2e; color: #fff; }
.i2t3-sectionteaser--style-gradient { background: linear-gradient(135deg, var(--i2t3-st-accent, #0d6efd), #1a1a2e); color: #fff; }

/* Style: divider (accent line with optional centred icon) */
.i2t3-sectionteaser--style-divider:not(.i2t3-sectionteaser--noborder) { border-top: 4px solid var(--i2t3-st-accent, #0d6efd); }
.i2t3-sectionteaser__divider {
    width: 4.5rem; height: 4.5rem; margin: -2.25rem auto 1.75rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--i2t3-st-accent, #0d6efd); color: #fff;
    font-size: 1.5rem; line-height: 1; position: relative; z-index: 2;
}
.i2t3-sectionteaser__divider:empty { display: none; }

/* Style: bigimage (image beside content) */
.i2t3-sectionteaser__split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; max-width: 72rem; margin-inline: auto; }
.i2t3-sectionteaser__split--reverse .i2t3-sectionteaser__media,
.i2t3-sectionteaser__split--reverse .i2t3-sectionteaser__half-media { order: 2; }
/* Faithful to Karma: image fills the column at a consistent height (33vw) instead of varying with aspect ratio */
.i2t3-sectionteaser__img { width: 100%; height: 100%; min-height: 33vw; max-height: 38rem; object-fit: cover; border-radius: .5rem; display: block; }
.i2t3-sectionteaser__eyebrow { display: block; font-weight: 300; opacity: .8; margin-bottom: .25rem; }
.i2t3-sectionteaser__subline { display: block; color: var(--i2t3-st-accent, #0d6efd); font-size: 1.25rem; margin-bottom: 1rem; }
.i2t3-sectionteaser__lead { font-size: 1.125rem; }
.i2t3-sectionteaser__list ul { padding-left: 1.1rem; }
@media (max-width: 767.98px) {
    .i2t3-sectionteaser__split { grid-template-columns: 1fr; }
    .i2t3-sectionteaser__split--reverse .i2t3-sectionteaser__media,
    .i2t3-sectionteaser__split--reverse .i2t3-sectionteaser__half-media { order: 0; }
    .i2t3-sectionteaser__img { min-height: 12rem; }
}

/* Style: halfSection (50% cover image + content, edge to edge) */
.i2t3-sectionteaser--style-halfSection { padding: 0; }
.i2t3-sectionteaser__split--half { gap: 0; max-width: none; align-items: stretch; }
.i2t3-sectionteaser__half-media { background-size: cover; background-position: center; min-height: 20rem; }
.i2t3-sectionteaser__half-content { padding: 4rem 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.i2t3-sectionteaser__half-content .i2t3-sectionteaser__content { max-width: 34rem; margin-inline: 0; }

/* Background image styles: customBackground / customBackgroundLight / customBackgroundDark */
.i2t3-sectionteaser--style-customBackground,
.i2t3-sectionteaser--style-customBackgroundLight,
.i2t3-sectionteaser--style-customBackgroundDark {
    background-size: cover; background-position: center; color: #fff; overflow: hidden;
}
.i2t3-sectionteaser--style-customBackgroundDark { color: #1a1a2e; }
/* Overlay tint over the image (faithful to Karma section-overlay-opacity scales) */
.i2t3-sectionteaser--overlay-dark::before,
.i2t3-sectionteaser--overlay-light::before {
    content: ""; position: absolute; inset: 0; z-index: 1; display: block;
}
.i2t3-sectionteaser--overlay-dark::before { background: rgba(0, 0, 0, .5); }
.i2t3-sectionteaser--overlay-light::before { background: rgba(255, 255, 255, .5); }
.i2t3-sectionteaser--overlay-1::before { opacity: .2; }
.i2t3-sectionteaser--overlay-2::before { opacity: .4; }
.i2t3-sectionteaser--overlay-3::before { opacity: .55; }
.i2t3-sectionteaser--overlay-4::before { opacity: .7; }
.i2t3-sectionteaser--overlay-5::before { opacity: .85; }
.i2t3-sectionteaser--overlay-6::before { opacity: 1; }
.i2t3-sectionteaser--overlay-7::before { opacity: 1; }
.i2t3-sectionteaser--overlay-8::before { opacity: 1; }
.i2t3-sectionteaser--overlay-9::before { opacity: 1; }
/* deepen the base tint for the higher scales 6-9 */
.i2t3-sectionteaser--overlay-dark.i2t3-sectionteaser--overlay-7::before { background: rgba(0, 0, 0, .7); }
.i2t3-sectionteaser--overlay-dark.i2t3-sectionteaser--overlay-8::before { background: rgba(0, 0, 0, .8); }
.i2t3-sectionteaser--overlay-dark.i2t3-sectionteaser--overlay-9::before { background: rgba(0, 0, 0, .9); }
.i2t3-sectionteaser--overlay-light.i2t3-sectionteaser--overlay-7::before { background: rgba(255, 255, 255, .7); }
.i2t3-sectionteaser--overlay-light.i2t3-sectionteaser--overlay-8::before { background: rgba(255, 255, 255, .8); }
.i2t3-sectionteaser--overlay-light.i2t3-sectionteaser--overlay-9::before { background: rgba(255, 255, 255, .9); }

/* Style: parallax (fixed background image, light text by default) */
.i2t3-sectionteaser--style-parallax {
    background-size: cover; background-position: center; background-attachment: fixed;
    color: #fff; padding: 7rem 1rem;
}
.i2t3-sectionteaser--style-parallax::before {
    content: ""; position: absolute; inset: 0; z-index: 1; display: block; background: rgba(0, 0, 0, .4);
}
.i2t3-sectionteaser--style-parallax.i2t3-sectionteaser--darktext { color: #1a1a2e; }
.i2t3-sectionteaser--style-parallax.i2t3-sectionteaser--darktext::before { background: rgba(255, 255, 255, .55); }
@media (max-width: 767.98px) {
    /* fixed attachment is unreliable on mobile — fall back to scroll */
    .i2t3-sectionteaser--style-parallax { background-attachment: scroll; }
}

/* Style: angled (skewed coloured layers behind the content — faithful to Karma section-angled) */
/* Base colour comes from the .i2t3-sectionteaser--bg-{primary|dark} modifier on the section */
.i2t3-sectionteaser--style-angled { position: relative; margin: 0; overflow: hidden; color: #fff; }
.i2t3-sectionteaser__angled-layer { position: absolute; left: 0; width: 100%; padding: 3rem 0; z-index: 1; }
.i2t3-sectionteaser__angled-layer--top { top: 0; transform: skewY(-0.7deg) translate3d(0, -50%, 0); }
.i2t3-sectionteaser__angled-layer--bottom { bottom: 0; transform: skewY(0.7deg) translate3d(0, 50%, 0); }
.i2t3-sectionteaser--style-angled .i2t3-sectionteaser__content { padding: 2.5rem 1rem; }
/* Layer + base colour helpers */
.i2t3-sectionteaser--bg-light { background-color: #f4f4f4; }
.i2t3-sectionteaser--bg-primary { background-color: var(--bs-primary, #0d6efd); }
.i2t3-sectionteaser--bg-dark { background-color: #212529; }
.i2t3-sectionteaser__angled-layer.i2t3-sectionteaser--bg-light { color: #1a1a2e; }

/* Style: circle-expand — accent circle grows when scrolled into view (was :hover-only, broken on touch) */
.i2t3-sectionteaser--style-circle-expand { overflow: hidden; }
.i2t3-sectionteaser__circle {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 130vw; height: 130vw; border-radius: 50%;
    background: var(--i2t3-st-accent, #0d6efd);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .8s ease; z-index: 0;
}
/* is-revealed is added by the global scroll-reveal IntersectionObserver */
.i2t3-sectionteaser__circle.is-revealed { transform: translate(-50%, -50%) scale(1); }
.i2t3-sectionteaser--style-circle-expand .i2t3-sectionteaser__content { transition: color .6s ease; }
.i2t3-sectionteaser--style-circle-expand:has(.i2t3-sectionteaser__circle.is-revealed) .i2t3-sectionteaser__content { color: #fff; }

/* Style: changebackground — background colour transitions when scrolled into view (driven by script.js) */
.i2t3-sectionteaser--style-changebackground {
    background-color: #f4f4f4; color: #1a1a2e;
    transition: background-color 1s ease, color 1s ease;
}
.i2t3-sectionteaser--style-changebackground.i2t3-st-bg-in { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .i2t3-sectionteaser__circle { transition: none; }
    .i2t3-sectionteaser--style-changebackground { transition: none; }
}