.hero-wrapper {
    padding-top: 0;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    background-color: transparent !important;
    /* Allow body gradient to show */
    overflow: visible;
    /* Prevent clipping */
    width: 100%;
}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 350px);
    gap: var(--space-md);

    /* Container behavior inherited from .container class */
    width: 100%;
}

.tile {
    position: relative;
    width: 100%;
    background-color: var(--surface-1);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    border: none;
}

.tile:hover {
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

.tile-image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.tile-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
    display: block;
}

.tile:hover .tile-bg {
    transform: scale(1.1);
}

/* --- IMAGE FIT MODES --- */
.hero-wrapper.fit-contain .tile-bg {
    object-fit: contain !important;
    background-color: #000;
}

.hero-wrapper.fit-fill .tile-bg {
    object-fit: fill !important;
}

.hero-wrapper.fit-zoom-premium .tile-bg {
    transform: scale(1.05);
}

.hero-wrapper.fit-zoom-premium .tile:hover .tile-bg {
    transform: scale(1.15);
}

/* --- OVERLAYS --- */
.glass-block {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    right: var(--space-md);
    z-index: 2;
    padding: 24px;
    transition: var(--transition);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}

/* --- Theme-Specfic Overlays --- */

/* DARK THEME (Default) */
body:not(.light-theme) .ov-dark-glass .glass-block {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--hero-glass-blur-dark, 20px)) saturate(180%);
    backdrop-filter: blur(var(--hero-glass-blur-dark, 20px)) saturate(180%);
    border-radius: var(--radius-md);
}

body:not(.light-theme) .ov-dark-darken .glass-block {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.7) 40%,
            rgba(0, 0, 0, 0.3) 70%,
            transparent 100%);
    bottom: 0;
    left: 0;
    right: 0;
    padding: 80px 24px 24px 24px;
    box-shadow: none;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body:not(.light-theme) .ov-dark-solid .glass-block {
    background: #13171A;
    bottom: 0;
    left: 0;
    right: 0;
}

/* LIGHT THEME (Overrides) */
body.light-theme .ov-light-glass .glass-block {
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(var(--hero-glass-blur-light, 20px));
    backdrop-filter: blur(var(--hero-glass-blur-light, 20px));
    border-radius: var(--radius-md);
    color: #334155;
}

body.light-theme .ov-light-glass .tile-title {
    color: #0f172a;
}

body.light-theme .ov-light-glass .tile-meta {
    color: #64748b;
}

body.light-theme .ov-light-darken .glass-block {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.6) 40%,
            rgba(0, 0, 0, 0.25) 70%,
            transparent 100%);
    bottom: 0;
    left: 0;
    right: 0;
    padding: 80px 24px 24px 24px;
    box-shadow: none;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.light-theme .ov-light-darken .tile-title {
    color: #fff;
}

body.light-theme .ov-light-darken .tile-meta {
    color: rgba(255, 255, 255, 0.85);
}

body.light-theme .ov-light-solid .glass-block {
    background: #FFFFFF;
    bottom: 0;
    left: 0;
    right: 0;
}

body.light-theme .ov-light-solid .tile-title {
    color: #0f172a;
}

.tile-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: var(--text-primary);
    line-height: 1.3;
    /* Hardware Acceleration - Removed to prevent artifacts */
    /* will-change: max-height, transform; */
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;

    /* Closing Transition (Return) - Optimized with Clamp Delay */
    transition:
        max-height 2.2s cubic-bezier(0.25, 1, 0.5, 1),
        transform 2.2s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 1.5s ease,
        color 1.5s ease,
        -webkit-line-clamp 0.1s step-end 2.2s;
    /* Delay clamp reset until height closes */

    /* Line Clamp Logic */
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp, 2);
    line-clamp: var(--line-clamp, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Essential for smooth height transition */
    max-height: 3.8em;
    /* Adjusted base height */
}

