/* ==========================================================================
   SAHANA SABHA - VIBRANT MODERN BENTO GRID UI FRAMEWORK
   Directly matching vibrant colorful Bento architecture (pasted-image-9.png)
   Electric Orange (#FF5C00), Soft Sky Blue (#8BB9FE), Crisp White & Deep Dark
   ========================================================================== */

:root {
    --bento-bg: #0A0A0F;
    --bento-orange: #FF5C00;
    --bento-orange-bright: #FF6F1C;
    --bento-orange-light: #FF8534;
    --bento-blue: #8BB9FE;
    --bento-blue-deep: #689DF7;
    --bento-mint: #10B981;
    --bento-amber: #F59E0B;
    --bento-dark-card: #151620;
    --bento-dark-card-hover: #1E1F2D;
    --bento-border-dark: rgba(255, 255, 255, 0.12);
    --bento-radius: 24px;
    --bento-radius-sub: 16px;
    --bento-radius-pill: 40px;
}

html, body {
    background: #0A0A0F !important;
    background-color: #0A0A0F !important;
    background-image: none !important;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Main Bento Container */
.bento-viewport {
    max-width: 1600px;
    margin: 0 auto;
    padding: 95px 22px 70px;
    box-sizing: border-box;
}

/* Minimal Top Utility Strip (Tag + Search + Category Filter) */
.bento-header-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.bento-strip-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bento-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 92, 0, 0.16);
    border: 1px solid rgba(255, 92, 0, 0.45);
    color: #FF7824;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: var(--bento-radius-pill);
}

.bento-strip-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #FFF;
    margin: 0;
    letter-spacing: 0.2px;
}

.bento-strip-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    justify-content: flex-end;
}

/* Search Box */
.bento-search-wrap {
    position: relative;
    width: 270px;
}

.bento-search-wrap input {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--bento-radius-pill);
    padding: 10px 16px 10px 42px;
    font-size: 13px;
    color: #FFF;
    outline: none;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.bento-search-wrap input:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: #FF5C00;
    box-shadow: 0 0 20px rgba(255, 92, 0, 0.4);
}

.bento-search-wrap .material-symbols-outlined {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #FF7824;
    pointer-events: none;
}

/* Category Filter Chips */
.bento-filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bento-chip-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--bento-radius-pill);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.bento-chip-btn:hover {
    color: #FFF;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

.bento-chip-btn.active {
    background: #FF5C00;
    border-color: #FF5C00;
    color: #FFFFFF;
    box-shadow: 0 4px 18px rgba(255, 92, 0, 0.45);
}

/* ==========================================================================
   THE 12-COLUMN MASTER BENTO GRID
   ========================================================================== */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
    position: relative;
}

/* ==========================================================================
   HERO CARD 1: VIBRANT ELECTRIC ORANGE FLAGSHIP (6 COLS, 2 ROWS)
   Matching the big Orange centerpiece in pasted-image-9.png
   ========================================================================== */
