/* =========================================================
   SmartLiveReport Hero M7
   Single authoritative Hero implementation
   ========================================================= */

.v2-hero-section {
    width: 100%;
}

.v2-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr);
    gap: 16px;
    width: 100%;
    align-items: stretch;
}

/* Breaking/Live wrappers must participate in the Hero layout */

.v2-hero-grid > .slr-breaking-wrap,
.v2-hero-grid > .slr-breaking-overlay-wrap {
    display: block;
    width: 100%;
    min-width: 0;
    height: 650px;
}

.v2-side-leads {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 16px;
    height: 650px;
    min-width: 0;
}

.v2-side-leads > .slr-breaking-wrap,
.v2-side-leads > .slr-breaking-overlay-wrap {
    display: block;
    width: 100%;
    min-width: 0;
    height: 317px;
}

/* Shared card foundation */

.v2-hero-section .v2-lead-card,
.v2-hero-section .v2-side-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    isolation: isolate;
}

/* Prevent all historic overlay layers */

.v2-hero-section .v2-lead-card::before,
.v2-hero-section .v2-lead-card::after,
.v2-hero-section .v2-side-card::before,
.v2-hero-section .v2-side-card::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   Main Hero
   HTML image appears first, but flex order places text first
   ========================================================= */

.v2-hero-section .v2-lead-card {
    height: 650px !important;
    min-height: 650px !important;
    max-height: 650px !important;
}

.v2-hero-section .v2-lead-card > .v2-card-body.v2-lead-overlay {
    order: 1;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 250px !important;
    width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    margin: 0 !important;
    padding: 20px 22px 18px !important;
    box-sizing: border-box;
    overflow: hidden !important;
    color: #ffffff !important;
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(255, 255, 255, 0.17) 0 72px,
            transparent 73px
        ),
        linear-gradient(
            135deg,
            #dc2626 0%,
            #ef4444 48%,
            #7f1d1d 100%
        ) !important;
    border-radius: 14px 14px 0 0 !important;
    transform: none !important;
    z-index: 2 !important;
}

.v2-hero-section .v2-lead-card > img.slr-img {
    order: 2;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 400px !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #e2e8f0;
    border-radius: 0 0 14px 14px !important;
    transform: none !important;
    z-index: 1 !important;
}

/* Main metadata */

.v2-hero-section .v2-lead-card .v2-meta {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    max-width: 100%;
    margin: 0 0 9px !important;
    padding: 4px 9px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.17) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(2px);
}

/* Main headline */

