/*
 * Glacial Blocks — shared frontend + editor CSS.
 *
 * Blocks ship almost no CSS of their own: css/webflow.css owns the design.
 * This file carries only the cross-cutting option classes (visibility, column
 * order, spacing tokens) and accessibility guardrails.
 *
 * Breakpoints mirror the design's own media queries in css/webflow.css
 * (991 / 767 / 479), NOT generic device widths.
 *
 * Modifier classes are matched STANDALONE (.gl-swipe, never .gl-grid.gl-swipe)
 * so a preset that replaces the base class can't silently kill the modifier,
 * and so they survive the source-order fight with the design stylesheet.
 */

/* ---------------------------------------------------------------- Visibility
 * Classes are emitted only when the toggle is on, so existing saved content
 * is never affected.
 */
@media (min-width: 992px) {
    .gl-hide-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .gl-hide-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .gl-hide-mobile {
        display: none !important;
    }
}

/* Keep hidden blocks editable (dimmed) inside the editor canvas. */
.editor-styles-wrapper .gl-hide-desktop,
.editor-styles-wrapper .gl-hide-tablet,
.editor-styles-wrapper .gl-hide-mobile {
    display: revert !important;
    opacity: 0.55;
}

/* -------------------------------------------------------------- Column order
 * 767px is the design's OWN two-column collapse point (.wrap.flex switches to
 * flex-flow: column at max-width 767), so "mobile" here means exactly
 * "while the columns are stacked".
 */
@media (min-width: 768px) {
    .gl-swap-desktop > :first-child {
        order: 2;
    }

    .gl-swap-desktop > :last-child {
        order: 1;
    }
}

@media (max-width: 767px) {
    .gl-swap-mobile > :first-child {
        order: 2;
    }

    .gl-swap-mobile > :last-child {
        order: 1;
    }
}

/* ----------------------------------------------------------- Section spacing
 * Tokens: none / small / default / large. `default` maps to no class and
 * inherits .section's own 5% padding from css/webflow.css.
 */
.gl-space-none {
    padding-top: 0;
    padding-bottom: 0;
}

.gl-space-small {
    padding-top: 2.5%;
    padding-bottom: 2.5%;
}

.gl-space-large {
    padding-top: 8%;
    padding-bottom: 8%;
}

/* ----------------------------------------------------------------- Full bleed
 * Breaks a section out of #main.standard-inner-wrapper (max-width 1350px /
 * width 90%) on inner pages, so tinted/dark bands span the viewport the way
 * they do on the homepage. Deliberately NOT core's `align: full` support —
 * that injects an `alignfull` class whose position in the class string is a
 * core implementation detail, which would break builder/save() parity.
 */
.gl-full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* --------------------------------------------------------------- Grid swipe
 * Horizontal swipe for card grids on small screens. Standalone selector on
 * purpose (see header note).
 */
@media (max-width: 767px) {
    .gl-swipe {
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .gl-swipe > * {
        scroll-snap-align: start;
    }
}

/* -------------------------------------------------------------- Button row
 * The export never groups buttons, so there is no design class for this.
 * Namespaced gl-* to make clear it belongs to the block system, not webflow.css.
 */
.gl-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

/*
 * .wrap.center is text-align only, which cannot centre a flex row — a centred
 * section would otherwise show centred copy above a left-aligned button row.
 */
.wrap.center .gl-btn-row {
    justify-content: center;
}

/* ------------------------------------------------------------ Accessibility
 * Never strip focus outlines — replace them.
 */
.gl-btn:focus-visible,
.glacial-block a:focus-visible,
.glacial-block button:focus-visible {
    outline: 2px solid var(--color-6, #c8b99a);
    outline-offset: 2px;
}

/*
 * Webflow IX2 motion. The homepage ships an initial-state <style> block that
 * sets opacity:0 / transform on every animated [data-w-id]; if the visitor asks
 * for reduced motion we must reveal those elements rather than leave them
 * invisible. !important beats both the pre-hide block and IX2's inline styles.
 */
@media (prefers-reduced-motion: reduce) {
    [data-w-id] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}