/* ================================================
   TEAM GLAM — Split Panel Widget
   Two-column editorial layout: image | content
   ================================================ */

/* ── Wrapper ────────────────────────────────────── */
.tg-sp-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;   /* both columns match height automatically */
    width: 100%;
    overflow: hidden;
    min-height: 90vh;       /* single source of truth for section height */
}

/* Image on right */
.tg-sp-image--right {
    flex-direction: row-reverse;
}

/* ── Image column ───────────────────────────────── */
.tg-sp-image {
    position: relative;
    flex: 0 0 50%;
    /* NO explicit min-height — wrapper drives it, image fills via stretch */
    overflow: hidden;
}

.tg-sp-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.tg-sp-placeholder {
    position: absolute;
    inset: 0;
    background: #e8e4df;
}

/* ── Content column ─────────────────────────────── */
.tg-sp-content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* default: left, matching the screenshot */
    justify-content: center;
    background: #ffffff;
    /* No min-height — matches image column height automatically */
}

/* ── Inner text block ───────────────────────────── */
.tg-sp-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* default: left-aligned, matching the screenshot */
    text-align: left;
    width: 100%;
    max-width: 480px;
    padding: 60px 80px;
    box-sizing: border-box;
}

/* ── Eyebrow ────────────────────────────────────── */
.tg-sp-eyebrow {
    display: block;
    font-family: 'brandon-grotesque', sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #888888;
    margin-bottom: 20px;
}

/* ── Heading ────────────────────────────────────── */
.tg-sp-heading {
    font-family: 'beaufort-pro', serif;
    font-size: 96px;
    font-weight: 400;
    line-height: 1.0;
    color: #000000;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}

/* ── Subtitle ───────────────────────────────────── */
body .tg-sp-subtitle,
.tg-sp-subtitle {
    font-family: 'brandon-grotesque', sans-serif;
    font-size: var(--tg-body-font-size, 18px) !important;
    line-height: 1.6;
    color: #555555;
    margin: 0 0 36px;
}

/* ── Button wrapper (inherits text-align from .tg-sp-text) ── */
.tg-sp-btn-wrap {
    display: block;
    width: 100%;
    text-align: inherit;
}

/* ── Button ─────────────────────────────────────────────────────── */
.tg-sp-btn {
    display: inline-block;
    font-family: 'brandon-grotesque', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    background-color: #1a1a1a;
    padding: 13px 36px;
    border: none;
    cursor: pointer;
    transition: background-color 0.22s ease, color 0.22s ease;
    /* No align-self needed — positioning is handled by .tg-sp-btn-wrap text-align */
}

.tg-sp-btn:hover {
    background-color: #383838;
    color: #ffffff;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
    .tg-sp-wrap    { min-height: 600px; }
    .tg-sp-heading { font-size: 72px; }
    .tg-sp-text    { padding: 60px 40px; }
}

@media (max-width: 767px) {
    /* Stack columns vertically */
    .tg-sp-wrap,
    .tg-sp-image--right {
        flex-direction: column;
        min-height: unset;
    }

    .tg-sp-image {
        flex: 0 0 auto;
        width: 100%;
        min-height: 480px;
    }

    .tg-sp-content {
        flex: 0 0 auto;
        width: 100%;
    }

    .tg-sp-text {
        padding: 48px 24px;
        max-width: 100%;
    }

    .tg-sp-heading { font-size: 56px; }

    /* Image below content on mobile (opt-in) */
    .tg-sp-mobile--last .tg-sp-image   { order: 2; }
    .tg-sp-mobile--last .tg-sp-content { order: 1; }
}