/**
 * Hero Module Styles
 * Two-column layout matching Figma design
 */

.module-hero {
    background: var(--gradient-brand-dark-bg);
    padding: var(--spacing-16) 0;
    padding-top: 171px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Main Grid Layout */
.hero-grid {
    display: grid;
    grid-template-columns: 559px 1fr;
    gap: var(--spacing-12);
    align-items: start;
}

/* ========================================
   LEFT COLUMN - Content
   ======================================== */

.hero-left {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

/* Heading */
.hero-heading {
    color: var(--color-white);
}
.hero-heading__title {
        font-size: var(--font-size-4xl);
        font-weight: var(--font-weight-light);
    }

/* ========================================
   POST META STYLES
   ======================================== */

.hero-meta__date {
        font-family: var(--font-primary);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-regular);
        color: var(--color-white);
    }

.hero-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.hero-author__label {
        color: var(--color-white);
    }

.hero-author__name {
        color: var(--color-white);
    }

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.hero-tag {
    padding: var(--spacing-2) var(--spacing-5);
    background: rgba(var(--color-white-rgb), 0.1);
    border: 1px solid rgba(var(--color-white-rgb), 0.2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-white);
    transition: var(--transition);
}

.hero-tag:hover {
        background: rgba(var(--color-white-rgb), 0.15);
        transform: translateY(-1px);
    }

.hero-share {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    padding: var(--spacing-2) 0;
}

.hero-share__label {
        color: var(--color-white);
        margin-right: var(--spacing-3);
    }

.hero-share__buttons {
        display: flex;
        gap: var(--spacing-2);
        align-items: center;
    }

.hero-share__button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        /* background: rgba(var(--color-white-rgb), 0.1);
        border: 1px solid rgba(var(--color-white-rgb), 0.2);
        border-radius: var(--radius-sm); */
        color: var(--color-white);
        transition: var(--transition);
    }

.hero-share__button:hover {
            transform: translateY(-1px);
        }

.hero-share__button svg {
            width: 24px;
            height: 24px;
        }

/* ========================================
   RIGHT COLUMN - Mockup with Tabs
   ======================================== */

.hero-right {
    max-width: 724px;
    width: 100%;
    position: relative;
    justify-self: end;
    /* padding: var(--spacing-4); */
}

.hero-right__inner {
        position: relative;
        z-index: 1;
    }

/* ========================================
   FEATURED IMAGE STYLES
   ======================================== */

.hero-featured-image {
    width: 100%;
}

.hero-featured-image__wrapper {
        width: 100%;
        border-radius: var(--radius-xl);
        overflow: hidden;
        border: 1px solid rgba(var(--color-white-rgb), 0.1);
    }

.hero-featured-image img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        max-width: 100%;
    }

/* ========================================
   POST CONTENT STYLES
   ======================================== */

.post-content {
    background: var(--color-white);
    padding: var(--spacing-16) 0;

    /* .container {
        padding: 0;
    } */
}

.post-content__grid {
        display: grid;
        grid-template-columns: 400px 1fr;
        gap: var(--spacing-16);
    }

.post-content__sidebar {
        position: sticky;
        top: 50px;
        height: fit-content;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

.post-content__sidebar::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

.post-content__toc {
        background: transparent;
        padding: 0;
        padding-top: 150px;
    }

.post-content__toc #ez-toc-container {
            border: none !important;
            -webkit-box-shadow: none;
            box-shadow: none;
            background: transparent;
        }

.post-content__toc #ez-toc-container .ez-toc-title-container {
                display: none;
            }

.post-content__toc #ez-toc-container ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }

.post-content__toc #ez-toc-container ul li {
                    margin-bottom: 0;
                    list-style-type: none;

                    /* Nested list styling */
                }

.post-content__toc #ez-toc-container ul li >a {
                        border-bottom: 1px solid rgba(var(--color-black-rgb), 0.1);
                    }

.post-content__toc #ez-toc-container ul li a {
                        font-size: var(--font-size-lg);
                        color: var(--color-gray-500);
                        font-weight: var(--font-weight-regular);
                        display: block;
                        padding: var(--spacing-6) var(--spacing-2);
                        transition: var(--transition);
                        text-decoration: none;
                    }

.post-content__toc #ez-toc-container ul li a:before {
                            content: '';
                        }

.post-content__toc #ez-toc-container ul li a:hover {
                            color: var(--color-black);
                        }

.post-content__toc #ez-toc-container ul li a.active,
                        .post-content__toc #ez-toc-container ul li a:active,
                        .post-content__toc #ez-toc-container ul li a:focus {
                            color: var(--color-black);
                            background: rgba(var(--color-black-rgb), 0.05);
                        }

.post-content__toc #ez-toc-container ul li ul {
                        margin: 0;
                        padding: 0;
                        list-style: none;
                    }

.post-content__toc #ez-toc-container ul li ul li a {
                                padding: var(--spacing-4) var(--spacing-2);
                                padding-left: var(--spacing-8);
                                color: var(--color-gray-500);
                                font-size: var(--font-size-md);
                            }

