/**
 * Cosmos Hero Band (acf/hero-band) - self-contained layout.
 *
 * Replicates, one time, the layout the legacy Kadence hero-section
 * rowlayout generated per instance (verified against the live generated
 * CSS on 2026-08-20): a 2-column CSS grid band, zero gutters, photo column
 * ordered ABOVE the text column on phones, 18px inner padding on tablet.
 *
 * Everything else intentionally comes from the EXISTING theme rules via
 * the shared class names this block emits: .hero-section (padding 0),
 * .left-class (470px cap hugging the midline + responsive), .full-image
 * (min-height 300px/220px + fill), .links-block/.white-line (the short
 * heading rule), and any page-specific overrides (e.g. .page-id-681).
 * Do NOT restyle those here.
 *
 * Full-bleed uses the house-standard viewport escape (see .cc-home-hero /
 * .cc-split-hero): .alignfull alone does nothing on this theme.
 */

.cc-hero-band {
    position: relative;
    border: 0 solid transparent;
    background: var(--cchb-bg, var(--nv-secondary-accent));
    margin-top: 0;
    margin-bottom: 0;
}

.cc-hero-band.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.cc-hero-band:before {
    clear: both;
    display: table;
    content: "";
}

/* Row: 2-column grid, zero gutters, zero padding (beats Kadence's static
   .kt-row-has-bg > .kt-row-column-wrap edge padding on specificity). */
.cc-hero-band.hero-section > .kt-row-column-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(min-content, max-content);
    column-gap: 0;
    row-gap: 0;
    padding: 0;
    margin: 0;
    max-width: none;
    position: relative;
    z-index: 1;
}

/* Column base (matches Kadence column static CSS so the band renders the
   same on pages where no other Kadence block loads that stylesheet). */
.cc-hero-band .wp-block-kadence-column {
    display: flex;
    flex-direction: column;
    z-index: 1;
    min-width: 0;
    min-height: 0;
}

.cc-hero-band .kt-inside-inner-col {
    flex-direction: column;
    border: 0 solid transparent;
    position: relative;
}

/* Text column */
.cc-hero-band .cc-hb-text {
    margin-top: 0;
}

.cc-hero-band .cc-hb-text > .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    column-gap: var(--global-kb-gap-sm, 1rem);
}

/* Photo column: image + focal point arrive inline from the block fields */
.cc-hero-band .cc-hb-media {
    margin: 0;
}

.cc-hero-band .cc-hb-media > .kt-inside-inner-col {
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/* Field-rendered heading: same declarations Kadence generated for the
   legacy hero H1s. Size/margin/line-height inherit from the theme's
   element-level heading rules, exactly as before. The short rule under
   the heading comes from the shared .links-block / .white-line classes. */
.cc-hero-band .cc-hb-title {
    padding-bottom: 40px;
    font-weight: 400;
    font-family: 'Sorts Mill Goudy', serif;
    text-transform: uppercase;
    color: var(--cchb-ink, #edeae3);
}

/* Tablet: matches the uniform legacy column attrs (18px inner padding). */
@media all and (max-width: 1024px) {
    .cc-hero-band .cc-hb-text > .kt-inside-inner-col {
        padding: 18px;
        justify-content: center;
    }
}

/* Phone: single column with the photo ABOVE the text (the legacy rows
   collapsed right-to-left). The theme's existing .left-class /
   .right-class / .full-image rules keep handling padding and min-height
   here. The .cc-hb-text-top variant flips the stacking (used by one
   mirrored mid-page band that collapsed text-first). */
@media all and (max-width: 767px) {
    .cc-hero-band.hero-section > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .cc-hero-band .cc-hb-media {
        order: 1;
    }

    .cc-hero-band .cc-hb-text {
        order: 2;
    }

    .cc-hero-band.cc-hb-text-top .cc-hb-media {
        order: 2;
    }

    .cc-hero-band.cc-hb-text-top .cc-hb-text {
        order: 1;
    }

    .cc-hero-band .cc-hb-text > .kt-inside-inner-col {
        padding: var(--global-kb-spacing-md, 2rem) var(--global-kb-spacing-md, 2rem) var(--global-kb-spacing-xl, 4rem) var(--global-kb-spacing-md, 2rem);
        justify-content: center;
    }
}