/* ==========================================================================
   Draisap — CMS page-builder blocks (banner slider, features, editor/story)
   Styled in the draisap language so public pages match the client area.
   ========================================================================== */

/* Swiper core (the slider engine ships in main.min.js) */
.swiper-container { position: relative; overflow: hidden; width: 100%; }
.swiper-wrapper { position: relative; display: flex; width: 100%; height: 100%; box-sizing: content-box; transition-property: transform; }
.swiper-slide { position: relative; flex-shrink: 0; width: 100%; height: 100%; }
.swiper-pagination { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 5; display: flex; justify-content: center; gap: 8px; }
.swiper-pagination-bullet { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; }
.swiper-pagination-bullet-active { background: #fff; }
.swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; z-index: 5; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-top: -21px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--dr-ink); cursor: pointer; }
.swiper-button-prev { left: 16px; } .swiper-button-next { right: 16px; }

/* Sections and spacing utilities emitted by the builder */
.sec { position: relative; }
.sec.light { background: var(--dr-surface); }
.sec.bg-primary { background: var(--dr-accent) !important; color: var(--dr-on-accent); }
.sec.inner-t-30 { padding-top: 40px; } .sec.inner-b-30 { padding-bottom: 40px; }
.sec.inner-t-60 { padding-top: 72px; } .sec.inner-b-60 { padding-bottom: 72px; }
.sec.inner-t-90 { padding-top: 104px; } .sec.inner-b-90 { padding-bottom: 104px; }
.sec .container { position: relative; z-index: 2; }
.sec-description { max-width: 760px; margin: 0 auto 32px; }
.sec.centered .sec-description, .sec.centered .banner_content { text-align: center; }
.sec-caption { margin-bottom: 12px; }
.sec-caption span { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sec-title { margin: 0 0 12px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.sec-subtitle { color: var(--dr-ink-2); font-size: 16px; line-height: 1.6; }
.sec-subtitle p:last-child { margin-bottom: 0; }

/* Banner / hero slider */
.site-banner .banner_body { position: relative; display: flex; align-items: center; min-height: 460px; padding: 72px 0; background-size: cover; background-position: center; color: var(--dr-ink); }
.site-banner .banner_body.inverse { color: #fff; }
/* the banner's own background choice: light, dark or the accent (the legacy "centered" flag that rides with it only centres the centred types) */
.site-banner .banner_body.light { background: var(--dr-soft); }
.site-banner .banner_body.dark { background: #16151d; color: #fff; }
.site-banner .banner_body.bg-primary { background: var(--dr-accent); color: var(--dr-on-accent); }
.site-banner .banner_body.light .banner_content .sec-caption span { background: var(--dr-accent-tint); color: var(--dr-accent); }
.site-banner .banner_body:not(.light):not(.dark):not(.bg-primary):not(.inverse) .banner_content .sec-caption span { background: var(--dr-accent-tint); color: var(--dr-accent); }
.site-banner .banner-type-2.centered .banner_content, .site-banner .banner-type-3.centered .banner_content { margin: 0; text-align: inherit; }
.site-banner .banner-type-2.centered .banner_content .action, .site-banner .banner-type-3.centered .banner_content .action { justify-content: inherit !important; }
@media (min-width: 768px) { .site-banner .banner-type-2.centered .banner_content, .site-banner .banner-type-3.centered .banner_content { text-align: left; } .site-banner .banner-type-2.centered .banner_content .action, .site-banner .banner-type-3.centered .banner_content .action { justify-content: flex-start !important; } }
html[data-theme="dark"] .site-banner .banner_body.light { background: var(--dr-surface-2, var(--dr-soft)); }
html[data-theme="dark"] .site-banner .banner_body.dark { background: #0f0e14; }
.site-banner .banner_body.bg-opacity::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 18, 32, .78), rgba(20, 18, 32, .35)); }
.site-banner .banner_body.centered.bg-opacity::before { background: rgba(20, 18, 32, .55); }
.site-banner .banner-content-container { position: relative; z-index: 2; width: 100%; }
.site-banner .banner_content { max-width: 640px; }
.site-banner .centered .banner_content { margin: 0 auto; text-align: center; }
.site-banner .banner_content .sec-caption span { background: rgba(255, 255, 255, .16); color: #fff; }
.site-banner .banner_content .sec-title, .site-banner .banner_content .h1, .site-banner .banner_content h1, .site-banner .banner_content h2 { color: inherit; font-size: clamp(30px, 4.6vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 14px; }
.site-banner .banner_content .sec-subtitle, .site-banner .banner_content .lead, .site-banner .banner_content p { color: inherit; opacity: .88; font-size: 17px; }
.site-banner .banner_content .action { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.site-banner .centered .banner_content .action { justify-content: center !important; }
.site-banner .centered .banner_content .action .btn { margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .site-banner .centered .banner_content .action .btn { margin-left: 0; margin-right: 0; } }
.site-banner .mtd-banner-content-column img, .site-banner .graphics img, .site-banner .banner_graphic img { max-width: 100%; height: auto; border-radius: 18px; }
@media (max-width: 760px) { .site-banner .banner_body { min-height: 380px; padding: 56px 0; } }

/* Buttons the builder emits */
.btn-xlg { min-height: 50px; padding: 12px 28px; font-size: 15px; border-radius: 14px; }
.btn-outline-light { border-color: rgba(255, 255, 255, .7); background: transparent; color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }
.sec.bg-primary .btn-light { color: var(--dr-accent); }
.btn_loader .btn_text { display: inline-flex; align-items: center; gap: 8px; }

/* Feature grids */
.features .feature-item.border { border: 1px solid var(--dr-line-card) !important; }
.features .swiper-wrapper.row > .swiper-slide, .stats .swiper-wrapper.row > .swiper-slide { height: auto; } /* let the columns stretch so boxed items share a height */
.features .feature-item.box-shadow, .features .feature-item.p-4 { padding: 22px !important; }
.features .feature-item:hover { transform: translateY(-2px); border-color: rgba(var(--dr-accent-rgb), .45); }
.features .feature-icon i { font-size: 18px; }
.features .feature-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.features .feature-title a { color: inherit; }
.features .feature-desc { color: var(--dr-ink-2); font-size: 14px; line-height: 1.6; }
.features .feature-desc p:last-child { margin-bottom: 0; }
.features .feature-value { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.features .feature-action { margin-top: 14px; }
.features .feature-action .btn-link { padding: 0; color: var(--dr-accent); font-weight: 700; }
.features .row { row-gap: 18px; }
.features .counter .feature-item { text-align: center; }
.sec.light.centered .feature-item { text-align: left; }
.sec.bg-primary .feature-item { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
/* light text over a picture or dark colour (Section design > Text: Light): every card turns to glass, not only the white/box/border styles */
.sec.sec--tone-light.features .feature-item:not(.cover) { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sec.sec--tone-light.features .feature-item:not(.cover):hover { border-color: rgba(255, 255, 255, .34); }
.sec.sec--tone-light.features .feature-item .feature-icon { background: rgba(255, 255, 255, .14); color: #fff; }
.sec.sec--tone-light.features .feature-item .feature-icon :is(span, i) { color: #fff; }
.sec.bg-primary .feature-desc { color: rgba(255, 255, 255, .85); }

/* Editor / story blocks */
.sec.editor { color: var(--dr-ink); }
.sec.editor.bg-primary, .sec.editor.bg-primary h1, .sec.editor.bg-primary h2, .sec.editor.bg-primary h3, .sec.editor.bg-primary p { color: #fff; }
.sec.editor .lead { font-size: 17px; }
.sec.editor img { max-width: 100%; height: auto; border-radius: 16px; }
.mtd-cms-story h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; }

/* Bootstrap helpers the builder markup uses that draisap.css does not declare (draisap.css owns the
   spacing, flex, text and position utilities; cms-sections.css the breakpoint variants). */
.row-eq-height { display: flex; flex-wrap: wrap; }
.py-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
.text-uppercase { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.lead { font-size: 16.5px; line-height: 1.6; }

/* Dark mode */
html[data-theme="dark"] .sec.light { background: var(--dr-surface); }
html[data-theme="dark"] .site-banner .banner_body.bg-opacity::before { background: linear-gradient(90deg, rgba(10, 9, 16, .85), rgba(10, 9, 16, .5)); }
/* refinements after first render */
.site-banner .action { display: flex; }
.site-banner .action .btn { flex: 0 0 auto; }
.site-banner .action.flex-column .btn { align-self: center; }
@media (min-width: 768px) { .site-banner .action.flex-md-row .btn { align-self: auto; } }
.features .feature-item { display: flex; flex-direction: column; align-items: flex-start; color: var(--dr-ink); height: 100%; padding: 22px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); transition: transform .18s ease, border-color .18s ease; }
.features .feature-item.top { flex-direction: column; }
.features .feature-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 18px; }
.features .feature-icon span, .features .feature-icon i { font-size: 18px; }
.features .feature-content { width: 100%; }
a.feature-item:hover { color: var(--dr-ink); }
.features .feature-item .btn-link { color: var(--dr-accent); }

/* Feature items honor every Content Manager option: icon position (left or top),
   centered items, icon shape, graphic size, and cover images for photo cards. */
.features .feature-item:not(.top) { flex-direction: row; align-items: flex-start; gap: 16px; }
.features .feature-item:not(.top) .feature-icon, .features .feature-item:not(.top) .feature-graphic { margin-bottom: 0; }
.sec.features .swiper-slide .feature-item.centered { align-items: center; text-align: center; }
.features .feature-item.circle .feature-icon { border-radius: 50%; }
.features .feature-item.square .feature-icon { border-radius: 6px; }
.features .feature-item.sm .feature-icon, .features .feature-item.sm .feature-graphic { width: 36px; height: 36px; }
.features .feature-item.lg .feature-icon, .features .feature-item.lg .feature-graphic { width: 68px; height: 68px; }
.features .feature-item.lg .feature-icon span, .features .feature-item.lg .feature-icon i { font-size: 26px; }
.features .feature-item.auto .feature-graphic { width: auto; height: auto; max-width: 100%; }
.features .feature-item.cover { flex-direction: column; gap: 0; padding: 0 !important; overflow: hidden; }
.features .feature-item.cover .feature-graphic { width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: var(--dr-soft); }
.features .feature-item.cover .feature-graphic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.features a.feature-item.cover:hover .feature-graphic img { transform: scale(1.04); }
.features .feature-item.cover .feature-content { padding: 20px 22px 22px; }
@media (min-width: 992px) { .features .mtd-col-lg-5 { flex: 0 0 20%; max-width: 20%; } }