/* ===================================================================
   EVENTPRO - News Detail Page Styles (news-detail.css)
   =================================================================== */

/* ===== POST HERO ===== */
        .post-hero {
            position: relative;
            height: 50vh; min-height: 380px;
            padding-top: 80px;
            display: flex; align-items: center; justify-content: center;
            background: var(--dark); overflow: hidden;
        }
        .post-hero-bg {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: cover; filter: brightness(0.22);
        }
        .post-hero-content {
            position: relative; z-index: 2; text-align: center;
            color: var(--white); max-width: 800px; padding: 0 20px;
        }
        .post-hero-content .breadcrumb-nav {
            margin-bottom: 16px;
        }
        .post-hero-content .breadcrumb {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
            gap: 0;
        }
        .post-hero-content .breadcrumb a {
            color: #e63946;
        }
        .post-hero-content .breadcrumb-nav .breadcrumb > span > span:last-child a {
            color: rgba(255,255,255,0.5);
        }
        .post-hero-content .breadcrumb-nav .breadcrumb > span > span:last-child a:hover {
            color: var(--white);
        }
        /*.post-hero-content .breadcrumb-item {
            font-size: 0.82rem;
            letter-spacing: 0.5px;
        }
        .post-hero-content .breadcrumb-item + .breadcrumb-item::before {
            content: "/";
            padding: 0 8px;
            color: rgba(255,255,255,0.4);
        }
        .post-hero-content .breadcrumb-item a {
            color: var(--red);
            transition: 0.3s;
        }
        .post-hero-content .breadcrumb-item a:hover {
            color: var(--white);
        }
        .post-hero-content .breadcrumb-item.active {
            color: rgba(255,255,255,0.5);
        }*/

        .post-hero-content .post-category {
            display: inline-block; background: var(--red); color: var(--white);
            font-size: 0.65rem; font-weight: 600; letter-spacing: 1.5px;
            text-transform: uppercase; padding: 5px 14px; margin-bottom: 16px; border-radius: 2px;
        }
        .post-hero-content h1 {
            font-size: 2.4rem; font-weight: 900; line-height: 1.3; margin-bottom: 14px;
        }
        .post-hero-content .post-meta {
            font-size: 0.82rem; color: rgba(255,255,255,0.6);
        }
        .post-hero-content .post-meta i { color: var(--red); margin-right: 4px; }

