.mobile-explore {
    display: none;
}

@media (max-width: 760px) {
    .home-page .site-header.dracinmax-header {
        position: relative;
        height: 74px;
        padding: 0 4%;
        border: 0;
    }

    .home-page .dracinmax-header .brand {
        gap: 9px;
        font-size: clamp(23px, 6vw, 32px);
        letter-spacing: -.8px;
    }

    .home-page .dracinmax-header .brand-symbol {
        width: 35px;
        height: 38px;
        border-radius: 10px;
        font-size: 22px;
    }

    .home-page .dracinmax-header .header-actions {
        flex: 0 0 auto;
        min-width: 0;
    }

    .home-page .header-actions .search-trigger {
        display: none;
    }

    .home-page .mobile-home-profile {
        display: grid;
        place-items: center;
        width: 39px;
        height: 39px;
        border: 1px solid #ffffff06;
        border-radius: 50%;
        background: #20242f;
        color: #f7f8fb;
    }

    .home-page .mobile-home-profile svg {
        width: 23px;
        height: 23px;
    }

    .home-page .hero-featured,
    .home-page .content-wrapper {
        display: none;
    }

    .mobile-explore {
        display: block;
        padding: 0 4% 25px;
    }

    .explore-search {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 51px;
        padding: 12px 17px;
        border: 1px solid #ffffff03;
        border-radius: 30px;
        background: #171b24;
        color: #aeb3c2;
    }

    .explore-search svg {
        width: 23px;
        height: 23px;
    }

    .explore-search input {
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: white;
        font-size: 14px;
    }

    .explore-search input::placeholder {
        color: #8c93a3;
    }

    .explore-tab-toolbar {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 13px 0 11px;
    }

    .explore-genres {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        min-width: 0;
        flex: 1;
        margin: 0;
        padding: 3px 0;
        scrollbar-width: none;
    }

    .explore-genres::-webkit-scrollbar {
        display: none;
    }

    .explore-genres button {
        min-height: 40px;
        flex-shrink: 0;
        padding: 9px 17px;
        border: 1px solid #292d3a;
        border-radius: 25px;
        background: #0e1117;
        color: #eeeff3;
        font-size: 13px;
        font-weight: 600;
    }

    .explore-genres [aria-pressed="true"] {
        border-color: #ff075c;
        background: #ff0061;
        box-shadow: 0 3px 14px #ff00612a;
        color: white;
    }

    .explore-filter-open {
        display: grid;
        place-items: center;
        width: 39px;
        height: 39px;
        flex-shrink: 0;
        padding: 9px;
        border: 1px solid #303643;
        border-radius: 12px;
        background: #141922;
        color: #d4d9e5;
    }

    .explore-filter-open[aria-pressed="true"] {
        border-color: #ff0061;
        color: #ff6a9e;
    }

    .explore-filter-open svg {
        width: 19px;
        height: 19px;
    }

    .explore-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
    }

    .explore-card {
        position: relative;
        min-width: 0;
    }

    .explore-poster {
        position: relative;
        display: block;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        border: 1px solid #ffffff13;
        border-radius: 9px;
        background: #20131b;
        isolation: isolate;
    }

    .explore-art {
        position: absolute;
        z-index: -2;
        top: 0;
        left: 50%;
        height: 100%;
        aspect-ratio: 1;
        transform: translateX(-50%);
        background-image: url("../images/drama-posters.png");
        background-size: 300% 300%;
        background-position: var(--art-x) var(--art-y);
    }

    .explore-poster::after {
        position: absolute;
        z-index: -1;
        inset: 40% 0 0;
        background: linear-gradient(transparent, #09050cba);
        content: "";
    }

    .explore-episodes {
        position: absolute;
        top: 9px;
        left: 8px;
        padding: 5px 8px;
        border-radius: 4px;
        background: #ff075d;
        font-size: 12px;
        font-weight: 700;
    }

    .explore-poster-title {
        position: absolute;
        right: 9px;
        bottom: 17px;
        left: 9px;
        color: #fff7f4;
        font-family: Georgia, serif;
        font-size: clamp(23px, 6.4vw, 40px);
        font-style: italic;
        line-height: 1.03;
        text-align: center;
        text-shadow: 0 2px 10px #000b;
    }

    .explore-card-info {
        position: relative;
        padding: 8px 18px 0 3px;
    }

    .explore-card h2 {
        display: -webkit-box;
        overflow: hidden;
        margin: 0 0 4px;
        font-size: clamp(13px, 3.6vw, 18px);
        font-weight: 600;
        line-height: 1.3;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .explore-card p {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
        margin: 0;
        color: #a7adbb;
        font-size: clamp(10px, 2.9vw, 14px);
        line-height: 1.45;
    }

    .explore-card p span {
        color: #ff2f82;
    }

    .explore-card-menu {
        position: absolute;
        top: 6px;
        right: -5px;
    }

    .explore-card-menu summary {
        display: grid;
        place-items: center;
        width: 24px;
        height: 32px;
        list-style: none;
        font-size: 23px;
        cursor: pointer;
    }

    .explore-card-menu summary::-webkit-details-marker {
        display: none;
    }

    .explore-card-options {
        position: absolute;
        z-index: 3;
        top: 100%;
        right: 4px;
        width: 175px;
        padding: 6px;
        border: 1px solid #35303e;
        border-radius: 8px;
        background: #1a1820;
        box-shadow: 0 8px 25px #0007;
    }

    .explore-card-options a,
    .explore-card-options button {
        display: block;
        width: 100%;
        padding: 11px 9px;
        font-size: 12px;
        text-align: left;
    }

    .explore-more {
        display: block;
        width: 100%;
        margin-top: 25px;
        padding: 14px;
        border: 1px solid #30303b;
        border-radius: 9px;
        color: #dedbe5;
        font-size: 13px;
    }
}