/* Header Styles */

/* Mobile-only: overlay the recipe title on top of the hero image (card-like) */
.hero-title-mobile { 
    display: none; 
}

@media (max-width: 640px) {
    .page-hero .hero-inner { 
        display:block; 
        padding:0rem !important; 
    }
    
    .page-hero .hero-image-wrapper img { 
        width:100%; 
        height:200px; 
        object-fit:cover; 
        border-radius:0; 
        display:block; 
    }
    
    .page-hero .hero-left { 
        display:none; 
    }
    
    .hero-title-mobile {
        display:block;
    }
    
    .hero-image-wrapper .tile-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
        pointer-events: none;
    }
    
    .hero-image-wrapper .tile-title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.75rem 1rem;
        font-weight: 700;
        font-size: 1.5rem;
        color: #fff;
        line-height: 1.3;
        z-index: 2;
        text-shadow: 0 2px 8px rgba(0,0,0,0.3);
        overflow: hidden;
        /* white-space: nowrap;
        text-overflow: ellipsis; */
    }
    
    /* Ensure any bylines/meta hidden for compact card look */
    .page-hero .hero-byline, 
    .page-hero .hero-meta, 
    .page-hero .hero-rating { 
        display:none; 
    }
}