.v2-hero-section .v2-lead-card h1 {
    display: -webkit-box !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #ffffff !important;
    font-size: clamp(28px, 2.45vw, 38px) !important;
    line-height: 1.14 !important;
    font-weight: 900 !important;
    letter-spacing: -0.4px;
    text-shadow: none !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Main teaser */

.v2-hero-section .v2-lead-card p {
    display: -webkit-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: rgba(255, 255, 255, 0.93) !important;
    font-size: 14.5px !important;
    line-height: 1.48 !important;
    font-weight: 500;
    text-shadow: none !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* =========================================================
   Right-side Hero cards
   ========================================================= */

.v2-hero-section .v2-side-card {
    height: 317px !important;
    min-height: 317px !important;
    max-height: 317px !important;
}

.v2-hero-section .v2-side-card > .v2-card-body {
    order: 1;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 128px !important;
    width: 100% !important;
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    margin: 0 !important;
    padding: 13px 15px !important;
    box-sizing: border-box;
    overflow: hidden !important;
    color: #ffffff !important;
    background:
        radial-gradient(
            circle at 94% 5%,
            rgba(255, 255, 255, 0.13) 0 47px,
            transparent 48px
        ),
        linear-gradient(
            135deg,
            #991b1b 0%,
            #b91c1c 54%,
            #450a0a 100%
        ) !important;
    border-radius: 14px 14px 0 0 !important;
    transform: none !important;
    z-index: 2 !important;
}

.v2-hero-section .v2-side-card > img.slr-img {
    order: 2;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 189px !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #e2e8f0;
    border-radius: 0 0 14px 14px !important;
    transform: none !important;
    z-index: 1 !important;
}

.v2-hero-section .v2-side-card .v2-meta {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    max-width: 100%;
    margin: 0 0 7px !important;
    padding: 4px 8px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 7px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-hero-section .v2-side-card h3 {
    display: -webkit-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #ffffff !important;
    font-size: 17px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Card interaction without image movement */

.v2-hero-section .v2-lead-card,
.v2-hero-section .v2-side-card {
    transition:
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.v2-hero-section .v2-lead-card:hover,
.v2-hero-section .v2-side-card:hover {
    border-color: rgba(220, 38, 38, 0.20);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    transform: none !important;
}

.v2-hero-section .v2-lead-card:hover img,
.v2-hero-section .v2-side-card:hover img {
    transform: none !important;
}

/* Admin controls remain above cards */

.v2-hero-grid .slr-breaking-star,
.v2-hero-grid .slr-live-now-star,
.v2-side-leads .slr-breaking-star,
.v2-side-leads .slr-live-now-star {
    z-index: 30 !important;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (min-width: 701px) and (max-width: 1100px) {
    .v2-hero-grid {
        grid-template-columns: 1fr;
    }

    .v2-hero-grid > .slr-breaking-wrap,
    .v2-hero-grid > .slr-breaking-overlay-wrap {
        height: 590px;
    }

    .v2-hero-section .v2-lead-card {
        height: 590px !important;
        min-height: 590px !important;
        max-height: 590px !important;
    }

    .v2-hero-section .v2-lead-card >
    .v2-card-body.v2-lead-overlay {
        flex-basis: 220px !important;
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }

    .v2-hero-section .v2-lead-card > img.slr-img {
        height: 370px !important;
    }

    .v2-side-leads {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        height: 310px;
    }

    .v2-side-leads > .slr-breaking-wrap,
    .v2-side-leads > .slr-breaking-overlay-wrap {
        height: 310px;
    }

    .v2-hero-section .v2-side-card {
        height: 310px !important;
        min-height: 310px !important;
        max-height: 310px !important;
    }

    .v2-hero-section .v2-side-card > .v2-card-body {
        flex-basis: 125px !important;
        height: 125px !important;
        min-height: 125px !important;
        max-height: 125px !important;
    }

    .v2-hero-section .v2-side-card > img.slr-img {
        height: 185px !important;
    }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {
    .v2-hero-grid {
        display: block;
    }

    .v2-hero-grid > .slr-breaking-wrap,
    .v2-hero-grid > .slr-breaking-overlay-wrap {
        height: auto;
        margin-bottom: 14px;
    }

    .v2-hero-section .v2-lead-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .v2-hero-section .v2-lead-card >
    .v2-card-body.v2-lead-overlay {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 16px !important;
    }

    .v2-hero-section .v2-lead-card > img.slr-img {
        flex: none !important;
        width: 100% !important;
        height: 235px !important;
        min-height: 235px !important;
        max-height: 235px !important;
    }

    .v2-hero-section .v2-lead-card h1 {
        font-size: 26px !important;
        line-height: 1.18 !important;
        -webkit-line-clamp: 4;
    }

    .v2-hero-section .v2-lead-card p {
        font-size: 14px !important;
        -webkit-line-clamp: 3;
    }

    .v2-side-leads {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 14px;
        height: auto;
    }

    .v2-side-leads > .slr-breaking-wrap,
    .v2-side-leads > .slr-breaking-overlay-wrap {
        height: auto;
    }

    .v2-hero-section .v2-side-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .v2-hero-section .v2-side-card > .v2-card-body {
        flex: none !important;
        height: auto !important;
        min-height: 112px !important;
        max-height: none !important;
        padding: 13px 14px !important;
    }

    .v2-hero-section .v2-side-card > img.slr-img {
        flex: none !important;
        width: 100% !important;
        height: 210px !important;
        min-height: 210px !important;
        max-height: 210px !important;
    }

    .v2-hero-section .v2-side-card h3 {
        font-size: 17px !important;
        -webkit-line-clamp: 3;
    }
}