/* assets/css/page.css */

/* Inner Page Layout */

/* Override Header for Inner Pages */
body .main-header {
    background-color: #fff;
    position: relative;
    /* Standard flow, sits above page header */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.page-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 30px 0;
    color: var(--text-white);
    margin: 3rem 0;
    position: relative;
    overflow: hidden;
}

.page-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: var(--font-header, 'Montserrat', sans-serif);
}

.breadcrumb {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.breadcrumb a {
    color: var(--text-white);
    text-decoration: none;
    transition: opacity 0.2s;
}

.breadcrumb a:hover {
    opacity: 1;
    text-decoration: underline;
}

.breadcrumb span {
    opacity: 0.7;
}

/* Page Container Layout */
.page-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    align-items: start;
}

/* Sidebar */
.page-sidebar {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px -1px var(--black-alpha-05);
    overflow: hidden;
    border: 1px solid var(--border-color);
    position: sticky;
    top: 120px;
    /* Sticky below header */
}

.sidebar-widget {
    margin-bottom: 0;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    border-bottom: 1px solid var(--border-color);
}

.sidebar-menu li:last-child {
    border-bottom: none;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
    background: var(--bg-subtle);
    color: var(--primary-color);
    padding-left: 1.8rem;
    /* Slide effect */
}

.sidebar-menu a i {
    font-size: 0.8rem;
    opacity: 0.5;
}

/* Content Area */
.page-content {
    background: #fff;
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px -1px var(--black-alpha-05);
    border: 1px solid var(--border-color);
    min-height: 400px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-main);
}

.page-content h2,
.page-content h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

.page-content p {
    margin-bottom: 1.5rem;
}

.page-content img {
    border-radius: var(--radius-sm);
    margin: 1rem 0;
}

/* Responsive */
@media (max-width: 992px) {
    .page-container {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        gap: 2rem;
    }

    .page-sidebar {
        position: static;
        order: 2;
        /* Content first? Or sidebar first? Usually content first on mobile, or sidebar has nav. Let's keep Sidebar TOP if nav, usually. Or Bottom. User didn't specify. Let's stack sidebar under content for reading flow if it's navigation, but if it's vital... Standard is often Sidebar First if it's nav, but Content First for SEO/User intent. Let's put Sidebar AFTER content on mobile defined by order, or keep standard source order. */
        /* Let's stick to source order: Sidebar is Left in DOM? Layout usually Sidebar Left -> Content Right. */
        /* If we want Content first visually on mobile but second in source: */
        order: 1;
        /* Keep at top? */
    }
}

/* News Meta Bar */
.news-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-sm);
    margin-bottom: 2rem;
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 1rem;
}

.meta-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    /* Allow left side to take up space */
}

.meta-row-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.meta-row-bottom {
    display: flex;
    align-items: center;
}

.department-badge {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: -2px;
    /* Slight alignment fix */
}

.department-badge i {
    font-size: 1rem;
    color: #94a3b8;
    margin-right: 0.25rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 500;
}

.meta-item i {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.meta-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    align-self: flex-start;
    /* Align to top if multi-line */
    padding-top: 0.25rem;
    /* Optical alignment */
}

.share-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.share-buttons-mini {
    display: flex;
    gap: 0.5rem;
}

.share-btn-mini {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
    background: transparent;
}

.share-btn-mini:hover {
    transform: translateY(-2px);
    color: white;
    border-color: transparent;
}

.share-btn-mini {
    /* ... existing props ... */
    cursor: pointer;
}

.share-btn-mini.facebook:hover {
    background: #1877f2;
}

.share-btn-mini.twitter:hover {
    background: #000000;
}

.share-btn-mini.whatsapp:hover {
    background: #25d366;
}

.share-btn-mini.email:hover {
    background: #ea4335;
}

.share-btn-mini.copy-link:hover {
    background: #64748b;
}

@media (max-width: 768px) {
    .news-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .meta-right {
        width: 100%;
        justify-content: space-between;
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
    }
}