.bento-hero-showcase {
    grid-column: span 9;
    grid-row: span 2;
    background: linear-gradient(140deg, #FF5C00 0%, #FF6F1C 50%, #FF812F 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--bento-radius);
    padding: 24px 26px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 45px rgba(255, 92, 0, 0.35);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: default;
    position: relative;
    overflow: hidden;
    transition: background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease;
}

/* Giant background typography watermark matching REST... in pasted-image-9.png */
.bento-hero-showcase::after {
    content: "SAHANA";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Outfit', sans-serif;
    font-size: 140px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    letter-spacing: -4px;
    line-height: 1;
    z-index: 0;
}

.bento-hero-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.bento-hero-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bento-back-circle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bento-back-circle-btn:hover {
    background: #FFFFFF;
    color: #FF5C00;
    transform: scale(1.08);
}

.bento-hero-headline {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: #FFF;
    margin: 0;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.bento-hero-headline span {
    color: #FFF;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.bento-see-all-tag {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    color: #FFF;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 12px;
    border-radius: var(--bento-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   UNIFIED SINGLE MAIN CARD SHOWCASE (Replaces fragmented 2/3 cards)
   Directly embeds video, photo/audio, specs & launch action into 1 card!
   ========================================================================== */
.bento-hero-unified-body {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}

.bento-hero-pill-category {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 9px;
    border-radius: var(--bento-radius-pill);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Left Panel: Media Stage */
.bento-hero-media-panel {
    background: rgba(14, 7, 4, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 202, 101, 0.35);
    border-radius: var(--bento-radius-sub);
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 250px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Direct Video Player inside Main Card */
.bento-hero-video-stage {
    width: 100%;
    height: 100%;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.bento-hero-video-stage video {
    width: 100%;
    height: 100%;
    max-height: 270px;
    object-fit: contain;
    background: #000;
    border-radius: 12px;
    outline: none;
}

/* Graphic / Photo Stage when video not present */
.bento-hero-graphic-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 10px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.bento-graphic-icon-box {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    background: rgba(255, 202, 101, 0.15);
    border: 1.5px solid var(--bento-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bento-gold);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.bento-graphic-code-tag {
    font-family: 'Space Mono', monospace;
    font-size: 15px;
    font-weight: 800;
    color: var(--bento-gold);
    letter-spacing: 2px;
}

.bento-graphic-subtitle {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Instrument Photo & Audio Bar in Main Card */
.bento-hero-inst-stage {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    height: 100%;
}

.bento-hero-inst-img-box {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.bento-hero-inst-img-box img {
    max-height: 165px;
    max-width: 95%;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
}

.bento-hero-inst-audio-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 202, 101, 0.25);
    border-radius: 12px;
    padding: 8px 14px;
}

/* Right Panel: Info & Actions */
.bento-hero-info-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
}

.bento-hero-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 12px 0;
    font-weight: 500;
}

.bento-hero-chips-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.bento-hero-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.bento-chip-label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.bento-hero-chip strong {
    font-size: 12.5px;
    font-weight: 800;
    color: #FFFFFF;
}

/* Luxury Launch Button inside Hero */
.btn-bento-hero-launch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #140A06;
    color: #FFCA65;
    border: 1.5px solid rgba(255, 202, 101, 0.5);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: var(--bento-radius-pill);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    width: fit-content;
}

.btn-bento-hero-launch:hover {
    background: #FFCA65;
    color: #140A06;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 30px rgba(255, 202, 101, 0.4);
}

@media (max-width: 900px) {
    .bento-hero-unified-body {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* 3 Inner Showcase Cards inside Hero: Crisp White Cards like pasted-image-9.png */
.bento-inner-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}

.bento-inner-sub-card {
    background: rgba(14, 7, 4, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 202, 101, 0.35);
    border-radius: var(--bento-radius-sub);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
    min-height: 205px;
    position: relative;
    overflow: hidden;
    color: #FAF4EE;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.bento-inner-sub-card:last-child {
    background: rgba(24, 12, 7, 0.85);
    border-color: rgba(255, 202, 101, 0.45);
}

.bento-inner-sub-card:hover {
    transform: translateY(-4px);
    border-color: #FFCA65;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 202, 101, 0.25);
}

.bento-sub-stage {
    width: 100%;
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.bento-sub-stage img {
    max-width: 100%;
    max-height: 115px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
    transition: transform 0.3s ease;
}

.bento-inner-sub-card:hover .bento-sub-stage img {
    transform: scale(1.08);
}

.bento-sub-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 202, 101, 0.2);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: rgba(250, 244, 238, 0.7);
    font-weight: 700;
}

.bento-sub-badge-val {
    font-size: 11px;
    font-weight: 800;
    color: #FFCA65;
}

/* Audio Player inside 3rd Subcard */
.bento-audio-play-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 125px;
}

.bento-audio-circle-trigger {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF5C00, #FF7824);
    border: none;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(255, 92, 0, 0.45);
    transition: transform 0.2s ease;
}

.bento-audio-circle-trigger:hover {
    transform: scale(1.14);
}

.bento-audio-bars-anim {
    display: flex;
    align-items: flex-end;
    gap: 3.5px;
    height: 18px;
}

.bento-sound-bar {
    width: 3.5px;
    background: #2563EB;
    border-radius: 2px;
    animation: barPulse 1s ease-in-out infinite alternate;
}

.bento-sound-bar:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.bento-sound-bar:nth-child(2) { height: 16px; animation-delay: 0.3s; }
.bento-sound-bar:nth-child(3) { height: 10px; animation-delay: 0.2s; }
.bento-sound-bar:nth-child(4) { height: 18px; animation-delay: 0.4s; }
.bento-sound-bar:nth-child(5) { height: 8px; animation-delay: 0.15s; }

@keyframes barPulse {
    0% { transform: scaleY(0.4); }
    100% { transform: scaleY(1); }
}

/* ==========================================================================
   HERO CARD 2: SOFT SKY BLUE ASIDE (3 COLS, 2 ROWS)
   Matching the Sky Blue cards in pasted-image-9.png
   ========================================================================== */
.bento-hero-aside {
    grid-column: span 3;
    grid-row: span 2;
    background: linear-gradient(145deg, #8EB8FE 0%, #76A7FA 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--bento-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(139, 185, 254, 0.35);
    cursor: default;
    color: #0E1726;
    transition: background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease,
                color 0.35s ease;
}

.bento-aside-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bento-aside-main-title {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: #0E1726;
    margin: 0;
    line-height: 1.2;
}

.bento-aside-category {
    font-size: 13px;
    color: #1E293B;
    margin: 0;
    font-weight: 600;
}

.bento-aside-likes-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #0E1726;
    margin-top: 6px;
    font-weight: 700;
}

.bento-aside-likes-row .material-symbols-outlined {
    font-size: 16px;
    color: #E11D48;
}

/* Luxury Bento Pill CTA Button */
.btn-bento-white-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #140A06 !important;
    color: #FFCA65 !important;
    border: 1.5px solid rgba(255, 202, 101, 0.45) !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: none;
    text-decoration: none;
    padding: 13px 22px;
    border-radius: var(--bento-radius-pill);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.btn-bento-white-pill:hover {
    background: #FFCA65 !important;
    color: #140A06 !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(255, 202, 101, 0.5) !important;
}

.bento-aside-sponsored-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.bento-sponsored-header {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bento-sponsored-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(14, 23, 38, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
}

.bento-sp-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #FF5C00;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 18px;
    flex-shrink: 0;
}

.bento-sp-text strong {
    display: block;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 800;
}

.bento-sp-text span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   DYNAMIC COLOR THEMES FOR BENTO GRID CARDS (Directly matching pasted-image-9.png)
   ========================================================================== */
.bento-item-card {
    border-radius: var(--bento-radius);
    padding: 20px;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.bento-item-card:hover {
    transform: translateY(-6px) scale(1.02);
}

.bento-item-card.is-active-bento {
    transform: translateY(-4px) scale(1.03) !important;
}

/* Theme-matched active glows for grid cards */
.bento-item-card.bento-theme-orange.is-active-bento {
    box-shadow: 0 0 0 3px #FFFFFF, 0 16px 45px rgba(255, 92, 0, 0.8) !important;
}
.bento-item-card.bento-theme-blue.is-active-bento {
    box-shadow: 0 0 0 3px #FFFFFF, 0 16px 45px rgba(37, 99, 235, 0.8) !important;
}
.bento-item-card.bento-theme-dark.is-active-bento {
    box-shadow: 0 0 0 3px #FFCA65, 0 16px 45px rgba(255, 202, 101, 0.7) !important;
}
.bento-item-card.bento-theme-purple.is-active-bento,
.bento-item-card.bento-theme-white.is-active-bento {
    box-shadow: 0 0 0 3px #FFFFFF, 0 16px 45px rgba(139, 92, 246, 0.8) !important;
}
.bento-item-card.bento-theme-mint.is-active-bento {
    box-shadow: 0 0 0 3px #FFFFFF, 0 16px 45px rgba(16, 185, 129, 0.8) !important;
}
.bento-item-card.bento-theme-amber.is-active-bento {
    box-shadow: 0 0 0 3px #FFFFFF, 0 16px 45px rgba(245, 158, 11, 0.8) !important;
}

/* ==========================================================================
   BENTO MAIN CARD SPOTLIGHT & PROMOTION TRANSITIONS
   ========================================================================== */

/* Shimmer overlay animation on Main Showcase */
.bento-hero-showcase::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
}

.bento-hero-showcase.hero-shimmer::before {
    animation: bentoHeroShimmer 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bentoHeroShimmer {
    0% { left: -120%; opacity: 0.85; }
    100% { left: 220%; opacity: 0; }
}

/* Smooth Transitions for Hero and Aside */
.bento-hero-showcase.is-transitioning,
.bento-hero-aside.is-transitioning {
    transform: scale(0.985);
    opacity: 0.65;
}

.bento-hero-showcase .bento-inner-cards-row,
.bento-hero-showcase .bento-hero-headline,
.bento-hero-showcase .bento-hero-video-box,
.bento-hero-aside .bento-aside-title-block,
.bento-hero-aside .btn-bento-white-pill,
.bento-hero-aside .bento-aside-sponsored-block {
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-hero-showcase.is-transitioning .bento-inner-cards-row,
.bento-hero-showcase.is-transitioning .bento-hero-headline,
.bento-hero-showcase.is-transitioning .bento-hero-video-box,
.bento-hero-aside.is-transitioning .bento-aside-title-block,
.bento-hero-aside.is-transitioning .btn-bento-white-pill,
.bento-hero-aside.is-transitioning .bento-aside-sponsored-block {
    opacity: 0.2;
    transform: translateY(6px);
}

/* Spotlight Live Badge in Hero Card */
.bento-spotlight-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.28);
    padding: 3px 9px;
    border-radius: var(--bento-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.35);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bento-badge-pulse-dot {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: #00FF87;
    box-shadow: 0 0 10px #00FF87;
    animation: bentoPulseDot 1.8s infinite;
}

@keyframes bentoPulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

/* Badge on Grid Card when selected as Main Card */
.bento-active-spotlight-pill {
    display: none;
    align-items: center;
    gap: 5px;
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    font-weight: 800;
    background: #FFFFFF;
    color: #0E0F14;
    padding: 2.5px 8px;
    border-radius: var(--bento-radius-pill);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    animation: bentoBadgePop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bentoBadgePop {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.bento-pulse-dot-sm {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 6px #10B981;
    animation: bentoPulseDot 1.8s infinite;
}

.bento-item-card.is-active-bento .bento-active-spotlight-pill {
    display: inline-flex;
}

.bento-item-card.is-active-bento .bento-card-corner-icon {
    transform: rotate(-45deg);
    color: #FFFFFF !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
}

.bento-item-card:active {
    transform: scale(0.97) !important;
}

/* THEME 1: VIBRANT ELECTRIC ORANGE CARD */
.bento-theme-orange {
    background: linear-gradient(145deg, #FF5B00 0%, #FF6E1A 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(255, 92, 0, 0.35);
}
.bento-theme-orange .bento-card-media-box {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}
.bento-theme-orange .bento-card-item-title {
    color: #FFFFFF;
}
.bento-theme-orange .bento-card-item-subtitle {
    color: rgba(255, 255, 255, 0.95);
}
.bento-theme-orange .bento-card-corner-icon {
    color: #FFFFFF;
}
.bento-theme-orange .bento-category-pill {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

/* THEME 2: ROYAL SAPPHIRE BLUE CARD */
.bento-theme-blue {
    background: linear-gradient(145deg, #2563EB 0%, #1D4ED8 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
}
.bento-theme-blue .bento-card-media-box {
    background: rgba(10, 20, 36, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}
.bento-theme-blue .bento-card-item-title {
    color: #FFFFFF;
}
.bento-theme-blue .bento-card-item-subtitle {
    color: rgba(255, 255, 255, 0.92);
}
.bento-theme-blue .bento-card-corner-icon {
    color: #FFFFFF;
}
.bento-theme-blue .bento-category-pill {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

/* THEME 3: DEEP OBSIDIAN DARK CARD */
.bento-theme-dark {
    background: linear-gradient(145deg, #181924 0%, #101118 100%);
    border: 1.5px solid rgba(255, 202, 101, 0.25);
    color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
}
.bento-theme-dark .bento-card-media-box {
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 202, 101, 0.16);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}
.bento-theme-dark .bento-card-item-title {
    color: #FFFFFF;
}
.bento-theme-dark .bento-card-item-subtitle {
    color: #FFCA65;
}
.bento-theme-dark .bento-card-corner-icon {
    color: #FFCA65;
}
.bento-theme-dark .bento-category-pill {
    background: rgba(255, 202, 101, 0.18);
    color: #FFCA65;
    border: 1px solid rgba(255, 202, 101, 0.3);
}

/* THEME 4: ROYAL AMETHYST PURPLE CARD */
.bento-theme-purple,
.bento-theme-white {
    background: linear-gradient(145deg, #8B5CF6 0%, #6D28D9 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(109, 40, 217, 0.35);
}
.bento-theme-purple .bento-card-media-box,
.bento-theme-white .bento-card-media-box {
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}
.bento-theme-purple .bento-card-item-title,
.bento-theme-white .bento-card-item-title {
    color: #FFFFFF;
}
.bento-theme-purple .bento-card-item-subtitle,
.bento-theme-white .bento-card-item-subtitle {
    color: rgba(255, 255, 255, 0.95);
}
.bento-theme-purple .bento-card-corner-icon,
.bento-theme-white .bento-card-corner-icon {
    color: #FFFFFF;
}
.bento-theme-purple .bento-category-pill,
.bento-theme-white .bento-category-pill {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

/* THEME 5: VIBRANT MINT / EMERALD CARD */
.bento-theme-mint {
    background: linear-gradient(145deg, #10B981 0%, #059669 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.35);
}
.bento-theme-mint .bento-card-media-box {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}
.bento-theme-mint .bento-card-item-title {
    color: #FFFFFF;
}
.bento-theme-mint .bento-card-item-subtitle {
    color: rgba(255, 255, 255, 0.95);
}
.bento-theme-mint .bento-card-corner-icon {
    color: #FFFFFF;
}
.bento-theme-mint .bento-category-pill {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

/* THEME 6: WARM GOLDEN AMBER CARD */
.bento-theme-amber {
    background: linear-gradient(145deg, #F59E0B 0%, #D97706 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.35);
}
.bento-theme-amber .bento-card-media-box {
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}
.bento-theme-amber .bento-card-item-title {
    color: #FFFFFF;
}
.bento-theme-amber .bento-card-item-subtitle {
    color: rgba(255, 255, 255, 0.95);
}
.bento-theme-amber .bento-card-corner-icon {
    color: #FFFFFF;
}
.bento-theme-amber .bento-category-pill {
    background: rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
}

/* ==========================================================================
   DYNAMIC THEME ADAPTATION FOR HERO SHOWCASE (CARD 1) & ASIDE (CARD 2)
   Allows the Main Showcase to inherit the clicked card's vibrant color!
   ========================================================================== */

/* THEME 1: VIBRANT ELECTRIC ORANGE */
.bento-hero-showcase.bento-theme-orange {
    background: linear-gradient(140deg, #FF5C00 0%, #FF6F1C 50%, #FF812F 100%) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 50px rgba(255, 92, 0, 0.45) !important;
}
.bento-hero-aside.bento-theme-orange {
    background: linear-gradient(145deg, #FFEBD9 0%, #FFD3B5 100%) !important;
    border-color: rgba(255, 92, 0, 0.4) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(255, 92, 0, 0.3) !important;
    color: #261102 !important;
}
.bento-hero-aside.bento-theme-orange .bento-aside-main-title { color: #261102 !important; }
.bento-hero-aside.bento-theme-orange .bento-aside-category { color: #5C2B05 !important; }
.bento-hero-aside.bento-theme-orange .bento-aside-likes-row { color: #261102 !important; }
.bento-hero-aside.bento-theme-orange .bento-sponsored-header { color: #5C2B05 !important; }
.bento-hero-aside.bento-theme-orange p { color: #261102 !important; }
.bento-hero-aside.bento-theme-orange .bento-sponsored-item {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(255, 92, 0, 0.22) !important;
}
.bento-hero-aside.bento-theme-orange .bento-sp-text strong { color: #261102 !important; }
.bento-hero-aside.bento-theme-orange .bento-sp-text span { color: #5C2B05 !important; }
.bento-hero-aside.bento-theme-orange .bento-sp-icon-box { background: #FF5C00 !important; color: #FFF !important; }
.bento-hero-showcase.bento-theme-orange .bento-back-circle-btn:hover { color: #FF5C00 !important; }

/* THEME 2: ROYAL SAPPHIRE BLUE */
.bento-hero-showcase.bento-theme-blue {
    background: linear-gradient(140deg, #1D4ED8 0%, #2563EB 50%, #3B82F6 100%) !important;
    border-color: rgba(191, 219, 254, 0.5) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 50px rgba(37, 99, 235, 0.5) !important;
}
.bento-hero-aside.bento-theme-blue {
    background: linear-gradient(145deg, #DBEAFE 0%, #BFDBFE 100%) !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(37, 99, 235, 0.3) !important;
    color: #0F172A !important;
}
.bento-hero-aside.bento-theme-blue .bento-aside-main-title { color: #0F172A !important; }
.bento-hero-aside.bento-theme-blue .bento-aside-category { color: #1E3A8A !important; }
.bento-hero-aside.bento-theme-blue .bento-aside-likes-row { color: #0F172A !important; }
.bento-hero-aside.bento-theme-blue .bento-sponsored-header { color: #1E3A8A !important; }
.bento-hero-aside.bento-theme-blue p { color: #0F172A !important; }
.bento-hero-aside.bento-theme-blue .bento-sponsored-item {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(37, 99, 235, 0.22) !important;
}
.bento-hero-aside.bento-theme-blue .bento-sp-text strong { color: #0F172A !important; }
.bento-hero-aside.bento-theme-blue .bento-sp-text span { color: #1E3A8A !important; }
.bento-hero-aside.bento-theme-blue .bento-sp-icon-box { background: #2563EB !important; color: #FFF !important; }
.bento-hero-showcase.bento-theme-blue .bento-back-circle-btn:hover { color: #2563EB !important; }

/* THEME 3: DEEP OBSIDIAN DARK */
.bento-hero-showcase.bento-theme-dark {
    background: linear-gradient(140deg, #181924 0%, #13141F 50%, #1C1E2B 100%) !important;
    border-color: rgba(255, 202, 101, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 45px rgba(255, 202, 101, 0.3) !important;
}
.bento-hero-aside.bento-theme-dark {
    background: linear-gradient(145deg, #1E202E 0%, #141520 100%) !important;
    border-color: rgba(255, 202, 101, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 202, 101, 0.2) !important;
    color: #FAF4EE !important;
}
.bento-hero-aside.bento-theme-dark .bento-aside-main-title { color: #FFCA65 !important; }
.bento-hero-aside.bento-theme-dark .bento-aside-category { color: rgba(255, 255, 255, 0.85) !important; }
.bento-hero-aside.bento-theme-dark .bento-aside-likes-row { color: #FAF4EE !important; }
.bento-hero-aside.bento-theme-dark .bento-sponsored-header { color: #FFCA65 !important; }
.bento-hero-aside.bento-theme-dark p { color: rgba(255, 255, 255, 0.85) !important; }
.bento-hero-aside.bento-theme-dark .bento-sponsored-item {
    background: rgba(255, 202, 101, 0.08) !important;
    border: 1px solid rgba(255, 202, 101, 0.25) !important;
}
.bento-hero-aside.bento-theme-dark .bento-sp-text strong { color: #FFFFFF !important; }
.bento-hero-aside.bento-theme-dark .bento-sp-text span { color: rgba(255, 255, 255, 0.78) !important; }
.bento-hero-aside.bento-theme-dark .bento-sp-icon-box { background: #FFCA65 !important; color: #140A06 !important; }
.bento-hero-showcase.bento-theme-dark .bento-back-circle-btn:hover { color: #140A06 !important; background: #FFCA65 !important; }

/* THEME 4: ROYAL AMETHYST PURPLE */
.bento-hero-showcase.bento-theme-purple,
.bento-hero-showcase.bento-theme-white {
    background: linear-gradient(140deg, #6D28D9 0%, #7C3AED 50%, #8B5CF6 100%) !important;
    border-color: rgba(221, 214, 254, 0.5) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 50px rgba(124, 58, 237, 0.5) !important;
}
.bento-hero-aside.bento-theme-purple,
.bento-hero-aside.bento-theme-white {
    background: linear-gradient(145deg, #EDE9FE 0%, #DDD6FE 100%) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(124, 58, 237, 0.3) !important;
    color: #1E1035 !important;
}
.bento-hero-aside.bento-theme-purple .bento-aside-main-title,
.bento-hero-aside.bento-theme-white .bento-aside-main-title { color: #1E1035 !important; }
.bento-hero-aside.bento-theme-purple .bento-aside-category,
.bento-hero-aside.bento-theme-white .bento-aside-category { color: #6D28D9 !important; }
.bento-hero-aside.bento-theme-purple .bento-aside-likes-row,
.bento-hero-aside.bento-theme-white .bento-aside-likes-row { color: #1E1035 !important; }
.bento-hero-aside.bento-theme-purple .bento-sponsored-header,
.bento-hero-aside.bento-theme-white .bento-sponsored-header { color: #6D28D9 !important; }
.bento-hero-aside.bento-theme-purple p,
.bento-hero-aside.bento-theme-white p { color: #1E1035 !important; }
.bento-hero-aside.bento-theme-purple .bento-sponsored-item,
.bento-hero-aside.bento-theme-white .bento-sponsored-item {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(124, 58, 237, 0.22) !important;
}
.bento-hero-aside.bento-theme-purple .bento-sp-text strong,
.bento-hero-aside.bento-theme-white .bento-sp-text strong { color: #1E1035 !important; }
.bento-hero-aside.bento-theme-purple .bento-sp-text span,
.bento-hero-aside.bento-theme-white .bento-sp-text span { color: #5B21B6 !important; }
.bento-hero-aside.bento-theme-purple .bento-sp-icon-box,
.bento-hero-aside.bento-theme-white .bento-sp-icon-box { background: #7C3AED !important; color: #FFF !important; }
.bento-hero-showcase.bento-theme-purple .bento-back-circle-btn:hover,
.bento-hero-showcase.bento-theme-white .bento-back-circle-btn:hover { color: #7C3AED !important; }

/* THEME 5: VIBRANT MINT / EMERALD */
.bento-hero-showcase.bento-theme-mint {
    background: linear-gradient(140deg, #047857 0%, #059669 50%, #10B981 100%) !important;
    border-color: rgba(167, 243, 208, 0.5) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 50px rgba(16, 185, 129, 0.5) !important;
}
.bento-hero-aside.bento-theme-mint {
    background: linear-gradient(145deg, #D1FAE5 0%, #A7F3D0 100%) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(16, 185, 129, 0.3) !important;
    color: #064E3B !important;
}
.bento-hero-aside.bento-theme-mint .bento-aside-main-title { color: #064E3B !important; }
.bento-hero-aside.bento-theme-mint .bento-aside-category { color: #047857 !important; }
.bento-hero-aside.bento-theme-mint .bento-aside-likes-row { color: #064E3B !important; }
.bento-hero-aside.bento-theme-mint .bento-sponsored-header { color: #047857 !important; }
.bento-hero-aside.bento-theme-mint p { color: #064E3B !important; }
.bento-hero-aside.bento-theme-mint .bento-sponsored-item {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
}
.bento-hero-aside.bento-theme-mint .bento-sp-text strong { color: #064E3B !important; }
.bento-hero-aside.bento-theme-mint .bento-sp-text span { color: #047857 !important; }
.bento-hero-aside.bento-theme-mint .bento-sp-icon-box { background: #059669 !important; color: #FFF !important; }
.bento-hero-showcase.bento-theme-mint .bento-back-circle-btn:hover { color: #059669 !important; }

/* THEME 6: WARM GOLDEN AMBER */
.bento-hero-showcase.bento-theme-amber {
    background: linear-gradient(140deg, #B45309 0%, #D97706 50%, #F59E0B 100%) !important;
    border-color: rgba(253, 230, 138, 0.5) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 50px rgba(245, 158, 11, 0.5) !important;
}
.bento-hero-aside.bento-theme-amber {
    background: linear-gradient(145deg, #FEF3C7 0%, #FDE68A 100%) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(245, 158, 11, 0.3) !important;
    color: #451A03 !important;
}
.bento-hero-aside.bento-theme-amber .bento-aside-main-title { color: #451A03 !important; }
.bento-hero-aside.bento-theme-amber .bento-aside-category { color: #78350F !important; }
.bento-hero-aside.bento-theme-amber .bento-aside-likes-row { color: #451A03 !important; }
.bento-hero-aside.bento-theme-amber .bento-sponsored-header { color: #78350F !important; }
.bento-hero-aside.bento-theme-amber p { color: #451A03 !important; }
.bento-hero-aside.bento-theme-amber .bento-sponsored-item {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(245, 158, 11, 0.22) !important;
}
.bento-hero-aside.bento-theme-amber .bento-sp-text strong { color: #451A03 !important; }
.bento-hero-aside.bento-theme-amber .bento-sp-text span { color: #78350F !important; }
.bento-hero-aside.bento-theme-amber .bento-sp-icon-box { background: #D97706 !important; color: #FFF !important; }
.bento-hero-showcase.bento-theme-amber .bento-back-circle-btn:hover { color: #D97706 !important; }

/* Pill badge inside card */
.bento-category-pill {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--bento-radius-pill);
    letter-spacing: 0.5px;
}

/* Tall & Standard Card Spans */
.bento-col-tall {
    grid-column: span 3;
    grid-row: span 2;
    min-height: 380px;
}

.bento-col-standard {
    grid-column: span 3;
    grid-row: span 1;
    min-height: 220px;
}

/* Card Visual Media Stage */
.bento-card-media-box {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: var(--bento-radius-sub);
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}

.bento-card-media-box .material-symbols-outlined {
    color: #FFFFFF;
}

.bento-card-media-box > div {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.bento-card-media-box span[style*="position:absolute"] {
    color: #FFFFFF !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.bento-card-media-box img {
    max-height: 110px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-item-card:hover .bento-card-media-box img {
    transform: scale(1.1);
}

.bento-card-info-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.bento-card-item-title {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 2px 0;
    line-height: 1.25;
}

.bento-card-item-subtitle {
    font-size: 12px;
    margin: 0;
    font-weight: 600;
}

.bento-card-corner-icon {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.bento-item-card:hover .bento-card-corner-icon {
    transform: translate(3px, -3px);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1200px) {
    .bento-hero-showcase { grid-column: span 12; grid-row: span 1; }
    .bento-hero-aside { grid-column: span 12; grid-row: span 1; }
    .bento-col-tall { grid-column: span 6; }
    .bento-col-standard { grid-column: span 6; }
}

@media (max-width: 768px) {
    .bento-viewport { padding: 80px 14px 40px; }
    .bento-inner-cards-row { grid-template-columns: 1fr; }
    .bento-col-tall { grid-column: span 12; }
    .bento-col-standard { grid-column: span 12; }
}