/* =========================================================
           GLOBAL
        ========================================================= */

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            font-family: 'Sora', sans-serif;
            background: #f4f4f1;
            color: #111;
        }
        img { max-width: 100%; }


        /* =========================================================
           HERO OUTER / NAVIGATION
        ========================================================= */

        .hero-shell { background: #ffffff; padding: 48px; }

        .hero-card {
            position: relative;
            overflow: hidden;
            border-radius: 24px;
            min-height: 460px;
            background: #090909;
            color: #fff;
            display: flex;
            flex-direction: column;
        }

        .hero-card > header {
            position: relative;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 25px 35px;
        }

        .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
        .logo-img { width: 130px; height: auto; display: block; }

        .hero-card nav { position: absolute; left: 50%; transform: translateX(-50%); }

        .hero-card nav ul {
            display: flex; align-items: center; gap: 34px;
            margin: 0; padding: 0; list-style: none;
        }

        .hero-card nav ul li a {
            position: relative; display: block; padding: 8px 0;
            color: #b8b8b8; text-decoration: none;
            font-size: 14px; font-weight: 600; white-space: nowrap;
            transition: color .3s ease;
        }

        .hero-card nav ul li a:hover { color: #fff; }
        .hero-card nav ul li.active a { color: #f7941d; }
        .hero-card nav ul li.active a::after {
            content: ""; position: absolute; left: 50%; bottom: -5px;
            width: 18px; height: 2px; background: #f7941d; transform: translateX(-50%);
        }

        .btn-book {
            margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
            min-width: 182px; height: 42px; padding: 0 22px;
            border: 1px solid #f7941d; border-radius: 4px;
            background: transparent; color: #fff; text-decoration: none;
            font-size: 13px; font-weight: 600; white-space: nowrap;
            transition: background .3s ease, color .3s ease, transform .3s ease;
        }
        .btn-book:hover { background: #f7941d; color: #050505; transform: translateY(-2px); }


        /* =========================================================
           POST HERO IMAGE + TITLE
        ========================================================= */

        .post-hero-media {
            position: absolute;
            inset: 0;
            z-index: 0;
        }

        .post-hero-media img {
            width: 100%; height: 100%; object-fit: cover; display: block;
        }

        .post-hero-media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(9,9,9,.35) 0%, rgba(9,9,9,.55) 55%, rgba(9,9,9,.95) 100%);
        }

        .post-hero-content {
            position: relative;
            z-index: 2;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px 8% 60px;
        }

        .post-hero-category {
            display: inline-block;
            width: fit-content;
            margin-bottom: 20px;
            padding: 7px 16px;
            border-radius: 50px;
            background: #f7941d;
            color: #0a0a0a;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .post-hero-content h1 {
            max-width: 820px;
            margin: 0 0 22px;
            font-size: clamp(32px, 4.4vw, 58px);
            line-height: 1.08;
            font-weight: 400;
            letter-spacing: -1.5px;
            color: #fff;
        }

        .post-hero-content h1 strong { font-weight: 700; }

        .post-hero-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255,255,255,.65);
            font-size: 12.5px;
            font-weight: 600;
        }

        .post-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.4); }


        /* =========================================================
           CONTENT LAYOUT
        ========================================================= */

        .post-wrapper {
            max-width: 1240px;
            margin: auto;
            padding: 90px 30px 140px;

            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 60px;
            align-items: start;
        }


        /* =========================================================
           ARTICLE
        ========================================================= */

        .post-article {
            background: #fff;
            border-radius: 22px;
            padding: 55px 60px;
            box-shadow: 0 15px 40px -25px rgba(0,0,0,.12);
        }

        .post-article .post-content {
            font-size: 15px;
            line-height: 1.95;
            color: #444;
        }

        .post-content p { margin: 0 0 24px; }

        .post-content h2 {
            margin: 44px 0 18px;
            font-size: 28px;
            font-weight: 700;
            letter-spacing: -.5px;
            color: #111;
        }

        .post-content h3 {
            margin: 36px 0 14px;
            font-size: 20px;
            font-weight: 700;
            color: #111;
        }

        .post-content img {
            border-radius: 16px;
            margin: 30px 0;
        }

        .post-content ul,
        .post-content ol {
            margin: 0 0 24px;
            padding-left: 22px;
        }

        .post-content li { margin-bottom: 10px; }

        .post-content blockquote {
            margin: 34px 0;
            padding: 26px 30px;
            border-left: 3px solid #f7941d;
            background: #f9f9f7;
            border-radius: 0 14px 14px 0;
            font-style: italic;
            color: #333;
        }

        .post-content a { color: #f7941d; }


        /* =========================================================
           TAGS / SHARE ROW
        ========================================================= */

        .post-footer-row {
            margin-top: 50px;
            padding-top: 30px;
            border-top: 1px solid rgba(0,0,0,.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
        }

        .post-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .post-tags a {
            padding: 7px 14px;
            border-radius: 50px;
            background: #f4f4f1;
            color: #555;
            text-decoration: none;
            font-size: 11px;
            font-weight: 600;
            transition: .25s ease;
        }

        .post-tags a:hover { background: #f7941d; color: #050505; }

        .post-back-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #111;
            text-decoration: none;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .3px;
        }

        .post-back-link:hover { color: #f7941d; }


        /* =========================================================
           SIDEBAR — RECENT BLOGS
        ========================================================= */

        .post-sidebar {
            position: sticky;
            top: 30px;
        }

        .sidebar-card {
            background: #fff;
            border-radius: 22px;
            padding: 34px 30px;
            box-shadow: 0 15px 40px -25px rgba(0,0,0,.12);
        }

        .sidebar-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0 0 26px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: #f7941d;
        }

        .sidebar-heading::before {
            content: "";
            width: 22px;
            height: 1px;
            background: #f7941d;
        }

        .recent-post-item {
            display: flex;
            gap: 14px;
            text-decoration: none;
            color: inherit;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid rgba(0,0,0,.06);
        }

        .recent-post-item:last-child {
            border-bottom: 0;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .recent-post-thumb {
            flex-shrink: 0;
            width: 74px;
            height: 74px;
            border-radius: 12px;
            overflow: hidden;
            background: #eee;
        }

        .recent-post-thumb img {
            width: 100%; height: 100%; object-fit: cover; display: block;
        }

        .recent-post-info { min-width: 0; }

        .recent-post-date {
            display: block;
            margin-bottom: 6px;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .5px;
            color: #999;
            text-transform: uppercase;
        }

        .recent-post-title {
            font-size: 13px;
            font-weight: 700;
            line-height: 1.45;
            color: #111;
            transition: color .25s ease;

            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .recent-post-item:hover .recent-post-title { color: #f7941d; }

        .sidebar-empty {
            font-size: 12.5px;
            color: #999;
        }

        .sidebar-cta {
            margin-top: 24px;
            padding: 26px 24px;
            border-radius: 18px;
            background: #0b0b0b;
            color: #fff;
            text-align: center;
        }

        .sidebar-cta p {
            margin: 0 0 18px;
            font-size: 12.5px;
            line-height: 1.7;
            color: #bbb;
        }

        .sidebar-cta a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 13px;
            border-radius: 50px;
            background: #f7941d;
            color: #0a0a0a;
            text-decoration: none;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            transition: transform .25s ease;
        }

        .sidebar-cta a:hover { transform: translateY(-2px); }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 1050px) {
            .post-wrapper { grid-template-columns: 1fr; }
            .post-sidebar { position: static; }
        }

        @media (max-width: 1000px) {
            .hero-card nav ul { gap: 20px; }
            .hero-card nav ul li a { font-size: 12px; }
            .btn-book { min-width: 150px; font-size: 11px; }
            .logo-img { width: 110px; }
        }

        @media (max-width: 800px) {
            .hero-shell { padding: 20px; }
            .hero-card { border-radius: 20px; min-height: 400px; }
            .hero-card nav { display: none; }
            .hero-card > header { padding: 20px; }
            .logo-img { width: 105px; }
            .btn-book { min-width: 145px; height: 38px; font-size: 10px; }
            .post-hero-content { padding: 40px 24px 44px; }
            .post-wrapper { padding: 60px 20px 90px; gap: 40px; }
            .post-article { padding: 34px 26px; border-radius: 18px; }
        }

        @media (max-width: 500px) {
            .post-footer-row { flex-direction: column; align-items: flex-start; }
        }