.hero-resource{
    display: flex;
    gap: var(--sp-md);
    justify-content: center;
    align-items: center;
    max-width: var(--br-xl);
    margin: 0 auto;
    margin-bottom: var(--sp-md);
    padding-bottom: var(--sp-lg);
    border-bottom: var(--width-1) solid var(--border-soft);
}

.hero-resource .detail-group{
    flex: 0 0 calc(50% - var(--sp-md));
    width: 100%;
    gap: var(--sp-md);
    align-items: start;
}

.hero-resource .hero-resource-media{
    width: 100%;
    height: 532px;
}

.hero-resource .hero-resource-media .media img{
    object-position: left top;
}

.resource-info{
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

.resource-info .info{
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
}

.resource-info .dot{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-rounded);
    background-color: var(--icon-muted);
}

.content-resource-group{
    display: flex;
    gap: var(--sp-lg);
    align-items: start;
    max-width: var(--br-xl);
    margin: 0 auto;
}

.content-resource-group .content-resource-sidebar{
    flex: 0 0 calc(25% - var(--sp-lg));
    width: 100%;
    position: sticky;
}

.content-resource-group .content-resource-main{
    flex: 0 0 calc(50% - var(--sp-lg));
    width: 100%;
}

.content-resource-main h1{
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-semi-bold);
    line-height: 120%;
}

.content-resource-main h2{
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semi-bold);
    line-height: 130%;
    color: var(--text-default);
}

.content-resource-main h3{
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semi-bold);
    line-height: 140%;
    color: var(--text-default);
}

.content-resource-main h4{
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semi-bold);
    line-height: 140%;
    color: var(--text-default);
}

.content-resource-main p{
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: 160%;
    color: var(--text-body);
}

.content-resource-main ul{
    padding-left: var(--sp-md);
}

.content-resource-main ul li{
    margin-bottom: var(--sp-sm);
}

.content-resource-main h1, .content-resource-main h2, .content-resource-main h3, .content-resource-main h4, .content-resource-main p, .content-resource-main ul, .content-resource-main img, .content-resource-main figure{
    margin-bottom: var(--sp-md);
}

.sidebar-list{
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

.sidebar-wrapper{
    padding: var(--sp-md);
    border: var(--width-1) solid var(--border-soft);
    border-radius: var(--radius-xl);
}

.sidebar-wrapper .sidebar-group{
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.sidebar-group .sidebar-content .sidebar-cta{
    width: 100%;
}

.sidebar-group .sidebar-content .sidebar-cta .cta-group,
.sidebar-group .sidebar-content .sidebar-cta .cta-group .button{
    width: 100%;
    max-width: 100%;
}

.detail-group .resource-logo{
    height: 55px;
}

.resource-logo img{
    object-fit: contain;
}

.cs-stats-group{
    width: 100%;
    max-width: var(--br-xl);
    margin: 0 auto;
}

.cs-stats-group .cs-stats-list{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: start;
    gap: var(--sp-md);
}

.cs-stats-list .card{
    flex: 0 0 calc(25% - var(--sp-md));
    flex-grow: 1;
}

/* Widget Style */

.sidebar-wrapper:has(.newsletter-form){
    background-color: var(--surface-brand-soft);
}

.toc-list{
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    max-height: 165px;
    overflow: scroll;
}

.toc-list .toc-item{
    padding: var(--sp-s);
    color: var(--text-primary);
    border-radius: var(--radius-md);
}

.toc-list .toc-item:hover{
    background-color: var(--surface-brand-soft);
}

.cs-info-list{
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.search-resource-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
}

.search-resource-list .card{
    flex: 0 0 calc(33.33% - var(--sp-md));
    width: 100%;
    padding-left: 0;
}

.search-resource-list .card .card-thumbnail img{
    object-position: left top;
}

.search-content-resource .content-resource-group .content-resource-sidebar{
    flex: 0 0 calc(25% - var(--sp-lg));
    width: 100%;
    position: sticky;
}

.search-content-resource .content-resource-group .content-search-main{
    flex: 0 0 calc(75% - var(--sp-lg));
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

.search-content-resource .blog-search-input-group{
    display: flex;
    align-items: stretch;
    gap: var(--sp-sm);
}

.resource-card-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
}

.resource-card-list .card{
    flex: 0 0 calc(33.33% - var(--sp-md));
    width: 100%;
    padding-left: 0;
}

.resource-card-list .card .card-thumbnail img{
	object-position: left top;
}

.resource-content{
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

.resource-category-group .category-list{
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
}

.resource-category-group .category-list .badge .text{
	white-space: nowrap;
}

.resource-category-group .category-list{
	overflow: scroll;
}

@media (max-width: 991px){
    .hero-resource{
        flex-direction: column;
    }

    .content-resource-group{
        flex-direction: column;
    }

    .content-resource-group .content-resource-sidebar{
        position: static;
    }

    .search-content-resource .content-resource-group .content-resource-sidebar{
        position: static;
    }

	.resource-card-list .card{
        flex: 0 0 calc(50% - var(--sp-md));
    }

    .cs-stats-list .card{
        flex: 0 0 calc(50% - var(--sp-md));
    }
    
    .search-resource-list .card{
        flex: 0 0 calc(50% - var(--sp-md));
    }
	
	.blog-search-input-group .button{
		max-width: 100%;
	}
}

@media (max-width: 445px){
    .resource-info .dot{
        display: none;
    }
    
    .resource-info {
        flex-direction: column;
        align-items: start;
        gap: var(--sp-s);
    }
    
    .hero-resource .hero-resource-media{
        height: 362px;
    }

    .search-resource-list .card{
        flex: 0 0 calc(100%);
    }
}

@media (max-width: 640px){
	.cs-stats-list .card{
        flex: 0 0 calc(100%);
    }

    .resource-card-list .card{
        flex: 0 0 calc(100%);
    }
}


/* Blog Style */


/* Case Study Style */