/* Template Part Content
============================*/

    .post {
        position: relative;
        isolation: isolate;
        border-radius: var(--size-8);
        padding: var(--size-8);    
        margin-bottom: var(--size-24);
    }

    .post > a {
        display: flex;
        width: 100%;
    }

    .post::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--color-surface);
        border-radius: inherit;
        z-index: -1;
        transition: inset 0.25s ease;
    }

    .post:hover::before {
        inset: -4px;
    }

    .post__thumbnail {
        position: relative;
        display: block;
        height: auto;
        border-radius: var(--size-8);
        line-height: 0;
        overflow: hidden;
    }

    .post__thumbnail::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.25); /* intensidad */
        pointer-events: none;
        transition: background 0.25s ease;
    }

    .post__thumbnail .wp-post-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        transition: transform 0.25s cubic-bezier(.22, .61, .36, 1);
        will-change: transform;
    }

    .post:hover .post__thumbnail .wp-post-image {
        transform: scale(1.04);
    }


    .post__data {
        padding: var(--size-8) var(--size-16) var(--size-16);
        position: relative;
    }

    .post__data-title {
        font-size: var(--size-24);
        font-weight: 500;
        margin: 0.67em 0;
        color: var(--color-text-primary);   
    }

    .post:hover .post__data-title {
        color: var(--color-text-white); 
    }

    .post__data-excerpt {
        color: var(--color-text-secondary);
        font-size: var(--size-16);
        padding-top: var(--size-8) 0;
        margin-bottom: 0;
        line-height: 1.5;
    }



    .post__taxonomies {
        position: absolute;
        top: var(--size-16);
        left: var(--size-16);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: var(--size-8);
    }

    .post__taxonomie {
        display: block;
        background: var(--color-text-primary);
        padding: var(--size-4) var(--size-12);
        border-radius: var(--size-24);
        font-size: var(--size-12);
        font-weight: 600;
    }

    .post__taxonomie--category {
        color: var(--color-text-accent);
    }

    .post__taxonomie--tag {
        color: var(--color-text-accent-secondary);
    }

    .post__data-reading-time-wrapper {
        display: none;
        position: absolute;
        left: var(--size-32);
        bottom: calc(var(--size-16) * -1);    
        gap: var(--size-4);    
        width: fit-content;    
        align-items: center;
        justify-content: flex-start;
        color: var(--color-text-primary);
        opacity: 0.7;
    }

    .post__data-reading-time {
        margin: 0;
        font-size: var(--size-12);
    }

    @media (min-width: 768px) {

        .post.post--feed {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .post__thumbnail {
            flex: 1 1 clamp(250px, 40%, 384px);
            aspect-ratio: 16 / 9;
        }

        .post__data {
            position: relative;
            flex: 1 1 clamp(350px, 40%, 600px);
            padding: var(--size-8) var(--size-16);
            height: stretch;
        }

        .post__data-title {
            margin: 0;
        }

        .post__data-excerpt {
            max-height: 344px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .post__data-reading-time-wrapper {
            display: none;
            left: var(--size-16);
            bottom: var(--size-4);
        }
    }


    @media (min-width: 1200px) {
        .post__thumbnail {
            flex: 0 0 384px;   
            aspect-ratio: 16 / 9;
        }

        .post__data {
            padding-top: var(--size-12);
            padding-left: var(--size-24);
            padding-right: var(--size-24);
            padding-bottom: var(--size-12);
        }

        .post__data-excerpt {
            max-height: 424px;
            -webkit-line-clamp: 4;
        }

        .post__data-reading-time-wrapper {
            display: flex;
            left: var(--size-24);
            bottom: var(--size-8);
        }
    }

/* Template Part Sidebar
============================*/

    .sidebar {
        display: flex;
        align-items: flex-start;
        height: 100%;
        gap: 24px;
    }

    .sidebar__widget-tile {
        font-size: var(--size-14);
        font-weight: 400;
        letter-spacing: 1px;
        color: var(--color-text-primary);
        margin-bottom: var(--size-16);
    }

    .sidebar__widget-item {
        background: var(--color-surface);
        border-radius: var(--size-8);
        overflow: hidden;
    }

    .sidebar__widget-link {
        display: block;
        width: 100%;
        height: auto;
        line-height: 0;
    }

    /* Reading Progress
    ============================*/

        .sidebar__widget-items--toc {
            padding: var(--size-24);
        }

        .sidebar__widget-item--toc {
            padding-top: var(--size-12);
            padding-bottom: var(--size-12);
            border-left: 1px solid var( --color-text-secondary);
            border-radius: 0;
            padding-left: var(--size-16);
        }

        .sidebar__widget-item--toc.is-active {
            border-color: #1a56db;
        }

        .sidebar__widget-item--toc:last-of-type {
            margin-bottom: 0;
        }

        .sidebar__widget-item-link--toc {
            font-size: var(--size-14);
            color: var(--color-text-secondary);
            transition: color .3s ease;
        }

        .sidebar__widget-item-link--toc.is-active {
            color: #1a56db;
            border-color: #1a56db;
            font-weight: 500;
        }

        .sidebar__widget-item--level-1 > a {
            font-weight: 600 !important;
        }

        .sidebar__widget-item--level-2 > a {
            margin-left: 0;
        }

        .sidebar__widget-item--level-3 > a {
            margin-left: var(--size-12);
            opacity: 0.8;
        }

        .sidebar__widget-item--level-4 > a{
            margin-left: var(--size-20);
            opacity: 0.6;
        }

        .sidebar__widget-item-link--toc:hover {
            color: var(--color-text-primary);
            opacity: 1;
        }


    /* Reading Progress
    ============================*/

        .sidebar__widget-item--reading-progress {
            margin-top: var(--size-16);
            padding: var(--size-12);
        }

        .sidebar__widget-item--reading-progress p {
            color: var(--color-text-secondary) !important;
            margin-bottom: var(--size-8) !important;
        }

        .sidebar__widget-progress {
            border-radius: var(--size-4);
            background: var(--color-surface-alt);
            height: 4px;
            overflow: hidden;
        }

        .sidebar__widget-progress-bar {
            height: 100%;
            width: 0%;
            background: #1a56db;
            transform-origin: left center;
        }

    /* Category
    ============================*/

        .sidebar__widget-item--category {
            margin-bottom: var(--size-16);
        }

        
        .sidebar__widget-item--category .sidebar__widget-link {        
            display: flex;
            justify-content: start;
            align-items: flex-start;
            padding: var(--size-8);
            gap: var(--size-16);
        }
        
        .sidebar__widget-item--category .sidebar__widget-img {
            display: block;
            flex: 0 0 100px;
            width: 100px;
            height: 100px;
            border-radius: var(--size-8);
        }

        .sidebar__widget-data > * {
            display: block;
            line-height: 1.5;
            margin: 0;
        }

        .sidebar__widget-data h3 {
            font-size: var(--size-16);
            font-weight: 500;
            margin-bottom: var(--size-8);
            color: var(--color-text-primary);
            transition: color .3s ease;
        }

        .sidebar__widget-data p {
            font-size: var(--size-14);
            color: var(--color-text-secondary);
            transition: color .3s ease;
        }

        .sidebar__widget-data:hover h3 {
            color: var(--color-text-white);
        }

        .sidebar__widget-data:hover p {
            font-size: var(--size-14);
            color: var(--color-text-primary);
        }

        @media (min-width: 1024px) {

            .sidebar__sticky {
                position: sticky;
                top: 32px;
            }

        }

/* Template Part Related Content 
============================*/

    .related-posts {
        margin: var(--size-32) 0;
    }

    .related-posts__title {
        font-size: var(--size-16);
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: var(--size-16);
    }

    .related-posts__media {
        display: block;
        height: auto;
        border-radius: var(--size-8);
        line-height: 0;
        overflow: hidden;
        margin: 0;
    }

    .related-posts__img {
        width: 100%;
        height: auto;
        object-fit: cover;
        transition: transform 0.25s cubic-bezier(.22, .61, .36, 1);
        will-change: transform;
    }

    .related-posts__item:hover .related-posts__media .wp-post-image {
        transform: scale(1.04);
    }

    .related-posts__content {
        padding: var(--size-16) var(--size-4);
        height: var(--size-64);
    }

    .related-posts__content-title {
        font-size: var(--size-14);
        font-weight: 600;
        color: var(--color-text-primary);
        margin: 0;
    }

    .related-posts__list {
        display: flex;
        gap: var(--size-24);
        margin: 0;
        padding: 0;
    }

    .related-posts__item {
        position: relative;
        isolation: isolate;
        border-radius: var(--size-8);
        padding: var(--size-8);
        margin-bottom: var(--size-24);
    }

    .related-posts__item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--color-surface);
        border-radius: inherit;
        z-index: -1;
        transition: inset 0.25s ease;
    }

    .related-posts__item:hover::before {
        inset: -4px;
    }

    .related-posts__taxonomies {
        position: absolute;
        top: var(--size-16);
        left: var(--size-16);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* gap: var(--size-8); */
        gap: var(--size-14);
    }

    .related-posts__taxonomie {
        display: block;
        background: var(--color-text-primary);
        padding: var(--size-4) var(--size-12);
        border-radius: var(--size-24);
        /* font-size: var(--size-12);
        font-weight: 600; */
        font-size: var(--size-14);
        font-weight: 500;
    }

    .related-posts__taxonomie--category {
        color: var(--color-text-accent);
    }

    .related-posts__taxonomie--tag {
        color: var(--color-text-accent);
    }

    @media (min-width: 768px) {
        .related-posts__link {
            flex: 1 1 clamp(250px, 40%, 384px);
            aspect-ratio: 16 / 9;
        }
    }

    @media (min-width: 1200px) {
        .related-posts__link {
            flex: 0 0 384px;
            aspect-ratio: 16 / 9;
        }
    }