/* ═══════════════════════════════════════════════════════════════════
   Glacial Blocks — frontend + editor recipes (Laguna Retina)

   Visual styling comes from css/webflow.css. This file only holds the
   block-LAYOUT helpers (gl-* classes the blocks emit alongside the design
   classes) and the editor-canvas neutralizers. All color tokens are the
   --navy/--orange/--cream/--muted/--border/--white custom properties defined
   in webflow.css :root (loaded before this file via the dependency chain).
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Section (glacial/section) ------------------------------------ */
/* base = "medium" bottom spacing ≈ 6% (default, no modifier class) */
.gl-section {
    margin-bottom: 6%;
}

/* .section contributes padding: 80px 40px. Only the BOTTOM padding doubles up
   with .gl-section's margin-bottom, so only that is dropped, and only where
   there is no tinted band to give breathing room. Top padding stays: on the
   homepage these sections sit directly beneath full-bleed bands (the quick
   strip, the philosophy band) and without it the content butts against them.
   Horizontal padding stays for the gutter. Done here rather than in the builder
   because section markup is serialized into post content, so a CSS rule also
   fixes pages that were already generated. */
.gl-section:not(.gl-section--cream):not(.gl-section--navy) {
    padding-bottom: 0;
}

/* A tinted band's own padding is its spacing, and in the design consecutive
   bands butt straight up against each other (cream → navy with no seam). Adding
   the base margin on top opens a stripe of page background between them, so
   backgrounded sections drop it. Declared BEFORE the --mb-* modifiers so an
   explicit spacing choice still wins on equal specificity. */
.gl-section--cream, .gl-section--navy {
    margin-bottom: 0;
}

.gl-section--mb-0 {
    margin-bottom: 0;
}

.gl-section--mb-sm {
    margin-bottom: 3%;
}

.gl-section--mb-lg {
    margin-bottom: 9%;
}

.gl-section--cream {
    background: var(--cream);
}

.gl-section--navy {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.78);
}

.gl-section--navy p:not(.testimonial-text) {
    color: rgba(255, 255, 255, 0.78);
}

.gl-section--center {
    text-align: center;
}

.gl-section--center .orange-rule {
    margin-left: auto;
    margin-right: auto;
}

/* .gl-section-inner is a JS hook; its width/centering come from .section-inner */

/* ---- Grid (glacial/grid) ------------------------------------------ */
.gl-grid {
    display: grid;
    gap: 40px;
    align-items: start;
}

.gl-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gl-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gl-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Two-column ratios. Labels in the editor are percentages; class names keep the
   fr values so the relationship stays readable here. */
.gl-ratio-2-1 {
    grid-template-columns: 2fr 1fr;
}

/* 67 / 33 */
.gl-ratio-1-2 {
    grid-template-columns: 1fr 2fr;
}

/* 33 / 67 */
.gl-ratio-3-1 {
    grid-template-columns: 3fr 1fr;
}

/* 75 / 25 */
.gl-ratio-1-3 {
    grid-template-columns: 1fr 3fr;
}

/* 25 / 75 */
.gl-ratio-7-5 {
    grid-template-columns: 7fr 5fr;
}

/* 58 / 42 */
.gl-ratio-5-7 {
    grid-template-columns: 5fr 7fr;
}

/* 42 / 58 — .doctor-grid */
.gl-gap-sm {
    gap: 24px;
}

.gl-gap-lg {
    gap: 70px;
}