.post-content__toc #ez-toc-container ul li ul li a:hover {
                                    color: var(--color-black);
                                }

.post-content__toc #ez-toc-container ul li ul li a.active,
                                .post-content__toc #ez-toc-container ul li ul li a:active,
                                .post-content__toc #ez-toc-container ul li ul li a:focus {
                                    color: var(--color-black);
                                    background: rgba(var(--color-black-rgb), 0.05);
                                }

.post-content__wrapper {
        color: var(--color-black);
        line-height: 1.6;

        /* Additional content styling */
    }

.post-content__wrapper iframe {
            width: 100%;
        }

.post-content__wrapper h2 {
            font-size: 48px;
            font-weight: var(--font-weight-light);
            line-height: var(--line-height-normal);
            color: var(--color-black);
            margin: var(--spacing-8) 0 var(--spacing-4) 0;
        }

.post-content__wrapper h3 {
            font-size: var(--font-size-3xl);
            font-weight: var(--font-weight-light);
            line-height: var(--line-height-normal);
            color: var(--color-black);
            margin: var(--spacing-6) 0 var(--spacing-3) 0;
        }

.post-content__wrapper p {
            font-size: var(--font-size-lg);
            line-height: var(--line-height-normal);
            color: var(--color-black);
            margin: 0 0 var(--spacing-4) 0;
        }

.post-content__wrapper ul,
        .post-content__wrapper ol {
            font-size: var(--font-size-lg);
            line-height: var(--line-height-normal);
            color: var(--color-black);
            margin: 0 0 var(--spacing-4) 0;
            padding-left: var(--spacing-6);
        }

.post-content__wrapper li {
            margin-bottom: var(--spacing-2);
        }

.post-content__wrapper blockquote {
            font-size: 20px;
            font-style: italic;
            color: var(--color-gray-600);
            border-left: 4px solid var(--color-brand-purple);
            padding-left: var(--spacing-4);
            margin: var(--spacing-6) 0;
        }

.post-content__wrapper img, .post-content__wrapper video {
            max-width: 100%;
            height: auto;
            border-radius: var(--radius-lg);
            margin: var(--spacing-6) 0;
        }

.post-content__wrapper a {
            color: var(--color-brand-purple);
            text-decoration: underline;
            transition: var(--transition);
        }

.post-content__wrapper a:hover {
                color: var(--color-brand-purple-dark);
            }

.post-content__wrapper code {
            background: var(--color-gray-100);
            padding: var(--spacing-1) var(--spacing-2);
            border-radius: var(--radius-sm);
            font-family: 'Courier New', monospace;
            word-wrap: break-word;
            overflow-wrap: break-word;
            max-width: 100%;
        }

.post-content__wrapper pre {
            background: var(--color-gray-100);
            padding: var(--spacing-4);
            border-radius: var(--radius-md);
            overflow-x: auto;
            margin: var(--spacing-6) 0;
            max-width: 100%;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

.post-content__wrapper pre code {
                background: none;
                padding: 0;
                white-space: pre-wrap;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

/* ========================================
   POST FOOTER INFO STYLES
   ======================================== */

.post-footer-info {
    background: var(--color-white);
    padding: var(--spacing-8) 0;
    max-width: var(--container-max-width);
    /* padding: var(--spacing-8) var(--container-padding); */
    margin: auto;
    border-top: 1px solid rgba(var(--color-black-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.1);

    /* .container {
        padding: 0;
    } */
}

.post-footer-info__wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-4);
    }

.post-footer-info__bottom-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-4);
        flex-wrap: wrap;
    }

.post-footer-info__meta__date {
            color: var(--color-black);
        }

.post-footer-info__author {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

.post-footer-info__author-label {
            color: var(--color-black);
        }

.post-footer-info__author-name {
            color: var(--color-black);
        }

.post-footer-info__tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }

.post-footer-info__tag {
        display: inline-block;
        padding: var(--spacing-2) var(--spacing-5);
        background: rgba(var(--color-black-rgb), 0.05);
        border: 1px solid rgba(var(--color-black-rgb), 0.1);
        border-radius: var(--radius-full);
        font-size: var(--font-size-sm);
        color: var(--color-black);
        transition: var(--transition);
    }

.post-footer-info__tag:hover {
            background: rgba(var(--color-black-rgb), 0.1);
            transform: translateY(-1px);
        }

.post-footer-info__share {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

.post-footer-info__share-label {
            color: var(--color-black);
            margin-right: var(--spacing-3);
        }

.post-footer-info__share-buttons {
            display: flex;
            gap: var(--spacing-2);
            align-items: center;
        }

.post-footer-info__share-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            color: var(--color-black);
            transition: var(--transition);
        }

.post-footer-info__share-button:hover {
                transform: translateY(-1px);
            }

.post-footer-info__share-button svg {
                width: 24px;
                height: 24px;
            }

