/* =====================================================================
   Glacial Blocks — shared styles (front end + editor canvas).
   Blocks rely on css/webflow.css for their design; only block-specific
   utilities and editor-canvas fixes live here.
   ===================================================================== */

/* section variants for inner pages (design tokens from webflow.css :root) */
.gl-section--tint {
    background: var(--paper-2);
}

.gl-section--dark {
    background: var(--ink);
    color: var(--on-dark);
}

.gl-section--dark h2, .gl-section--dark h3 {
    color: var(--paper);
}

.gl-section--dark p {
    color: var(--on-dark-soft);
}

.gl-section--dark .eyebrow {
    color: var(--brass-soft);
}

.gl-section--dark .eyebrow::before {
    background: var(--brass-soft);
}

/* section spacing tokens (rhythm derived from webflow.css `section` padding) */
.gl-section--compact {
    padding: clamp(36px, 6vh, 64px) 0;
}

.gl-section--spacious {
    padding: clamp(84px, 14vh, 160px) 0;
}

.gl-section--flush {
    padding: 0;
}

/* heading size tokens (visual size decoupled from semantic level) */
.sec-head h1, .sec-head h3 {
    font-size: clamp(30px, 4.4vw, 46px);
}

.sec-head .gl-h--small {
    font-size: clamp(24px, 3vw, 34px);
}

.sec-head .gl-h--large {
    font-size: clamp(38px, 5.5vw, 56px);
}

/* FAQ (native details/summary — no JS) */
.gl-faq {
    max-width: 860px;
}

.gl-faq-item {
    border-top: 1px solid var(--line);
    padding: 18px 0;
}

.gl-faq-item:last-of-type {
    border-bottom: 1px solid var(--line);
}

.gl-faq-item summary {
    cursor: pointer;
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(19px, 2.2vw, 23px);
    color: var(--ink);
    list-style: none;
    position: relative;
    padding-right: 34px;
}

.gl-faq-item summary::-webkit-details-marker {
    display: none;
}

.gl-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brass);
    font-size: 22px;
    line-height: 1;
}

.gl-faq-item[open] summary::after {
    content: "\2013";
}

.gl-faq-item__answer {
    margin: 12px 0 0;
    color: var(--taupe);
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 60ch;
}

/* latest posts */
.gl-latest-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 40px);
}

.gl-post-card {
    border-top: 1px solid var(--ink);
    padding-top: 18px;
}

.gl-post-card time {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass);
    display: block;
    margin-bottom: 8px;
}

.gl-post-card h3 {
    font-size: clamp(19px, 2.1vw, 23px);
    margin: 0 0 8px;
}

.gl-post-card h3 a {
    color: var(--ink);
    text-decoration: none;
}

.gl-post-card h3 a:hover {
    color: var(--brass);
}

.gl-post-card p {
    font-size: 15px;
    color: var(--taupe);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 880px) {
    .gl-latest-posts {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .gl-latest-posts {
        grid-template-columns: 1fr;
    }
}

/* team grid: CSS-only scroll-snap slider on the smallest screens.
   No JS — swipe/scroll with snap points. The slide is narrower than the
   viewport so the next card peeks, which is the affordance that it scrolls.
   Keyboard access needs no tabindex: each slide contains links, so tabbing
   scrolls them into view. */
@media (max-width: 479px) {
    .team-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        /* escape .wrap's gutter so slides run edge to edge, then pad back in
           so the first and last slides align with the copy above */
        margin-inline: calc(var(--gut) * -1);
        padding-inline: var(--gut);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gut);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .team-grid::-webkit-scrollbar {
        display: none;
    }

    .team-grid .member {
        flex: 0 0 80%;
        scroll-snap-align: center;
    }
}

/* team grid: photos open the bio modal (same .bio-link wiring as the text link) */
.member .m-photo a {
    display: block;
    width: 100%;
    height: 100%;
}

.member .m-photo img {
    transition: transform .35s ease;
}

.member .m-photo a:hover img,
.member .m-photo a:focus-visible img {
    transform: scale(1.04);
}

/* two-column order swapping.
   Breakpoint is the design's own grid collapse point (880px in webflow.css),
   so "mobile" means exactly "while the columns are stacked". */
@media (min-width: 881px) {
    .gl-swap-desktop > :first-child {
        order: 2;
    }

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

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

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

    /* the hero already pulls its media column first at this width, so a
       requested mobile swap means "text first" — restore DOM order */
    .hero-grid.gl-swap-mobile > :first-child {
        order: 0;
    }

    .hero-grid.gl-swap-mobile > .hero-media {
        order: 1;
    }
}

/* device visibility (standard block option; breakpoints match Webflow medium/small) */
@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;
    }
}

/* --- editor canvas only --- */

/* keep device-hidden blocks editable in the canvas: visible but dimmed */
.editor-styles-wrapper .gl-hide-desktop,
.editor-styles-wrapper .gl-hide-tablet,
.editor-styles-wrapper .gl-hide-mobile {
    display: revert !important;
    opacity: 0.55;
}

/* reveal animations are driven by site.js on the front end; in the editor
   the observer never runs, so undo the initial hidden state */
.editor-styles-wrapper .reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* the bio modal + store render closed/hidden on the front; give editors a hint */
.editor-styles-wrapper .bio-store {
    display: none;
}

.contact a {
    color: #fff;
}

.team-featured .figure {
    height: 100%;
}

.team-featured .figure img {
    object-fit: cover;
    height: 100%;
}