/* ============================================================
   XL Stats Widget  —  Frontend Styles
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
.xlsw-wrapper *,
.xlsw-wrapper *::before,
.xlsw-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Prevents horizontal scroll from the .xlsw-section breakout below
   without reserving scrollbar space, so 100vw stays equal to the
   content width. */
html {
    overflow-x: clip;
}

/* ==========================
   FULL-WIDTH BREAKOUT
   The theme (Betheme) renders this shortcode inside a normal content
   column that's narrower than .xlsw-wrapper's max-width — no max-width
   on .xlsw-wrapper itself can ever make it wider than that column
   allows. This escapes the column so .xlsw-wrapper can actually reach
   (and center within) its own max-width.
========================== */
.xlsw-section {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    /* horizontal-only — breaking out of the column shouldn't change the
       vertical spacing the theme already gives this shortcode.
       60px side gutter to match the Map Contact section. */
    padding: 0 60px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* ── Wrapper ────────────────────────────────────────────────── */
.xlsw-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 1600px;
    /* centers within .xlsw-section */
    margin: 0 auto;
    min-height: 346px;
    /* background: #ffffff; */
    overflow: hidden;
    font-family: 'Nunito', 'Google Sans', 'Segoe UI', sans-serif;
}

/* ── Text block: title + description ──────────────────────── */
.xlsw-text-block {
    position: relative;
    z-index: 2;
    width: 70.78%;
    max-width: 906px;
    padding-top: 26px;
}

/* ── Title ─────────────────────────────────────────────────── */
.xlsw-title {
    font-family: 'Syne', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 36px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    color: #191919 !important;
    max-width: 424px;
    margin: 0 0 16px 0 !important;
}

/* ── Description ───────────────────────────────────────────── */
.xlsw-desc {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: #778AA9 !important;
    max-width: 85%;
    margin: 0 0 49px 0 !important;
}

/* ── Icon row ──────────────────────────────────────────────── */
.xlsw-icon-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    /* wider gap so the three boxes spread out like the design (this gap
       also applies on both sides of each divider) */
    gap: 44px;
    width: 100%;
    padding-bottom: 26px;
}

/* ── Divider ───────────────────────────────────────────────── */
.xlsw-divider {
    flex-shrink: 0;
    width: 1px;
    min-height: 58px;
    align-self: stretch;
    background: #DDDDDD;
}

/* ── Icon box: sizes to its own content so the divider sits right
   after the text instead of leaving a long trailing gap ─────── */
.xlsw-icon-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* ── Icon circle ───────────────────────────────────────────── */
/* Circle is a fixed 60px — only the inner glyph resizes with the
   admin-controlled icon size (see .xlsw-icon-circle img/svg below). */
