/*
 * SMORTLER SI Homepage - Violet edge-lock fix
 * Load this AFTER /assets/smortler-si-home.css.
 *
 * Goal:
 * Every transparent Violet character lands exactly on the next section boundary
 * at every responsive size, instead of floating above it with background space.
 */

/* Image-led sections should end at the character, not at extra section padding. */
.si-image-edge-section,
.si-future-section {
    padding-bottom: 0 !important;
    overflow: hidden;
}

/* Stretch the section grid so the character column owns the full section height. */
.si-image-edge-section > .si-shell,
.si-future-section > .si-shell,
.si-image-edge-grid,
.si-future-grid {
    align-items: stretch !important;
}

/* Make each Violet panel a true bottom-anchored image column. */
.si-image-edge-section .si-character-panel,
.si-future-section .si-character-panel,
.si-invite-character {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end !important;
    align-self: stretch !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0;
}

/* Remove inline-image baseline space and force the transparent artwork to the edge. */
.si-image-edge-section .si-character-panel img,
.si-future-section .si-character-panel img,
.si-invite-character img {
    display: block !important;
    width: auto;
    max-width: 100%;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: bottom;
}

/* Keep comfortable breathing room under the copy while the character itself lands on the edge. */
.si-image-edge-section .si-copy-block,
.si-future-section .si-future-copy {
    padding-bottom: clamp(34px, 4vw, 64px);
}

/* The following colored section should begin immediately after the character section. */
.si-contact-strip,
.si-site-footer {
    margin-top: 0 !important;
}

/* On phones/tablets the text stacks above Violet. Preserve that order,
   but keep Violet's feet/thigh crop locked to the next section. */
@media (max-width: 820px) {
    .si-image-edge-section,
    .si-future-section {
        padding-bottom: 0 !important;
    }

    .si-image-edge-section .si-character-panel,
    .si-future-section .si-character-panel,
    .si-invite-character {
        min-height: 0 !important;
    }

    .si-image-edge-section .si-character-panel img,
    .si-future-section .si-character-panel img,
    .si-invite-character img {
        margin-bottom: 0 !important;
    }

    .si-image-edge-section .si-copy-block,
    .si-future-section .si-future-copy {
        padding-bottom: 24px;
    }
}