@media (max-width: 767px) {
    /* Collapse on .gl-grid itself rather than listing every ratio class, so new
       ratios stack on mobile without needing a matching entry here. */
    .gl-grid {
        grid-template-columns: 1fr;
    }

    /* Reverse on mobile: column-reverse handles any number of children, which
       grid's own ordering cannot do without per-child rules. */
    .gl-grid--reverse-mobile {
        display: flex;
        flex-direction: column-reverse;
    }

    .gl-grid.gl-swipe {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .gl-grid.gl-swipe > * {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }
}

/* ---- Column (glacial/column) -------------------------------------- */
.gl-col {
    display: flex;
    flex-direction: column;
}

.gl-col--center {
    justify-content: center;
}

.gl-col--bottom {
    justify-content: flex-end;
}

/* ---- Heading (glacial/heading) ------------------------------------ */
/* .section-heading + .section-heading em (orange) come from webflow.css;
   sizes reuse the .section-heading--28/--36 utilities. Overrides only: */
.gl-heading--white {
    color: var(--white);
}

/* Heading size steps (compound selectors beat the base .section-heading size).
   'Auto' maps to one of these by tag in the block/builder. */
.section-heading.gl-heading--display {
    font-size: var(--fs-h1);
}

.section-heading.gl-heading--large {
    font-size: var(--fs-5xl);
}

.section-heading.gl-heading--medium {
    font-size: var(--fs-4xl);
}

.section-heading.gl-heading--small {
    font-size: var(--fs-2xl);
}

.section-heading em.gl-emph--inherit {
    color: inherit;
}

.section-heading em.gl-emph--white {
    color: var(--white);
}

.section-heading em.gl-emph--navy {
    color: var(--navy);
}

.gl-align--center {
    text-align: center;
}

.gl-align--right {
    text-align: right;
}

/* ---- Eyebrow (glacial/eyebrow) ------------------------------------ */
.gl-eyebrow--light {
    color: rgba(255, 255, 255, 0.8);
}

/* ---- Buttons row (glacial/buttons) -------------------------------- */
.gl-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
}

.gl-buttons--center {
    justify-content: center;
}

/* ---- Image (glacial/image) ---------------------------------------- */
.gl-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.gl-img-frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.gl-img-frame img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.gl-img-accent {
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 55%;
    height: 55%;
    background: var(--orange);
    opacity: 0.15;
    z-index: 0;
}

/* frame="outline" — the .doctor-photo-frame treatment: a 2px orange rule offset
   behind the photo, rather than the filled tint that frame="accent" draws. */
.gl-img-frame--outline {
    display: block;
}

.gl-img-frame--outline .gl-img-accent {
    right: -12px;
    bottom: -12px;
    background: none;
    border: 2px solid var(--orange);
    opacity: 1;
}

/* Empty state: no image picked yet, so stand in for it at the design's 4:5 crop
   the same way .doctor-photo did in the export. */
.gl-img-placeholder {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    background: var(--cream2, var(--cream));
    color: var(--muted);
    font-size: var(--fs-base);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- Orange rule (glacial/orange-rule) ----------------------------- */
/* The base .orange-rule (40×2px bar, 20px bottom margin) lives in webflow.css
   with the design. These modifiers compose alignment and bottom spacing
   independently — the legacy .orange-rule--center / --center-16 / --center-24
   classes bake the two together, so "left + tight" was not expressible.
   Doubled up on .orange-rule so they carry two classes: body.home .orange-rule
   also sets a margin-bottom, and a single-class modifier would lose to it. */
.orange-rule.gl-rule--center {
    margin-left: auto;
    margin-right: auto;
}

.orange-rule.gl-rule--mb-sm {
    margin-bottom: 16px;
}

.orange-rule.gl-rule--mb-lg {
    margin-bottom: 24px;
}

/* ---- Credential list (glacial/credential-list) --------------------- */
/* Markup only — .credential-list styling lives in webflow.css with the design. */

/* ---- Stat (glacial/stat) ------------------------------------------ */
.gl-stat {
}

/* ---- Accordion / FAQ (glacial/accordion + accordion-item) --------- */
.gl-accordion-item {
    border-bottom: 1px solid var(--border);
}

.gl-accordion-item:first-child {
    border-top: 1px solid var(--border);
}

.gl-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    cursor: pointer;
}

.gl-accordion-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--navy);
    line-height: 1.45;
}

.gl-accordion-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.gl-accordion-icon::before,
.gl-accordion-icon::after {
    content: '';
    position: absolute;
    background: var(--orange);
    transition: transform 0.2s;
}

.gl-accordion-icon::before {
    top: 8px;
    left: 0;
    width: 18px;
    height: 2px;
}

.gl-accordion-icon::after {
    top: 0;
    left: 8px;
    width: 2px;
    height: 18px;
}