.xlsw-icon-circle {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    background: #EBF4FF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* Icon glyph (image or inline SVG). Size is admin-controlled per
   breakpoint via the --xlsw-icon-* CSS variables set on .xlsw-section;
   the 32px fallbacks keep old widgets unchanged. */
.xlsw-icon-circle img,
.xlsw-icon-circle svg {
    width: var(--xlsw-icon-d, 32px);
    height: var(--xlsw-icon-d, 32px);
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* ── Icon text ─────────────────────────────────────────────── */
.xlsw-icon-text {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding-top: 4px;
}

/* Icon title: nowrap so it always tries to stay on one line */
.xlsw-icon-title {
    font-family: 'Nunito', 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: #191919;
    display: block;
    white-space: nowrap;
}

/* Icon sub-label */
.xlsw-icon-desc {
    font-family: 'Nunito', 'Google Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #778AA9;
    display: block;
}

/* ── Decorative image panel (right, absolute) ──────────────── */
.xlsw-bg-panel {
    position: absolute;
    top: 0;
    right: -2%;
    /* percentage (not a fixed px) so it automatically scales with
       .xlsw-wrapper's own width instead of going stale if that changes
       again — same 46.72% ratio already proven at the tablet breakpoint */
    width: 46.72%;
    height: 100%;
    min-height: 346px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

/* ── Error ─────────────────────────────────────────────────── */
.xlsw-error {
    color: #b32d2e;
    padding: 12px 16px;
    border: 1px solid #b32d2e;
    border-radius: 4px;
    font-size: 14px;
}

/* 1101px to 1279px - Desktop */
@media (min-width: 1101px) and (max-width: 1279px) {
    /* Real two-column row: text left, image right, side by side — instead
       of the absolutely-positioned overlay, which left a large empty gap
       since the decorative SVG is very light and barely visible over it.
       The icon row is then forced onto its own full-width line below via
       flex-wrap, so it has the full width for 3 boxes in a row again. */
    .xlsw-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 20px 0;
    }
    .xlsw-text-block {
        width: 52%;
    }
    .xlsw-bg-panel {
        position: relative;
        top: auto;
        right: auto;
        width: 44%;
        height: auto;
        min-height: 220px;
    }
    .xlsw-icon-row {
        width: 100%;
        flex-basis: 100%;
        gap: 20px;
    }
    /* allow the title to wrap instead of being clipped by the box's
       overflow:hidden when it's too wide for the narrow column */
    .xlsw-icon-title {
        font-size: 18px;
        white-space: normal;
    }
    .xlsw-icon-desc {
        font-size: 14px;
    }
}

/* 540px to 1100px - Tablet */
@media (min-width: 540px) and (max-width: 1100px) {
    /* Same two-column-row + full-width-icon-row restructure as the
       1101–1279px tier above. */
    .xlsw-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px 0;
    }
    .xlsw-text-block {
        width: 52%;
    }
    .xlsw-title {
        font-size: 26px !important;
        max-width: 100%;
    }
    .xlsw-desc {
        max-width: 100%;
        margin-bottom: 12px !important;
    }
    .xlsw-bg-panel {
        position: relative;
        top: auto;
        right: auto;
        width: 44%;
        height: auto;
        min-height: 180px;
    }
    .xlsw-icon-row {
        width: 100%;
        flex-basis: 100%;
        gap: 12px;
    }
    .xlsw-divider {
        display: none;
    }
    /* allow the title to wrap instead of being clipped by the box's
       overflow:hidden when it's too wide for the narrow column */
    .xlsw-icon-title {
        font-size: 16px;
        white-space: normal;
    }
    .xlsw-icon-desc {
        font-size: 13px;
    }
}

/* Up to 639px - Mobile / narrow tablet.
   Below 640px the two-column (text + image) layout plus three side-by-side
   icon boxes both break down: the icon labels get clipped and the stacked
   boxes leave a large empty gap on the right. So everything collapses to a
   single full-width column here — heading, image, then icon boxes — with
   no dead space. */
@media (max-width: 639px) {
    .xlsw-wrapper {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: auto;
        overflow: visible;
    }
    /* 1st: title + description */
    .xlsw-text-block {
        order: 1;
        width: 100%;
        max-width: 100%;
        padding: 24px 24px 0 24px;
    }
    /* 2nd: decorative image.
       background-size:contain (not cover) keeps the full SVG visible
       uncropped at phone widths. */
    .xlsw-bg-panel {
        position: relative;
        top: auto;
        right: auto;
        order: 2;
        width: 100%;
        height: 200px;
        min-height: 0;
        margin-top: 20px;
        background-size: contain;
        background-position: center center;
    }
    /* 3rd: icon boxes */
    .xlsw-icon-row {
        order: 3;
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px 24px 30px 24px;
    }
    .xlsw-title {
        font-size: 26px !important;
        max-width: 100%;
    }
    .xlsw-desc {
        max-width: 100%;
        margin: 0 !important;
    }
    .xlsw-divider {
        display: none;
    }
    .xlsw-icon-box {
        flex: none;
        width: 100%;
        overflow: visible;
    }
    /* Allow wrap on mobile — stacked boxes are wide enough but
       white-space: normal is safer for very narrow phones.       */
    .xlsw-icon-title {
        white-space: normal;
        font-size: 20px;
    }
    .xlsw-icon-desc {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .xlsw-title      { font-size: 22px !important; }
    .xlsw-icon-title { font-size: 18px; }
}

/* Up to 1300px - equal left/right breathing room instead of the bare
   20px from the base .xlsw-section rule.
   The doubled selector raises specificity above a page-level inline
   .xlsw-section{padding:...} style some pages may inject — a single
   class here would just lose to that on source order, same issue seen
   with .xlhf-header__inner on other pages. */
/* Match the Map Contact section's gutters at every breakpoint */
@media (min-width: 769px) and (max-width: 1300px) {
    .xlsw-section.xlsw-section {
        padding: 0 clamp(60px, 6vw, 100px) !important;
    }
}
@media (max-width: 768px) {
    .xlsw-section.xlsw-section {
        padding: 0 24px !important;
    }
}
@media (max-width: 480px) {
    .xlsw-section.xlsw-section {
        padding: 0 16px !important;
    }
}

/* 768px to 1100px - wider tablets (e.g. iPad Mini 768px, Google Nest Hub 1024px).
   The 540–1100px tablet rule above hides .xlsw-divider because narrow
   tablets get cramped, but from iPad Mini width up the full-width icon row
   has room for the three boxes plus the separators — so bring the divider
   back here. */
@media (min-width: 768px) and (max-width: 1100px) {
    .xlsw-divider {
        display: block;
    }
}

/* 540px to 1279px - decorative image alignment (iPad Mini 768px, Google Nest
   Hub 1024px, and every tablet width between).
   In these tiers .xlsw-bg-panel stops being an absolute overlay and becomes a
   real column beside the text — but the wrapper is `align-items: flex-start`,
   so the graphic was pinned to the TOP of a taller text column and drifted up
   and away from the copy it belongs next to. And because the two columns are
   52% + 44%, the leftover 4% sat to the RIGHT of the image instead of between
   the columns, so it never reached the section's right edge.
   Centre it against the text block and let the auto margin take that 4%. */
@media (min-width: 540px) and (max-width: 1279px) {
    .xlsw-bg-panel {
        align-self: center;
        margin-left: auto;
        background-position: center center;
        background-size: contain;
    }
}

/* The 180px box the tablet tier gives it is short enough that a
   `contain`-scaled map renders noticeably smaller than the text beside it. */
@media (min-width: 540px) and (max-width: 1100px) {
    .xlsw-bg-panel {
        min-height: 210px;
    }
}

/* 1400px and above - Large Desktop */
@media (min-width: 1400px) {
    .xlsw-title {
        max-width: none;
    }
}

@media (min-width: 1300px) and (max-width: 1499px) {
    .mcb-section-qgt0micom {
        margin-left: 4% !important;
    }
}

@media (min-width: 1500px) and (max-width: 1599px) {
    .mcb-section-qgt0micom {
        margin-left: 6% !important;
    }
}

@media (min-width: 1600px) and (max-width: 1699px) {
    .mcb-section-qgt0micom {
        margin-left: 9% !important;
    }
}

@media (min-width: 1700px) and (max-width: 1799px) {
    .mcb-section-qgt0micom {
        margin-left: 11% !important;
    }
}

@media (min-width: 1800px) and (max-width: 1919px) {
    .mcb-section-qgt0micom {
        margin-left: 13% !important;
    }
}

/* 1920px and above - Large Desktop */
@media (min-width: 1920px) {
    .mcb-section-qgt0micom {
        margin-left: 15% !important;
    }
}

/* ============================================================
   RESPONSIVE ICON SIZE  (admin-controlled)
   Desktop size is the default rule above; tablet & mobile swap in
   their own CSS variable. The mobile rule is listed last so it wins
   over the tablet rule where both match (≤639px).
   ============================================================ */
@media (max-width: 1100px) {
    .xlsw-icon-circle img,
    .xlsw-icon-circle svg {
        width: var(--xlsw-icon-t, 32px);
        height: var(--xlsw-icon-t, 32px);
    }
}
@media (max-width: 639px) {
    .xlsw-icon-circle img,
    .xlsw-icon-circle svg {
        width: var(--xlsw-icon-m, 32px);
        height: var(--xlsw-icon-m, 32px);
    }
}

/* ============================================================
   SCROLL-REVEAL ENTRANCE  —  "Focus & Flip"  (premium, unique)
   `.xlsw-reveal` is rendered server-side (hidden from first paint,
   no flicker); JS adds `.xlsw-in` once the widget is on screen —
   in EVERY state (refresh-in-view or scroll-in). The title & copy
   focus in from a soft blur while rising; the icon boxes flip up
   from their base in 3D, staggered; the dividers draw in (scaleY).
   ============================================================ */

.xlsw-section.xlsw-reveal .xlsw-title,
.xlsw-section.xlsw-reveal .xlsw-desc,
.xlsw-section.xlsw-reveal .xlsw-bg-panel,
.xlsw-section.xlsw-reveal .xlsw-icon-box,
.xlsw-section.xlsw-reveal .xlsw-divider {
    will-change: opacity, transform, filter;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Title & description — soft "unblur" focus-in while rising. */
.xlsw-section.xlsw-reveal .xlsw-title,
.xlsw-section.xlsw-reveal .xlsw-desc {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(9px);
    transition-property: opacity, transform, filter;
    transition-duration: 1.1s;
}
.xlsw-section.xlsw-reveal .xlsw-title { transition-delay: 0.05s; }
.xlsw-section.xlsw-reveal .xlsw-desc  { transition-delay: 0.18s; }

/* Decorative background graphic — gently scales up & focuses in, alongside
   the title. transform-origin toward its right anchor so it "breathes" out. */
.xlsw-section.xlsw-reveal .xlsw-bg-panel {
    opacity: 0;
    transform: scale(0.9) translateY(18px);
    transform-origin: 70% 40%;
    filter: blur(8px);
    transition-property: opacity, transform, filter;
    transition-duration: 1.3s;
    transition-delay: 0.12s;
}

/* Icon boxes — premium 3D flip up from their base, staggered. The
   row carries the perspective so the boxes share one vanishing point. */
.xlsw-section.xlsw-reveal .xlsw-icon-row { perspective: 1200px; }
.xlsw-section.xlsw-reveal .xlsw-icon-box {
    opacity: 0;
    transform: rotateX(-42deg) translateY(38px) scale(0.96);
    transform-origin: 50% 100%;
    transition-property: opacity, transform;
    transition-duration: 1.15s;
}

/* Divider lines "draw in" — scaleY from centre. */
.xlsw-section.xlsw-reveal .xlsw-divider {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center center;
    transition-property: opacity, transform;
    transition-duration: 0.9s;
}

/* Stagger by position inside the icon row:
   box1 · divider · box2 · divider · box3 */
.xlsw-section.xlsw-reveal .xlsw-icon-row > *:nth-child(1) { transition-delay: 0.40s; }
.xlsw-section.xlsw-reveal .xlsw-icon-row > *:nth-child(2) { transition-delay: 0.52s; }
.xlsw-section.xlsw-reveal .xlsw-icon-row > *:nth-child(3) { transition-delay: 0.58s; }
.xlsw-section.xlsw-reveal .xlsw-icon-row > *:nth-child(4) { transition-delay: 0.70s; }
.xlsw-section.xlsw-reveal .xlsw-icon-row > *:nth-child(5) { transition-delay: 0.76s; }

/* Revealed resting state — restores the natural (untransformed) layout. */
.xlsw-section.xlsw-in .xlsw-title,
.xlsw-section.xlsw-in .xlsw-desc,
.xlsw-section.xlsw-in .xlsw-bg-panel {
    opacity: 1;
    transform: none;
    filter: blur(0);
}
.xlsw-section.xlsw-in .xlsw-icon-box,
.xlsw-section.xlsw-in .xlsw-divider {
    opacity: 1;
    transform: none;
}

/* Respect reduced-motion: skip the animation, show everything. */
@media (prefers-reduced-motion: reduce) {
    .xlsw-section.xlsw-reveal .xlsw-title,
    .xlsw-section.xlsw-reveal .xlsw-desc,
    .xlsw-section.xlsw-reveal .xlsw-bg-panel,
    .xlsw-section.xlsw-reveal .xlsw-icon-box,
    .xlsw-section.xlsw-reveal .xlsw-divider {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}