/* Full Title on Hover (Desktop only) */
@media (min-width: 1025px) {
    .tile.tile-hover-expand:hover .tile-title {
        /* Opening Transition (Hover) - Instant Clamp Release */
        transition:
            max-height 2s cubic-bezier(0.19, 1, 0.22, 1),
            transform 2s cubic-bezier(0.19, 1, 0.22, 1),
            background-color 0.8s ease,
            color 0.8s ease,
            -webkit-line-clamp 0s step-start 0s;
        /* No delay on open */

        /* We remove the clamp constraint but ease the height */
        -webkit-line-clamp: 50 !important;
        line-clamp: 50 !important;

        transform: translateY(-5px);
        max-height: 15em;
        /* Sufficient for any title */
        color: #fff !important;
    }

    /* Glass Block Closing (Return) */
    .tile.tile-hover-expand .glass-block {
        transition:
            transform 2.2s cubic-bezier(0.25, 1, 0.5, 1),
            background 1.5s ease,
            box-shadow 1.5s ease;
    }

    .tile.tile-hover-expand:hover .glass-block {
        /* Glass Block Opening (Hover) */
        transition:
            transform 2s cubic-bezier(0.19, 1, 0.22, 1),
            background 1s ease,
            box-shadow 1.2s ease;

        transform: translateY(-12px);
        background: rgba(var(--glass-bg-rgb, 20, 24, 28), 0.94);
        box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5);
        will-change: transform;
    }

    /* Cinematic Overlay for Expansion Gap Protection */
    .tile.tile-hover-expand .tile-image-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 30%, transparent 65%);
        z-index: 1; /* Lowered below glass block (z-index: 2) */
        opacity: 0.35;
        transition: opacity 0.7s var(--ease);
        pointer-events: none;
    }

    .tile.tile-hover-expand:hover .tile-image-wrapper::after {
        opacity: 1;
        transition-duration: 0.4s; /* Darken faster than the glass moves */
    }
}

.tile-main .tile-title {
    font-size: 2.2rem;
    letter-spacing: -0.02em;
}

.ov-light-darken .tile-title {
    color: #fff;
}

/* Base hover transform - simplified to avoid conflicts */


.tile:not(.tile-hover-expand):hover .tile-title {
    transform: translateY(-2px);
}

.tile-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    opacity: 0.8;
}

.tile-meta svg {
    opacity: 0.7;
    color: var(--accent);
}

.ov-dark-darken .tile-meta,
.ov-light-darken .tile-meta {
    color: rgba(255, 255, 255, 0.8);
}

.tile-category {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    /* Increased to match LNB */
    padding: 6px 14px;
    /* Matched to LNB */
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border: none;
    color: var(--text-primary);
    font-size: 0.72rem; /* Slightly larger for better readability */
    font-weight: 700;
    border-radius: 99px;
    /* Matched to LNB */
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    box-shadow: none;
    /* Removed shadow to match LNB */
    transition: var(--transition);

    /* Layout fixes for long names */
    display: inline-flex;
    align-items: center;
    justify-content: flex-start; /* Corrected to left */
    max-width: calc(100% - 40px);
    line-height: 1.1;
    text-align: left; /* Corrected to left */
    box-sizing: border-box;
}

/* Light Theme Badge Cleanup - Ensuring 1:1 look with LNB */
body.light-theme .tile-category {
    background: rgba(255, 255, 255, 0.75);
    color: #0f172a;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Force Dark Style if Bento is using dark overlays in light theme (similar to LNB logic) */
body.light-theme .ov-light-darken .tile-category,
body.light-theme .ov-light-dark-glass .tile-category {
    background: rgba(19, 23, 26, 0.75);
    color: #fff;
}

/* --- HOVER EFFECTS --- */

/* Floating Glass */
.hover-floating .tile:hover .glass-block {
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: var(--radius-md);
    border-top: none;
}

/* Persistent Floating */
.hover-persistent .glass-block {
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: var(--radius-md);
    border-top: none;
}

/* --- PLACEHOLDERS --- */
.tile-no-image .tile-image-wrapper {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
    display: flex;
    align-items: center;
    justify-content: center;
}



/* Grid Layout */
.tile-main {
    grid-column: span 6;
    grid-row: span 2;
}

.tile-sub-1 {
    grid-column: span 4;
}

.tile-sub-2 {
    grid-column: span 2;
}

.tile-sub-3 {
    grid-column: span 2;
}

.tile-sub-4 {
    grid-column: span 4;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(4, 250px);
    }

    .tile-main {
        grid-column: span 6;
        grid-row: span 2;
    }
}

@media (max-width: 768px) {
    .hero-wrapper {
        padding-bottom: 0 !important;
    }

    .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .tile {
        height: 280px;
    }

    .tile-main {
        height: 400px;
    }
}

/* --- HERO REVEAL ANIMATIONS --- */
.hero-grid .tile {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    will-change: opacity, transform;
}

.hero-grid .tile.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delays for Desktop */
@media (min-width: 769px) {
    .tile-main.is-revealed {
        transition-delay: 0s;
    }

    .tile-sub-1.is-revealed {
        transition-delay: 0.1s;
    }

    .tile-sub-2.is-revealed {
        transition-delay: 0.2s;
    }

    .tile-sub-3.is-revealed {
        transition-delay: 0.3s;
    }

    .tile-sub-4.is-revealed {
        transition-delay: 0.4s;
    }
}

/* Fallback for No-JS */
.no-js .hero-grid .tile {
    opacity: 1 !important;
    transform: none !important;
}