.gl-accordion-item.is-open .gl-accordion-icon::after {
    transform: scaleY(0);
}

.gl-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.gl-accordion-item.is-open .gl-accordion-body {
    max-height: 1200px;
}

.gl-accordion-inner {
    padding: 0 0 22px;
}

.gl-accordion-inner p {
    font-size: 14px;
    color: var(--muted);
    font-weight: 300;
    line-height: 1.75;
    margin: 0 0 10px;
}

.gl-accordion-inner p:last-child {
    margin-bottom: 0;
}

/* ---- Video (glacial/video) ---------------------------------------- */
/* .video-placeholder styling (play button, aspect, label) lives in
   webflow.css. When a URL is embedded we add .gl-video-embed to make the
   container a responsive 16:9 frame for the iframe. */
.gl-video-embed {
    position: relative;
    padding: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.gl-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- Form placeholder (glacial/form-placeholder) ------------------ */
.gl-form-placeholder {
    border: 1px dashed var(--border);
    color: var(--muted);
    background: rgba(0, 0, 0, 0.015);
    padding: 28px 24px;
    text-align: center;
    font-size: var(--fs-md);
    font-weight: 300;
    border-radius: 4px;
}

/* ---- Editor-canvas neutralizers ----------------------------------- */
/* Reveal accordion bodies so they can be edited in the canvas. */
.editor-styles-wrapper .gl-accordion-body {
    max-height: none;
    overflow: visible;
}

/* ---- Editor: echo the frontend .page-hero on the post title ------- */
/* Editor-only (scoped to .editor-styles-wrapper, which never exists on the
   front end) — gives the "Add title" field the navy gradient band, centered
   white Cormorant, so editing feels like the live page-hero. */
.editor-styles-wrapper .editor-post-title__input,
.editor-styles-wrapper .editor-post-title,
.editor-styles-wrapper h1.wp-block-post-title {
    background: linear-gradient(135deg, #0d2235 0%, #1A3A5C 50%, #2a5080 100%);
    color: var(--white);
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: var(--fs-5xl);
    line-height: 1.15;
    padding: 46px 40px;
    border-radius: 4px;
    margin-bottom: 28px;
    caret-color: var(--orange);
}

.editor-styles-wrapper .editor-post-title__input::placeholder,
.editor-styles-wrapper .wp-block-post-title[data-empty="true"]::before {
    color: rgba(255, 255, 255, 0.5);
}

/* ---- Editor parity: mirror .content styling onto bare CORE blocks -------
   The blockified article renders inside .content on the front end, but core
   blocks in the canvas are bare — so map the key .content rules onto them.
   Scoped to core classes (.wp-block-heading / .wp-block-list) so glacial/*
   blocks keep their own webflow.css styling untouched. */
.editor-styles-wrapper {
    font-family: 'Jost', sans-serif;
    color: var(--text);
}

.editor-styles-wrapper h1.wp-block-heading,
.editor-styles-wrapper h2.wp-block-heading,
.editor-styles-wrapper h3.wp-block-heading,
.editor-styles-wrapper h4.wp-block-heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    color: var(--navy);
    line-height: 1.15;
}

.editor-styles-wrapper h2.wp-block-heading {
    font-size: var(--fs-5xl);
}

.editor-styles-wrapper h3.wp-block-heading {
    font-size: var(--fs-4xl);
}

.editor-styles-wrapper h4.wp-block-heading {
    font-size: var(--fs-2xl);
}

.editor-styles-wrapper .wp-block-list {
    list-style: none;
    padding-left: 0;
}

.editor-styles-wrapper .wp-block-list li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: var(--fs-md);
    color: var(--muted);
    font-weight: 300;
    line-height: 1.6;
    border-bottom: 1px solid var(--border);
}

.editor-styles-wrapper .wp-block-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--orange);
}

.editor-styles-wrapper .wp-block-list li strong {
    color: var(--navy);
    font-weight: 500;
}

@media (max-width: 991px) {

    .page-hero {
        margin-bottom: 52px;
    }

    .gl-section {
        margin-bottom: 52px;
    }

    .gl-section--cream, .gl-section--navy {
        margin-bottom: 0;
    }

}