*{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
html, body { overflow-x: hidden; max-width: 100vw; }
body{margin:0;background:var(--color-bg);} /* Removed padding-bottom */

/* Header */
.header{background:var(--color-primary);padding:10px 30px;display:flex;justify-content:space-between;align-items:center; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.header-left { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.logo img { height: 50px; vertical-align: middle; }
.hamburger { display: none !important; font-size: 24px; cursor: pointer; color: #000; }

.nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav > a, .nav-item-container > a {margin:0 10px;text-decoration:none;color:#000;font-weight:600; white-space: nowrap;}
.subscribe-btn{background:var(--color-secondary);color:#fff;border:none;padding:8px 15px;border-radius:20px; cursor: pointer; transition: background 0.3s;}
.subscribe-btn:hover { background: #cc0000; }

.mobile-only-btn { display: none; }

/* Hero */
.hero{background:url('https://picsum.photos/1600/700?india') center/cover no-repeat;padding:110px 30px 80px;color:#fff; position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;}
.hero::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(120deg, rgba(0,0,0,0.7), rgba(0,0,0,0.2)); }
.hero-content{max-width:600px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px;}
.hero h1{font-size:42px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); margin: 0;}
.hero-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.hero-stats { position: relative; z-index: 1; display: flex; gap: 18px; background: rgba(255,255,255,0.12); padding: 16px 20px; border-radius: 18px; backdrop-filter: blur(6px); }
.hero-stats div { display: flex; flex-direction: column; gap: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.hero-stats strong { font-size: 22px; letter-spacing: 0; }
.read-btn{background:var(--color-secondary);color:#fff;border:none;padding:12px 25px;border-radius:25px;font-size:16px; cursor: pointer; margin-top: 20px;}
.read-btn:hover { background: #cc0000; }

/* Container */
.container{display:flex;gap:20px;padding:30px;max-width:1200px;margin:0 auto;}
.content-area{flex:3;display:flex;flex-direction:column;gap:30px;}
.featured{flex:3}
.section-block { margin-bottom: 10px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.section-header h2 { margin: 0; font-size: 24px; }
.section-link { font-size: 14px; text-decoration: none; color: var(--color-secondary); font-weight: 600; }
.section-link:hover { color: #cc0000; }
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:#fff;border-radius:10px;overflow:hidden;position:relative; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.2s;}
.card:hover { transform: translateY(-5px); }
.card img{width:100%; height: 200px; object-fit: cover;}
.tag{position:absolute;top:10px;left:10px;background:var(--color-primary);padding:5px 10px;border-radius:12px;font-size:12px;font-weight:bold}
.card h3{padding:15px 15px 0; margin-top: 0;}
.card p{padding:0 15px 15px;color:#555}

/* Sidebar */
.sidebar{flex:1;background:transparent; height: fit-content; position: sticky; top: 20px;}
.sidebar input{width:100%;padding:10px;margin:10px 0;border:1px solid #ddd;border-radius:5px;background:#fff;}
.sidebar button{width:100%;padding:10px;background:var(--color-secondary);color:#fff;border:none;border-radius:20px; cursor: pointer;}
.sidebar button:hover { background: #cc0000; }
.sidebar-widget { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.08); }
.sidebar-widget + .sidebar-widget { margin-top: 20px; }
.author-widget { text-align: center; }
.author-widget img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.author-widget p { color: #555; font-size: 14px; }
.sidebar-post { display: flex; gap: 16px; align-items: center; text-decoration: none; color: inherit; margin-top: 16px; padding: 10px; border-radius: 12px; transition: background 0.2s ease, transform 0.2s ease; }
.sidebar-post:hover { background: #f8f9fa; transform: translateX(5px); }
.sidebar-post img { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.sidebar-post h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--color-text-main); }
.sidebar-post span { font-size: 12px; color: #666; font-weight: 500; display: block; }
.sidebar-placeholder { width: 80px; height: 80px; border-radius: 10px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #888; flex-shrink: 0; }

/* Recommendations */
.recommendation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.recommendation-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.recommendation-media { position: relative; }
.recommendation-media img { width: 100%; height: 180px; object-fit: cover; }
.recommendation-type { position: absolute; top: 12px; left: 12px; background: var(--color-primary); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.recommendation-body { padding: 15px; }
.recommendation-location { color: #555; font-size: 13px; margin-bottom: 8px; }
.recommendation-rating { font-weight: 700; color: var(--color-secondary); margin-top: 10px; }

/* Home intro */
.home-intro { max-width: 1200px; margin: 50px auto 30px; padding: 0 30px; display: grid; grid-template-columns: 2.2fr 1fr; gap: 24px; }
.home-intro-main { background: #fff; padding: 30px; border-radius: 20px; box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
.home-intro-main h2 { margin-top: 0; }
.home-intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-top: 20px; }
.intro-card { background: var(--color-bg); border-radius: 16px; padding: 18px; display: grid; gap: 10px; }
.intro-card i { font-size: 24px; color: var(--color-secondary); }
.intro-card h3 { margin: 0; font-size: 16px; }
.intro-card p { margin: 0; color: #555; font-size: 14px; }
.home-intro-feature { background: var(--color-primary); padding: 30px; border-radius: 20px; display: flex; flex-direction: column; gap: 12px; }
.home-intro-feature span { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 700; color: #5a4b00; }
.home-intro-feature h3 { margin: 0; }
.home-intro-feature p { margin: 0; color: #4a3b00; }

/* Page layouts */
.page-hero { background: var(--color-primary); padding: 60px 30px; text-align: center; }
.page-hero-content h1 { margin: 0 0 10px; font-size: 34px; }
.page-hero-content p { margin: 0; font-size: 16px; }
.page-content { width: 100%; }
.content-card { background: #fff; padding: 24px; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.author-card { background: #fff; padding: 24px; border-radius: 14px; display: flex; gap: 24px; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.author-card img { width: 180px; height: 180px; object-fit: cover; border-radius: 16px; }
.author-details h2 { margin-top: 0; }
.category-hero { background: #fff5cc; padding: 50px 30px; text-align: center; border-bottom: 1px solid #f0d87a; }
.category-hero-content { max-width: 720px; margin: 0 auto; }
.category-hero-content h1 { margin: 10px 0; font-size: 36px; }
.category-hero-content p { margin: 0; color: #5a4b00; }
.category-pill { display: inline-block; background: var(--color-primary); padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }

/* Recommendation detail page */
.recommendation-list { display: flex; flex-direction: column; gap: 30px; }
/* Updated: align-items start to prevent stretching of image column */
.recommendation-detail { background: #fff; border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.4fr; box-shadow: 0 4px 10px rgba(0,0,0,0.08); align-items: start; }

/* Full View Specifics (Option B - Clean Split) */
.recommendation-detail.full-view {
    grid-template-columns: 1fr 1fr;
    box-shadow: none;
    border: 1px solid #eee;
    background: #fff;
    align-items: stretch; /* Stretch to make sticky work better */
}
.recommendation-detail.full-view .recommendation-detail-media {
    background: #fdfdfd;
    padding: 20px;
    border-right: 1px solid #eee;
}
.recommendation-detail.full-view .recommendation-detail-media img:first-of-type {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.recommendation-detail.full-view .recommendation-detail-body {
    padding: 40px;
}
.recommendation-detail.full-view h2 {
    font-size: 2.2rem;
    margin-top: 0;
    color: #1a1a1a;
}
.recommendation-detail.full-view .recommendation-description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
    margin-top: 25px;
}

/* Updated: removed height:100% and added aspect-ratio */
.recommendation-detail-media { position: relative; }
.recommendation-detail-media img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.recommendation-detail-body { padding: 24px; }
.clickable-card { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.clickable-card:hover { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }
.recommendation-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.recommendation-chip { display: inline-block; background: var(--color-primary); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-top: 6px; }
.recommendation-score { text-align: right; font-size: 14px; font-weight: 700; color: var(--color-secondary); }
.recommendation-score .stars { color: #ffb703; margin-bottom: 4px; }
.recommendation-video { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-secondary); font-weight: 600; margin-top: 12px; }
.recommendation-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0; }
.recommendation-meta-card { background: var(--color-bg); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.recommendation-meta-card span { color: #666; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.recommendation-meta-card strong { color: var(--color-text-main); }
.recommendation-gallery-section { margin-top: 18px; }
.recommendation-gallery-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.recommendation-gallery-header h3 { margin: 0; }
.recommendation-gallery-header p { margin: 4px 0 0; color: #666; font-size: 13px; }
.recommendation-gallery-toggle { display: inline-flex; gap: 8px; }
.gallery-toggle { border: 1px solid #ddd; background: #fff; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; }
.gallery-toggle.active { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.recommendation-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 16px; }
.recommendation-gallery img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; aspect-ratio: auto; }
.recommendation-gallery.is-slider { display: flex; overflow-x: auto; padding-bottom: 8px; }
.recommendation-gallery.is-slider img { flex: 0 0 180px; height: 120px; }
.recommendation-description { color: #333; line-height: 1.7; }
.share-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    font-size: 14px;
}
.share-actions span { font-weight: 700; color: #444; }
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    background: #f0f0f0;
    color: #333;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.share-btn i { font-size: 14px; }
.share-btn.whatsapp { background: #25d366; color: #fff; }
.share-btn.facebook { background: #1877f2; color: #fff; }
.share-btn.instagram { background: #e1306c; color: #fff; }
.share-btn.copy { background: #333; color: #fff; }
.share-btn:hover { opacity: 0.9; }

/* Post detail page */
.post-header-wrapper {
    background: radial-gradient(circle at top, rgba(255, 204, 0, 0.25), #ffffff 70%);
    padding: 40px 0 24px;
    border-bottom: 1px solid rgba(240, 216, 122, 0.6);
}
.post-header-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.post-header-content h1 {
    margin: 0;
    font-size: 40px;
    color: var(--color-text-main);
    line-height: 1.2;
}
.post-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.post-category-link { text-decoration: none; }
.post-tag {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #5a4b00;
    font-weight: 700;
}
.post-meta {
    color: #5f5f5f;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.9);
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.05);
}
.single-post-container { display: flex; gap: 30px; margin-top: 30px; align-items: flex-start; }
.post-content {
    flex: 3;
    background: #fff;
    padding: 34px;
    border-radius: 20px;
    box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}
.post-featured-image {
    width: 100%;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.content-body { line-height: 1.8; font-size: 1.05rem; color: #333; }
.content-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 15px 0; }
.content-body h2, .content-body h3 { margin-top: 30px; }
.post-tags { margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; }
.post-tag-badge { background: #ddd; padding: 5px 12px; border-radius: 999px; margin-right: 6px; font-size: 0.85rem; color: #333; display: inline-block; }
.post-sidebar { flex: 1; }
.related-posts { margin-top: 15px; }
.related-card { margin-bottom: 20px; background: #fff; padding: 12px; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.related-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
.related-card h4 { margin: 10px 0 0; font-size: 1rem; }
.post-author {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}
.post-author-avatar img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
}
.author-placeholder {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #5a4b00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.post-author-details h3 { margin: 4px 0 6px; }
.post-author-label { margin: 0; text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em; color: #888; }
.post-form-card {
    margin-top: 32px;
    padding: 24px;
    border-radius: 16px;
    background: #fff5cc;
    box-shadow: inset 0 0 0 1px rgba(240, 216, 122, 0.6);
}
.post-form-card h3 { margin-top: 0; }
.post-form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.post-form-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #333; }
.post-form-field input,
.post-form-field textarea,
.post-form-field select {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    background: #fff;
}
.post-form-submit {
    margin-top: 16px;
    background: var(--color-secondary);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
}
.post-form-submit:hover { background: #cc0000; }
.post-form-alert { margin: 12px 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.post-form-alert.success { background: #e8f5e9; color: #1b5e20; }
.post-form-alert.error { background: #ffebee; color: #b71c1c; }

.ad-slot {
    margin: 20px auto;
    border-radius: 16px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    text-align: center;
    max-width: 100%; /* Constrain width */
    overflow: hidden; /* Hide overflow */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100px; /* Reduce layout shift */
    box-sizing: border-box;
}
.ad-slot img,
.ad-slot video {
    max-width: 100% !important;
    border-radius: 12px;
    height: auto;
}
.ad-slot iframe,
.ad-slot ins {
    max-width: 100% !important;
    border-radius: 12px;
}
.ad-slot-full { margin: 24px auto; width: 100%; }
.ad-slot-inline { margin: 24px 0; width: 100%; }
.ad-slot-sticky { position: sticky; top: 20px; }

/* Side Drawer */
.side-drawer-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 998;
    display: none; opacity: 0; transition: opacity 0.3s;
}
.side-drawer-overlay.active { display: block; opacity: 1; }

.side-drawer {
    position: fixed; top: 0; left: -280px; width: 280px; height: 100%;
    background: #fff; z-index: 999;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transition: left 0.3s ease-in-out;
    display: flex; flex-direction: column;
}
.side-drawer.active { left: 0; }

.drawer-header {
    background: var(--color-primary); padding: 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.drawer-logo { height: 40px; }
.close-btn { font-size: 24px; cursor: pointer; color: #d40000; }

.drawer-nav { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.drawer-nav a {
    text-decoration: none; color: #333; font-size: 18px; font-weight: 600;
    display: flex; align-items: center; gap: 10px; padding: 10px;
    border-radius: 8px; transition: background 0.3s;
}
.drawer-nav a:hover { background: #fff5cc; color: var(--color-secondary); }
.drawer-nav i { color: var(--color-secondary); width: 30px; text-align: center; }

.drawer-actions { padding: 20px; border-top: 1px solid #ddd; margin-top: auto; }
.drawer-actions .subscribe-btn { width: 100%; margin-bottom: 20px; display: block; }
.social-icons { display: flex; justify-content: center; gap: 20px; }
.social-icons a { color: #555; font-size: 24px; }
.social-icons a:hover { color: var(--color-secondary); }

/* Footer */
.main-footer {
    background: #222; color: #fff; padding: 40px 20px 20px;
    margin-top: 40px;
}
.footer-container {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; text-align: left;
}
.footer-col h4 { color: var(--color-primary); margin-bottom: 20px; font-size: 18px; }
.footer-col p { color: #ddd; font-size: 14px; line-height: 1.6; margin: 10px 0; }
.footer-col a { display: block; color: #ccc; text-decoration: none; margin-bottom: 8px; font-size: 14px; }
.footer-col a:hover { color: var(--color-primary); }
.quick-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }
.quick-links-grid a { margin-bottom: 8px; display: block; }

.footer-social { display: flex; gap: 15px; margin-top: 15px; }
.footer-social a { font-size: 20px; display: inline-block; margin-bottom: 0; }

.footer-subscribe input {
    width: 100%; padding: 10px; border: none; border-radius: 5px; margin-bottom: 10px;
}
.footer-subscribe button {
    width: 100%; padding: 10px; background: var(--color-secondary); color: #fff; border: none; border-radius: 20px; cursor: pointer;
}
.footer-subscribe button:hover { background: #cc0000; }

.footer-bottom {
    margin-top: 40px; border-top: 1px solid #444; padding-top: 20px;
    text-align: center; font-size: 13px; color: #888;
}
.footer-links-bottom { margin: 10px 0; }
.footer-links-bottom a { display: inline; margin: 0 10px; color: #fff; font-weight: bold; }

.footer-credit {
    margin-top: 15px; padding-top: 15px; border-top: 1px solid #333;
    font-size: 12px;
}
.footer-credit a { display: inline; color: var(--color-primary); }

/* Mobile Bottom Nav */
.mobile-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: #fff; border-top: 1px solid #ddd;
    z-index: 900;
}
.nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px 0; text-decoration: none; color: #555; font-size: 11px;
}
.nav-item i { font-size: 20px; margin-bottom: 5px; }
.nav-item:hover, .nav-item.active { color: var(--color-secondary); }

/* Media Queries */
@media(max-width:768px){
  body { padding-bottom: 80px; } /* Increased padding for better gap */
  .nav{display:none} /* Hide desktop nav */
  .mobile-only-btn { display: block; }
  .hamburger { display: block !important; }
  .container{flex-direction:column; padding: 15px;}
  .hero{padding:60px 20px; flex-direction: column; align-items: flex-start;}
  .hero h1{font-size:32px; line-height: 1.2;}
  .hero-stats { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .home-intro { grid-template-columns: 1fr; padding: 0 15px; margin-bottom: 20px; }
  .mobile-nav{display:flex; height: 60px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05);}
  .nav-item i { font-size: 22px; }
  .sidebar { position: static; margin-top: 20px; }
  .author-card { flex-direction: column; text-align: center; padding: 20px; }
  .recommendation-detail, .recommendation-detail.full-view { grid-template-columns: 1fr; }
  .recommendation-detail.full-view .recommendation-detail-media { padding: 0; border-right: none; border-bottom: 1px solid #eee; }
  .recommendation-detail.full-view .recommendation-detail-media img:first-of-type { border-radius: 0; }
  .recommendation-detail.full-view .recommendation-detail-body { padding: 20px; }
  .recommendation-detail.full-view h2 { font-size: 1.8rem; }
  .single-post-container { flex-direction: column; gap: 20px; margin-top: 20px; }
  .post-content { padding: 15px; border-radius: 12px; box-shadow: none; border: 1px solid #eee; overflow-wrap: break-word; word-wrap: break-word; }
  .content-body { font-size: 1.1rem; line-height: 1.7; overflow-wrap: break-word; }
  .post-header-wrapper { padding: 30px 15px; }
  .post-header-content h1 { font-size: 30px; }
  .post-header-meta { justify-content: flex-start; }
  .category-hero-content h1 { font-size: 28px; }
  .post-author { flex-direction: column; text-align: center; }
  .share-actions { gap: 8px; }
  .share-btn { padding: 8px 12px; }
  .share-btn span { display: none; }

  /* Optimize Ad Slot Spacing on Mobile */
  .ad-slot { padding: 5px; }

  /* Better Mobile Cards */
  .card img { height: 220px; }
  .card h3 { font-size: 1.2rem; }
}

@media(min-width:769px) {
    .side-drawer, .side-drawer-overlay { display: none !important; }
}

/* Dropdown Menu */
.nav-item-container { position: relative; display: inline-block; }
.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    z-index: 1000;
    border-radius: 8px;
    overflow: hidden;
    padding: 8px 0;
}
.nav-item-container:hover .nav-dropdown { display: block; }
.nav-dropdown a {
    display: block;
    margin: 0;
    padding: 10px 16px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
}
.nav-dropdown a:hover {
    background: var(--color-bg);
    color: var(--color-secondary);
}
/* Ensure mobile drawer supports nested items if needed, or just list them */
.drawer-nav .sub-item {
    font-size: 16px;
    padding-left: 30px;
    color: #555;
}
.category-hero { position: relative; }

/* Category Hero Fixes */
.category-hero {
    position: relative;
    min-height: 300px;
    max-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.category-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 0;
}

/* Recommendation Filters */
.recommendation-filters { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.filter-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.filter-item { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.filter-item label { font-size: 13px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.05em; }
.filter-item select { padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: #fafafa; outline: none; transition: border-color 0.2s; }
.filter-item select:focus { border-color: var(--color-secondary); background: #fff; }

/* Recommendation Card Updates */
.media-badges { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.price-badge { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.7); color: #fff; padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 13px; backdrop-filter: blur(4px); }
.meta-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.city-chip { display: inline-block; background: #eee; color: #444; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }

/* Image Ratio Fix */
.recommendation-detail-media img { object-fit: cover; aspect-ratio: 3/4; height: auto; }
/* For desktop list view, we want a fixed height or ratio, but keep 3/4 for detail view */
@media(min-width: 769px) {
    .recommendation-detail:not(.full-view) .recommendation-detail-media img { height: 100%; min-height: 250px; aspect-ratio: unset; }
    .recommendation-detail.full-view .recommendation-detail-media img { aspect-ratio: 3/4; }
}

/* Detail Page Elements */
.action-buttons { margin-top: 20px; }
.btn-direction { display: inline-flex; align-items: center; gap: 10px; background: var(--color-secondary); color: #fff; padding: 12px 20px; border-radius: 999px; text-decoration: none; font-weight: 600; transition: background 0.3s, transform 0.2s; }
.btn-direction:hover { background: #b30000; transform: translateY(-2px); }
.recommendation-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; margin-top: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.recommendation-video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Video Facade */
.video-facade {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.video-facade:hover img { opacity: 0.6; }
.video-facade .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255,0,0,0.9);
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.video-facade:hover .play-btn { transform: translate(-50%, -50%) scale(1.1); background: #f00; }

/* New Gallery Location */
.recommendation-full-gallery {
    margin-top: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}