/* ==========================================================================
   Hero Banner Block — SNS Fabricators
   ========================================================================== */

/* ── Base Layout ─────────────────────────────────────────────────────────── */

.sns-hero-banner {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    min-height: var(--hero-min-height, 500px);
    overflow: hidden;
    display: flex;
}

/* Vertical alignment */
.sns-hero-banner--valign-top {
    align-items: flex-start;
}
.sns-hero-banner--valign-center {
    align-items: center;
}
.sns-hero-banner--valign-bottom {
    align-items: flex-end;
}

/* ── Background Layer ────────────────────────────────────────────────────── */

.sns-hero-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Solid color background */
.sns-hero-banner--bg-color .sns-hero-banner__bg {
    background-color: var(--hero-bg-color, #1a1a2e);
}

.sns-hero-banner__bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sns-hero-banner__overlay {
    position: absolute;
    inset: 0;
}

/* ── Content Wrapper ─────────────────────────────────────────────────────── */

.sns-hero-banner__content-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    display: flex;
}

/* Horizontal positioning */
.sns-hero-banner--pos-left .sns-hero-banner__content-wrap {
    justify-content: flex-start;
}
.sns-hero-banner--pos-center .sns-hero-banner__content-wrap {
    justify-content: center;
}
.sns-hero-banner--pos-right .sns-hero-banner__content-wrap {
    justify-content: flex-end;
}

/* ── Content Box ─────────────────────────────────────────────────────────── */

.sns-hero-banner__content {
    background-color: var(--hero-text-bg, rgba(45, 55, 72, 0.85));
    padding: var(--hero-content-padding, 40px);
    position: relative;
}

/* Width variants */
.sns-hero-banner--width-50 .sns-hero-banner__content {
    width: 50%;
}
.sns-hero-banner--width-75 .sns-hero-banner__content {
    width: 75%;
}
.sns-hero-banner--width-100 .sns-hero-banner__content {
    width: 100%;
}

/* ── Bevel / Angled Bottom Edge ──────────────────────────────────────────── */

/* Left position: bottom slopes up from left to right */
.sns-hero-banner--pos-left .sns-hero-banner__content--bevel {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 140px), 0 100%);
    padding-bottom: calc(var(--hero-content-padding, 40px) + 140px);
}

/* Right position: bottom slopes up from right to left */
.sns-hero-banner--pos-right .sns-hero-banner__content--bevel {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 60px));
    padding-bottom: calc(var(--hero-content-padding, 40px) + 40px);
}

/* Center position: bottom slopes up from left to right */
.sns-hero-banner--pos-center .sns-hero-banner__content--bevel {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
    padding-bottom: calc(var(--hero-content-padding, 40px) + 40px);
}

/* Full width: bevel on bottom edge still works */
.sns-hero-banner--width-100 .sns-hero-banner__content--bevel {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
    padding-bottom: calc(var(--hero-content-padding, 40px) + 40px);
}

/* ── Title ───────────────────────────────────────────────────────────────── */

.sns-hero-banner__title {
    color: var(--hero-title-color, #ffffff);
    font-size: var(--hero-title-size, 2.5rem);
    line-height: 1.2;
    margin: 0 0 0.5em;
    font-weight: 400;
    font-style: italic;
}

.sns-hero-banner__title strong,
.sns-hero-banner__title b {
    font-weight: 700;
}

h2.sns-hero-banner__title p {
    margin: 0;
}

/* ── Separator ───────────────────────────────────────────────────────────── */

.sns-hero-banner__separator {
    border: none;
    border-top: 3px solid #ffffff;
    margin: 0 0 1.2em;
    padding: 0;
}

/* ── Description ─────────────────────────────────────────────────────────── */

.sns-hero-banner__desc {
    color: var(--hero-desc-color, #f1f1f1);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

.sns-hero-banner__desc p {
    margin: 0 0 0.8em;
}

.sns-hero-banner__desc p:last-child {
    margin-bottom: 0;
}

.sns-hero-banner__desc strong {
    font-weight: 700;
}

/* ── Button ──────────────────────────────────────────────────────────────── */

.sns-hero-banner__btn {
    display: inline-block;
    margin-top: 1.5em;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: filter 0.25s ease, transform 0.25s ease;
    cursor: pointer;
}

.sns-hero-banner__btn:hover,
.sns-hero-banner__btn:focus {
    filter: brightness(0.85);
    transform: translateY(-1px);
    text-decoration: none;
}

.sns-hero-banner__btn:active {
    transform: translateY(0);
}

/* ── Responsive — Tablet (768px) ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .sns-hero-banner__content-wrap {
        padding: 30px 20px;
    }

    .sns-hero-banner--width-50 .sns-hero-banner__content {
        width: 75%;
    }

    .sns-hero-banner__title {
        font-size: clamp(1.5rem, 4vw, var(--hero-title-size, 2.5rem));
    }

    .sns-hero-banner__desc {
        font-size: 0.95rem;
    }

    /* Reduce bevel offset on tablet */
    .sns-hero-banner__content--bevel {
        padding-bottom: calc(var(--hero-content-padding, 40px) + 20px);
    }

    .sns-hero-banner--pos-left .sns-hero-banner__content--bevel,
    .sns-hero-banner--pos-center .sns-hero-banner__content--bevel,
    .sns-hero-banner--width-100 .sns-hero-banner__content--bevel {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
    }

    .sns-hero-banner--pos-right .sns-hero-banner__content--bevel {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px));
    }
}

/* ── Responsive — Mobile (480px) ─────────────────────────────────────────── */

@media (max-width: 480px) {
    .sns-hero-banner {
        min-height: 350px;
    }

    .sns-hero-banner__content-wrap {
        padding: 20px 15px;
    }

    /* Force full width on mobile */
    .sns-hero-banner--width-50 .sns-hero-banner__content,
    .sns-hero-banner--width-75 .sns-hero-banner__content {
        width: 100%;
    }

    /* Remove bevel on mobile */
    .sns-hero-banner__content--bevel {
        clip-path: none !important;
        padding-bottom: var(--hero-content-padding, 30px) !important;
    }

    .sns-hero-banner__content {
        padding: 25px 20px;
    }

    .sns-hero-banner__title {
        font-size: clamp(1.3rem, 5vw, 2rem);
    }

    .sns-hero-banner__desc {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .sns-hero-banner__btn {
        padding: 10px 24px;
        font-size: 0.9rem;
        display: block;
        text-align: center;
    }
}

/* ── Editor Preview Adjustments ──────────────────────────────────────────── */

.sns-hero-banner--preview {
    width: 100%;
    margin-left: 0;
}