/* =========================================================
   HOUSE OF VALE — MOBILE POLISH
   ========================================================= */

@media (max-width: 767px) {

    html, body {
        overflow-x: hidden;
    }

    /* --- Header / navigation --- */
    .gh-head {
        background: linear-gradient(to bottom, rgba(17,16,17,.88), rgba(17,16,17,.25), transparent) !important;
    }

    .gh-head-inner {
        min-height: 72px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* Keep mobile controls clear and elegant */
    .gh-search,
    .gh-burger {
        position: relative;
        z-index: 20;
    }

    /* Add a restrained centered House of Vale wordmark on mobile */
    .gh-head-inner::after {
        content: "HOUSE OF VALE";
        position: absolute;
        left: 50%;
        top: 27px;
        transform: translateX(-50%);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 12px;
        line-height: 1;
        letter-spacing: .18em;
        white-space: nowrap;
        color: #EAE1D3;
        opacity: .94;
        pointer-events: none;
        z-index: 10;
    }

    /* --- Hero --- */
    .vale-hero,
    .hov-hero,
    .home-hero,
    .hero-video,
    .vale-cinematic-hero {
        min-height: auto !important;
        background: #111011 !important;
    }

    .vale-hero video,
    .hov-hero video,
    .home-hero video,
    .hero-video video,
    .vale-cinematic-hero video,
    .vale-hero img,
    .hov-hero img,
    .home-hero img,
    .hero-video img,
    .vale-cinematic-hero img {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* --- Global section breathing room --- */
    main section,
    .vale-section,
    .hov-section,
    .library-section,
    .study-section,
    .vault-section {
        scroll-margin-top: 76px;
    }

    /* Prevent editorial headings from spilling off phone screens */
    h1, h2, h3,
    .vale-title,
    .series-title,
    .reader-title {
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* --- Cards / grids --- */
    .vale-grid,
    .series-grid,
    .library-grid,
    .vault-grid,
    .study-grid,
    .obsessions-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Buttons --- */
    .vale-button,
    .vale-btn,
    .series-button,
    .reader-button,
    .vault-button,
    .study-button,
    a[class*="button"],
    a[class*="btn"] {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* --- Story reader --- */
    .reader-story,
    .study-reader,
    .gh-content {
        overflow-wrap: break-word;
    }

    .reader-story img,
    .study-reader img,
    .gh-content img,
    .gh-content video,
    .gh-content iframe {
        max-width: 100% !important;
    }

    /* Tables/code should scroll instead of breaking layout */
    .gh-content pre,
    .gh-content table {
        max-width: 100%;
        overflow-x: auto;
    }

    /* --- Footer --- */
    footer,
    .gh-foot {
        overflow: hidden;
    }
}

/* Very narrow phones */
@media (max-width: 390px) {
    .gh-head-inner::after {
        font-size: 10px;
        letter-spacing: .14em;
    }
}