/* News Detail Tablet Styles (768px - 1199px) */
:root {
    --bg-light: #fdfcfb;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --accent-gold: #cba174;
    --border-color: #e2e8f0;
}

body {
    background-color: var(--bg-light);
    color: var(--text-primary);
    font-family: 'Noto Sans SC', sans-serif;
}

/* Hero Section */
.article-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 180px 0 80px;
    /* Increased to prevent nav overlap */
    color: white;
    position: relative;
}

.article-hero .container {
    margin: 0 50px;
    width: auto;
    max-width: none;
}



/* Sticky Back Button - Matches Event Detail Tablet */
.back-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    pointer-events: auto;
}

.sticky-nav-container {
    position: sticky;
    top: 140px;
    /* Tablet nav offset */
    z-index: 100;
    pointer-events: none;
    margin-bottom: 30px;
    margin-top: 40px;
    /* Center vertically */
    width: 90%;
    /* Match article-container width */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 0 40px 0 6px;
    /* Reduced for optical alignment */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 90%;
    /* Explicit width */
    text-align: left;
}

.back-link-btn:hover {
    background: var(--accent-gold);
    color: white;
    border-color: var(--accent-gold);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    transform: translateX(-5px);
}

/* Old Back Link Removed */

.article-category {
    display: inline-block;
    background: rgba(203, 161, 116, 0.2);
    backdrop-filter: blur(8px);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    border: 1px solid rgba(203, 161, 116, 0.5);
    color: #f0e6d8;
    font-weight: 600;
}

.article-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    margin-bottom: 30px;
    font-weight: 700;
    color: white;
    line-height: 1.3;
}

.article-meta {
    display: flex;
    gap: 30px;
    font-size: 1rem;
    color: #cbd5e1;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Main Content */
.article-container {
    background: white;
    margin: 40px auto;
    max-width: 90%;
    padding: 60px 40px;
    position: relative;
    z-index: 10;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.article-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #334155;
}

.article-body p {
    margin-bottom: 25px;
}

.article-body h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 40px 0 25px;
    font-weight: 700;
}

.article-body blockquote {
    border-left: 4px solid var(--accent-gold);
    margin: 35px 0;
    padding: 20px 30px;
    background: #f8fafc;
    font-style: italic;
    font-size: 1.2rem;
    color: #475569;
}

.article-source {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* Related News */
.related-section {
    padding: 70px 0;
    margin: 0 50px;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 40px;
    text-align: center;
}

.related-grid {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding-bottom: 20px;
    /* Space for scrollbar/shadow */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar for cleaner look but keep functionality */
    scrollbar-width: none;
}

.related-grid::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1024px) {

    /* Reset to grid on larger screens if desired, but user asked for swipe on tablet. 
       Actually, standard "tablet" range usually wants swipe. 
       Let's keep swipe for all tablet sizes as requested. */
    .related-grid {
        /* Keep flex logic */
    }
}

.related-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    /* Flex sizing for scroll */
    min-width: 320px;
    flex: 0 0 320px;
    scroll-snap-align: start;
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.related-image {
    height: 190px;
    background-color: #e2e8f0;
    background-size: cover;
    background-position: center;
}

.related-content {
    padding: 25px;
}

.related-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: block;
}

.related-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 15px;
}

.read-link {
    font-size: 0.9rem;
    color: var(--accent-gold);
    font-weight: 600;
    text-decoration: none;
}