/* ===== POST LAYOUT: TOC + Content ===== */
        .post-layout {
            display: grid; grid-template-columns: 260px 1fr;
            gap: 50px; max-width: 1100px;
            margin: 0 auto; padding: 55px 20px;
        }

        /* TOC - Sticky left */
        .toc-wrapper {
            position: sticky; top: 100px;
            align-self: start; max-height: calc(100vh - 120px); overflow-y: auto;
        }
        .toc-box {
            background: var(--dark); border-radius: 4px; padding: 22px;
        }
        .toc-header {
            display: flex; align-items: center; gap: 8px;
            margin-bottom: 16px; padding-bottom: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .toc-header i { color: var(--red); font-size: 1rem; }
        .toc-header span {
            color: var(--white); font-size: 0.78rem; font-weight: 600;
            letter-spacing: 1px; text-transform: uppercase;
        }
        .toc-list { list-style: none; padding: 0; margin: 0; }
        .toc-list li { margin-bottom: 8px; }
        .toc-list li a {
            color: rgba(255,255,255,0.65); font-size: 0.8rem; line-height: 1.5;
            display: flex; align-items: flex-start; gap: 8px;
            padding: 5px 8px; border-radius: 3px;
            border-left: 2px solid transparent; transition: 0.3s;
        }
        .toc-list li a:hover { color: var(--white); background: rgba(255,255,255,0.04); }
        .toc-list li a.active { color: var(--red); border-left-color: var(--red); background: rgba(230,57,70,0.06); }
        .toc-list li a .toc-number { color: var(--red); font-weight: 600; min-width: 16px; }

        /* POST CONTENT */
        .post-content { max-width: 720px; }
        .post-content h2 {
            font-size: 1.5rem; font-weight: 800; color: var(--text-dark);
            margin-top: 45px; margin-bottom: 16px; padding-top: 16px;
        }
        .post-content h2[id] {
            scroll-margin-top: 100px;
        }
        .post-content h3 {
            font-size: 1.15rem; font-weight: 700; color: var(--text-dark);
            margin-top: 28px; margin-bottom: 12px;
        }
        .post-content p {
            font-size: 0.92rem; line-height: 1.9; color: var(--text-body); margin-bottom: 18px;
        }
        .post-content img {
            width: 100%; height: auto; border-radius: 4px; margin: 28px 0;
        }
        .post-content blockquote {
            border-left: 3px solid var(--red); padding: 18px 22px;
            margin: 28px 0; background: var(--bg-light);
            border-radius: 0 4px 4px 0; font-style: italic;
            font-size: 0.95rem; line-height: 1.8; color: var(--text-dark);
        }
        .post-content ul, .post-content ol {
            margin: 18px 0; padding-left: 22px;
        }
        .post-content li {
            font-size: 0.9rem; line-height: 1.85; color: var(--text-body); margin-bottom: 8px;
        }
        .post-content strong { color: var(--text-dark); font-weight: 600; }
        .post-content a { color: var(--red); text-decoration: underline; }

        /* POST TAGS */
        .post-tags {
            margin-top: 40px; padding-top: 25px; border-top: 1px solid var(--border);
        }
        .post-tags span {
            display: inline-block; background: var(--bg-light); color: var(--text-body);
            font-size: 0.72rem; padding: 5px 12px; border-radius: 2px;
            margin: 3px; transition: 0.3s; font-weight: 500;
        }
        .post-tags span:hover { background: var(--red); color: var(--white); }

        /* SHARE */
        .post-share {
            margin-top: 22px; display: flex; align-items: center; gap: 12px;
        }
        .post-share label { font-size: 0.78rem; font-weight: 600; color: var(--text-dark); }
        .post-share a {
            width: 34px; height: 34px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: var(--bg-light); color: var(--text-dark); transition: 0.3s;
        }
        .post-share a:hover { background: var(--red); color: var(--white); }
        /*social-icons*/
        .social-icons a{
            display: inline-block;
            margin-right: 3px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color: #fff !important;
            font-size: 14px;
            line-height: 30px;
            text-align: center;
        }
        .social-icons span{
            margin-right: 5px;
        }
        .social-icons a.face{
            background: #3a589d;
        }
        .social-icons a.instagram{
            background: #e80c26;
        }
        .social-icons a.twitter{
            background: #2478ba;
        }
        .social-icons a.gooogle{
            background: #dd4e31
        }
        .social-icons a.email{
            background: #111;
        }
        .social-icons a.linkedin{
            background: #0072b7;
        }
        /*.social-icons{
            margin: 20px 0 0;
        }*/
        /*End social-icons*/

        /* RELATED POSTS */
        .related-posts { background: var(--bg-light); padding: 70px 0; }
        .related-posts h2 {
            font-size: 1.8rem; font-weight: 800; text-align: center;
            margin-bottom: 40px; color: var(--text-dark);
        }
        .related-posts h2 .hl { color: var(--red); }
        .related-grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 25px; max-width: 1100px; margin: 0 auto; padding: 0 20px;
        }
        .related-card {
            background: var(--white); border: 1px solid var(--border);
            border-radius: 3px; overflow: hidden;
            transition: 0.4s; color: inherit;
        }
        .related-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0,0,0,0.08); }
        .related-card img { width: 100%; height: 180px; object-fit: cover; }
        .related-card-body { padding: 20px; }
        .related-card-body .card-cat {
            font-size: 0.65rem; font-weight: 600; letter-spacing: 1px;
            text-transform: uppercase; color: var(--red); margin-bottom: 6px;
        }
        .related-card-body h4 {
            font-size: 0.95rem; font-weight: 700; line-height: 1.4;
            margin-bottom: 8px; color: var(--text-dark);
        }
        .related-card-body .card-date { font-size: 0.72rem; color: var(--text-light); }

/* ===== RESPONSIVE ===== */
        @media (max-width: 991px) {
            .nav-brand { position: static; }
            .navbar .container { justify-content: space-between; }
            .post-layout { grid-template-columns: 1fr; gap: 30px; }
            .toc-wrapper { position: relative; top: 0; }
            .post-hero-content h1 { font-size: 2rem; }
            .related-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .post-hero { min-height: 320px; padding-top: 70px; }
            .post-hero-content h1 { font-size: 1.6rem; }
            .related-grid { grid-template-columns: 1fr; }
            .post-content h2 { font-size: 1.3rem; }
        }