/* ========================================
   SUGGESTED POSTS STYLES
   ======================================== */

.suggested-posts {
    background: var(--color-white);
    padding: var(--spacing-16) 0;
    padding-bottom: 100px;

    /* .container {
        padding: 0;
    } */
}

.suggested-posts__header {
        text-align: center;
        margin-bottom: var(--spacing-8);
    }

.suggested-posts__title {
        font-size: var(--font-size-3xl);
        font-weight: var(--font-weight-light);
        color: var(--color-black);
        margin: 0;
    }

.suggested-posts__title-highlight {
            background: var(--gradient-text);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.suggested-posts__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-6);
    }

.suggested-posts__card {
        background: var(--color-white);
        border: 1px solid rgba(var(--color-black-rgb), 0.1);
        border-radius: var(--radius-xl);
        overflow: hidden;
        transition: var(--transition);
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

.suggested-posts__card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 32px rgba(var(--color-black-rgb), 0.12);
        }

.suggested-posts__card-image {
            width: 100%;
            height: 230px;
            overflow: hidden;
            position: relative;
            flex-shrink: 0;
            padding: var(--spacing-6);
            padding-bottom: 0;
        }

.suggested-posts__card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--radius-md);
        }

.suggested-posts__card-content {
            padding: var(--spacing-6);
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

.suggested-posts__card-title {
            margin: 0 0 var(--spacing-4) 0;
        }

.suggested-posts__card-title a {
                font-size: var(--font-size-2xl);
                font-weight: var(--font-weight-light);
                color: var(--color-black);
                line-height: 1.3;
                transition: var(--transition);
            }

.suggested-posts__card-title a:hover {
                    color: var(--color-brand-purple);
                }

.suggested-posts__card-excerpt {
            color: var(--color-gray-600);
            line-height: 1.5;
            margin-bottom: var(--spacing-6);
            flex-grow: 1;
        }

.suggested-posts__card-link {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-2);
            font-size: var(--font-size-lg);
            color: var(--color-black);
            transition: var(--transition);
            position: relative;
            margin-top: auto;
        }

.suggested-posts__card-link:hover {
                color: var(--color-brand-purple);
            }

.suggested-posts__card-link:hover svg {
                    transform: translateX(4px);
                }

.suggested-posts__card-link svg {
                transition: transform 0.3s ease;
            }

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (max-width: 870px) {
    .module-hero {
        padding: 128px 0 30px;
    }

    .hero-grid {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-6);
    }
        .hero-meta__date {
            font-size: var(--font-size-sm);
        }
        .hero-heading__title {
            font-size: var(--font-size-3xl);
        }

        .hero-author__label,
        .hero-author__name {
            font-size: var(--font-size-sm);
        }

    .hero-share {
        justify-content: center;
    }

    .hero-tags {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--spacing-2);
        overflow-x: auto;
        padding-bottom: var(--spacing-2);
        margin: 0 calc(-1 * var(--container-padding));
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
        scroll-behavior: smooth;

        /* Hide scrollbar but keep functionality */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }

        .hero-tags::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Opera */
        }

        .hero-tags .hero-tag {
            flex-shrink: 0;
            white-space: nowrap;
        }

    .hero-left {
        gap: var(--spacing-6);
    }

        .post-content__grid {
            display: block;
        }

        .post-content__sidebar {
            display: none;
        }

        .post-content__wrapper {
            line-height: 1.6;

            /* Additional content styling */
        }

            .post-content__wrapper h2 {
                font-size: 27px;
                line-height: var(--line-height-normal);
                color: var(--color-black);
                margin: var(--spacing-8) 0 var(--spacing-4) 0;
            }

            .post-content__wrapper h3 {
                font-size: var(--font-size-2xl);
                line-height: var(--line-height-normal);
                margin: var(--spacing-6) 0 var(--spacing-3) 0;
            }

            .post-content__wrapper p {
                font-size: var(--font-size-base);
                font-weight: var(--font-weight-regular);
                line-height: var(--line-height-normal);
                margin: 0 0 var(--spacing-4) 0;
            }
            .post-content__wrapper ul,
            .post-content__wrapper ol {
                font-size: var(--font-size-base);
                line-height: var(--line-height-normal);
                margin: 0 0 var(--spacing-4) 0;
                padding-left: var(--spacing-6);
            }

    .post-footer-info {
        display: none;
    }

    .suggested-posts {
        padding-top: 0;
        padding-bottom: var(--spacing-8);
    }

        .suggested-posts__title {
            font-size: var(--font-size-3xl);
        }

        .suggested-posts__grid {
            grid-template-columns: 1fr;
            gap: var(--spacing-4);
        }
            .suggested-posts__card-image {
                height: 200px;
            }

            .suggested-posts__card-link {
                font-size: var(--font-size-lg);
            }

            .suggested-posts__card-title a {
                font-size: var(--font-size-xl);
            }

            .suggested-posts__card-excerpt {
                font-size: var(--font-size-md);
                margin-bottom: var(--spacing-4);
            }
}