@charset "UTF-8";
/* CSS Document */

:root {
	--primary-clr-1: #1B75BC;
	--primary-clr-2: #A6CE3C;
	--primary-clr-1-15: #286EB6;
	--secondary-clr-1: #BCBEC0;
	--secondary-clr-2: #664199;
	--dark: #222D33;
	--dark-50: #7E8487;
	--secondary-clr-1-50: #D5D7D7;
	--secondary-clr-1-25: #EAEBEB;
	
	--primary-blue-100: #0C3454;
	--primary-blue-90: #114A77;
	--primary-blue-80: #155B92;
	--primary-blue-70: #1869A8;
	--primary-blue-60: #1B75BC;
	--primary-blue-50: #759BCB;
	--primary-blue-40: #A3B9D9;
	--primary-blue-30: #C6D3E7;
	--primary-blue-20: #E4EAF3;
	--primary-blue-10: #F2F5F9;
	
	--secondary-gray-100: #1D1D1E;
	--secondary-gray-90: #3B3B3C;
	--secondary-gray-80: #58595A;
	--secondary-gray-70: #747577;
	--secondary-gray-60: #909193;
	--secondary-gray-50: #ABACAE;
	--secondary-gray-40: #BCBEC0;
	--secondary-gray-30: #D8D9DA;
	--secondary-gray-20: #ECEDED;
	--secondary-gray-10: #F6F6F6;

	--bs-body-color: var(--text-primary);
}



/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* Sitewide Styles */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */

body * {
	scroll-margin-top: var(--nav-height);
}

body.no-scroll {
	overflow: hidden;
	touch-action: none;
}

.container-fluid{
	max-width: 1330px;
}

.main__bg {
	align-items: flex-end;
	background-blend-mode: overlay;
	background-color: var(--asco-primary-blue-50);
	background-image: linear-gradient(90deg, var(--asco-primary-blue-50) 15.38%, rgba(0, 37, 87, 0) 45.19%, rgba(0, 37, 87, 0) 67.79%, var(--asco-primary-blue-50) 100%);
	background-position: 50% 100%;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	min-width: 100%;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	top: calc((var(--asco-padding-lg) + 144px) * -1);
	left: 0;
    bottom: calc(0px - 10rem);
	right: 0;
	z-index: -1;

	margin-left: calc(((100vw - 100%) / 2) * -1);
	margin-right: calc(((100vw - 100%) / 2) * -1);
	width: calc(100% + (100vw - 100%));
}

.main__bg-img {
	height: 100%;
	object-fit: cover;
	opacity: 0.32;
	width: 100%;
}

.page-layout .position-sticky {
	top: calc(var(--asco-spacing-6) + var(--nav-height));
}


hr {
    margin: 1.5rem 0;
    color: var(--divider);
	border-top-color: var(--divider);
    opacity: 1;
}



/* Text Styles ------------------- */
/* ------------------------------ */
/* ----------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--asco-font);
    font-weight: var(--asco-fw-bold);
    font-optical-sizing: auto;
	line-height: var(--asco-lh-header);
    text-wrap: pretty;
}

h1 {font-size: var(--asco-fs-h1-global);}
h2 {font-size: var(--asco-fs-h2-global);}
h3 {font-size: var(--asco-fs-h3-global);}
h4 {font-size: var(--asco-fs-h4-global);}
h5 {font-size: var(--asco-fs-h5-global);}
h6 {font-size: var(--asco-fs-h6-global);}

p.xl, p.lg, p, p.sm, span.xl, span.lg, span, span.sm, li {
    line-height: var(--asco-lh-body);
    font-weight: var(--asco-fw-regular);
	margin-bottom: 0; 
}

p.xl {font-size: var(--asco-fs-6);}
p.lg {font-size: var(--asco-fs-5);}
p {font-size: var(--asco-fs-4);}
p.sm {font-size: var(--asco-fs-3);}



/* Rich Text Editor (RTE) Styles ----- */
/* ---------------------------------- */
/* --------------------------------- */

.rte-container h2 {
	font-size: 2rem;
	font-family: var(--jadpro-header-font);
	font-weight: 700;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.rte-container h3 {
	font-size: 1.5rem;
	font-family: var(--jadpro-header-font);
	font-weight: 700;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.rte-container h4{
	font-size: 1.125rem;
	font-family: var(--jadpro-body-font);
	font-weight: 800;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.rte-container h5{
	font-size: 1rem;
	font-family: var(--jadpro-body-font);
	font-weight: 800;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.rte-container p{
	font-size: 1rem;
	margin-bottom: 1rem;
}

.rte-container hr{
	margin: 1rem 0;
}

.rte-container h2:first-child, 
.rte-container h3:first-child, 
.rte-container h4:first-child, 
.rte-container h5:first-child, 
.rte-container p:first-child, 
.rte-container ul:first-child {
  margin-top: 0;
}

.rte-container h2:last-child, 
.rte-container h3:last-child, 
.rte-container h4:last-child, 
.rte-container h5:last-child, 
.rte-container p:last-child, 
.rte-container ul:last-child {
  margin-bottom: 0;
}




/* Additional Text Styles ------------ */
/* ---------------------------------- */
/* --------------------------------- */

blockquote,
.article__pullquote{
	position: relative;
	overflow: hidden;
	background-color: var(--background-secondary);
	padding: 1rem 1rem 1rem 1.5rem;
	border-left: 3px solid var(--border-emphasis);
}

.article__pullquote:has(blockquote),
.article__pullquote:has(blockquote) {
	position: relative;
	overflow: visible;
	background-color: transparent;
	padding: 0;
	border-left: 0px solid transparent;
}

.article__pullquote:has(blockquote) blockquote::before,
.article__pullquote:has(blockquote) blockquote::after {
	content: none;
}

.quote-left,
.quote-right,
.quote-center {
    width: 50%;
    max-width: 350px;
    min-width: 250px;
}

.quote-left{
    float: left;
	margin: 0 1.5rem 1rem 0;
}

.quote-right{
    float: right;
	margin: 0 0 1rem 1.5rem;
}

.quote-center{
	margin: 0 auto 1rem auto;
}

blockquote > p,
.quote__text{
	position: relative;
	z-index: 2;
	font-size: 1.75rem !important;
	overflow-wrap: break-word;
}

blockquote p:last-of-type,
.quote__text:last-of-type{
	margin: 0 !important;
}

.quote__icon{
	position: absolute;
	width: 60px;
	height: auto;
	z-index: 1;
}

blockquote::before,
blockquote::after,
.article__pullquote::before,
.article__pullquote::after{
	content: "";
	position: absolute;
	z-index: 1;
	width: 60px;
	height: 42px;
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

blockquote::before,
.article__pullquote::before{
	top: -.25rem;
	left: .75rem;
	background-image: url("https://ascobackend.azurewebsites.net/media/qb0e0xpy/quote-open.svg");
}

blockquote::after,
.article__pullquote::after{
	bottom: -.25rem;
	right: .75rem;
	background-image: url("https://ascobackend.azurewebsites.net/media/5xbga0rq/quote-close.svg");
}


/* Article Figure Styles ----------------- */
/* ------------------------------ */
/* ----------------------------- */

.article__image_full_width{
    width: 100%;
}

.article figure {
    margin: 0 0 1.5rem 0;
}

.article__figure.float-left {
    max-width: 350px;
    display: inline-block;
    margin: 0 1rem .25rem 0;
    float: left;
}

.article__figure.float-right {
    max-width: 350px;
    display: inline-block;
    margin: 0 0 .25rem 1rem;
    float: right;
}

.article figure > .fig-img-container{
    display: grid;
    align-items: center;
    width: 100%;
}

.article figure .fig-img-container .fig-img{
    position: relative;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

.article figure .fig-img-container > img{
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

.article figure.floating-left .fig-img-container > img, .article figure.floating-right .fig-img-container > img{
    width: auto;
}

.article figure .fig-img-container .fig-img .expand-overlay{
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    display: flex;
    align-items: center;
    background-color: rgba(0,0,0,0.75);
    padding: .25rem .35rem;
    line-height: 1;
    border-radius: .25rem;
    transition: .2s ease-in-out;
}

.article figure .fig-img-container .fig-img:hover .expand-overlay{
    opacity: 1;
    transition: .2s ease-in-out;
}

.article figure .fig-img-container .fig-img svg{
    width: 15px;
}

.article figure .fig-img-container .fig-img svg path{
    fill: white;
}

.article figure .fig-img-container .fig-img .expand-overlay p{
    margin: 0 0 0 .35rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .02rem;
    color: white;
    font-weight: 400;
}

.article figure .fig-img-container .fig-img:hover .expand-overlay:hover svg path, .article figure .fig-img-container .fig-img:hover .expand-overlay:hover p{
    opacity: .75;
    transition: .2s ease-in-out;
}

figure img{
    display: block;
    width: auto; 
    max-width: 100%;
    margin: 0 auto 1rem auto;
    border-radius: .35rem;
}

.article figure img:last-child{
    margin: 0 auto 0 auto;
}

.article figcaption, .figure__caption, .article__caption{
    font-size: .85rem;
    color: #757575;
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-bottom: 0;
    border-bottom: 1px solid #D5D5D5;
}

.article figcaption p{
    font-size: .85rem;
    color: #757575;
    margin-bottom: 0;
}


/* Layout Styles ----------------- */
/* ------------------------------ */
/* ----------------------------- */

.page-layout, .page-layout .container-fluid, .section-layout {
	display: grid;
}

.area--ad-1 {grid-area: ad-1;}
.area--ad-2 {grid-area: ad-2;}
.area--ad-1, .area--ad-2 {position: relative;}
.area--promo-1 {grid-area: promo-1;}
.area--promo-2 {grid-area: promo-2;}
.area--list-container {grid-area: list-container;}
.area--playlist {grid-area: playlist;}

.section__title {grid-area: columns-header;}
.section__body {
	grid-area: columns-body;
	display: contents
}
.section__list {grid-area: columns-body-list;}
.section__btn-more {grid-area: load-more-btn;}

.area--aside {
	grid-area: aside;
	display: contents
}

.page-layout--columns, .section-layout--columns {
	/* grid-template-areas:
		"ad-1"
		"columns-header"
		"columns-body-list"
		"load-more-btn"; */

	grid-template-areas:
		"columns-header"
		"columns-body-list"
		"load-more-btn"
		"ad-1"
		"promo-1"
		"ad-2";
	grid-template-columns: 1fr;

	gap: var(--asco-gutter-lg);
	padding-top: var(--asco-padding-lg);
	padding-bottom: var(--asco-padding-lg);
}

.page-layout .container-fluid .full-width-section{
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-left: calc((100vw - 100%) / 2);
	padding-right: calc((100vw - 100%) / 2);
	margin-left: calc(((100vw - 100%) / 2) * -1);
	margin-right: calc(((100vw - 100%) / 2) * -1);
	width: calc(100% + (100vw - 100%));
}

@media (min-width: 960px) {
	.area--aside {
		display: grid;
		gap: var(--asco-gutter-lg);
		grid-template-areas:
			"ad-1"
			"promo-1"
			"ad-2";
		grid-template-rows: auto auto 1fr;
		position: relative;
	}

	.page-layout--columns, .section-layout--columns {
		grid-template-areas:
			"columns-header 	aside"
			"columns-body 		aside";
		grid-template-columns: 1fr 18.875rem;
		grid-template-rows: auto 1fr;
	}

	.section__body {
		display: flex;
        flex-direction: column;
	}

	.area--aside:not(:has(.area--ad-1)) {
		grid-template-areas:
			"ad-2"
			"promo-1";
		grid-template-rows: auto 1fr;
	}

	.area--aside:not(:has(.area--ad-2)) {
		grid-template-areas:
			"ad-1"
			"promo-1";
		grid-template-rows: auto 1fr;
	}

	.area--aside:not(:has(.area--ad-2)):not(:has(.area--promo-1)) {
		grid-template-areas:
			"ad-1";
		grid-template-rows: 1fr;
	}

	.area--aside:not(:has(.area--promo-1)) {
		grid-template-areas:
			"ad-1"
			"ad-2";
		grid-template-rows: auto 1fr;
	}

	.area--aside:has(.area--playlist) {
		display: grid;
		gap: var(--asco-gutter-lg);
		grid-template-areas:
			"playlist"
			"ad-1"
			"promo-1"
			"ad-2";
		grid-template-rows: auto auto auto 1fr;
		position: relative;
	}
}

/* Card Styles ------------------- */
/* ------------------------------ */
/* ----------------------------- */
/* ---------------------- (°_°) */

.card-surface--secondary {
	background-color: var(--card-backgrounds-secondary);
	border-color: var(--border-regular);
	box-shadow: none;
	padding: var(--asco-padding-lg);
}



/* Banner Ad Styles -------------------- */
/* ------------------------------ */
/* ----------------------------- */

.banner-ad {
	align-items: center;
	background-color: transparent;
	border-top-color: transparent;
	border-bottom-color: transparent;
	display: grid;
	justify-content: center;
	margin: 0 auto;
	padding: 0 0 var(--asco-spacing-3) 0;
	padding: 0 0 var(--asco-spacing-3) 0;
	text-align: center;
}

.banner-ad.banner-ad--728x90 {
	grid-template-columns: auto auto;
}

.banner-ad__text {
	display: inline-block;
	font-size: 8px;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    margin: 0px auto -1px auto;
	color: black;
    background-color: var(--asco-white);
    padding: .05rem .5rem;
    line-height: 1.1;
}

.banner-ad--300x250 .banner-ad__text {
	margin: 0px auto -1px auto;
	border-radius: .25rem .25rem 0 0;
}

.banner-ad--728x90 .banner-ad__text {
	margin: 0px -.5px 0px 0px;
    padding: .35rem .05rem;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    border-radius: 0 .25rem .25rem 0;
}

.section--full-width-ad {
	background-color: var(--background-secondary);
	border-top: 0px solid transparent;
	border-bottom: 0px solid transparent;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.page-layout:has(.section-layout--video) .section--full-width-ad {
	background-color: transparent;
	color: var(--text-primary-contrastText);
}

.img_ad {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}



/* Breadcrumb Styles -------------- */
/* ------------------------------- */
/* ------------------------------ */


.area--breadcrumb{
	border-bottom: 1px solid var(--divider);
}

.breadcrumb{
	display: flex;
	gap: var(--asco-spacing-3);
	padding: var(--asco-padding-smedium) 0;
	margin: 0;;
}

.breadcrumb__link {
    color: var(--text-secondary);
    text-decoration: underline;
    font-size: var(--asco-fs-4);
}

.breadcrumb__link:hover {
    color: var(--text-primary-hover);
    text-decoration: underline;
}

.breadcrumb__current {
    color: var(--text-primary);
    text-decoration: none;
}

.breadcrumb__current:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.breadcrumb__divider {
    color: var(--divider);
    font-size: var(--gihn-fs-4);
}

.breadcrumb__link:focus-visible {
	outline: 3px solid var(--border-focused);
}


/* Button Styles ----------------- */
/* ------------------------------ */
/* ----------------------------- */
/* ---------------------- (°_°) */


/* Default Button ---------------- */
/* ------------------------------ */

[type="button"], [type="reset"], [type="submit"], button, .btn {
    display: inline-flex;
	position: relative;
	overflow: hidden; overflow: clip;
    column-gap: var(--asco-spacing-4);
    align-items: center;
    justify-content: center;
    /* padding: var(--asco-spacing-4) var(--asco-spacing-5); */
    min-width: 24px;
    min-height: 24px;
    font-family: var(--asco-font);
	font-size: var(--asco-fs-4);
    line-height: var(--asco-lh-dense);
    white-space: nowrap;
    text-decoration: none;
    /* color: var(--text-primary-contrastText);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary); */

    border-radius: var(--asco-radius-sm);
	box-shadow: none;
    transition: var(--asco-anim-normal);
}

a.btn:hover, .btn:hover{
	color: var(--text-primary-contrastText);
    background: var(--btn-primary-hover);
    border: 1px solid var(--btn-primary-hover);
    transition: var(--asco-anim-normal) ;
}

a.btn:focus, .btn:focus{
    color: var(--text-primary-contrastText);
    background: var(--btn-primary-active);
    border: 1px solid var(--btn-primary-active);
	outline: 3px solid var(--border-focused);
    transition: var(--asco-anim-normal);
}

a.btn.btn:active, button.btn.btn:active{
    color: var(--text-primary-contrastText);
    background: var(--btn-primary-active);
    border: 1px solid var(--btn-primary-active);
    transition: var(--asco-anim-normal);
}

.btn svg, .btn .icon{
	max-width: var(--asco-spacing-6); max-height: var(--asco-spacing-6);
}

a.btn .fill--clr-1, .btn .fill--clr-1 {transition: var(--asco-anim-fast);}
a.btn:hover .fill--clr-1, .btn:hover .fill--clr-1 {transition: var(--asco-anim-fast);}

.btn span, .btn:hover span{
	text-decoration: none;
	transition: var(--asco-anim-normal);
}


/* CTA Button -------------------- */
/* ------------------------------ */


a.btn--cta, .btn--cta {
	color: var(--text-primary-contrastText);
    background: var(--btn-cta);
    border: 1px solid var(--btn-cta);
}

a.btn--cta:hover, .btn--cta:hover {
    color: var(--text-primary-contrastText);
    background: var(--btn-cta-hover);
    border: 1px solid var(--btn-cta-hover);
	box-shadow: var(--asco-shadow-xs);
}

a.btn--cta::after:hover, .btn--cta::after:hover, a.btn--cta::after:focus, .btn--cta::after:focus, a.btn--cta::after:active, .btn--cta::after:active {
    opacity: 0;
	transition: var(--asco-anim-normal);
}

a.btn--cta:focus, .btn--cta:focus {
    color: var(--text-primary-contrastText);
    background: var(--btn-cta-hover);
    border: 1px solid var(--btn-cta-hover);
	outline: 3px solid var(--border-focused);
	box-shadow: var(--asco-shadow-xs);
}

a.btn.btn--cta:active, button.btn.btn--cta:active {
    color: var(--text-primary-contrastText);
    background: var(--btn-cta-hover);
    border: 1px solid var(--asco-primary-blue-70);
	box-shadow: var(--asco-shadow-xs);
}


/* Primary Button ---------------- */
/* ------------------------------ */

a.btn--primary, .btn--primary {
	color: var(--text-primary-contrastText);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
}
a.btn--primary:hover, .btn--primary:hover {
	color: var(--text-primary-contrastText);
    background: var(--btn-primary-hover);
    border: 1px solid var(--btn-primary-hover);
}
a.btn--primary .fill--clr-1, .btn--primary .fill--clr-1 {fill: var(--text-primary-contrastText);}
a.btn--primary:hover .fill--clr-1, .btn--primary:hover .fill--clr-1 {fill: var(--text-primary-contrastText);}


/* Primary Reverse Button -------- */
/* ------------------------------ */

a.btn--primary-rev, .btn--primary-rev {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-rev:hover, .btn--primary-rev:hover {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev-hover);
    border: 1px solid var(--btn-primary-rev-hover);
	box-shadow: var(--asco-shadow-xs);
}

a.btn--primary-rev:focus, .btn--primary-rev:focus {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev-active);
    border: 1px solid var(--btn-primary-rev-active);
	outline: 3px solid var(--border-focused);
	box-shadow: var(--asco-shadow-xs);
}

a.btn.btn--primary-rev:active, button.btn.btn--primary-rev:active {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev-active);
    border: 1px solid var(--btn-primary-rev-active);
	box-shadow: var(--asco-shadow-xs);
}

a.btn--primary-rev .fill--clr-1, .btn--primary-rev .fill--clr-1 {fill: var(--text-primary-contrastText);}
a.btn--primary-rev:hover .fill--clr-1, .btn--primary-rev:hover .fill--clr-1 {fill: var(--btn-primary-rev-contrastText);}


/* Primary Outlined Button ------- */
/* ------------------------------ */

a.btn--primary-outlined, .btn--primary-outlined{
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--btn-primary);
}

a.btn--primary-outlined:hover, .btn--primary-outlined:hover{
    color: var(--text-primary);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
}

a.btn--primary-outlined:focus, .btn--primary-outlined:focus{
    color: var(--text-primary);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
	outline: 3px solid var(--border-focused);
}

a.btn.btn--primary-outlined:active, button.btn.btn--primary-outlined:active{
    color: var(--text-primary);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
}

a.btn--primary-outlined .fill--clr-1, .btn--primary-outlined .fill--clr-1 {fill: var(--text-primary);}
a.btn--primary-outlined:hover .fill--clr-1, .btn--primary-outlined:hover .fill--clr-1 {fill: var(--text-primary-contrastText);}


/* Primary Outlined Reversed Button ------- */
/* --------------------------------------- */

a.btn--primary-outlined-rev, .btn--primary-outlined-rev{
    color: var(--text-primary-contrastText);
    background: transparent;
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-outlined-rev:hover, .btn--primary-outlined-rev:hover{
    color: var(--text-primary);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-outlined-rev:focus, .btn--primary-outlined-rev:focus{
    color: var(--text-primary);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
	outline: 3px solid var(--border-focused);
}

a.btn.btn--primary-outlined-rev:active, button.btn.btn--primary-outlined-rev:active{
    color: var(--text-primary);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-outlined-rev .fill--clr-1, .btn--primary-outlined-rev .fill--clr-1 {fill: var(--text-primary-contrastText);}
a.btn--primary-outlined-rev:hover .fill--clr-1, .btn--primary-outlined-rev:hover .fill--clr-1 {fill: var(--text-primary);}


/* Primary Text Button ----------- */
/* ------------------------------ */

a.btn--primary-text, .btn--primary-text{
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
	padding: var(--asco-spacing-4) 0;
}

a.btn--primary-text:hover, .btn--primary-text:hover{
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
	text-decoration: underline;
}

a.btn--primary-text:focus, .btn--primary-text:focus{
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
	outline: 3px solid var(--border-focused);
	text-decoration: underline;
}

a.btn.btn--primary-text:active, button.btn.btn--primary-text:active{
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
	text-decoration: underline;
}

a.btn--primary-text .fill--clr-1, .btn--primary-text .fill--clr-1 {fill: var(--text-primary);}
a.btn--primary-text:hover .fill--clr-1, .btn--primary-text:hover .fill--clr-1 {fill: var(--text-primary);}


/* Primary Text Reverse Button ------- */
/* ---------------------------------- */

a.btn--primary-text-rev, .btn--primary-text-rev{
    color: var(--text-primary-contrastText);
    background: transparent;
    border: 1px solid transparent;
	padding: var(--asco-spacing-4) 0;
}

a.btn--primary-text-rev:hover, .btn--primary-text-rev:hover{
    color: var(--text-primary-hover);
    background: transparent;
    border: 1px solid transparent;
	text-decoration: underline;
}

a.btn--primary-text-rev:focus, .btn--primary-text-rev:focus{
    color: var(--text-primary-hover);
    background: transparent;
    border: 1px solid transparent;
	outline: 3px solid var(--border-focused);
	text-decoration: underline;
}

a.btn.btn--primary-text-rev:active, button.btn.btn--primary-text-rev:active{
    color: var(--text-primary-hover);
    background: transparent;
    border: 1px solid transparent;
	text-decoration: underline;
}

a.btn--primary-text-rev .fill--clr-1, .btn--primary-text-rev .fill--clr-1 {fill: var(--text-primary-contrastText);}
a.btn--primary-text-rev:hover .fill--clr-1, .btn--primary-text-rev:hover .fill--clr-1 {fill: var(--text-primary-hover);}


/* Primary Outlined Text Button ------ */
/* ---------------------------------- */

a.btn--primary-text, .btn--primary-text{
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
	padding: var(--asco-spacing-4) 0;
}

a.btn--primary-text:hover, .btn--primary-text:hover{
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
	text-decoration: underline;
}

a.btn--primary-text:focus, .btn--primary-text:focus{
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
	outline: 3px solid var(--border-focused);
	text-decoration: underline;
}

a.btn.btn--primary-text:active, button.btn.btn--primary-text:active{
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
	text-decoration: underline;
}

a.btn--primary-text .fill--clr-1, .btn--primary-text .fill--clr-1 {fill: var(--text-primary);}
a.btn--primary-text:hover .fill--clr-1, .btn--primary-text:hover .fill--clr-1 {fill: var(--text-primary);}


/* Secondary Button -------------- */
/* ------------------------------ */

a.btn--secondary, .btn--secondary {
    color: var(--text-secondary);
    background: var(--btn-secondary);
    border: 1px solid var(--btn-secondary);
}

a.btn--secondary:hover, .btn--secondary:hover {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
	box-shadow: var(--asco-shadow-xs);
}

a.btn--secondary:focus, .btn--secondary:focus {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
	outline: 3px solid var(--border-focused);
	box-shadow: var(--asco-shadow-xs);
}

a.btn.btn--secondary:active, button.btn.btn--secondary:active {
    color: var(--text-secondary);
    background: var(--btn-secondary-active);
    border: 1px solid var(--btn-secondary-active);
	box-shadow: var(--asco-shadow-xs);
}

a.btn--secondary .fill--clr-1, .btn--secondary .fill--clr-1 {
    fill: var(--text-secondary);
}

a.btn--secondary:hover .fill--clr-1, .btn--secondary:hover .fill--clr-1 {
    fill: var(--text-secondary);
}


/* Secondary Outlined Button ----- */
/* ------------------------------ */

a.btn--secondary-outlined, .btn--secondary-outlined {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--btn-secondary);
}

a.btn--secondary-outlined:hover, .btn--secondary-outlined:hover {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
}

a.btn--secondary-outlined:focus, .btn--secondary-outlined:focus {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
	outline: 3px solid var(--border-focused);
}

a.btn.btn--secondary-outlined:active, button.btn.btn--secondary-outlined:active {
    color: var(--text-secondary);
    background: var(--btn-secondary-active);
    border: 1px solid var(--btn-secondary-active);
}

a.btn--secondary-outlined .fill--clr-1, .btn--secondary-outlined .fill--clr-1 {fill: var(--text-secondary);}
a.btn--secondary-outlined:hover .fill--clr-1, .btn--secondary-outlined:hover .fill--clr-1 {fill: var(--text-secondary);}


/* Secondary Text Button --------- */
/* ------------------------------ */

a.btn--secondary-text, .btn--secondary-text {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
	padding: inherit 0;
}

a.btn--secondary-text:hover, .btn--secondary-text:hover {
    color: var(--text-secondary-hover);
    background: transparent;
    border: 1px solid transparent;
}

a.btn--secondary-text:focus, .btn--secondary-text:focus {
    color: var(--text-secondary-hover);
    background: transparent;
    border: 1px solid transparent;
	outline: 3px solid var(--border-focused);
}

a.btn.btn--secondary-text:active, button.btn.btn--secondary-text:active {
    color: var(--text-secondary-active);
    background: var(--btn-secondary-active);
    border: 1px solid var(--btn-secondary-active);
}

a.btn--secondary-text .fill--clr-1, .btn--secondary-text .fill--clr-1 {fill: var(--text-secondary);}
a.btn--secondary-text:hover .fill--clr-1, .btn--secondary-text:hover .fill--clr-1 {fill: var(--text-secondary-hover);} 


/* Button Size Variants ---------------- */
/* (Must come after other variants ---- */

a.btn--xs, .btn--xs{
    font-size: var(--asco-fs-3);
    padding: 0 var(--asco-spacing-4);
}

.btn--xs svg, .btn--xs .icon{
	max-width: var(--asco-spacing-3); max-height: var(--asco-spacing-3);
}

a.btn--sm, .btn--sm{
    font-size: var(--asco-fs-3);
    padding: var(--asco-spacing-2) var(--asco-spacing-4);
}

.btn--sm svg, .btn--sm .icon{
	max-width: var(--asco-spacing-5); max-height: var(--asco-spacing-5);
}

a.btn--lg, .btn--lg{
    font-size: var(--asco-fs-5);
    padding: var(--asco-spacing-5) var(--asco-spacing-6);
	column-gap: var(--asco-padding-smedium);
}

.btn--lg svg, .btn--lg .icon{
	max-width: var(--asco-spacing-3); max-height: var(--asco-spacing-3);
}

a.btn--icon-only, .btn--icon-only{
	padding: var(--asco-spacing-4);
}

a.btn--icon-only.btn--xs, .btn--icon-only.btn--xs{
	padding: 0;
}

a.btn--icon-only.btn--sm, .btn--icon-only.btn--sm{
	padding: var(--asco-spacing-2);
}

a.btn--icon-only.btn--lg, .btn--icon-only.btn--lg{
	padding: var(--asco-spacing-5);
}





/* Button Styles : FROM MAYA------ */
/* ------------------------------ */
/* ----------------------------- */

.btn.btn__sign-in {
	align-items: center;
	display: flex;
	gap: var(--asco-gutter-xs);
	min-height: 30px;
}

.btn.btn__sign-in:active {
	border-color: transparent;
}

.btn.btn__sign-in span {
	font-size: inherit;
	line-height: inherit;
}

.btn.specialties-menu-toggle {
	align-items: center;
	border-color: transparent;
	display: flex;
	min-height: 30px;
}

.btn.specialties-menu-toggle:active {
	border-color: transparent;
}

.btn.dropdown-toggle.specialties-menu-toggle::after {
	top: auto;
}



.btn-danger {
	color: var(--text-primary-contrastText) !important; /* Override Bootstrap but this will fail colour contrast */
}

a.btn--ai, button.btn--ai {
	align-items: center;
	background-color: var(--asco-white);
	border-color: transparent;
	border-top-left-radius: var(--asco-radius-xl) !important;
	border-top-right-radius: var(--asco-radius-xl) !important;
	border-bottom-right-radius: var(--asco-radius-xl) !important;
	border-bottom-left-radius: 0 !important;
	box-shadow: var(--asco-shadow-sm);
	box-shadow: var(--asco-shadow-ai);
	color: var(--text-primary);
	display: flex;
	font-family: var(--asco-font-ai);
	font-weight: var(--asco-fw-semibold);
	gap: var(--asco-gutter-sm);
	padding: var(--asco-padding-smedium);
	text-align: left;
	width: 100%;
	white-space: wrap;
	transform: scale(1);
}

a.btn--ai:hover, button.btn--ai:hover,
a.btn--ai:focus, button.btn--ai:focus {
	background-color: var(--btn-primary-rev-hover);
	border-color: transparent;
	color: var(--text-primary);
	transform: scale(1.01);
	transition: var(--asco-anim-fast);
}

.btn--icon-only {
	align-items: center;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	/* min-height: calc(var(--bs-btn-border-width) * 2 + var(--bs-btn-font-size) * var(--bs-btn-line-height) + var(--bs-btn-padding-y) * 2);
	min-width: calc(var(--bs-btn-border-width) * 2 + var(--bs-btn-font-size) * var(--bs-btn-line-height) + var(--bs-btn-padding-y) * 2); */
	padding: 0;
}

.btn--pill {
	align-items: center;
	border-radius: var(--asco-radius-2xl);
	display: inline-flex;
	gap: var(--asco-gutter-sm);
	justify-content: center;
	padding-right: var(--asco-padding-smedium);
	padding-left: var(--asco-padding-smedium);
}


/* Button Row -------------------- */
/* ------------------------------ */

.btn-row{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--asco-gutter-xs);
    flex-wrap: wrap;
}



/* Dropdown Styles --------------- */
/* ------------------------------ */
/* ----------------------------- */
/* ---------------------- (°_°) */

.dropdown{
	position: relative;
	display: flex;
}

.dropdown button[aria-expanded="false"] .icon{
	transform: rotate(0deg);
	transition: var(--asco-anim-fast);
}

.dropdown button[aria-expanded="true"] .icon{
	transform: rotate(180deg);
	transition: var(--asco-anim-fast);
}

.dropdown .btn--secondary-outlined[aria-expanded="true"] {
	color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
}




/* Default Badge ---------------- */
/* ------------------------------ */

a.badge, button.badge, .badge {
    display: inline-flex;
    column-gap: var(--asco-gutter-xs);
    align-items: center;
    justify-content: center;
    padding: var(--asco-padding-xs) var(--asco-padding-sm);
    min-width: var(--asco-spacing-8);
    min-height: var(--asco-spacing-7);
    font-family: var(--asco-font);
	font-weight: var(--asco-fw-medium);
	font-size: var(--asco-fs-2);
	text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-primary);
    background-color: var(--badge-primary);
    border: 1px solid var(--badge-primary);
    border-radius: var(--asco-radius-sm);
    transition: var(--asco-anim-normal);
}

a.badge:hover, button.badge:hover, .badge:hover{
    color: var(--text-primary);
    background-color: var(--badge-primary-hover);
    border: 1px solid var(--badge-primary-hover);
    transition: var(--asco-anim-normal);
}

a.badge:focus, .badge:focus{
    color: var(--text-primary);
    background-color: var(--badge-primary-hover);
    border: 1px solid var(--badge-primary-hover);
	outline: 3px solid var(--border-focused);
    transition: var(--asco-anim-normal);
}

a.badge:active, .badge:active{
    color: var(--text-primary);
    background-color: var(--badge-primary-active);
    border: 1px solid var(--badge-primary-active);
    transition: var(--asco-anim-normal);
}

.badge svg, .badge .icon{
	max-width: var(--asco-spacing-5); max-height: var(--asco-spacing-5);
}


/* CTA Badge ---------------- */
/* ------------------------------ */

a.badge--cta, .badge--cta {
    color: var(--text-primary-contrastText);
    background-color: var(--badge-cta);
    border: 1px solid var(--badge-cta);
}

a.badge--cta:hover, .badge--cta:hover {
    color: var(--text-primary-contrastText);
    background-color: var(--badge-cta-hover);
    border: 1px solid var(--badge-cta-hover);
}

a.badge--cta:focus, .badge--cta:focus {
    color: var(--text-primary-contrastText);
    background-color: var(--badge-cta-hover);
    border: 1px solid var(--badge-cta-hover);
	outline: 3px solid var(--border-focused);
}

a.badge--cta:active, .badge--cta:active {
    color: var(--text-primary-contrastText);
    background-color: var(--badge-cta-active);
    border: 1px solid var(--badge-cta-active);
}


/* Primary Badge ----------------- */
/* ------------------------------ */

a.badge--primary, .badge--primary {
    color: var(--text-primary);
    background-color: var(--badge-primary);
    border: 1px solid var(--badge-primary);
}

a.badge--primary:hover, .badge--primary:hover {
    color: var(--text-primary);
    background-color: var(--badge-primary-hover);
    border: 1px solid var(--badge-primary-hover);
}

a.badge--primary:focus, .badge--primary:focus {
    color: var(--text-primary);
    background-color: var(--badge-primary-hover);
    border: 1px solid var(--badge-primary-hover);
	outline: 3px solid var(--border-focused);
}

a.badge--primary:active, .badge--primary:active {
    color: var(--text-primary);
    background-color: var(--badge-primary-active);
    border: 1px solid var(--badge-primary-active);
}


/* Primary Text Badge -------- */
/* ------------------------------ */

a.badge--primary-text, .badge--primary-text {
    color: var(--text-primary-hover);
    background-color: transparent;
    border: 1px solid transparent;
}

a.badge--primary-text:hover, .badge--primary-text:hover {
    color: var(--text-primary);
    background-color: transparent;
    border: 1px solid transparent;
}

a.badge--primary-text:focus, .badge--primary-text:focus {
    color: var(--text-primary);
    background-color: transparent;
    border: 1px solid transparent;
	outline: 3px solid var(--border-focused);
}

a.badge--primary-text:active, .badge--primary-text:active {
    color: var(--text-primary);
    background-color: transparent;
    border: 1px solid transparent;
}


/* Badge Size Variants ----------- */
/* ------------------------------ */

a.badge--xs, .badge--xs{
    font-size: var(--asco-fs-2);
    padding: 0 var(--asco-spacing-3);
	column-gap: var(--asco-spacing-2);
}

a.badge--sm, .badge--sm{
    font-size: var(--asco-fs-3);
    padding: var(--asco-spacing-2) var(--asco-spacing-4);
	column-gap: var(--asco-spacing-2);
}


/* Unique Badge Variants --------- */
/* ------------------------------ */

.badge--asco {
	background-color: var(--asco-primary-blue-70);
	border-radius: var(--asco-radius-sm);
	color: var(--text-primary-contrastText);
	font-size: var(--asco-fs-3);
	padding: var(--asco-padding-xs);
}


/* Flat Badge Variant --------- */

.badge--flat {
	color: var(--asco-primary-blue);
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0;
	border-radius: 0;
}

a.badge--flat:hover, .badge--flat:hover {
    color: var(--text-primary);
    background-color: transparent;
	border: 1px solid transparent;
}

a.badge--flat:focus, .badge--flat:focus {
    color: var(--text-primary);
    background-color: transparent;
	border: 1px solid transparent;
	outline: 3px solid var(--border-focused);
}

a.badge--flat:active, .badge--flat:active {
    color: var(--text-primary);
    background-color: transparent;
	border: 1px solid transparent;
}



.badge--sponsored {
	color: var(--bs-danger);
}


/* AI Badge Variant --------- */

a.badge--ai, button.badge--ai, .badge--ai {
	position: relative;
	padding: var(--asco-padding-xs) var(--asco-padding-sm);
	border-radius: var(--asco-radius-sm);
	border: 1px solid var(--asco-secondary-grey-20);
	background-color: var(--background-secondary);
}

a.badge--ai span, button.badge--ai span, .badge--ai span {
	background-image:
		linear-gradient(90deg, var(--asco-primary-blue) 0%, var(--asco-tertiary-rose) 100%);
	-webkit-background-clip: text, border-box;
	background-clip: text, border-box;
	-webkit-text-fill-color: transparent;
}

a.badge--ai:hover, button.badge--ai:hover, .badge--ai:hover {
	background-image:
		linear-gradient(90deg, var(--asco-primary-blue) 0%, var(--asco-tertiary-rose) 100%),
		linear-gradient(var(--asco-secondary-grey-20), var(--asco-bg-grey)),
		linear-gradient(90deg, var(--asco-primary-blue) 0%, var(--asco-tertiary-rose) 100%);
	-webkit-background-clip: text, padding-box, border-box;
	background-clip: text, padding-box, border-box;
	-webkit-text-fill-color: transparent;
	border: 1px solid transparent;
}




/* Drawer Styles ----------------- */
/* ------------------------------ */
/* ----------------------------- */

.drawer{
	position: fixed;
	z-index: 1400;
	display: grid;
	grid-template-rows: auto 1fr;
	width: 100%;
	width: 80vw;
	max-width: 500px;
	background-color: var(--card-backgrounds-primary);
	padding: var(--asco-padding-md) var(--asco-padding-md) 0 var(--asco-padding-md);
	transition: inset .25s ease;
}

.drawer--right {
	inset: 0 -100% 0 auto; /* off-screen to the right */
}

.drawer--right.is-open {
	inset: 0 0 0 auto; /* slide in from the right */
}

.drawer:has(.drawer__video){
	grid-template-rows: auto auto 1fr;
}

/* Dark overlay behind the drawer */
.drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1300;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.drawer-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.drawer__header{
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: var(--asco-gutter-md);
	align-content: center;
	padding-bottom: var(--asco-padding-sm);
}

.drawer__header-copy{
	display: flex;
	gap: var(--asco-gutter-sm);
	align-items: flex-end;
}

.drawer__header-copy > *{
	margin-bottom: 0;
}

.drawer__video {
	display: block;
	width: calc(100% + (var(--asco-padding-md) * 2));
	background: black;
	aspect-ratio: 16 / 9;
	margin: 0 calc(var(--asco-padding-md) * -1);
}

.drawer__list{
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-xs);
	padding: var(--asco-padding-sm) 0;
	align-self: stretch;
	overflow-x: scroll;

	--fade-l: var(--asco-gutter-sm, 12px);
	--fade-r: var(--asco-gutter-sm, 12px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	mask-mode: match-source;
}

.drawer__list-item{
	padding: var(--asco-padding-sm) var(--asco-padding-md);
	border-radius: var(--asco-radius-sm);
}

.drawer__list-item.active{
	background-color: var(--asco-primary-blue-10);
}

.drawer__list-item-title{
	position: relative;
	margin-bottom: 0;
}

.drawer__list-item-title::before{
	content: '';
	position: absolute;
	left: calc(var(--asco-padding-md) * -.5);
	top: 6px;
	display: inline-block;
	width: 6px;
	height: 6px;
	background-color: var(--asco-tertiary-rose);
	border-radius: 50%;
	opacity: 0;
	transition: var(--asco-anim-normal);
}

.unread .drawer__list-item-title::before{
	opacity: 1;
	transition: var(--asco-anim-normal);
}



/* Navigation Styles ------------- */
/* ------------------------------ */
/* ----------------------------- */

.brand-nav {
	background-color: var(--background-primary);
	border-bottom: var(--bs-border-width) solid var(--border-regular);
	min-height: 70px;
	position: sticky;
	top: 0;
	z-index: 1020;
}

.brand-nav .navbar-collapse {
	background-color: var(--background-primary);
	border-bottom: var(--bs-border-width) solid var(--border-regular);
	justify-content: space-between;
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
}

@media (min-width: 960px) {
	.brand-nav .navbar-collapse {
		background-color: transparent;
		border-bottom: 0;
		padding-right: 0;
		padding-left: 0;
		position: static;
		width: auto;
	}

	.brand-nav .navbar-nav {
		gap: var(--asco-gutter-sm);
	}
}

.brand-nav .nav-link {
	align-items: center;
	color: var(--text-primary-85pct);
	display: flex;
	font-weight: var(--asco-fw-medium);
	gap: var(--asco-gutter-xs);
}

.brand-nav .nav-link:hover,
.brand-nav .nav-link:focus {
	color: var(--asco-primary-blue);
}

.brand-nav .navbar-brand {
	margin-right: var(--asco-spacing-8);
}

.brand-nav .navbar__logo-img {
	height: 30px;
	width: auto;
	transition: var(--asco-anim-fast);
}

@media (min-width: 1200px) {
	.brand-nav .navbar__logo-img {
		height: 40px;
		transition: var(--asco-anim-fast);
	}
}

.megamenu {
	background-clip: border-box;
	background-color: var(--megamenu-bg);
	border-color: var(--megamenu-bg);
	border-radius: 0;
	color: var(--megamenu-color);
	margin-right: calc(var(--bs-gutter-x) * -.5);
	margin-left: calc(var(--bs-gutter-x) * -.5);
	padding-top: 0;
	padding-bottom: 0;
}

.megamenu.show {
	margin-top: calc(var(--bs-dropdown-border-width) * -1);
}

.megamenu__container {
	background-blend-mode: color;
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/kaqeayo4/nav-1.jpg"), var(--gradient-nav-1);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: var(--asco-padding-sm);
	padding-bottom: var(--asco-padding-sm);
}

.megamenu__container--2 {
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/a05byvj2/nav-2.jpg"), var(--gradient-nav-2);
}

.megamenu__container--3 {
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/rbuf3sdl/nav-3.png"), var(--gradient-nav-3);
}

.megamenu__container--4 {
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/yzwknlwi/nav-4.jpg"), var(--gradient-nav-4);
}

.megamenu__link {
	color: var(--megamenu-color);
	font-weight: var(--asco-fw-medium);
	text-decoration: none;
}

.megamenu__link-icon {
	align-items: center;
	display: flex;
	justify-content: center;
}

.megamenu__list {
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

.megamenu__list-item {
	margin-bottom: var(--asco-gutter-sm);
}

.megamenu__list-item:last-child {
	margin-bottom: 0;
}

@media (min-width: 960px) {
	.megamenu {
		margin-right: 0;
		margin-left: 0;
		width: 100%;
	}

	.megamenu__container {
		min-height: 314px;
		padding-top: var(--asco-padding-xl);
		padding-bottom: var(--asco-padding-xl);
	}

	.megamenu__list {
		column-gap: var(--asco-gutter-sm);
		display: grid;
		grid-auto-flow: column;
		grid-auto-rows: auto;
		grid-template-rows: repeat(6, auto);
		justify-content: center;
	}

	.megamenu__list-item:nth-child(2n+6) {
		margin-bottom: 0;
	}
}

.navbar-toggler--hamburger {
	align-items: center;
	border-color: transparent;
	display: flex;
	height: 2rem;
	justify-content: center;
	padding: 0;
	position: relative;
	width: 2rem;
}

.navbar-toggler--hamburger::after,
.navbar-toggler--hamburger::before {
	content: '';
	display: block;
	position: absolute;
	transition: var(--asco-anim-normal);
	width: 1.25rem;
}

.navbar-toggler--hamburger::after {
	border-top: 2px solid var(--text-tertiary);
	border-bottom: 2px solid var(--text-tertiary);
	height: 1rem;
}

.navbar-toggler--hamburger::before {
	background-color: var(--text-tertiary);
	height: 2px;
}

.navbar-toggler--hamburger:not(.collapsed)::after,
.navbar-toggler--hamburger:not(.collapsed)::before {
	width: 1.25rem;
}

.navbar-toggler--hamburger:not(.collapsed)::before {
	background: var(--text-primary);
	transform: rotate(-45deg);
}

.navbar-toggler--hamburger:not(.collapsed)::after {
	border-top: 0;
	border-bottom-color: var(--text-primary);
	height: 2px;
	transform: rotate(45deg);
}

.navbar-toggler--hamburger:not(.collapsed)::before,
.navbar-toggler--hamburger:hover::before {
	background-color: var(--text-primary);
}

.navbar-toggler--hamburger:hover::after {
	border-top-color: var(--text-primary);
	border-bottom-color: var(--text-primary);
}

#searchModal .btn-close {
	align-items: center;
	background-image: none;
    border: 1px solid var(--btn-primary-rev);
    color: var(--text-primary-contrastText);
	display: flex;
	flex-shrink: 0;
	height: var(--asco-fs-h4-global);
	justify-content: center;
	opacity: 1;
	padding: 0;
	width: var(--asco-fs-h4-global);
}

#searchModal .btn-close:hover {
    background-color: var(--btn-primary-rev);
	border-color: var(--btn-primary-rev);
	color: var(--text-primary);
}

#searchModal .btn-close .fill {
	fill: currentColor;
}

#searchModal .modal-body {
	align-items: center;
	column-gap: 1.5rem;
	display: flex;
	justify-content: space-between;
}

#searchModal .modal-content {
    background-color: transparent;
    border-color: transparent;
}

#searchModal .modal-dialog {
	max-width: 600px;
}

.specialties-menu.offcanvas {
	background-color: var(--secondary-clr-1-25);
	height: auto;
	top: var(--nav-umbrella-height);
	bottom: auto;
}

.specialties-menu .offcanvas-body {
	padding: var(--asco-padding-xl) 0;
}

.specialties-menu__nav {
	display: none;
}

@media (min-width: 960px) {
	.specialties-menu__nav {
		display: flex;
		margin-right: auto;
	}
}

.specialties-menu__list {
	column-count: 3;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

.specialties-menu__list-item {
	align-items: center;
	break-inside: avoid;
	color: var(--asco-dark);
	display: flex;
	font-weight: var(--asco-fw-light);
	overflow: hidden;
	padding: var(--asco-padding-smedium);
	position: relative;
	text-decoration: none;
	transition: var(--asco-anim-normal);
}

.specialties-menu__list-item::after {
	background-color: currentColor;
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--bs-border-width) * -1);
	transition: var(--asco-anim-normal);
	width: calc(var(--bs-border-width) * 2);
}

.specialties-menu__list-item:hover,
.specialties-menu__list-item:focus {
	background-color: rgba(var(--background-primary), .5);
	color: var(--asco-primary-blue);
}

.specialties-menu__list-item:hover::after,
.specialties-menu__list-item:focus::after {
	transform: translateX(var(--bs-border-width));
}

.umbrella-nav {
	background-color: var(--secondary-clr-1-25);
	border-bottom: var(--bs-border-width) solid var(--secondary-clr-1);
	min-height: var(--nav-umbrella-height);
	padding-top: 0;
	padding-bottom: 0;
	position: relative;
	z-index: 1046; /* Offcanvas z-index + 1 */
}

.specialties-menu.show + .umbrella-nav {
	margin-right: calc(var(--asco-margin-static) * -1);
	padding-right: var(--asco-margin-static);
}



/* Navigator Styles ------------------ */
/* ---------------------------------- */
/* --------------------------------- */

.asco-navigator{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: var(--asco-gutter-md) var(--asco-gutter-xl);
	align-content: flex-start;

	display: grid;
	grid-template-columns: 1fr;
	grid-gap: var(--asco-gutter-md) var(--asco-gutter-xl);
	align-content: flex-start;

	background-blend-mode: overlay;
	background-color: var(--asco-primary-blue-50);
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/pzmlftj3/asco-navigator-bg.jpg"), linear-gradient(90deg, var(--asco-primary-blue-50) 24.81%, rgba(0, 37, 87, 0) 45.19%, rgba(0, 37, 87, 0) 48.27%, var(--asco-primary-blue-50) 100%);
	padding: var(--asco-padding-md) var(--asco-padding-lg) var(--asco-padding-lg) var(--asco-padding-lg);
	padding: var(--asco-padding-md) var(--asco-padding-lg) var(--asco-padding-lg) var(--asco-padding-lg);
	color: var(--text-primary-contrastText);
	transition: padding .25s ease-in-out;
}

/* .full-width-section:has(.asco-navigator){
	background-blend-mode: overlay;
	background-color: var(--asco-primary-blue-50);
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/pzmlftj3/asco-navigator-bg.jpg"), linear-gradient(90deg, var(--asco-primary-blue-50) 24.81%, rgba(0, 37, 87, 0) 45.19%, rgba(0, 37, 87, 0) 48.27%, var(--asco-primary-blue-50) 100%);
} */

/* .full-width-section:has(.asco-navigator) .asco-navigator{
	background-blend-mode: none;
	background-color: transparent;
	background-image: transparent;
} */

@media (min-width: 800px) {
	.asco-navigator{
		grid-template-columns: 250px 1fr;
		padding: var(--asco-padding-lg);
		transition: padding .25s ease-in-out;
	}

}

.asco-navigator__header *{
	color: inherit;
}

.asco-navigator__title{
	font-size: var(--asco-fs-h1-global);
}

.asco-navigator__body{
	display: grid;
	grid-template-rows: auto auto;
	grid-gap: var(--asco-gutter-md);
}

.asco-navigator__list{
	display: flex;
	flex-direction: row;
	grid-gap: var(--asco-gutter-md);

	scrollbar-width: none;
	overflow-x: scroll;
	margin-left: calc(-1 * var(--asco-gutter-xs));
	margin-right: calc(-1 * var(--asco-gutter-xs));
	padding-left: var(--asco-gutter-xs);
	padding-right: var(--asco-gutter-xs);
	width: calc(100% + (2 * var(--asco-gutter-xs)));
	margin-bottom: -8px;
	padding-bottom: 8px;
	--fade-l: var(--asco-gutter-xs, 6px);
	--fade-r: var(--asco-gutter-xs, 6px);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	mask-mode: match-source;
}

.asco-navigator__list-item{
	flex: 1 0 275px;
	min-width: 30%;

	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: var(--asco-gutter-sm);
	align-items: center;;
	padding: var(--asco-padding-smedium)  var(--asco-padding-md);
	background-color: var(--background-light);
	border-radius:  var(--asco-radius-lg) var(--asco-radius-lg) var(--asco-radius-lg) 0;
	text-decoration: none;
	color: var(--text-primary);
	fill: var(--text-primary);
	transform: scale(1);
	transition: var(--asco-anim-fast);
}

.asco-navigator__list-item:hover{
	transform: scale(1.01);
	color: var(--text-primary-hover);
	transition: var(--asco-anim-fast);
}

.asco-navigator__list-item:hover path{
	fill: var(--text-primary-hover);
	transition: var(--asco-anim-fast);
}

.asco-navigator__search .input-group{
	max-width: 600px;
}



/* Subpage Header Styles ------------- */
/* ---------------------------------- */
/* --------------------------------- */

.content__header:has(.content__header-nav){
	display: grid;
	grid-gap: var(--asco-gutter-lg);
	padding-bottom: 0;
}

.content__header > *{
	position: relative;
	z-index: 3;
}

.content__header-nav {
	position: relative;
	z-index: 3;
	display: grid;
	background-color: var(--background-primary);
	padding: var(--asco-spacing-2) var(--asco-spacing-3);
}

.horizontal-scroll{
	scrollbar-width: none;
	overflow-x: scroll;
	margin-left: calc(-1 * var(--asco-padding-smedium));
	margin-right: calc(-1 * var(--asco-padding-smedium));
	padding-left: var(--asco-padding-smedium);
	padding-right: var(--asco-padding-smedium);
	width: calc(100% + (2 * var(--asco-padding-smedium)));
	--fade-l: var(--asco-padding-smedium, 16px);
	--fade-r: var(--asco-padding-smedium, 16px);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	mask-mode: match-source;
}

.content__header-nav-list{
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0 var(--asco-spacing-2);
}

.content__header-nav-list .btn{
	padding: var(--asco-spacing-4) var(--asco-spacing-5);
}

.content__header-nav-list .btn-active{
	color: var(--asco-primary-blue);
}

.content__header-img{
	position: absolute;
	inset: 0;
	display: grid;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;

	background: linear-gradient(90deg, var(--Brand-Blue-50, #002557) 15.38%, rgba(0, 0, 0, 0.00) 45.19%, rgba(0, 8, 18, 0.21) 88.68%, var(--Brand-Blue-50, #002557) 100%), linear-gradient(0deg, var(--Brand-Blue-70, #000E33) 0%, var(--Brand-Blue-70, #000E33) 100%), url(<path-to-image>) lightgray 5.126px -211.451px / 100.089% 582.732% no-repeat, #002861;
	background-blend-mode: normal, plus-lighter, normal, hard-light;
}

.content__header--topic::after,
.content__header--1::after{
	content: '';
	position: absolute;
	inset: 0;
	display: grid;
	width: 100%;
	height: 100%;
	object-fit: fill;
	object-position: center;
	z-index: 2;

	background: linear-gradient(90deg, var(--asco-primary-blue-50, #002557) 15.38%, rgba(0, 0, 0, 0.00) 45.19%, rgba(0, 8, 18, 0.21) 88.68%, var(--asco-primary-blue-50, #002557) 100%);
}

.content__header .content__title{
	position: relative;
	z-index: 3;
}




/* Lead Gen Widget Styles ------------ */
/* ---------------------------------- */
/* --------------------------------- */

.lead-gen-wrapper{
	background-color: white;
}

.lead-gen{
	grid-area: lead-gen;

	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 1.5rem;
	align-items: center;
	background-color: var(--background-secondary);
	padding: 1.5rem;
	max-width: 1300px;
	margin: 0 auto;
	border-top: 1px solid var(--asco-tertiary-rose);
}

.lead-gen__content{
	flex: 1 1 896px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 1.5rem;
	align-items: center;
}

.lead-gen .thumb-image{
	flex: 1 1 350px;
}

.lead-gen .card__body{
	flex: 3 1 300px;

}

.lead-gen .badge--secondary:hover {
	color: var(--id-body-text);
	background-color: var(--idh-secondary-clr);
	border: 1px solid var(--idh-secondary-clr);
}

.lead-gen .lead-gen__form{
	flex: 1 1 250px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--asco-gutter-smedium);
}

.lead-gen .form-group{
	flex: 1 1 200px;
	margin-bottom: 0;
}

.lead-gen .form-control{
	display: block;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;   
	border-radius: .35rem;
}

.lead-gen .btn{
	flex: 1 1 max-content;
}

@media (max-width: 1250px) {
	.lead-gen__content{
		align-items: flex-start;
	}
}

@media (max-width: 1100px) {
	.lead-gen .thumb-image{
/*        flex: 1 1 350px;*/
		flex: 1 1 210px;
	}
}

@media (max-width: 768px) {
	.lead-gen .form-group{
		flex: 1 1 150px;
		margin-bottom: 0;
	}
}

@media (max-width: 600px) {
	.lead-gen .thumb-image{
		flex: 1 1 100%;
	}

	.lead-gen .form-group{
		flex: 1 1 100%;
		margin-bottom: 0;
	}

	.lead-gen .lead-gen__form{
		gap: var(--asco-gutter-sm);
	}
}

/* NEWLY ADDED STYLES, REMINDER TO CLEAN UP THIS AND EXISTING CSS ABOVE */
.lead-gen__content{
	display: grid;
	grid-template-areas: 
		"lead-gen__image	lead-gen__badge"
		"lead-gen__image	lead-gen__title"
		"lead-gen__image	lead-gen__teaser"
		"lead-gen__form 	lead-gen__form";
	grid-template-columns: 5fr 8fr;
	grid-template-rows: auto auto auto auto;
	grid-gap: 0 var(--asco-gutter-md);
	align-items: flex-start;
}

.lead-gen__body{
	display: contents;
}

.lead-gen .thumb-image{
	grid-area: lead-gen__image;
}

.lead-gen .thumb-image img{
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--asco-radius-sm);
}

.lead-gen .badge-row{
	grid-area: lead-gen__badge;
	align-self: center;
}

.lead-gen .card__title{
	grid-area: lead-gen__title;
	margin: 0;
}

.lead-gen .card__teaser{
	grid-area: lead-gen__teaser;
	margin: 0;
}

.lead-gen .lead-gen__form{
	grid-area: lead-gen__form;
	margin-top: var(--asco-padding-md);
}

@media (max-width: 600px) {
	.lead-gen__content{
		grid-template-areas: 
			"lead-gen__body		lead-gen__image"
			"lead-gen__body		lead-gen__form";
		grid-template-columns: 8fr 5fr;
		grid-template-rows: auto auto;
	}

	.lead-gen__body{
		grid-area: lead-gen__body;
		display: grid;
		grid-template-areas: 
			"lead-gen__badge"
			"lead-gen__title"
			"lead-gen__teaser";
	}
}












/* Marketo Form Styles */

/* ---------- Base reset / container ---------- */
.mktoForm {
	display: grid !important;
	width: 100% !important;           /* override rigid inline width */
	max-width: 560px;                /* optional: set your preferred max */
	box-sizing: border-box;
}

/* Optional: consistent spacing between rows */
.mktoForm .mktoFormRow {
	margin: 0 0 var(--asco-spacing-6) 0 !important;
	padding: 0 !important;
}

/* Marketo uses offsets/gutters/clears for layout — hide or neutralize them */
.mktoForm .mktoOffset,
.mktoForm .mktoGutter,
.mktoForm .mktoClear {
	display: none !important;
}

/* ---------- Turn each row into a flex row ---------- */
.mktoForm .mktoFieldDescriptor.mktoFormCol,
.mktoForm .mktoFieldWrap {
	width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box;
}

/* The wrap is the main “row”: label above field */
.mktoForm .mktoFieldWrap {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: var(--asco-spacing-4);
}

/* Checkbox/radio rows: label + control side-by-side */
.mktoForm .mktoFieldWrap:has(.mktoCheckboxList),
.mktoForm .mktoFieldWrap:has(.mktoRadioList) {
	flex-direction: row;
	align-items: center;
	gap: var(--asco-spacing-6);
}

.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) .mktoLabel,
.mktoForm .mktoFieldWrap:has(.mktoRadioList) .mktoLabel {
	width: auto !important;
	flex: 0 0 auto;
}

/* ---------- Labels ---------- */
.mktoForm .mktoLabel {
	width: 100% !important;          /* override inline width */
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 600;
	line-height: 1.3;
	box-sizing: border-box;
	display: inline-flex;
	align-items: baseline;
	gap: var(--asco-spacing-4);
}

/* Make the required asterisk sit nicely */
.mktoForm .mktoAsterix {
	float: none !important;
	display: inline-block;
	order: 2;
	color: var(--asco-utility-red-60);
}

/* ---------- Inputs / selects / textareas ---------- */
.mktoForm input.mktoField,
.mktoForm select.mktoField,
.mktoForm textarea.mktoField {
	width: 100% !important;          /* override inline width */
	flex: 1 1 auto;                  /* fill available width */
	min-width: 0;
	box-sizing: border-box;

	padding: var(--asco-spacing-5) var(--asco-spacing-6);
	border: 1px solid var(--asco-secondary-grey-20);
	border-radius: var(--asco-radius-md);
	font-size: 14px;
	line-height: 1.2;
}

/* Focus state */
.mktoForm input.mktoField:focus,
.mktoForm select.mktoField:focus,
.mktoForm textarea.mktoField:focus {
	outline: none;
	border-color: var(--asco-utility-green-60);
}

/* ---------- Checkbox/radio lists (your Fax checkbox row) ---------- */
.mktoForm .mktoLogicalField.mktoCheckboxList,
.mktoForm .mktoLogicalField.mktoRadioList {
	width: 100% !important;
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;

	display: flex;
	align-items: center;
}

.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) .mktoLogicalField.mktoCheckboxList,
.mktoForm .mktoFieldWrap:has(.mktoRadioList) .mktoLogicalField.mktoRadioList {
	width: auto !important;
	flex: 0 0 auto;
}

/* Make checkbox not inherit “text input” styling */
.mktoForm .mktoCheckboxList input[type="checkbox"],
.mktoForm .mktoRadioList input[type="radio"] {
	width: auto !important;
	flex: 0 0 auto;
	min-width: 0;
	margin: 0 var(--asco-spacing-5) 0 0;
}

/* ---------- Instructions / validation ---------- */
.mktoForm .mktoInstruction {
	flex: 1 1 100%;
	font-size: 12px;
	color: var(--asco-utility-grey-80);
	margin-top: var(--asco-spacing-4);
}

/* ---------- Button row ---------- */
.mktoForm .mktoButtonRow {
	margin-top: var(--asco-spacing-8);
}

.mktoForm .mktoButtonWrap {
	margin-left: 0 !important;       /* overrides inline margin-left */
	display: flex;
	justify-content: flex-start;     /* change to center/right if desired */
}

/* Button */
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
	border-radius: var(--asco-radius-md) !important;
	padding: var(--asco-spacing-5) var(--asco-spacing-7);
	font-weight: 600;
	cursor: pointer;
}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
	color: var(--text-primary-contrastText) !important;
	border: 1px solid var(--btn-cta) !important;
	padding: 0.4em 1em !important;
	font-size: 1em !important;
	background: var(--btn-cta) !important;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {
	color: var(--text-primary-contrastText) !important;
	background: var(--btn-cta-hover) !important;
	border: 1px solid var(--btn-cta-hover) !important;
	box-shadow: var(--asco-shadow-xs) !important;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:focus {
	outline: 3px solid var(--border-focused) !important;
	color: var(--text-primary-contrastText) !important;
	background: var(--btn-cta-hover) !important;
	border: 1px solid var(--btn-cta-hover) !important;
	box-shadow: var(--asco-shadow-xs) !important;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:active{
	color: var(--text-primary-contrastText) !important;
	background: var(--btn-cta-active) !important;
	border: 1px solid var(--asco-primary-blue-70) !important;
	box-shadow: var(--asco-shadow-xs) !important;
}

/* ---------- Button: full-width on small screens ---------- */
@media (max-width: 640px) {
	.mktoForm .mktoButtonWrap {
		justify-content: stretch;
	}

	.mktoForm .mktoButtonWrap .mktoButton {
		width: 100%;
	}
}



/* ---------- Lead Gen Form Overrides ---------- */

.lead-gen__form .form-group .mktoFormCol {
	display: flex;
	float: inherit;
	min-height: inherit;
	height: 100%;
}

.lead-gen__form .form-group .mktoOffset, .lead-gen__form .form-group .mktoGutter {
	display: none;
}

.lead-gen__form .mktoFieldWrap {
	width: 100%;
}

.lead-gen__form input[type=text], .lead-gen__form input[type=url], .lead-gen__form input[type=email], .lead-gen__form input[type=tel], .lead-gen__form input[type=number], .lead-gen__form input[type=date], .lead-gen__form input[type=zip], .lead-gen__form input[type=org], .lead-gen__form textarea.mktoField, .lead-gen__form select.mktoField{
	padding: 3px 6px;
	height: 100%;
	width: 100%;
	font-size: 0.75em;
}

.lead-gen__form .mktoButtonRow{
	flex: 1 1 150px;
}

.lead-gen__form .mktoButtonRow .btn{
	height: 100%;
	width: 100%;
}

@media (max-width: 600px) {
	.lead-gen .form-group {
		flex: 1 1 150px; 
	}
	
	.lead-gen__form .mktoButtonRow {
		flex: 1 1 100%;
	}
}






/* Accordion Widget Styles ----------- */
/* ---------------------------------- */
/* --------------------------------- */

.accordion-item {
	color: var(--text-primary);
	background-color: transparent;
	border: 1px solid var(--divider);
	border-top: 1px solid var(--divider);
	border-left: none;
	border-right: none;
}

.accordion-item:first-of-type {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.accordion-button {
	padding: var(--asco-padding-smedium) var(--asco-padding-sm);
	color: var(--text-primary);
	background-color: transparent;
	border: 0;
	border-radius: 0;
	transition: var(--asco-anim-fast);
}

.accordion-button:not(.collapsed) {
	background-color: var(--asco-secondary-grey-20);
	border-bottom: 1px solid var(--asco-white);
}

.accordion-collapse.show, .accordion-collapse.collapsing {
	background-color: var(--asco-secondary-grey-20);
	transition: var(--asco-anim-fast);
}

.accordion-button:focus {
	box-shadow: none;
}






/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* Page Specific Styles */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */



/* Home/Landing Page Styles ------ */
/* ------------------------------ */
/* ----------------------------- */

.landing__feature {grid-area: landing-feature;}
.landing__horizontal {grid-area: landing-horizontal;}
.landing__mixed {grid-area: landing-mixed;}
.landing__vertical {grid-area: landing-vertical;}

.landing__horizontal .landing__card:nth-child(1) {grid-area: landing-horizontal-1;}
.landing__horizontal .landing__card:nth-child(2) {grid-area: landing-horizontal-2;}
.landing__horizontal .landing__card:nth-child(3) {grid-area: landing-horizontal-3;}

.landing__mixed .landing__card:nth-child(1) {grid-area: landing-mixed-1;}
.landing__mixed .landing__card:nth-child(2) {grid-area: landing-mixed-2;}
.landing__mixed .landing__card:nth-child(3) {grid-area: landing-mixed-3;}
.landing__mixed .landing__card:nth-child(4) {grid-area: landing-mixed-4;}
.landing__mixed .landing__card:nth-child(5) {grid-area: landing-mixed-5;}

.landing__vertical .landing__card:nth-child(1) {grid-area: landing-vertical-1;}
.landing__vertical .landing__card:nth-child(2) {grid-area: landing-vertical-2;}
.landing__vertical .landing__card:nth-child(3) {grid-area: landing-vertical-3;}

/* .landing__card--horizontal .landing__badges {grid-area: badges;} */
/* .landing__card--horizontal .landing__title {grid-area: body;} */
/* .landing__card--horizontal .landing__meta {grid-area: meta;} */

.landing__header {grid-area: landing-header;}
.landing__subheader {grid-area: landing-subheader;}

.landing__horizontal,
.landing__mixed,
.landing__vertical,
.page-layout--landing aside {
	display: contents;
}

.page-layout--landing,
.section--features-hero {
	grid-template-areas:
		"landing-header			landing-header"
		"landing-feature 		landing-feature"
		"landing-vertical-1 	landing-vertical-1"
		"landing-vertical-2		landing-vertical-3"
		"ad-1					ad-1"
		"landing-horizontal-1 	landing-horizontal-1"
		"landing-horizontal-2 	landing-horizontal-2"
		"landing-horizontal-3 	landing-horizontal-3"
		"promo-1				promo-1"
		"ad-2					ad-2";
	grid-template-columns: 1fr 1fr;
	gap: var(--asco-gutter-lg);
	padding-top: var(--asco-padding-lg);
	padding-bottom: var(--asco-padding-lg);
}

.section--features-hero:has(.lead-gen) {
	grid-template-areas:
		/* ADD THIS BACK ONCE AI DAILY BRIEFING IS READY */
		/* "landing-header			landing-header" */
		"landing-feature 		landing-feature"
		"landing-vertical-1 	landing-vertical-1"
		"landing-vertical-2		landing-vertical-3"
		"ad-1					ad-1"
		"landing-horizontal-1 	landing-horizontal-1"
		"landing-horizontal-2 	landing-horizontal-2"
		"landing-horizontal-3 	landing-horizontal-3"
		"lead-gen				lead-gen"
		"promo-1				promo-1"
		"ad-2					ad-2";
}

.section-layout--landing-video {
	/* Ad position can be adjusted */
	grid-template-areas: 
		/* ADD THIS BACK ONCE AI DAILY BRIEFING IS READY */
		/* "landing-header		landing-header" */
		/* ADD THIS BACK WHEN EDITORIAL FINALLY USES SUBHEADER FIELD */ 
		/* "landing-subheader	landing-subheader" */
		"landing-mixed-1 	landing-mixed-1"
		"landing-mixed-2	landing-mixed-3"
		"landing-mixed-4	landing-mixed-5"
		"ad-1				ad-1"
		"promo-1			promo-1"
		"ad-2				ad-2";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(6, auto);
	gap: var(--asco-gutter-lg);
	padding-top: var(--asco-padding-lg);
	padding-bottom: var(--asco-padding-lg);
}

@media (min-width: 560px) {
	.page-layout--landing,
	.section--features-hero  {
		grid-template-areas:
			/* ADD THIS BACK ONCE AI DAILY BRIEFING IS READY */
			/* "landing-header" */
			"landing-feature"
			"landing-vertical"
			"ad-1"
			"landing-horizontal-1"
			"landing-horizontal-2"
			"landing-horizontal-3"
			"promo-1"
			"ad-2";
		grid-template-columns: 1fr;
	}

.section--features-hero:has(.lead-gen) {
		grid-template-areas:
			/* ADD THIS BACK ONCE AI DAILY BRIEFING IS READY */
			/* "landing-header" */
			"landing-feature"
			"landing-vertical"
			"ad-1"
			"landing-horizontal-1"
			"landing-horizontal-2"
			"landing-horizontal-3"
			"lead-gen"
			"promo-1"
			"ad-2";
	}

	.section-layout--landing-video {
		/* Ad position can be adjusted */
		grid-template-areas: 
			/* ADD THIS BACK ONCE AI DAILY BRIEFING IS READY */ 
			/* "landing-header		landing-header" */
			/* ADD THIS BACK WHEN EDITORIAL FINALLY USES SUBHEADER FIELD */ 
			/* "landing-subheader	landing-subheader" */
			"landing-mixed-1	landing-mixed-2"
			"landing-mixed-3 	landing-mixed-4"
			"landing-mixed-5 	."
			"ad-1				ad-1"
			"promo-1			promo-1"
			"ad-2				ad-2";
	}

	/*.landing__mixed .landing__card:nth-child(n+4) {
		display: grid;
        grid-template-areas:
        	"badges badges"
        	"body image"
        	"meta meta";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        row-gap: var(--asco-gutter-xs);
	}

	.landing__mixed .landing__card:nth-child(n+4) .landing__body {
		display: contents;
	}*/

	.landing__mixed .landing__card:nth-child(n+4) .landing__title {
		-webkit-line-clamp: 4;
		max-height: calc(1.2em * 4);
	}

	.landing__vertical {
		display: grid;
    	grid-template-areas: 
			"landing-vertical-1		landing-vertical-2"
			"landing-vertical-1		landing-vertical-3";
		grid-template-columns: 3fr 4fr;
		grid-template-rows: auto auto;
        align-content: flex-start;
	}
}

@media (min-width: 800px) {

}

@media (min-width: 960px) {
	.page-layout--landing,
	.section--features-hero {
		grid-template-areas:
			/* ADD THIS BACK ONCE AI DAILY BRIEFING IS READY */
			/* "landing-header 		aside" */
			"landing-feature		aside"
			"landing-vertical 		aside"
			"landing-horizontal 	aside";
		grid-template-columns: 1fr 18.875rem;
		grid-template-rows: auto auto auto auto;
	}

	.section--features-hero:has(.lead-gen) {
		grid-template-areas:
			"landing-header 		aside"
			"landing-feature		aside"
			"landing-vertical 		aside"
			"landing-horizontal 	aside"
			"lead-gen 				aside";
	}

	.section-layout--landing-video {
		/* Ad position can be adjusted */
		grid-template-areas: 
			/* "landing-header		aside" */
			/* Remove row below when Daily News Breifling are ready and header is added */
			"landing-mixed		aside"
			"landing-mixed		aside";
		grid-template-columns: 1fr 18.875rem;
		grid-template-rows: auto auto;
		align-items: flex-start;
	}

	.section-layout--landing-video:has(.landing__subheader) {
		grid-template-areas:
			"landing-header aside"
			"landing-subheader aside"
			"landing-mixed aside";
		grid-template-columns: 1fr 18.875rem;
		grid-template-rows: auto auto auto;
	}

	.landing__vertical {
		display: grid;
    	grid-template-areas: 
			"landing-vertical-1		landing-vertical-2"
			"landing-vertical-1		landing-vertical-3";
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr;
        align-content: flex-start;
	}
	
	.landing__horizontal {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: 
			"landing-horizontal-1 landing-horizontal-2 landing-horizontal-3";
	}

	.landing__mixed {
		display: grid;
		grid-template-areas: 
			"landing-mixed-1 landing-mixed-1 landing-mixed-1 landing-mixed-2 landing-mixed-2 landing-mixed-2"
			"landing-mixed-3 landing-mixed-3 landing-mixed-4 landing-mixed-4 landing-mixed-5 landing-mixed-5";
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto auto;
	}

	/* If there are at least 5 cards, use the 2-top layout */
	.landing__mixed:has(> .landing__card:nth-child(5)) {
		grid-template-areas:
		"landing-mixed-1 landing-mixed-1 landing-mixed-1 landing-mixed-2 landing-mixed-2 landing-mixed-2"
		"landing-mixed-3 landing-mixed-3 landing-mixed-4 landing-mixed-4 landing-mixed-5 landing-mixed-5";
	}

	/* If there are only 4 cards, use the 1-top layout */
	.landing__mixed:not(:has(> .landing__card:nth-child(5))) {
		grid-template-areas:
		"landing-mixed-1 landing-mixed-1 landing-mixed-1 landing-mixed-1 landing-mixed-1 landing-mixed-1"
		"landing-mixed-2 landing-mixed-2 landing-mixed-3 landing-mixed-3 landing-mixed-4 landing-mixed-4";
	}

	/* If there are exactly 3 cards, show 3 horizontally (single row) */
	.landing__mixed:has(> .landing__card:nth-child(3)):not(:has(> .landing__card:nth-child(4))) {
		grid-template-areas:
		"landing-mixed-1 landing-mixed-1 landing-mixed-2 landing-mixed-2 landing-mixed-3 landing-mixed-3";
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto;
	}


	.landing__mixed .landing__card:nth-child(n+4) {
		display: flex;
		row-gap: var(--asco-gutter-smedium);
	}

	.landing__mixed .landing__card:nth-child(n+4) .landing__body {
		display: flex;
	}

	.landing__mixed .landing__card:nth-child(n+4) .landing__title {
		-webkit-line-clamp: 2;
		max-height: calc(1.2em * 2);
	}

	.page-layout--landing aside,
	.section--features-hero aside {
		display: grid;
	}
}

@media (min-width: 1140px) {
	.page-layout--landing,
	.section--features-hero {
		grid-template-areas:
			/* ADD THIS BACK ONCE AI DAILY BRIEFING IS READY */
			/* "landing-header 		landing-header 			aside" */
			"landing-vertical 		landing-feature 		aside"
			"landing-horizontal 	landing-horizontal 		aside";
		/* grid-template-columns: 18.875rem 1fr 18.875rem; */
		grid-template-columns: 11fr 23fr 18.875rem;
		grid-template-rows: auto auto 1fr;
	}

	.section--features-hero:has(.lead-gen) {
		grid-template-areas:
			/* ADD THIS BACK ONCE AI DAILY BRIEFING IS READY */
			/* "landing-header 		landing-header 			aside" */
			"landing-vertical 		landing-feature 		aside"
			"landing-horizontal 	landing-horizontal 		aside"
			"lead-gen			 	lead-gen		 		aside";
	}

	.landing__vertical {
		display: grid;
    	grid-template-areas: 
			"landing-vertical-1"
			"landing-vertical-2"
			"landing-vertical-3";
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
        align-content: flex-start;
	}
}

.landing__horizontal,
.landing__mixed,
.landing__vertical {
	gap: var(--asco-gutter-lg);
}

.landing__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asco-gutter-xs) var(--asco-gutter-sm);
	grid-area: badges;
}

.landing__badges:not(:first-child) {
	margin-top: var(--asco-gutter-static-xs);
}

.landing__badges:not(:last-child) {
	margin-bottom: var(--asco-spacing-1);
}

.landing__overlay .badge--flat:not(.badge--sponsored) {
	color: var(--asco-primary-blue-20);
}

.landing__body {
	align-items: flex-start;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--asco-gutter-xs);
}

.landing__btn-group {
	align-items: center;
	background-color: var(--btn-secondary);
	border-radius: var(--asco-radius-sm);
	display: flex;
	gap: var(--asco-gutter-static-xs);
	justify-content: center;
	margin-left: auto;
	padding: var(--asco-padding-static-xs);
}

.landing__btn-group .btn-check:checked + .btn {
	background-color: var(--btn-primary);
	color: var(--text-primary-contrastText);
}

.landing__btn-group .btn--icon-only {
	border-radius: 50%;
	color: var(--text-primary);
	line-height: 1;
	padding: 0;
}

.landing__card {
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-smedium);
	min-width: 0;
	overflow-wrap: anywhere;
	position: relative;
}

.landing__feature .landing__card {
	height: 100%;
}

.landing__header {
	align-items: center;
	display: flex;
	gap: var(--asco-gutter-md);
}

.landing__header .landing__title {
	font-size: var(--asco-fs-h4-global);
}

.landing__image {
	border-radius: calc(var(--asco-radius-md) - (1px));
	display: block;
	flex-shrink: 0;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.landing__image--contain {
	object-fit: contain;
}

.landing__image-container {
	aspect-ratio: 16 / 9;
	border-radius: var(--asco-radius-md);
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
}

.landing__image-overlay {
	align-items: flex-end;
	background-blend-mode: multiply;
	/* background-image: linear-gradient(299.4deg, rgba(0, 111, 213, 0) 61.28%, #000E33 89.41%); */
	border-radius: calc(var(--asco-radius-md) - (1px));
	display: flex;
	justify-content: space-between;
	padding: var(--asco-padding-xs) var(--asco-padding-sm);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.landing__feature .landing__image-container {
	aspect-ratio: auto;
	/* min-height: 60vh; */
	min-height: 560px;
}

@media (min-width: 1140px) {
	.landing__feature .landing__image-container {
		aspect-ratio: initial;
		height: 100%;
	}
}

@media (min-width: 960px) {
	.landing__feature-horizontal .landing__image-container {
		aspect-ratio: 4 / 3;
		justify-content: center;
		min-height: 0;
	}

	.landing__feature-horizontal .landing__overlay {
		justify-content: center;
	}
}

@media (min-width: 1280px) {
	.landing__feature-horizontal .landing__image-container {
		aspect-ratio: 16 / 9;
	}

	.landing__feature-horizontal .landing__title {
		max-width: 50%;
	}
}

.landing__image-icon {
	color: var(--asco-primary-blue-20);
	font-size: var(--asco-fs-h3-global);
	line-height: 1;
}

.landing__link {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.125em;
}

.landing__link:hover,
.landing__link:focus {
	color: inherit;
	text-decoration: underline;
}

.landing__link:focus-visible {
	outline: 3px solid var(--border-focused);
}

.landing__meta {
	align-items: flex-start;
	color: var(--text-tertiary);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--asco-fs-2);
	gap: var(--asco-gutter-xs) var(--asco-gutter-sm);
	grid-area: meta;
	line-height: 1;
	text-transform: uppercase;
}

/*
/*
.landing__meta:not(:first-child) {
	margin-top: var(--asco-gutter-static-xs);
}

.landing__meta:not(:last-child) {
	margin-bottom: var(--asco-spacing-1);
}
*/

.section__item-date ~ .landing__body .landing__meta {
	margin-top: 0;
	margin-bottom: 0;
}

.landing__overlay .landing__meta {
	color: inherit;
}

.landing__overlay {
	align-items: flex-start;
	background-blend-mode: overlay;
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/gxghwrbp/feature-overlay-2.svg"), radial-gradient(107.25% 65.26% at 59.73% 32.8%, rgba(0, 0, 0, 0) 0%, rgba(0, 24, 71, 0.8) 66.83%, #000000 100%);
	background-position: bottom, 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var(--asco-radius-md);
	color: var(--text-primary-contrastText);
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-xs);
	justify-content: flex-end;
	padding: var(--asco-padding-lg);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.landing__feature-horizontal .landing__overlay {
	background-blend-mode: overlay;
	/* background-color: #0069FF4D; */
	background-image: radial-gradient(79.89% 469.64% at 78.36% 63.19%, rgba(0, 0, 0, 0) 0%, rgba(0, 24, 71, 0.8) 66.83%, #000000 100%);
	gap: var(--asco-gutter-smedium);
}

.landing__text {
	margin-bottom: 0;
}

.landing__overlay .landing__text {
	color: var(--asco-primary-blue-20);
}

.landing__title {
	font-size: var(--asco-fs-h6-global);
	font-weight: var(--asco-fw-bold);
	grid-area: body;
	margin-bottom: 0;
}

.landing__feature .landing__title {
	font-size: var(--asco-fs-h3-global);
	font-weight: var(--asco-fw-bold);
}

.section--features-hero .landing__horizontal .landing__image-container {
	display: none;
}

.landing__horizontal-alt .landing__image-container {
	display: block;
}

.landing__card--horizontal-2 .badge {
	font-size: var(--asco-fs-1);
}

.landing__card--horizontal-2 {
	display: grid;
	grid-template-areas:
		"image"
		"badges"
		"body";
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	row-gap: var(--asco-gutter-xs);
}

.landing__card--horizontal-2 .landing__badges {
	display: flex;
	gap: var(--asco-gutter-xs);
}

.landing__card--horizontal-2 .landing__badges > .badge:nth-child(n + 3) {
  	display: none;
}

.landing__card--horizontal-2 .landing__badges > .badge {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (min-width: 960px) {
	.landing__card--horizontal-2{
		grid-template-areas:
			"badges badges"
			"image body";
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(2, auto);
		grid-template-rows: auto;
	}
}

@media (min-width: 560px) {
	.landing__card--horizontal {
		display: grid;
		grid-template-areas:
			"badges badges"
			"body image"
			"meta meta";
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(3, auto);
		row-gap: var(--asco-gutter-xs);
	}

	.landing__card--horizontal .landing__body, .landing__card--horizontal-2 .landing__body {
		display: contents;
	}

	.landing__card--horizontal .landing__image-container, .landing__card--horizontal-2 .landing__image-container {
		grid-area: image;
		margin-top: 0.25em;
		margin-bottom: 0.25em;
	}

	.landing__horizontal-alt .landing__body {
		display: contents;
	}

	.landing__horizontal-alt .landing__card {
		display: grid;
		grid-template-areas:
			"badges badges"
			"body image"
			"meta meta";
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(3, auto);
		row-gap: var(--asco-gutter-xs);
	}
}

@media (min-width: 800px) {
	.landing__card--horizontal {
		grid-template-columns: 3fr 2fr;
	}
}

@media (min-width: 960px) {
	.section--features-hero  .landing__horizontal .landing__image-container {
		display: grid;
	}

	.landing__horizontal-alt .landing__body,
	.landing__horizontal-alt .landing__card {
		display: flex;
	}

	.landing__horizontal-alt .landing__card {
		gap: var(--asco-gutter-smedium);
	}
}



/* Landing Page Styles ----------- */
/* ------------------------------ */
/* ----------------------------- */

.content__header {
	/* background-blend-mode: multiply; */
	background-color: var(--asco-primary-blue-50);
	background-image: linear-gradient(90deg, var(--asco-primary-blue-50) 15.38%, rgba(0, 0, 0, 0) 45.19%, rgba(0, 8, 18, 0.208507) 88.68%, var(--asco-primary-blue-50) 100%);
	color: var(--text-primary-contrastText);
	padding-top: var(--asco-padding-xl);
	padding-bottom: var(--asco-padding-xl);
	position: relative;
}

.content__header--1 {
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/kaqeayo4/nav-1.jpg"), linear-gradient(90deg, var(--asco-primary-blue-50) 15.38%, rgba(0, 0, 0, 0) 45.19%, rgba(0, 8, 18, 0.208507) 88.68%, var(--asco-primary-blue-50) 100%);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.content__header--5 {
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/udvfhxdc/nav-5.jpg"), linear-gradient(90deg, var(--asco-primary-blue-50) 15.38%, rgba(0, 0, 0, 0) 45.19%, rgba(0, 8, 18, 0.208507) 88.68%, var(--asco-primary-blue-50) 100%);
}

.content__nav {
	align-items: center;
	background-color: var(--background-primary);
	color: var(--border-focused);
	column-gap: var(--asco-gutter-static-xs);
	margin-top: var(--asco-padding-xl);
	margin-bottom: calc(var(--asco-padding-xl) * -1);
	padding-top: var(--asco-padding-static-xs);
	padding-bottom: var(--asco-padding-static-xs);
}

.content__nav .btn--primary-text {
	padding-right: var(--asco-padding-smedium);
	padding-left: var(--asco-padding-smedium);
}

.content__title {
	margin-bottom: 0;
}



/* Article Page Styles ----------- */
/* ------------------------------ */
/* ----------------------------- */
/* ---------------------- (°_°) */

.section-layout--article {
	display: grid;
	gap: var(--asco-gutter-lg);
	grid-template-areas:
		"article-header 		article-header"
		"article-body-image 	article-body-image"
		"article-share 			article-body-1"
		"article-share 			article-ai"
		"article-share 			article-body-2"
		"article-share 			ad-1"
		"article-share 			article-body-3"
		"article-share 			ad-2"
		"promo-1 				promo-1"
		"list-container 		list-container";
	grid-template-columns: auto 1fr;
	grid-template-rows: repeat(10, auto);
	padding-top: var(--asco-padding-lg);
	padding-bottom: var(--asco-padding-lg);
}

.section-layout--article:has(.active.panel-tab){
	grid-template-areas:
		"article-header 	article-header"
		"article-share 		article-body-1"
		"article-share 		article-ai"
		"article-share 		ad-1"
		"promo-1 			promo-1"
		". 					ad-2"
		"list-container 	list-container";
	grid-template-rows: repeat(7, auto);
}

.section-layout--article:has(.active.panel-tab.panel-takeaways){
	grid-template-areas:
		"article-header 	article-header"
		"article-share 		article-body-1"
		"article-share 		ad-1"
		"promo-1 			promo-1"
		". 					ad-2"
		"list-container 	list-container";
	grid-template-rows: repeat(6, auto);
}

.section-layout--article .area--aside {
	display: contents;
}

.section-layout--article .article {
	display: contents;
	grid-area: article;
}

.article__header {grid-area: article-header;}
.article__share{grid-area: article-share;}
.panel-full-article--1 {grid-area: article-body-1;}
.panel-full-article--2 {grid-area: article-body-2;}
.panel-full-article--3 {grid-area: article-body-3;}
.panel-full-article--image {grid-area: article-body-image;}
.panel-tab {grid-area: article-body-1;}

.section-layout--article:has(.active.panel-tab.panel-takeaways) .panel-ai {
	display: none;
}

.panel-full-article:focus-visible,
.panel-tab:focus-visible {
	outline: 0;
}

.panel-full-article > :last-child {
	margin-bottom: 0;
}

.card--takeaway {
	align-items: flex-start;
	flex-direction: row;
	gap: var(--asco-gutter-smedium);
	padding: var(--asco-padding-smedium) var(--asco-padding-md);
}

.card--takeaway .card-body {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-sm);
	padding: 0;
}

.card--takeaway .card-text:last-of-type {
	margin-bottom: 0;
}

.card--takeaway .display {
	color: var(--asco-primary-blue-40);
	font-size: var(--asco-fs-h1-display);
	line-height: 1;
	min-width: var(--asco-fs-h4-display);
}

.card--takeaway .header {
	font-size: var(--asco-fs-h5-global);
	font-weight: var(--asco-fw-bold);
	margin-bottom: 0;
}

.tab-pane h2, 
.tab-pane h2.article__title {
    font-size: 2rem;
    font-family: var(--jadpro-header-font);
    font-weight: 700;
    margin-top: 2.5rem;
}

.tab-pane h3, 
.tab-pane h3.article__title {
    font-size: 1.5rem;
    font-family: var(--jadpro-header-font);
    font-weight: 700;
    margin-top: 1.5rem;
}

.tab-pane h4, 
.tab-pane h4.article__title{
    font-size: 1.125rem;
    font-family: var(--jadpro-body-font);
    font-weight: 800;
    margin-top: 2rem;
}

.tab-pane h5, 
.tab-pane .article__title h5 {
    font-size: 1rem;
    font-family: var(--jadpro-body-font);
    font-weight: 800;
    margin-top: 1.5rem;
}

.tab-pane p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.tab-pane hr {
    margin: 1rem 0;
}

.tab-pane a {
    overflow-wrap: break-word;
    word-break: break-all;
}

@media (min-width: 650px) {
	.article__header {
		grid-template-areas:
			"article-badges 	article-socials"
			"article-title 		article-title"
			"article-teaser 	article-teaser"
			"article-meta 		article-meta";
		grid-template-columns: 1fr auto;
	}

	.article__header:has(.article__header-actions) {
		grid-template-areas:
			"article-badges article-socials"
			"article-title article-title"
			"article-teaser article-teaser"
			"article-meta article-meta"
			"article-actions article-actions";
	}

	.article__header-actions {
		grid-area: article-actions;
	}

	.article__header-badges {
		grid-area: article-badges;
	}

	.article__header-meta {
		grid-area: article-meta;
	}

	.article__header-socials {
		grid-area: article-socials;
	}

	.article__teaser {
		grid-area: article-teaser;
	}

	.article__title {
		grid-area: article-title;
	}
}

@media (min-width: 960px) {
	.article__header {
		margin-bottom: var(--asco-gutter-smedium);
	}

	.article__share {
		margin-right: var(--asco-gutter-smedium);
	}

	.section-layout--article,
	.section-layout--article:has(.active.panel-tab),
	.section-layout--article:has(.active.panel-tab.panel-takeaways){
		grid-template-areas:
			"article 			aside"
			"list-container 	list-container";
		grid-template-columns: 1fr 18.875rem;
		grid-template-rows: auto auto;
	}

	.section-layout--article .area--aside {
		display: grid;
	}

	.section-layout--article .article {
		display: grid;
		gap: var(--asco-gutter-smedium);
		grid-template-areas:
			"article-header article-header"
			"article-body-image article-body-image"
			"article-share article-body-1"
			"article-share article-ai"
			"article-share article-body-2"
			"article-share article-body-3";
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto auto 1fr auto auto;
	}

	.section-layout--article .article:has(.active.panel-tab) {
		grid-template-areas:
			"article-header article-header"
			"article-share article-body-1"
			"article-share article-ai";
		grid-template-rows: auto auto 1fr;
	}

	.section-layout--article .article:has(.active.panel-tab.panel-takeaways) {
		grid-template-areas:
			"article-header article-header"
			"article-share article-body-1";
		grid-template-rows: auto 1fr;
	}

	.section-layout--article .article:has(.active.panel-tab.panel-takeaways) .panel-ai {
		display: none;
	}

	.panel-full-article--image {
		margin-bottom: var(--asco-gutter-smedium);
	}
}




/* Search Results Page Styles ---- */
/* ------------------------------ */
/* ----------------------------- */
/* ---------------------- (°_°) */

.section-layout--search{
	grid-template-areas:
		"filters		results			aside";
	grid-template-columns: 12.5rem 1fr 18.875rem;
	grid-template-rows: auto 1fr;
	grid-gap: var(--asco-gutter-md);
	padding: var(--asco-padding-lg) 0;
}

.area--search-filters{
	grid-area: filters;
	gap: var(--asco-gutter-sm);
}
.area--results-col{
	grid-area: results; 
	display: flex;
    flex-direction: column;
	gap: var(--asco-gutter-lg);
}
.area--results-1{grid-area: results-1;}
.area--results-2{grid-area: results-2;}
.area--results-3{grid-area: results-3;}
.area--results-4{grid-area: results-4;}
.area--results-5{grid-area: results-5;}

.area--search-filters .position-sticky{
	height: 100%;
	max-height: 90svh;
	overflow-y: scroll;
}
.area--search-filters .search-filters__toggle-btn,
.area--results-col .search-filters__toggle-btn, 
.area--search-filters .search-filters__toggle-btn-close,
.filters-title {
	display: none;
}

.area--results-col-header{
	display: flex;
	gap: var(--asco-gutter-md);
	justify-content: space-between;
	align-items: flex-end;
}

.area--results-col .content-area{
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-lg);
}

.area--results-col .section__list-item {
	position: relative;
	display: grid;
	gap: var(--asco-gutter-xs) var(--asco-gutter-smedium);
	grid-template-areas:
		"badges     badges      image"
		"title      title       image"
		"date       meta        image"
		"teaser     teaser      image";
	grid-template-columns: auto 1fr 40%;
	align-items: center;
}

.area--results-col .section__list-item .landing__body {
	display: contents;
}

.section__list-item .landing__image-container{
	align-self: flex-start;
}

@media (max-width: 1120px) {
	.section-layout--search{
		grid-template-areas:
			"filters		results-1"
			"filters		ad-1"
			"filters		results-2"
			"filters		ad-2"
			"filters		results-3"
			"filters		promo-1"
			"filters		results-4"
			"filters		ad-3"
			"filters		results-5"
			"filters		footer";
		grid-template-columns: 12.5rem 1fr;
		grid-template-rows: repeat(11, auto);
	}

	.area--results-col, .section-layout--search .area--aside {
		display: contents;
	}

	.section-layout--search .recommended__area {
        border-top: 0px solid transparent;
        padding-top: var(--asco-padding-sm);
        padding-bottom: var(--asco-padding-lg);
        border-bottom: 1px solid var(--divider);
	}
}

@media (max-width: 750px) {
	.section-layout--search{
		position: relative;
		grid-template-areas:
			"results-1"
			"ad-1"
			"results-2"
			"ad-2"
			"results-3"
			"promo-1"
			"results-4"
			"ad-3"
			"results-5"
			"footer";
		grid-template-columns: 1fr;
		grid-template-rows: repeat(11, auto);
	}
	
	.area--results-col .search-filters__toggle-btn {
        display: inline-flex;
    }

	.filters-title{
		display: block;
	}

	.area--search-filters .search-filters__toggle-btn-close{
		display: inline-flex;
		position: absolute;
		top: var(--asco-padding-lg);
		right: var(--asco-padding-lg);
	}
	
	.area--search-filters {
		position: fixed;
		/* hidden by default on mobile: left = 100% */
		inset: 0 auto 0 -100%;
		z-index: 1400;
		width: 100%;
		max-width: 60vw;
		transition: left .25s ease;
	}
	
	.area--search-filters .position-sticky{
		padding: var(--asco-padding-lg);
		background-color: var(--background-primary);
		box-shadow: var(--asco-shadow-md);
		border-radius: 0;
		width: 100%;
		max-height: 100svh;
	}
	
	.area--search-filters.is-open {
		/* revealed: left = 0% */
		inset: 0 auto 0 0%;
	}

	/* Backdrop created by JS */
	.search-filters__backdrop {
		position: fixed;
		inset: 0;
		z-index: 1399; /* just below the panel */
		background: rgba(0,0,0,.4);
		opacity: 0;
		pointer-events: none;
		transition: opacity .2s ease;
	}
	
	.search-filters__backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	/* Prevent background scroll when panel is open */
	body.filters-open {
		overflow: hidden;
	}
}

/* Off-canvas filters behavior (mobile) */
@media (max-width: 600px) {
	.area--results-col .section__list-item {
		grid-template-areas:
			"badges     badges      badges"
			"title      title       image"
			"date       date        image"
			"meta       meta        image"
			"teaser     teaser      teaser";
		grid-template-columns: auto 1fr 125px;
		gap: var(--asco-gutter-xs) var(--asco-gutter-md);
		justify-items: flex-start;
	}
}

@media (max-width: 400px) {
	.area--results-col .section__list-item {
		grid-template-areas:
			"image		image"
			"badges     badges"
			"title      title"
			"date       meta"
			"teaser     teaser";
		grid-template-columns: auto 1fr;
	}
}


.search{
	display: flex;
	justify-content: center;
	padding: var(--asco-padding-xl);
	background: var(--card-backgrounds-gradient-90);	
	border: 1px solid var(--border-emphasis);
}

.search__max-width-wrapper{
	display: grid;
	grid-gap: var(--asco-gutter-sm);
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.area--search-filters .checkbox{
	padding: 0;
    gap: var(--asco-gutter-sm);
	transition: var(--asco-anim-fast);
	cursor: pointer;
}

/* .area--search-filters .checkbox:hover{
	background-color: var(--asco-secondary-grey-20);
	transition: var(--asco-anim-fast);
} */

.accordion.accordion--filters{
	display: flex;
	flex-direction: column;
	/* gap: var(--asco-gutter-sm); */
	border: 0px solid transparent;
	border-top: 1px solid var(--divider);
}

.accordion--filters .accordion-item{
	background-color: transparent;
	border: 0px solid transparent;
	border-bottom: 1px solid var(--divider);
}

.accordion-item:last-of-type{
	border-radius: 0;
}

.accordion--filters .accordion-button{
	padding: var(--asco-padding-smedium) 0;
	border-radius: 0 !important;
	box-shadow: var(--asco-shadow-xs);
}

.accordion-button:not(.collapsed) {
    background-color: var(--background-primary);
}

/* .accordion__filter-btn-list .btn{
	padding-left: 0;
	padding-right: 0;
} */

.accordion--filters .accordion-body {
	background-color: var(--background-secondary);
	margin: 0;
	padding: 0;
}

.accordion__filter-btn-list {
	display: grid;
	/* grid-gap: var(--asco-gutter-xs); */
	list-style-type: none;
	padding: var(--asco-padding-xs) 0;
	margin: 0;
}

.checkbox{
	position: relative;
	display: flex;
	padding-bottom: var(--asco-padding-xs);
}

/* Hide the checkbox visually but keep it accessible */
/* .accordion--filters input[type="checkbox"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	margin: 0;
	cursor: pointer;
} */

/* Style the label to look like regular clickable text */
.accordion--filters .checkbox label {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: var(--asco-gutter-xs);
	padding: var(--asco-padding-sm) var(--asco-padding-smedium);
	font-size: var(--asco-fs-3);
	width: 100%;
	cursor: pointer;
}

.accordion--filters .checkbox:hover label span {
	color: var(--text-primary-hover);
	transition: var(--asco-anim-normal);
}

/* Optional: add a visual cue when checked */
.accordion--filters input[type="checkbox"]:checked + label span {
	font-weight: var(--asco-fw-semibold);
	text-decoration: underline;
}

.results-number{
	color: var(--text-tertiary);
}

.area--search-filters .position-sticky p:first-child, .search__result-findings{
	color: var(--text-tertiary);
}

.search__result-findings-num, .search__result-findings-term{
	font-weight: var(--asco-fw-semibold);
	color: var(--text-secondary);
}

#activeFilters .accordion-body{
	margin: 0 0 var(--asco-padding-md) 0;
}

#activeFilters .accordion__filter-btn-list{
	display: flex;
	flex-wrap: wrap;
	gap: var(--asco-gutter-xs);
}

#activeFilters .checkbox {
    border-bottom: 1px solid var(--divider);
    font-size: var(--asco-fs-3);
    padding: 0 var(--asco-spacing-4);
    border: 1px solid var(--btn-secondary);
    min-width: 24px;
    min-height: 24px;
    border-radius: var(--asco-radius-sm);
    line-height: var(--asco-lh-dense);
}

#activeFilters .checkbox label{
	align-items: center;
}

#activeFilters .checkbox label svg, #activeFilters .checkbox label .icon{
	max-width: var(--asco-spacing-4); max-height: var(--asco-spacing-4);
}

.active-filters{
	display: flex;
	flex-wrap: wrap;
	gap: var(--asco-gutter-xs);
	margin-bottom: var(--asco-padding-md);
}




/* Meeting Page Styles ----------- */
/* ------------------------------ */
/* ----------------------------- */
/* ---------------------- (°_°) */

.section-layout--meeting {
	gap: var(--asco-gutter-lg);
	grid-template-areas:
		"landing-feature 	landing-feature"
		"landing-header 	landing-header"
		"meeting-1 			meeting-2"
		"ad-1 				ad-1"
		"meeting-3 			meeting-4"
		"meeting-5 			meeting-6"
		"ad-2 				ad-2"
		"promo-1 			promo-1";
	grid-template-columns: 1fr 1fr;
	padding-top: var(--asco-padding-lg);
	padding-bottom: var(--asco-padding-lg);
}

.section-layout--meeting.list-view {
	grid-template-areas:
		"landing-feature 	landing-feature"
		"landing-header 	landing-header"
		"meeting-1 			meeting-1"
		"meeting-2 			meeting-2"
		"ad-1 				ad-1"
		"meeting-3 			meeting-3"
		"meeting-4 			meeting-4"
		"meeting-5 			meeting-5"
		"meeting-6 			meeting-6"
		"ad-2 				ad-2"
		"promo-1 			promo-1";
}

.meeting__grid {
	display: contents;
}

.meeting__grid .landing__card:nth-child(1) {	grid-area: meeting-1; }
.meeting__grid .landing__card:nth-child(2) {	grid-area: meeting-2; }
.meeting__grid .landing__card:nth-child(3) {	grid-area: meeting-3; }
.meeting__grid .landing__card:nth-child(4) {	grid-area: meeting-4; }
.meeting__grid .landing__card:nth-child(5) {	grid-area: meeting-5; }
.meeting__grid .landing__card:nth-child(6) {	grid-area: meeting-6; }

@media (min-width: 960px) {
	.section-layout--meeting,
	.section-layout--meeting.list-view {
		grid-template-areas:
			"landing-feature 	aside"
			"landing-header 	aside"
			"meeting-grid		aside";
		grid-template-columns: 1fr 18.875rem;
	}

	.meeting__grid {
		display: grid;
		gap: var(--asco-gutter-lg);
		grid-area: meeting-grid;
		grid-template-areas:
			"meeting-1 meeting-2 meeting-3"
			"meeting-4 meeting-5 meeting-6";
		grid-template-columns: repeat(3, 1fr);
	}

	.section-layout--meeting.list-view .meeting__grid {
		grid-template-areas:
			"meeting-1"
			"meeting-2"
			"meeting-3"
			"meeting-4"
			"meeting-5"
			"meeting-6";
		grid-template-columns: 1fr;
	}
}


/* Meeting card styles */
.meeting__card .landing__image-container {
	grid-area: image;
}

.meeting__card .landing__title {
	grid-area: title;
}

.meeting__cta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--asco-gutter-xs);
	grid-area: cta;
}

.landing__feature .meeting__cta:not(:first-child) {
	margin-top: var(--asco-padding-sm);
}

.landing__feature .meeting__cta:not(:last-child) {
	margin-bottom: var(--asco-padding-sm);
}

.meeting__cta .btn {
	z-index: 1;
}

.meeting__date {
	grid-area: date;
}

.meeting__details .meeting__date {
	display: contents;
}

.meeting__details {
	display: grid;
	column-gap: var(--asco-gutter-xs);
	grid-template-areas:
		"date 		date"
		"location 	location"
		". 			title"
		". 			list"
		". 			cta";
	grid-template-columns: auto 1fr;
	row-gap: var(--asco-gutter-xs);
}

.meeting__item {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	&:not(:last-child) {
		margin-bottom: var(--asco-padding-sm);
	}
}

.meeting__link {
	color: inherit;
	position: relative;
	text-decoration: none;
	text-underline-offset: 0.125em;
	z-index: 1;
}

.meeting__link:hover,
.meeting__link:focus {
	color: inherit;
	text-decoration: underline;
}

.meeting__list {
	grid-area: list;
	list-style: none;
	margin-bottom: 0;
	min-width: 0;
	padding-left: 0;
}

.meeting__location {
	grid-area: location;
}

.meeting__details .meeting__location {
	display: contents;
}

.meeting__subtitle {
	grid-area: title;

	&:not(:first-child) {
		margin-top: var(--asco-padding-sm);
	}

	&:not(:last-child) {
		margin-bottom: var(--asco-padding-sm);
	}
}

@media (min-width: 1280px) {
	.meeting__details {
		max-width: 50%;
	}
}

/* Meeting card styles - list */
.list-view .meeting__card {
	flex-direction: row-reverse;
}

.list-view .meeting__card:not(:last-child)::after {
	background-color: var(--asco-utility-grey-10);
	content: "";
	display: block;
	height: 1px;
	position: absolute;
	right: 0;
	bottom: calc(var(--asco-gutter-lg) / -2);
	left: 0;
	width: 100%;
}

.list-view .meeting__card .landing__image-container {
	width: 100px;
}

@media (min-width: 768px) {
	.list-view .meeting__card {
		align-items: center;
		display: grid;
		grid-template-areas:
			"date title cta image"
			"date location cta image";
        grid-template-columns: 100px 1fr auto 200px;
		row-gap: var(--asco-gutter-xs);
	}

	.list-view .meeting__card .landing__body {
		display: contents;
	}

	.list-view .meeting__card .landing__image-container {
		width: auto;
	}

	.list-view .meeting__card .landing__meta {
		display: contents;
	}

	.list-view .meeting__card .landing__title {
		align-self: flex-end;
	}

	.list-view .meeting__card .meeting__cta {
		align-items: stretch;
		flex-direction: column;
	}

	.list-view .meeting__card .meeting__date {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: var(--asco-gutter-xs);
		justify-content: center;
	}

	.list-view .meeting__card .meeting__date-divider {
		border-left: 1px solid currentColor;
		line-height: 1;
		overflow: hidden;
		width: 1px;
	}

	.list-view .meeting__card .meeting__location {
		align-self: flex-start;
	}
}



/* Video Page Styles ------------- */
/* ------------------------------ */
/* ----------------------------- */
/* ---------------------- (°_°) */

.section-layout--video {
	position: initial;
	display: grid;
	gap: var(--asco-gutter-lg);
	grid-template-areas:
		"article-header 	article-header"
		"article-video 		article-video"
		"article-video-nav 	article-video-nav"
		"article-share 		article-video-body"
		"article-share 		ad-1"
		"promo-1 			promo-1"
		". 					ad-2"
		"list-container 	list-container";
	grid-template-columns: auto 1fr;
	grid-template-rows: repeat(10, auto);
	padding-top: var(--asco-padding-lg);
	padding-bottom: var(--asco-padding-lg);
}

.section-layout--video:has(.area--playlist) {
	grid-template-areas:
		"article-header article-header"
		"article-video article-video"
		"article-video-nav article-video-nav"
		"article-share article-video-body"
		"article-share ad-1"
		"playlist playlist"
		"promo-1 promo-1"
		". ad-2"
		"list-container list-container";
}

.page-layout:has(.section-layout--video) .container-fluid.max-width {
	position: relative;
}

.article__video {
	aspect-ratio: 16 / 9;
	background-color: var(--asco-black);
	grid-area: article-video;
	position: relative;
}

.article__video-transcript {
	background-color: var(--asco-secondary-grey-10);
	border-radius: var(--asco-radius-md);
	grid-area: article-video-body;
	max-height: 480px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: var(--asco-padding-md);
}

.article__video-body:focus-visible {
	outline: 3px solid var(--border-focused);
}

.article__video-nav {
	display: contents;
	grid-area: article-video-nav;
}

.article__video-nav .article__header-actions {
	grid-area: article-video-nav;
}

.article__video-nav .article__share {
	grid-area: article-share;
}

.section-layout--video .area--aside {
	display: contents;
}

.section-layout--video .article {
	position: initial;
	display: contents;
	grid-area: article;
}

@media (min-width: 960px) {
	.section-layout--video {
		grid-template-areas:
			"article-header 		article-header 			article-header"
			"article-video 			article-video 			aside"
			"article-video-nav 		article-video-nav 		aside"
			"article-share 			article-video-body 		aside"
			"list-container 		list-container 			aside";
		grid-template-columns: auto 1fr 18.875rem;
		grid-template-rows: repeat(5, auto);
	}

	.section-layout--video:has(.area--playlist) {
		grid-template-areas:
			"article-header        article-header        article-header"
			"article-video         article-video         aside"
			"article-video-nav     article-video-nav     aside"
			"article-share         article-video-body    aside"
			"list-container        list-container        aside";
		grid-template-columns: auto 1fr 18.875rem;
	}

	.cinema-mode .section-layout--video {
		grid-template-areas:
			"article-header 		article-header 			article-header"
			"article-video 			article-video 			article-video"
			"article-video-nav 		article-video-nav 		article-video-nav"
			"article-share 			article-video-body 		aside"
			"list-container 		list-container 			aside";
	}

	.article__video-nav .article__share {
		margin-right: 0;
	}

	.section-layout--video .area--aside {
		display: grid;
	}

	.section-layout--video .article__header {
		margin-bottom: 0;
	}
}

/* Video-Series Page Styles ------------- */
/* ------------------------------ */
/* ----------------------------- */
/* ---------------------- (°_°) */

.section-layout--landing-video-series {
	grid-template-areas:
		"columns-body-list columns-body-list"
		"landing-header landing-header"
		"landing-subheader landing-subheader"
		"landing-mixed-1 landing-mixed-2"
		"landing-mixed-3 landing-mixed-4"
		"landing-mixed-5 ."
		"ad-1 ad-1";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(5, auto);
	gap: var(--asco-gutter-lg);
	padding-top: var(--asco-padding-lg);
	padding-bottom: var(--asco-padding-lg);
}

@media (min-width: 960px) {
	.section-layout--landing-video-series {
		grid-template-areas:
			"columns-body-list aside"
			"landing-header aside"
			"landing-subheader aside"
			"landing-mixed aside";
		grid-template-columns: 1fr 18.875rem;
		grid-template-rows: auto auto;
	}

	.section-layout--landing-video-series:not(:has(.section__list))
	{
		grid-template-areas:
			"landing-header aside"
			"landing-subheader aside"
			"landing-mixed aside";
	}
	
	.section-layout--landing-video-series:not(:has(.landing__subheader))
	{
		grid-template-areas:
			"columns-body-list aside"
			"landing-header aside"
			"landing-mixed aside";
	}
}




/* About Page Styles ------------- */
/* ------------------------------ */
/* ----------------------------- */
/* ---------------------- (°_°) */

.page-layout--about-us .area--about-us-header {
	background-color: var(--asco-clr-blue-100);
	position: relative;
}

.header-background{
	position: absolute;
	top: 0;
	left: calc(((100vw - 100%) / 2) * -1);
	bottom: 0;
	right: calc(((100vw - 100%) / 2) * -1);
	width: calc((100vw - 100%) + 100%);
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.page-layout--about-us .header-logo-lockup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5rem 3rem;
	justify-content: space-between;
	padding: 3rem 0;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

.page-layout--about-us .header-logo-lockup img {
	width: 100%;  
	height: auto;
	margin: 0 auto;
}

.page-layout--about-us .area--about-us-body {
	display: grid;
	grid-gap: var(--asco-gutter-xxl);
	padding: var(--asco-padding-xxl);
	margin: 0 auto;
	width: 100%;
	transition: var(--asco-anim-normal);
}

.page-layout--about-us .about-us__intro {
	display: grid;
	background-color: var(--brand-white);
	padding: 4rem 4rem 0 4rem;
	border-radius: var(--asco-radius-lg) var(--asco-radius-lg) 0 0;
	line-height: 1.6;
	transition: var(--asco-anim-normal);
}

.page-layout--about-us .about-us__intro p {
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

.page-layout--about-us .about-us__intro p:last-child {
	margin-bottom: 0;
}

.page-layout--about-us .about-us__featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
}

.page-layout--about-us .about--featured {
	display: grid;
	gap: var(--asco-gutter-smedium);
}

.thumbnail{
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--asco-radius-md);
}

.thumbnail img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.about-us__form{
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/5v3dd5c3/about-form-bg.jpg");
	background-size: cover;
	background-position: center;
	padding: var(--asco-padding-md);
	color: var(--text-primary-contrastText);
	border: none;
}

.about-us__cta{
	display: grid;
	/* grid-template-columns: 4fr 5fr; */
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: 800px;
	grid-gap: var(--asco-gutter-lg);
	align-items: flex-start;
}

@media (max-width: 965px) {
	.about-us__cta{
		grid-template-columns: 1fr;
	}
}

@media screen and (min-width: 615px) and (max-width: 1000px) {
	.page-layout--about-us .about-us__featured {
		grid-template-columns: 1fr;
	}

	.page-layout--about-us .about--featured {
		grid-template-columns: 2fr 3fr;
		align-items: center;
	}
}


@media (max-width: 600px) {
	.page-layout--about-us .about-us__intro {
		padding: var(--asco-padding-lg) var(--asco-padding-lg) 0 var(--asco-padding-lg);
		transition: var(--asco-anim-normal);
	}

	.page-layout--about-us .area--about-us-body {
		grid-gap: var(--asco-gutter-xxl);
		padding: var(--asco-padding-lg);
		transition: var(--asco-anim-normal);
	}
}




/* Information Page Styles : START */
/* ------------------------------- */
.section-layout--information {
	display: grid;
	grid-template-areas:
		"fw-ad-1         fw-ad-1"
		"breadcrumb      breadcrumb"
		"information     aside"
		"fw-ad-2         fw-ad-2";
	grid-template-columns: 1fr 18.875rem;
	grid-template-rows: auto 1fr;
	align-items: start;
	grid-gap: var(--asco-gutter-md) var(--asco-gutter-md);
	padding-bottom: var(--asco-gutter-xl);
}

.section-layout--information .information{
	grid-area: information;
	position: relative;
	display: block;
	padding: 0;
}

.section-layout--information .information > *{
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 970px) {
	.section-layout--information {
		grid-template-areas:
		"fw-ad-1"
		"breadcrumb"
		"information"
		"ad-1"
		"promo-1"
		"ad-2"
		"promo-2"
		"fw-ad-2";
		grid-template-columns: 1fr;
		grid-template-rows: repeat(8, auto);
	}

	.section-layout--information .area--ad-1 , 
	.section-layout--information .area--ad-2 {
		padding: var(--asco-padding-xl) var(--asco-padding-article-body);
		padding-top: calc(var(--asco-padding-xl) - .25rem);
		background-color: var(--background-primary);
	}
}
/* ------------------------------- */
/* Information Page Styles : END */







/*
 * New
 */

.article__header {
	display: grid;
	gap: var(--asco-gutter-smedium);
	position: relative;
}


.section-layout--video .article__header {
	color: var(--text-primary-contrastText);
}

.article__header-actions {
	align-items: center;
	border-bottom: var(--bs-border-width) solid var(--border-regular);
	border-top: var(--bs-border-width) solid var(--border-regular);
	display: flex;
	flex-wrap: wrap;
	gap: var(--asco-gutter-sm);
	justify-content: space-between;
	padding-top: var(--asco-padding-sm);
	padding-bottom: var(--asco-padding-sm);
}

.article__header-actions .nav {
	gap: var(--asco-gutter-sm);
}

.article__header-badges {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--asco-gutter-sm);
}

.article__header-btn {
	align-items: center;
	border-radius: var(--asco-radius-2xl);
	display: flex;
	gap: var(--asco-gutter-xs);
}

.article__header-btn.active {
	background-color: var(--asco-primary-blue-70);
	border-color: var(--asco-primary-blue-70);
	color: var(--text-primary-contrastText);
}

.article__header-meta {
	align-items: center;
	color: var(--text-tertiary);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--asco-fs-3);
	gap: var(--asco-gutter-md);
	text-transform: uppercase;
}

.section-layout--video .article__header-meta {
	color: var(--text-primary-contrastText);
}

.article__header-socials {
	align-items: center;
	display: flex;
	gap: var(--asco-gutter-sm);
}

.article__image {
	border: 0;
	border-radius: var(--asco-radius-md);
	display: block;
	height: auto;
	width: 100%;
}

.article__share .nav {
	flex-direction: column;
	gap: var(--asco-gutter-sm);
}

.article__teaser {
	font-size: var(--asco-fs-h5-global);
	font-weight: var(--asco-fw-light);
	line-height: var(--asco-lh-normal);
	margin-bottom: 0;
}

.article__title {
	font-weight: var(--asco-fw-bold);
	margin-bottom: 0;
}

.breadcrumb-nav {
	background-color: var(--background-primary);
	border-bottom: var(--bs-border-width) solid var(--border-regular);
	font-size: var(--asco-fs-3);
	padding-top: var(--asco-padding-sm);
	padding-bottom: var(--asco-padding-sm);
}

.breadcrumb-nav .breadcrumb {
	margin-bottom: 0;
}

.clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.clamp a:focus-visible {
	outline: none
}

.clamp--2 {
	-webkit-line-clamp: 2;
}

.clamp--3 {
	-webkit-line-clamp: 3;
}

.clamp--4 {
	-webkit-line-clamp: 4;
}

/* Fallback for older browsers */
h1.clamp--2, h2.clamp--2, h3.clamp--2, h4.clamp--2, h5.clamp--2, h6.clamp--2 {
  	max-height: calc(1.2em * 2 + 0.125em);
}
p.clamp--2 {
  	max-height: calc(1.5em * 2);
}

h1.clamp--3, h2.clamp--3, h3.clamp--3, h4.clamp--3, h5.clamp--3, h6.clamp--3 {
  	max-height: calc(1.2em * 3 + 0.125em);
}
p.clamp--3 {
  	max-height: calc(1.5em * 3);
}

h1.clamp--4, h2.clamp--4, h3.clamp--4, h4.clamp--4, h5.clamp--4, h6.clamp--4 {
  	max-height: calc(1.2em * 4 + 0.125em);
}
p.clamp--4 {
  	max-height: calc(1.5em * 4);
}



.footer {
	border-top: var(--bs-border-width) solid var(--border-regular);
	color: var(--asco-secondary-grey-100);
	padding-top: var(--asco-spacing-22);
	padding-bottom: var(--asco-spacing-22);
}

.footer__bottom {
	border-top: var(--bs-border-width) solid var(--border-regular);
	font-size: var(--asco-fs-2);
	padding-top: var(--asco-padding-lg);
	text-align: center;
}

.footer__brand a:not(.btn):focus-visible {
	outline: 3px solid var(--border-focused);
}

.footer__grid {
	display: grid;
	gap: var(--asco-gutter-lg);
}

.footer__heading {
	font-size: var(--asco-global-h4-fs);
	font-weight: var(--asco-fw-bold);
	margin-bottom: var(--asco-gutter-xs);
}

.footer__link {
	color: var(--asco-secondary-grey-100);
	display: inline-block;
	font-size: var(--asco-fs-3);
	text-decoration: none;
	text-underline-offset: 0.125em;
}

.footer__link:hover,
.footer__link:focus {
	color: var(--asco-primary-blue);
	text-decoration: underline;
}

.footer__link:focus-visible {
	outline: 3px solid var(--border-focused);
}

.footer__nav {
	display: grid;
	gap: var(--asco-gutter-md);
	text-align: center;
}

.footer__nav-container {
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-md);
}

.footer__nav-list {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-xs);
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

@media (min-width: 960px) {
	.footer__bottom {
		grid-area: bottom;
	}

	.footer__brand {
		grid-area: brand;
	}

	.footer__grid {
		grid-template-areas:
			"brand nav"
			"bottom bottom";
		grid-template-columns: 1fr 2fr;
		row-gap: var(--asco-gutter-xl);
	}

	.footer__nav {
		grid-area: nav;
		grid-template-columns: 1fr 1fr;
		text-align: left;
	}

	.footer__nav-container {
		border-left: var(--bs-border-width) solid var(--border-regular);
		padding-left: var(--asco-padding-lg);
	}

	.footer__nav-list {
		align-items: flex-start;
	}
}

.navbar-brand {
	align-items: center;
	display: inline-flex;
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-brand:focus-visible {
	outline: 3px solid var(--border-focused);
}

.offcanvas.offcanvas--briefing {
	width: 500px;
	z-index: 1400;
}

.offcanvas--briefing .drawer__list {
	height: 100%;
}

.offcanvas--briefing .drawer__video {
	margin-right: 0;
	margin-left: 0;
	width: 100%;
}

.offcanvas--briefing .offcanvas-body {
	padding: 0 var(--asco-padding-md);
}

.offcanvas--briefing .offcanvas-header {
	padding: var(--asco-padding-md) var(--asco-padding-md) var(--asco-padding-sm) var(--asco-padding-md)
}

.panel-ai {
	align-items: flex-start;
	background-blend-mode: overlay;
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/flshzxb0/panel-ai.png"), linear-gradient(90deg, #002557 15.38%, rgba(0, 0, 0, 0) 45.19%, rgba(0, 8, 18, 0.208507) 88.68%, #002557 100%);
	background-size: cover;
	color: var(--text-primary-contrastText);
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-md);
	grid-area: article-ai;
	padding: var(--asco-padding-lg) var(--asco-padding-xl);
}

.panel-ai__header {
	font-size: var(--asco-fs-h4-global);
	font-weight: var(--asco-fw-bold);
	margin-bottom: 0;
}

.panel-ai__input {
	border-color: var(--background-primary);
}

.panel-ai__label {
	background-color: var(--background-primary);
	border-color: transparent;
}

.recommended__area {
	border-top: var(--bs-border-width) solid var(--border-regular);
	padding-top: var(--asco-gutter-lg);
}

.playlist__header {
	font-size: var(--asco-fs-h6-global);
	font-weight: var(--asco-fw-bold);
	margin-bottom: var(--asco-gutter-md);
	text-transform: uppercase;
}

.recommended__date {
	color: var(--text-tertiary);
	font-size: var(--asco-fs-3);
}

.recommended__header {
	font-size: var(--asco-fs-h6-global);
	font-weight: var(--asco-fw-bold);
	margin-bottom: var(--asco-gutter-md);
	text-transform: uppercase;
}

.recommended__item {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-xs);
	position: relative;
}

.recommended__list {
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-md);
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

.recommended__title {
	color: var(--text-primary);
	font-size: var(--asco-fs-h6-global);
	font-weight: var(--asco-fw-bold);
	line-height: var(--asco-lh-header);
	text-decoration: none;
	text-underline-offset: 0.125em;
}

.recommended__title:hover,
.recommended__title:focus {
	color: var(--text-primary);
	text-decoration: underline;
}

.recommended__title:focus-visible {
	outline: 3px solid var(--border-focused);
}

.playlist__area {
	background-color: var(--asco-white);
}

.playlist__area .playlist__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--asco-gutter-smedium);
}

.playlist__area .playlist__list > *{
  	min-width: 0;
}


/* @media (min-width: 560px) {
	.recommended__list {
		gap: var(--asco-gutter-lg);
	}
} */

@media (min-width: 840px) and (max-width: 959.98px) {
	.playlist__area .playlist__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.recommended__area {
		border-bottom: var(--bs-border-width) solid var(--border-regular);
		padding-bottom: var(--asco-gutter-lg);
	}

	.recommended__header {
		margin-bottom: var(--asco-gutter-smedium);
	}

	.recommended__list {
		gap: var(--asco-gutter-smedium);
	}

	.playlist__header {
		margin-bottom: var(--asco-gutter-smedium);
	}

	.playlist__area {
		position: relative;
		transition: height 200ms ease;
		background-color: var(--asco-white);
		border-bottom: var(--bs-border-width) solid var(--border-regular);
		padding: var(--asco-padding-sm);
		height: 32rem;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.playlist__area:has(.playlist__list > :nth-child(5)) {
		height: 36rem;
}

	.playlist__area .playlist__list {
		display: flex;
		flex-direction: column;
		gap: var(--asco-gutter-smedium);
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 0.25rem;
		scrollbar-gutter: stable;
}

	.playlist__area:has(.playlist__list > :nth-child(5))::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 3rem;
		pointer-events: none;
		background: linear-gradient(to bottom,rgba(255, 255, 255, 0),var(--asco-white) );
}

	.playlist__area:has(.playlist__list > :nth-child(5)) .playlist__list {
		padding-bottom: 3rem;
	}
}


.related__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asco-gutter-xs) var(--asco-gutter-sm);
}

.related__badges:not(:first-child) {
	margin-top: var(--asco-gutter-static-xs);
}

.related__badges:not(:last-child) {
	margin-bottom: var(--asco-spacing-1);
}

.related__body {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-xs);
}

.related__header {
	font-size: var(--asco-fs-h2-global);
	font-weight: var(--asco-fw-bold);
	margin-bottom: var(--asco-gutter-md);
}

.related__image {
	border-radius: var(--asco-radius-md);
	display: block;
	flex-shrink: 0;
	height: auto;
	width: 100%;
}

.related__item {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-smedium);
	position: relative;
}

@media (min-width: 1200px) {
	.related__item {
		align-items: flex-start;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

.related__link {
	color: var(--text-primary);
	text-decoration: none;
	text-underline-offset: 0.125em;
}

.related__link:hover,
.related__link:focus {
	color: var(--text-primary);
	text-decoration: underline;
}

.related__link:focus-visible {
	outline: 3px solid var(--border-focused);
}

.related__list {
	border-top: var(--bs-border-width) solid var(--border-regular);
	padding-top: var(--asco-padding-md);
}

.related__list .row {
	row-gap: var(--asco-gutter-lg);
}

.related__meta {
	align-items: flex-start;
	color: var(--text-tertiary);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--asco-fs-3);
	gap: var(--asco-gutter-xs) var(--asco-gutter-sm);
	line-height: 1;
	text-transform: uppercase;
}

.related__meta:not(:first-child) {
	margin-top: var(--asco-gutter-static-xs);
}

.related__meta:not(:last-child) {
	margin-bottom: var(--asco-spacing-1);
}

.related__teaser {
	color: var(--text-secondary);
	margin-bottom: 0;
}

.related__title {
	font-size: var(--asco-fs-h6-global);
	font-weight: var(--asco-fw-bold);
	line-height: var(--asco-lh-normal);
	margin-bottom: 0;
}

.section--bg {
	background-color: var(--asco-secondary-grey-10);
}

.section--briefing {
	background-blend-mode: overlay;
	background-color: var(--asco-primary-blue-60);
	background-image: url("https://res.cloudinary.com/broadcastmed/image/fetch/q_auto,c_fill,g_faces:center,f_auto/https://ascobackend.azurewebsites.net/media/a05byvj2/nav-2.jpg"), linear-gradient(90deg, var(--asco-primary-blue-60) 24.81%, rgba(0, 37, 87, 0) 45.19%, rgba(0, 37, 87, 0) 48.27%, var(--asco-primary-blue-60) 100%);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--text-primary-contrastText);
	padding-top: var(--asco-padding-xl);
	padding-bottom: var(--asco-padding-xl);
}

.section--briefing .landing__meta {
	color: var(--asco-secondary-grey-30);
}

.section--briefing__grid {
	display: grid;
	gap: var(--asco-gutter-lg);
}

@media (min-width: 560px) {
	.section--briefing__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 960px) {
	.section--briefing__grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

.section__btn-more {
	align-items: center;
	border-radius: var(--asco-radius-2xl);
	display: flex;
	gap: var(--asco-gutter-xs);
	justify-content: center;
	margin-top: var(--asco-gutter-lg);
	width: 100%;
}

.section__divider {
	border-top-color: var(--divider);
	margin-top: 0;
	margin-bottom: 0;
}

.section__list-item {
	display: grid;
	gap: var(--asco-gutter-xs) var(--asco-gutter-smedium);
	grid-template-areas:
		"image 		image"
		"badges 	badges"
		"title 		title"
		"date 		meta"
		"teaser 	teaser";
	grid-template-columns: auto 1fr;
	position: relative;
}

.section__list-item .landing__badges {
	grid-area: badges;
}

.section__list-item .landing__body {
	display: contents;
}

.section__list-item .landing__image-container {
	border: var(--bs-border-width) solid var(--border-regular);
	grid-area: image;
	margin-bottom: calc(var(--asco-gutter-smedium) - var(--asco-gutter-xs));
}

.section__list-item .landing__meta {
	grid-area: meta;
}

.section__list-item .landing__text {
	grid-area: teaser;
}

.section__list-item .landing__title {
	grid-area: title;
}

.section__list-item-date {
	grid-area: date;
	white-space: nowrap;
}

@media (min-width: 560px) {
	.section__list-item {
		grid-template-areas:
			"badges 	badges 		image"
			"title 		title 		image"
			"date 		meta 		image"
			"teaser 	teaser 		image";
		grid-template-columns: auto 1fr 200px;
	}
}

@media (min-width: 768px) {
	.section__list-item {
		grid-template-areas: "date body image";
		grid-template-columns: 100px 1fr 200px;
	}

	.section__list-item .landing__body {
		display: flex;
	}

	.section__list-item .landing__image-container {
		margin-bottom: 0;
	}
}

.section__link {
	align-items: center;
	color: inherit;
	display: inline-flex;
	text-decoration: none;
	text-underline-offset: 0.125em;
}

.section__link:hover,
.section__link:focus {
	color: inherit;
	text-decoration: none;
}

.section__link:focus-visible {
	outline: 3px solid var(--border-focused);
}

.section__link-icon {
	align-items: center;
	display: flex;
	justify-content: center;
}

.section__list {
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-lg);
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

.section__item-date {
	grid-area: date;
	display: grid;
	align-content: center;
}

.section__header {
	display: grid;
	align-items: center;
	column-gap: var(--asco-gutter-smedium);
	grid-template-columns: 1fr auto;
	grid-template-areas: "title link";
	margin-bottom: var(--asco-gutter-md);
}

.section__header .section__title {
	grid-area: title;
	margin-bottom: 0;
}

.section__header--with-badge {
	row-gap: var(--asco-gutter-xs);
	grid-template-areas:
		"title link"
		"badge link";
}

.section__header .ai-badge-popover-wrap {
	grid-area: badge;
}

.section__header .section__link {
	grid-area: link;
	justify-self: end;
	align-self: center;
}

.section__title {
	font-size: var(--asco-fs-h4-global);
	font-weight: var(--asco-fw-bold);
	margin-bottom: 0;
}

/* .section--briefing .section__title {
	color: var(--bs-danger);
	margin-bottom: var(--asco-gutter-md);
} */

.section__title-lg {
	font-size: var(--asco-fs-h1-global);
	font-weight: var(--asco-fw-regular);
}

.takeaways__header {
	font-size: var(--asco-fs-h5-global);
	margin-bottom: var(--asco-gutter-smedium);
}

.takeaways__list {
	display: flex;
	flex-direction: column;
	gap: var(--asco-gutter-smedium);
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

@media (min-width: 768px) {
    .section__header--with-badge {
        grid-template-columns: auto auto 1fr;
        grid-template-areas: "title badge link";
    }
}







.topic-nav {
	background-color: var(--background-primary);
	border-bottom: var(--bs-border-width) solid var(--border-regular);
	justify-content: center;
	min-height: 46px;
	overflow: hidden;
	transition: var(--asco-anim-normal);
}
@media (max-width: 1400px) {
	.topic-nav {
		padding: 0 2rem;
		transition: var(--asco-anim-normal);
	}
}


.topic-nav__link {
	align-items: center;
	display: flex;
	font-weight: var(--asco-fw-medium);
	gap: var(--asco-gutter-sm);
	justify-content: center;
	padding-right: var(--asco-padding-sm);
	padding-left: var(--asco-padding-sm);
	text-transform: uppercase;
	white-space: nowrap;
}

.topic-nav__scrollable {
	-ms-overflow-style: none;
	scrollbar-width: none;

	overflow-x: scroll;
	margin: -8px calc(var(--asco-gutter-lg) * -1);
	padding: 8px var(--asco-gutter-lg);
	scroll-padding-inline: var(--asco-gutter-lg);
	width: calc(100% + (2 * var(--asco-gutter-lg)));
	--fade-l: var(--asco-gutter-lg, 8px);
	--fade-r: var(--asco-gutter-lg, 8px);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	mask-mode: match-source;
}

.topic-nav__scrollable::-webkit-scrollbar {
	display: none;
}

.topic-nav .nav {
	flex-wrap: nowrap;
	gap: var(--asco-gutter-smedium);
	width: max-content;
}

@media (min-width: 768px) {
	.section__item-date {
		align-content: flex-start;
		justify-content: flex-start;
	}
}



/* Wrap scroll area + arrows */
.topic-nav__wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Let scroll area take the space between arrows */
.topic-nav__scrollable {
  flex: 1 1 auto;
  scroll-behavior: smooth; /* nice but not required */
}

.topic-nav__scrollable {
  scroll-snap-type: x proximity;
}

.topic-nav .nav-item {
  scroll-snap-align: start;
}

/* Arrow buttons */
.topic-nav__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;

	color: var(--text-primary);
	background: var(--asco-white);
	border: 1px solid var(--asco-white);

	/* Best practice: only show when needed vfa JS toggles */
	opacity: 0.5;
	pointer-events: none;
	box-shadow: var(--asco-shadow-md);
}

.topic-nav__arrow:hover, .topic-nav__arrow:active, .topic-nav__arrow:focus {
	color: var(--text-primary-contrastText);
	background: var(--asco-primary-blue-70);
	border: 1px solid var(--asco-primary-blue-70);
}

.topic-nav__arrow.btn:disabled{
	color: var(--text-primary);
	background: var(--asco-white);
	border: 1px solid var(--asco-white);
    pointer-events: none !important;
    opacity: 0.25 !important;
}

.topic-nav__arrow:hover .fill, .topic-nav__arrow:focus .fill{
	fill: var(--text-primary-contrastText);
}

.topic-nav__arrow.btn:disabled  .fill{
	fill: var(--text-primary);
}


/* Show arrows when overflow exists */
.topic-nav .topic-nav__wrap .topic-nav__arrow {
  opacity: 1;
  pointer-events: auto;
}

/* Left/right positioning */
.topic-nav__arrow--left {
  right: calc(100% + .5rem);
}

.topic-nav__arrow--right {
  left: calc(100% + .5rem);
}

/* Disabled state */
.topic-nav__arrow:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.subsection__teaser {
	font-size: var(--asco-fs-h5-global);
    font-weight: var(--asco-fw-light);
    line-height: var(--asco-lh-normal);
    margin-bottom: 1.5em;
}





/* ai-popover disclaimer : START */
.ai-badge-popover-wrap {
	display: inline-flex;
	position: relative;
}

.ai-badge-popover-trigger {
	cursor: pointer;
}

#ai-card-popover.ai-disclaimer-popover {
	inset: auto;
	margin: 0;
	overflow: visible;
	position: fixed;
	z-index: 1080;
}

.popover--ai-card {
	display: flex;
	width: 478px;
	max-width: min(478px, calc(100vw - 32px));
	padding: var(--gutter--md, 24px);
	flex-direction: column;
	align-items: flex-start;
	gap: var(--asco-gutter-smedium);
	border-radius: var(--radiusMD, 8px);
	border: 1px solid transparent;
	background:
		linear-gradient(var(--asco-white), var(--asco-white)) padding-box;
	box-shadow: 0 2px 8px 0 rgba(23, 52, 64, 0.10);
}

.popover--ai-card p {
	color: var(--text-secondary);
	font-size: var(--asco-fs-3);
	line-height: 1.45;
	margin: 0;
}

.popover--ai-card__actions {
	align-items: center;
	display: flex;
	gap: var(--asco-gutter-sm);
	justify-content: flex-end;
	width: 100%;
}

.popover--ai-card__view-source {
	border-radius: 999px;
}

.popover--ai-card__got-it {
	border-radius: 999px;
}

.source-wrapper {
	background-color: var(--asco-bg-grey);
	border: 1px solid var(--border-regular);
	border-radius: var(--asco-radius-sm);
	display: grid;
	gap: var(--asco-gutter-sm);
	max-height: 220px;
	overflow-y: auto;
	padding: var(--asco-padding-sm);
	width: 100%;
}

.source-wrapper[hidden] {
	display: none;
}

/* Home template: hide source details in AI popover */
.ai-disclaimer-popover.ai-disclaimer-popover--home .source-wrapper {
	display: none !important;
}

.ai-disclaimer-popover.ai-disclaimer-popover--home .popover--ai-card__view-source {
	display: none !important;
}

.source__header {
	color: var(--text-primary);
	font-size: var(--asco-fs-3);
	font-style: italic;
	font-weight: var(--asco-fw-regular);
	line-height: 1.2;
	margin: 0;
}

.source-list{
	padding: 0 0 0 1.25rem;
	margin-bottom: 0;
}

.source-item{
	padding-bottom: var(--aace-gutter-sm);
}

.source-list:last-of-type .source-item{
	padding-bottom: 0;
}

.source__body {
	display: grid;
	gap: var(--asco-gutter-xs);
}

.source__title {
	color: var(--text-primary);
	font-size: var(--asco-fs-3);
	font-weight: var(--asco-fw-bold);
	line-height: 1.2;
	margin: 0;
}

.source__body p,
.source__body li {
	color: var(--asco-secondary-grey-40);
	font-size: 12px;
	line-height: 1.35;
	margin: 0;
}

.source__body ul,
.source__body ol {
	margin: 0;
	padding-left: 1.2rem;
}

.source__body a {
	color: var(--asco-secondary-grey-40);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
}
/* ai-popover disclaimer : END */


/* AI DERIVATIVES : START */

/* AI Derivative - Takeaways Styles : START ------ */
/* ---------------------------------------------- */
/* --------------------------------------------- */
/* -------------------------------------- (°_°) */

.number-of-takeaways{
    font-weight: var(--asco-fw-bold);
}

.panel-takeaways ul {
    display: grid;
    grid-gap: var(--asco-gutter-sm);
}

.panel-takeaways ul .card{
    display: grid;
    grid-template-columns: var(--asco-fs-h4-display) 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    padding: var(--asco-padding-lg);
    box-shadow: 0 0 0 transparent;
    border: 1px solid var(--asco-secondary-grey-10);
}

.panel-takeaways ul .card .display{
    grid-row: 1/3;
    grid-column: 1/2;
    margin: 0;
    line-height: 0.65;
    font-size: var(--asco-fs-h1-display);
    color: var(--asco-secondary-purple-60);
}

.panel-takeaways ul .card h5.header{
    grid-row: 1/2;
    grid-column: 2/3;
    margin: 0;
}
.panel-takeaways ul .card p{
    grid-row: 1/3;
    grid-column: 2/3;
    margin-bottom: 0;
}

/* AI Derivative - Takeaways Styles : END ------ */



/* AI Derivative - Listen Tab Player Styles : START */
/* === Player Container === */
#listen .audio-player {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--asco-gutter-sm);
    padding: var(--asco-padding-sm) var(--asco-padding-md) var(--asco-padding-sm) var(--asco-padding-sm);
    background: var(--background-secondary);
    border: 1px solid var(--border-regular);
    border-radius: var(--asco-radius-md);
}

#listen .audio-btns {
    display: flex;
    align-items: center;
    gap: var(--asco-gutter-xs);
}

#listen .audio-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: 2.5rem;           /* consistent clickable area */
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--asco-anim-fast);
    line-height: 0;    
}

#listen .audio-btn svg {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
    fill: var(--text-primary);
}

#listen .audio-btn:hover svg {
    fill: var(--text-primary-hover);
}

#listen .audio-btn:disabled {
    opacity: var(--disabled);
    cursor: not-allowed;
}

/* === Waveform === */
#listen .audio-wave {
    flex: 1 1 auto;
    min-width: 160px;
}

#listen #waveform {
    width: 100%;
    height: 44px;
}

/* === Time === */
#listen .audio-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--asco-fs-3);
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* === Volume Popover === */
#listen .volume-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

#listen .volume-popover {
    position: absolute;
    top: calc(100% + var(--asco-spacing-2));
    left: 50%;
    transform: translateX(-50%);
    padding: var(--asco-padding-xs) var(--asco-padding-sm);
    background: var(--background-primary);
    border: 1px solid var(--border-regular);
    border-radius: var(--asco-radius-sm);
    box-shadow: var(--asco-shadow-sm);
    z-index: 10;
}

#listen .volume-popover[hidden] {
    display: none;
}

#listen .volume__range {
    width: 110px;
    height: 6px;
    appearance: none;
    background: var(--border-regular);
    border-radius: var(--asco-radius-round);
    outline: none;
}

#listen .volume__range:focus-visible {
    box-shadow: 0 0 0 2px var(--btn-focusedBorder);
}

#listen .volume__range::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--asco-primary-blue-60);
    border-radius: var(--asco-radius-round);
    border: 2px solid var(--background-primary);
    cursor: pointer;
}

#listen .volume__range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--asco-primary-blue-60);
    border-radius: var(--asco-radius-round);
    border: 2px solid var(--background-primary);
    cursor: pointer;
}

/* === Screen-reader only === */
#listen .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
/* AI Derivative - Listen Tab Player Styles : END */


/* AI Derivative - Author Profile Modal Styles : START ------ */
/* ---------------------------------------------- */
/* --------------------------------------------- */
/* -------------------------------------- (°_°) */
.author-profile-link {
    font-weight: 600;
}

.author-profile-modal .modal-dialog {
    max-width: 1080px;
}

.author-profile-modal .modal-content {
    padding: var(--asco-padding-xl);
    border: 0;
    border-radius: var(--asco-radius-lg);
    box-shadow: var(--asco-shadow-lg);
}

.author-profile-modal .modal-body {
    position: relative;
    padding: 0;
}

.author-profile-modal__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.author-profile-modal__layout {
    display: grid;
    gap: var(--asco-gutter-lg);
}

.author-profile-modal__header {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--asco-gutter-md);
    align-items: start;
}

.author-profile-modal__avatar {
    width: 160px;
    height: 160px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--border-regular);
}

.author-profile-modal__title-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
    margin-bottom: var(--asco-spacing-2);
}

.author-profile-modal__title-row h2,
.author-profile-modal__title-row p {
    margin: 0;
}

.author-profile-modal__role {
    margin-bottom: var(--mds-spacing-5);
    color: var(--text-secondary);
}

.author-profile-modal__meta {
    display: grid;
    gap: var(--asco-spacing-2);
    margin-bottom: var(--asco-spacing-6);
}

.author-profile-modal__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--asco-spacing-2);
}

.author-profile-modal__meta-row strong {
    font-weight: 600;
}

.author-profile-modal__specialties {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--asco-spacing-2);
}

.author-profile-modal__specialties span + span::before {
    content: "•";
    margin-right: var(--asco-spacing-2);
    color: var(--text-tertiary);
}

.author-profile-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mds-gutter-sm);
}

.author-profile-modal__rule {
    margin: 0;
}

.author-profile-modal__section-head {
    margin-bottom: var(--asco-spacing-5);
}

.author-profile-modal__list {
    display: grid;
    gap: var(--asco-gutter-sm);
}

.author-profile-modal__item {
    display: flex;
    flex-direction: row;
    gap: var(--mds-gutter-md);
    align-items: center;
    padding: var(--mds-padding-smedium);
    background: var(--background-secondary);
    border-radius: var(--asco-radius-md);
    box-shadow: 0 0 6px rgba(23, 52, 64, 0.13);
    text-decoration: none;
    color: inherit;
}

.author-profile-modal__item:hover {
    text-decoration: none;
}

.author-profile-modal__item:focus-visible {
    outline: 2px solid var(--btn-focusedBorder);
    outline-offset: 4px;
}

.author-profile-modal__item > div {
    flex: 1 1 auto;
    min-width: 0;
}

.author-profile-modal__item-label,
.author-profile-modal__item-meta {
    margin: 0;
}

.author-profile-modal__item-label {
    color: var(--text-tertiary);
}

.author-profile-modal__item-title {
    margin: 0.25rem 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: var(--asco-anim-fast);
}

.author-profile-modal__item:hover .author-profile-modal__item-title,
.author-profile-modal__item:focus-visible .author-profile-modal__item-title {
    color: var(--text-primary-hover);
}

.author-profile-modal__item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--asco-spacing-2);
    color: var(--text-tertiary);
}

.author-profile-modal__dot,
.author-profile-modal__item-dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.55;
}

.author-profile-modal__time {
    display: inline-flex;
    align-items: center;
    gap: var(--asco-spacing-1);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--background-primary);
    border: 1px solid var(--border-regular);
    color: var(--text-secondary);
}

.author-profile-modal__thumb {
    flex: 0 0 114px;
    width: 116px;
    height: 64px;
    border-radius: var(--asco-radius-sm);
    object-fit: cover;
}

.author-profile-modal__show-all {
    margin-top: var(--asco-spacing-3);
}

@media (max-width: 767px) {
    .author-profile-modal .modal-content {
        padding: var(--asco-padding-md);
    }

    .author-profile-modal__header {
        grid-template-columns: 1fr;
    }

    .author-profile-modal__avatar {
        width: 96px;
        height: 96px;
    }

    .author-profile-modal__item {
        flex-direction: column;
        align-items: flex-start;
    }

    .author-profile-modal__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 114 / 64;
    }
}

/* AI Derivative - Author Profile Modal Styles : END ------ */
/* ---------------------------------------------- */
/* --------------------------------------------- */
/* -------------------------------------- (°_°) */




/* AI Derivative - Author Profile Page Styles : START */

.page-layout--profile {
    display: grid;
    grid-template-areas: "profile aside";
    grid-template-columns: 1fr 18.875rem;
    align-items: start;
    gap: var(--asco-gutter-xl) var(--asco-gutter-md);
    padding-top: var(--asco-padding-md);
    padding-bottom: var(--asco-padding-xxl);
}

.profile-page {
    grid-area: profile;
    display: grid;
    gap: var(--asco-gutter-lg);
}

.card.profile-page__hero,
.card.profile-page__panel {
    padding: var(--asco-padding-lg);
}

.profile-page__hero-header {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--asco-gutter-md);
    align-items: start;
}

.profile-page__avatar {
    width: 160px;
    height: 160px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--border-regular);
}

.profile-page__hero-copy {
    display: grid;
    gap: var(--asco-spacing-4);
}

.profile-page__title-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--asco-spacing-2);
    align-items: baseline;
}

/* .profile-page__title-row h1,
.profile-page__title-row p,
.profile-page__section h4,
.profile-page__section h6 {
    margin: 0;
} */

.profile-page__title-row p,
.profile-page__role,
.profile-page__item p,
.profile-page__inline-list {
    color: var(--text-secondary);
}

.profile-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--asco-gutter-sm);
}

.profile-page__tabs {
    display: flex;
    align-items: center;
    gap: var(--asco-padding-md);
    border-bottom: 1px solid var(--border-regular);
}

.profile-page__tab {
    display: inline-flex;
    align-items: center;
    padding: var(--asco-padding-smedium) var(--asco-spacing-2);
    border: 0px solid transparent;
    border-top: 1px solid transparent;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: var(--asco-fs-5);
    font-weight: var(--asco-fw-medium);
    text-decoration: none;
    transition: var(--asco-anim-fast);
    border-style: inset;
}

.profile-page__tab:hover {
    color: var(--text-primary-hover);
    text-decoration: none;
    border-bottom: 2px solid var(--border-subtleBlue);
    transition: var(--asco-anim-fast);
}

.profile-page__tab.is-active {
    border-bottom: 2px solid var(--border-emphasis);
    color: var(--text-primary-hover);
}

.profile-page__tab.is-active:hover {
    border-top: 0px solid transparent;
    border-bottom: 3px solid var(--border-emphasis);
    transition: var(--asco-anim-fast);
}

.profile-page__hero .avatar,
.profile-page__item .avatar{
    width: 100%;
}

.page-layout--profile .area--aside{
    display: grid;
}

.profile-page__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--asco-gutter-sm);
    align-items: start;
}

.profile-page__item:has(.avatar){
    grid-template-columns: 18px minmax(0, 1fr);
}

.profile-page__inline-list--bulleted {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    color: var(--text-secondary);
}

.profile-page__inline-list--bulleted li {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-left: calc(1rem + 8px);
    left: calc(-1rem - 8px);
}

.profile-page__inline-list--bulleted li::before {
    content: "•";
    position: absolute;
    font-size: 1.5rem;
    top: 50%;
    aspect-ratio: 1 / 1;
    color: var(--asco-secondary-grey-30);
    transform: translateY(-51%);
    left: 0;
}

@media (max-width: 767px) {
    .profile-page__hero .avatar--profile{
        width: 100px;
    }
}

.profile-page__panel hr {
    margin: var(--asco-padding-lg) 0;
}

.profile-page__section {
    display: grid;
    gap: var(--asco-spacing-4);
    border-bottom: 1px solid var(--divider);
    width: 100%;
    padding-bottom: var(--asco-gutter-lg);
    margin-bottom: var(--asco-gutter-lg);
}

.profile-page__stack {
    display: grid;
    gap: var(--asco-padding-md);
}

.profile-page__stack--compact {
    gap: var(--asco-padding-sm);
}

.profile-page__item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: var(--asco-gutter-sm);
    align-items: start;
}

.profile-page__item-icon {
    width: 18px;
    height: 18px;
    border-radius: var(--asco-radius-xs);
    background: var(--border-regular);
    margin-top: 0.25rem;
}

.profile-page__item h6 + p {
    margin-top: 0.15rem;
}

.profile-page__inline-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--asco-spacing-2);
    align-items: center;
}

.profile-page__bottom-ad {
    padding-bottom: var(--asco-padding-xl);
}

@media (max-width: 970px) {
    .page-layout--profile {
        grid-template-areas:
            "profile"
            "aside";
        grid-template-columns: 1fr;
    }
}

@media (max-width: 966px) {
    .page-layout--profile .aside-grouping--1, .page-layout--profile .aside-grouping--2, .page-layout--profile .aside-grouping--2 > .position-sticky {
        display: grid;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .profile-page__hero-header {
        grid-template-columns: 1fr;
    }

    .profile-page__avatar {
        width: 96px;
        height: 96px;
    }

    .profile-page__hero,
    .profile-page__panel {
        padding: var(--asco-padding-md);
    }

    .profile-page__tabs {
        gap: var(--asco-spacing-4);
        overflow-x: auto;
    }
}

/* AI Derivative - Author Profile Pages Styles : END */



/* AI Derivative - Thought Leaders : START */
.asco-tabs--article{
	margin: -8px calc(var(--asco-gutter-lg) * -1);
	padding: 8px var(--asco-gutter-lg);
	scroll-padding-inline: var(--asco-gutter-lg);
	width: calc(100% + (2 * var(--asco-gutter-lg)));
	--fade-l: var(--asco-gutter-lg, 8px);
	--fade-r: var(--asco-gutter-lg, 8px);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	mask-mode: match-source;
	overflow: scroll;
}

#top_thought_leaders .thought-leaders {
	display: grid;
	gap: var(--asco-gutter-md);
}

#top_thought_leaders .thought-leaders__intro {
	max-width: 56ch;
}

#top_thought_leaders .thought-leaders__intro h6 {
	margin-bottom: var(--asco-spacing-1);
}

#top_thought_leaders .thought-leaders__intro-copy {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--asco-spacing-2);
	align-items: baseline;
}

#top_thought_leaders .thought-leaders__intro-copy p,
#top_thought_leaders .thought-leaders__intro-copy a {
	margin: 0;
	font-size: var(--asco-fs-2);
	line-height: 1.4;
}

#top_thought_leaders .thought-leaders__intro-copy a {
	color: var(--asco-primary-blue-60);
	text-decoration: underline;
}

#top_thought_leaders .thought-leaders__list {
	display: grid;
	gap: var(--asco-gutter-md);
	padding-top: var(--asco-padding-md);
	margin: 0;
	list-style: none;
	border-top: 1px solid var(--border-regular);
}

#top_thought_leaders .thought-leaders__item {
	list-style: none;
}

/* Frontend behavior note: hover/focus color and avatar motion are CSS-only; backend only needs to output the trigger markup and matching modal ids. */
#top_thought_leaders .thought-leaders__trigger {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: var(--asco-spacing-3);
	align-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

#top_thought_leaders .thought-leaders__trigger:has(.avatar){
	grid-template-columns: 2.25rem 40px minmax(0, 1fr);
}

#top_thought_leaders .thought-leaders__trigger:focus-visible {
	outline: 2px solid var(--btn-focusedBorder);
	outline-offset: 4px;
	border-radius: var(--asco-radius-sm);
}

#top_thought_leaders .thought-leaders__rank {
	margin: 0;
	font-size: var(--asco-fs-3);
	font-weight: var(--asco-fw-bold);
	line-height: 1;
	justify-self: start;
}

#top_thought_leaders .avatar--thought-leaders {
	width: 40px;
	height: 40px;
	overflow: hidden;
	border: 1px solid var(--border-regular);
	border-radius: 50%;
	transition: var(--asco-anim-fast);
}

#top_thought_leaders .thought-leaders__trigger:hover .avatar--thought-leaders,
#top_thought_leaders .thought-leaders__trigger:focus-visible .avatar--thought-leaders {
	transform: scale(1.05);
	transition: var(--asco-anim-fast);
}

#top_thought_leaders .avatar--thought-leaders img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#top_thought_leaders .thought-leaders__content {
	min-width: 0;
}

#top_thought_leaders .thought-leaders__name {
	margin: 0 0 2px;
	font-size: var(--asco-fs-2);
	line-height: 1.3;
	transition: var(--asco-anim-fast);
}

#top_thought_leaders .thought-leaders__trigger:hover .thought-leaders__name,
#top_thought_leaders .thought-leaders__trigger:focus-visible .thought-leaders__name {
	color: var(--text-primary-hover);
	transition: var(--asco-anim-fast);
}

#top_thought_leaders .thought-leaders__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.45rem;
	align-items: center;
}

#top_thought_leaders .thought-leaders__meta p,
#top_thought_leaders .thought-leaders__meta span {
	margin: 0;
	font-size: 11px;
	line-height: 1.35;
	color: var(--text-secondary);
}

#top_thought_leaders .thought-leaders__meta span {
	color: var(--text-tertiary);
}

.thought-leader-modal .modal-dialog {
	max-width: 1024px;
}

.thought-leader-modal .modal-content {
	border: 0;
	border-radius: var(--asco-radius-md);
	box-shadow: 0 0 6px rgba(23, 52, 64, 0.13);
}

.thought-leader-modal .modal-body {
	position: relative;
	padding: var(--asco-spacing-12);
}

.thought-leader-modal__close {
	position: absolute;
	top: var(--asco-spacing-6);
	right: var(--asco-spacing-6);
	z-index: 2;
}

.thought-leader-modal__profile {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: var(--asco-spacing-6);
	padding-bottom: var(--asco-spacing-8);
	margin-bottom: var(--asco-spacing-8);
	border-bottom: 1px solid var(--border-regular);
}

.avatar--thought-leaders-modal {
	width: 160px;
	height: 160px;
	overflow: hidden;
	border: 1px solid var(--border-regular);
	border-radius: 50%;
}

.avatar--thought-leaders-modal img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thought-leader-modal__title-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--asco-spacing-2);
	align-items: baseline;
	margin-bottom: var(--asco-spacing-1);
}

.thought-leader-modal__title-row h1,
.thought-leader-modal__title-row .xl,
.thought-leader-modal__role,
.thought-leader-modal__bio,
.thought-leader-modal__label-row p,
.thought-leader-modal__show-all {
	margin: 0;
}

.thought-leader-modal__role.xl {
	margin-bottom: var(--asco-spacing-4);
}

.thought-leader-modal__details {
	display: grid;
	gap: var(--asco-spacing-1);
	margin-bottom: var(--asco-spacing-4);
}

.thought-leader-modal__label-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--asco-spacing-2);
	align-items: baseline;
}

.thought-leader-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asco-spacing-4);
	margin-top: var(--asco-spacing-5);
}

.thought-leader-modal__contributions {
	display: grid;
	gap: var(--asco-gutter-smedium);
}

.thought-leader-modal__contributions h6 {
	margin-bottom: 0;
}

.thought-leader-modal__contribution {
	display: flex;
	gap: var(--asco-gutter-md);
	align-items: center;
	padding: var(--asco-padding-smedium);
	background: var(--background-secondary);
	border-radius: var(--asco-radius-md);
	box-shadow: 0 0 6px rgba(23, 52, 64, 0.13);
	text-decoration: none;
	color: inherit;
}

.thought-leader-modal__contribution:hover {
	text-decoration: none;
}

.thought-leader-modal__contribution:focus-visible {
	outline: 2px solid var(--btn-focusedBorder);
	outline-offset: 4px;
}

.thought-leader-modal__contribution-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.thought-leader-modal__contribution-copy label,
.thought-leader-modal__contribution-copy h5,
.thought-leader-modal__contribution-copy p,
.thought-leader-modal__contribution-meta {
	margin: 0;
}

.thought-leader-modal__contribution-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: var(--asco-anim-fast);
}

.thought-leader-modal__contribution:hover .thought-leader-modal__contribution-title,
.thought-leader-modal__contribution:focus-visible .thought-leader-modal__contribution-title {
	color: var(--text-primary-hover);
	transition: var(--asco-anim-fast);
}

.thought-leader-modal__contribution-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.75rem;
	margin-top: var(--asco-spacing-1);
}

.thought-leader-modal__contribution-meta p {
	font-size: var(--asco-fs-2);
	color: var(--text-secondary);
}

.thought-leader-modal__contribution-thumb {
	flex: 0 0 114px;
	width: 114px;
	height: 64px;
	border-radius: var(--asco-radius-sm);
	overflow: hidden;
}

.thought-leader-modal__contribution-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thought-leader-modal__show-all {
	display: inline-flex;
	align-items: center;
	gap: var(--asco-spacing-2);
	color: var(--text-primary);
	text-decoration: none;
}

@media (max-width: 575px) {
	#top_thought_leaders .thought-leaders__trigger {
		grid-template-columns: 2rem minmax(0, 1fr);
		gap: var(--asco-spacing-2);
	}

	#top_thought_leaders .thought-leaders__trigger:has(.avatar){
		grid-template-columns: 2rem 40px minmax(0, 1fr);
	}

	#top_thought_leaders .thought-leaders__intro-copy {
		display: block;
	}

	.thought-leader-modal .modal-body {
		padding: var(--asco-spacing-8);
	}

	.thought-leader-modal__profile {
		grid-template-columns: 1fr;
	}

	.avatar--thought-leaders-modal {
		width: 96px;
		height: 96px;
	}

	.thought-leader-modal__contribution {
		flex-direction: column;
		align-items: flex-start;
	}

	.thought-leader-modal__contribution-thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 114 / 64;
	}
}
/* Thought Leaders Derivative : END */


/* Top Institutions Derivative : START */
#top_institutions .top-institutions {
	display: grid;
	gap: var(--asco-gutter-md);
}

#top_institutions .top-institutions__intro {
	max-width: 56ch;
}

#top_institutions .top-institutions__intro h6 {
	margin-bottom: var(--asco-spacing-1);
}

#top_institutions .top-institutions__intro-copy p {
	margin: 0;
	font-size: var(--asco-fs-2);
	line-height: 1.4;
}

#top_institutions .top-institutions__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--border-regular);
}

#top_institutions .top-institutions__item {
	list-style: none;
}

#top_institutions .top-institutions__entry {
	border-bottom: 1px solid var(--border-regular);
}

#top_institutions .top-institutions__entry[open] {
	padding-bottom: var(--asco-padding-md);
}

#top_institutions .top-institutions__summary {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr) 1rem;
	gap: var(--asco-spacing-3);
	align-items: center;
	padding: var(--asco-padding-md) 0;
	cursor: pointer;
	list-style: none;
}

#top_institutions .top-institutions__summary:has(.avatar) {
	grid-template-columns: 2.25rem 32px minmax(0, 1fr) 1rem;
}

#top_institutions .top-institutions__summary::-webkit-details-marker {
	display: none;
}

#top_institutions .top-institutions__summary:focus-visible {
	outline: 2px solid var(--btn-focusedBorder);
	outline-offset: 4px;
	border-radius: var(--asco-radius-sm);
}

#top_institutions .top-institutions__rank,
#top_institutions .top-institutions__heading h6,
#top_institutions .top-institutions__heading p,
#top_institutions .top-institutions__panel p,
#top_institutions .top-institutions__tags p,
#top_institutions .top-institutions__tags ul {
	margin: 0;
}

#top_institutions .top-institutions__rank {
	font-size: var(--asco-fs-3);
	font-weight: var(--asco-fw-bold);
	line-height: 1;
}

#top_institutions .avatar--top-institutions {
	width: 32px;
	height: 32px;
	overflow: hidden;
	border: 1px solid var(--border-regular);
	border-radius: var(--asco-radius-round);
	transition: var(--asco-anim-fast);
}

#top_institutions .avatar--top-institutions img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#top_institutions .top-institutions__heading {
	min-width: 0;
}

#top_institutions .top-institutions__heading h6 {
	font-size: var(--asco-fs-2);
	line-height: 1.3;
}

#top_institutions .top-institutions__heading p {
	font-size: 11px;
	line-height: 1.35;
	color: var(--text-secondary);
}

#top_institutions .top-institutions__chevron {
	color: var(--text-secondary);
	transition: transform var(--asco-anim-fast);
}

#top_institutions .top-institutions__entry[open] .top-institutions__chevron {
	transform: rotate(180deg);
}

#top_institutions .top-institutions__panel {
	padding-left: calc(2.25rem + 32px + var(--mds-spacing-3));
	display: grid;
	gap: var(--asco-spacing-3);
}

#top_institutions .top-institutions__panel > p {
	max-width: 64ch;
	font-size: var(--asco-fs-2);
	line-height: 1.4;
	color: var(--text-secondary);
}

#top_institutions .top-institutions__tags {
	display: grid;
	gap: 0;
	padding-top: var(--asco-spacing-3);
}

#top_institutions .top-institutions__tags p {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--text-primary);
}

#top_institutions .top-institutions__tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.625rem;
	padding: 0;
	list-style: none;
	font-size:12px;
}

#top_institutions .top-institutions__tags li {
	position: relative;
	padding-right: 0.75rem;
}

#top_institutions .top-institutions__tags li:not(:last-child)::after {
	content: "\2022";
	position: absolute;
	right: 0;
	top: 0;
	color: var(--text-tertiary);
}

#top_institutions .top-institutions__tags a {
	color: var(--asco-primary-blue-60);
	text-decoration: underline;
}

@media (max-width: 575px) {
	#top_institutions .top-institutions__summary {
		grid-template-columns: 2rem minmax(0, 1fr) 1rem;
		gap: var(--asco-spacing-2);
	}

	#top_institutions .top-institutions__summary:has(.avatar) {
		grid-template-columns: 2rem 32px minmax(0, 1fr) 1rem;
	}

	#top_institutions .top-institutions__panel {
		padding-left: 0;
	}
}
/* AI Derivative - Top Institutions : END */


/* AI DERIVATIVE : END */

/* Action Bar Styles ----------------- */
/* ------------------------------ */
/* ----------------------------- */
/* ---------------------- (°_°) */

.action-bar {
    display: grid;
    position: relative;
    top: auto;
    inset: auto;
    background: var(--background-primary);
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    float: none;
    --action-bar-inline-padding: 0px;
    --action-bar-scrollbar-size: 8px;
    --action-bar-scroll-btn-size: 1.25rem;
    --action-bar-scroll-btn-offset: max(var(--asco-spacing-2), calc((var(--action-bar-inline-padding) - var(--action-bar-scroll-btn-size)) / 2));
    --action-bar-edge-fade-width: calc(var(--action-bar-inline-padding) + var(--asco-spacing-4));
    --action-bar-scroll-top-allowance: var(--asco-spacing-2);
}

.action-bar__list {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--asco-spacing-8);
	padding: 0 var(--asco-padding-smedium);
	border-bottom: 1px solid var(--border-regular);
	margin: 0;
	list-style: none;
}

.action-bar__item {
	margin: 0;
	flex: 0 0 auto;
}

.action-bar__scroll-area {
	width: 100%;
	padding-bottom: 0;
}

.action-bar--article {
    --action-bar-inline-padding: var(--asco-padding-article-body);
    width: calc(100% + (var(--action-bar-inline-padding) * 2));
    margin: .5rem calc(var(--action-bar-inline-padding) * -1) 0;
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: visible;
}

.action-bar--article .action-bar__scroll-area {
    position: relative;
    overflow: visible;
    padding-top: var(--action-bar-scroll-top-allowance);
    margin-top: calc(var(--action-bar-scroll-top-allowance) * -1);
}

.action-bar--article .action-bar__list {
	width: max-content;
	min-width: 100%;
    padding-left: var(--action-bar-inline-padding);
    padding-right: var(--action-bar-inline-padding);
}

.action-bar__scroll-area .os-scrollbar-horizontal {
	--os-size: var(--action-bar-scrollbar-size);
    height: var(--action-bar-scrollbar-size) !important;
    padding: var(--os-padding-perpendicular) var(--action-bar-inline-padding);
	bottom: 0;
    opacity: 0;
    pointer-events: none;
}

.action-bar__scroll-area:hover .os-scrollbar-horizontal,
.action-bar__scroll-area .os-scrollbar-horizontal:hover,
.action-bar__scroll-area .os-scrollbar-horizontal.os-scrollbar-interaction,
.action-bar__scroll-area .os-scrollbar-horizontal.os-scrollbar-visible {
    opacity: 0 !important;
    pointer-events: none;
}

.action-bar__scroll-area .os-scrollbar-track,
.action-bar__scroll-area .os-scrollbar-track:hover {
	background: var(--divider);
}

.action-bar__scroll-area .os-scrollbar-horizontal .os-scrollbar-handle {
	width: 3rem !important;
	max-width: 3rem !important;
	min-width: 1.75rem !important;
	border-radius: 3px;
}

.action-bar--vertical {
    flex-direction: row;
}

.action-bar--vertical .action-bar__list {
    flex-direction: column;
}

.action-bar--vertical .action-bar__panels {
    flex: 1;
    padding: 1rem;
}

.action-bar__tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    padding: 0 0.125rem 0.25rem 0.125rem;
    font: 500 14px/1.2 ui-sans-serif, system-ui;
    border-radius: 0;
    cursor: pointer;
    transition: background var(--asco-anim-fast), color var(--asco-anim-fast);
    width: 100%;
    text-align: left;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
	text-decoration:none;
}

.action-bar__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.action-bar__label {
    flex: 1;
}

.action-bar__tab:hover {
    color: var(--text-primary-hover);
}

.action-bar__tab:focus-visible {
    outline: none;
    box-shadow: var(--asco-primary-blue-50);
}

.action-bar__tab[aria-selected="true"] {
    color: var(--text-primary-selected);
    border-bottom: 2px solid var(--asco-primary-blue-50);
}

.action-bar__tab[disabled],
.action-bar__tab[aria-disabled="true"] {
    color: var(--text-secondary);
    opacity: var(--disabled);
    cursor: not-allowed;
    pointer-events: none;
}

.action-bar__panel {
	padding-top: var(--asco-padding-md);
    padding-bottom: var(--asco-padding-xl);
}

.action-bar__panel[hidden] {
    display: none;
	
}

.action-bar__panel--fade {
    opacity: 0;
    transition: opacity var(--asco-anim-fast);
}

.action-bar__panel--fade.action-bar__panel--show {
    opacity: 1;
}

.action-bar--scrollable::before,
.action-bar--scrollable::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--action-bar-edge-fade-width);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--asco-anim-fast);
}

.action-bar--scrollable::before {
    left: 0;
    background: linear-gradient(to right, var(--background-primary) 40%, transparent 100%);
}

.action-bar--scrollable::after {
    right: 0;
    background: linear-gradient(to left, var(--background-primary) 40%, transparent 100%);
}

.action-bar--scrollable.action-bar--has-prev::before {
    opacity: 1;
}

.action-bar--scrollable.action-bar--has-next::after {
    opacity: 1;
}

.action-bar__scroll-btn {
    position: absolute;
    top: calc(50% + (var(--action-bar-scroll-top-allowance) / 2) - (var(--action-bar-scrollbar-size) / 2));
    z-index: 3;
    width: var(--action-bar-scroll-btn-size);
    height: var(--action-bar-scroll-btn-size);
    justify-content: center;
    transform: translateY(-50%);
}

.action-bar__scroll-btn--prev {
    left: var(--action-bar-scroll-btn-offset);
}

.action-bar__scroll-btn--next {
    right: var(--action-bar-scroll-btn-offset);
}

.action-bar__scroll-btn[disabled] {
    color: var(--text-tertiary);
    background: var(--btn-secondary);
    border-color: var(--btn-secondary);
    pointer-events: none;
    box-shadow: none;
}

.action-bar__scroll-btn .icon {
    width: 0.625rem;
    height: 0.625rem;
}


.page-layout--article .action-bar__panel h2 {
    margin-top: 2rem;
}

.page-layout--article .action-bar__panel h3 {
    margin-top: 1.5rem;
}

.page-layout--article .action-bar__panel h4 {
    margin-top: 1.125rem;
}

.page-layout--article .action-bar__panel h5 {
    margin-top: 1rem;
}

.page-layout--article .action-bar__panel h6 {
    margin-top: .75rem;
}

.page-layout--article .action-bar__panel p {
    margin-bottom: 1rem;
}

.page-layout--article:first-child .action-bar__panel h2:first-child, .page-layout--article:first-child .action-bar__panel h3:first-child, .page-layout--article:first-child .action-bar__panel h4:first-child, .page-layout--article:first-child .action-bar__panel h5:first-child, .page-layout--article:first-child .action-bar__panel h6:first-child {
    margin-top: 0;
}

.action-bar__panels #summary p,
.action-bar__panels #takeaways ul,
.action-bar__panels #takeaways ol {
  /* default fallback styles */
  position: relative;
  max-height: calc((var(--asco-lh-body)) * 3);
  overflow: hidden;
}

#summary.action-bar__panel{
   display: inline;
   column-gap: var(--asco-gutter-smedium);
}

.btn--audio-preview {
   flex: 1 0 auto;
   box-shadow: var(--asco-shadow-sm) !important;
}

@supports (-webkit-line-clamp: 1) {
  .action-bar__panels #summary p,
  .action-bar__panels #takeaways ul,
  .action-bar__panels #takeaways ol {
    /* use the clamp approach in supporting browsers */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* optionally override or remove fade overlay */
  }
}

.action-bar__panels #takeaways ul,
.action-bar__panels #takeaways ol {
    margin-bottom: 0;
}

.action-bar__panels #takeaways ul li:nth-child(n+4),
.action-bar__panels #takeaways ol li:nth-child(n+4) {
    display: none;
}

.action-bar .btn.action-bar__read-more-btn,
.action-bar .btn.action-bar__read-more-btn:hover,
.action-bar .btn.action-bar__read-more-btn:active {
    background: linear-gradient(90deg, hsl(210 60 98 / .0) 0%, hsl(210 60 98 / 1) 35%);
    position: absolute;
    bottom: calc((var(--asco-padding-smedium) - var(--asco-spacing-4) - 2px) * -1);
    right: calc(var(--asco-padding-smedium) - var(--asco-spacing-4));
    padding: var(--asco-spacing-4) var(--asco-spacing-4) var(--asco-spacing-4) var(--asco-spacing-10);  
    color: var(--text-secondary);
    font-weight: var(--asco-fw-semibold);
    border: 0px solid transparent;
}

.action-bar .btn.action-bar__read-more-btn:hover{
    color: var(--text-secondary-hover);
}

.action-bar__footer-buttons{
	display: flex;
	gap: var(--asco-gutter-sm);
}

.action-bar__footer-buttons div:first-child{
	margin-right: auto;
}    
/* Action bar : END */


/* Poll : START */
/* ============================================================
   poll.css
   Styles for the Poll question component.
   ============================================================ */

/* ---- Google Fonts import ---- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap');

/* ============================================================
   Design tokens
   ============================================================ */

.poll {
    --poll-font:             'Raleway', sans-serif;
    --poll-text-primary:     var(--dark);
    --poll-text-secondary:   var(--dark-50);
    --poll-btn-bg:           var(--primary-clr-1);
    --poll-btn-bg-hover:     #BF0C47;
    --poll-white:            #ffffff;
    --poll-border:           #e4e7ea;
    --poll-radius-sm:        var(--asco-radius-2xl);
    --poll-radius-md:        var(--asco-radius-2xl);
    --poll-focus-ring:       #BF0C47;
    --poll-purple-bar:       #BF0C47;
    --poll-purple-label:     #BF0C47;
}

/* ============================================================
   Card container
   ============================================================ */

.poll {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 24px;
    background-color: var(--poll-white);
    border: 1px solid var(--poll-border);
    border-radius: var(--poll-radius-md);
    font-family: var(--poll-font);
    color: var(--poll-text-primary);
    box-sizing: border-box;
    backdrop-filter: blur(8px);
    overflow: clip;
}

/* ============================================================
   Question
   ============================================================ */

.poll__question {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--poll-text-primary);
    margin: 0;
}

/* ============================================================
   Multi-choice inputs
   ============================================================ */

.poll__choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.poll__instruction {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--poll-text-secondary);
    margin: 0;
}

.poll__options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---- Individual option ---- */

.poll__option {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 200px;
    padding: 8px;
    background-color: var(--poll-white);
    border: 1px solid var(--poll-border);
    border-radius: var(--poll-radius-md);
    box-sizing: border-box;
    cursor: pointer;
    font-family: var(--poll-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--poll-text-primary);
    text-align: left;
    transition: border-color 0.15s ease-in-out;
}

.poll__option:hover {
    border-color: #b8bfc4;
}

.poll__option:focus-visible {
    outline: 2px solid var(--poll-focus-ring);
    outline-offset: 2px;
}

/* Selected state */
.poll__option--selected {
    border-color: var(--poll-btn-bg);
}

/* ---- Radio indicator ---- */

.poll__radio {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: var(--poll-white);
    box-sizing: border-box;
}

.poll__option--selected .poll__radio {
    background-color: var(--poll-btn-bg);
    border-color: var(--poll-btn-bg);
}

.poll__option--selected .poll__radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background-color: var(--poll-white);
}

/* ---- Option label text ---- */

.poll__option-text {
    flex: 1;
}

/* ============================================================
   Footer row
   ============================================================ */

.poll__footer {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.poll__responses {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--poll-text-secondary);
    margin: 0;
}

.poll__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ---- Text button ("See Results") ---- */

.poll__btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 24px;
    min-width: 24px;
    padding: 6px;
    background: none;
    border: none;
    border-radius: var(--poll-radius-sm);
    font-family: var(--poll-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--poll-text-primary);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.poll__btn-text:hover {
    color: var(--poll-text-secondary);
}

.poll__btn-text:focus-visible {
    outline: 2px solid var(--poll-focus-ring);
    outline-offset: 2px;
}

/* ---- Primary button ("Next") ---- */

.poll__btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 24px;
    min-width: 24px;
    padding: 6px 8px;
    background-color: var(--poll-btn-bg);
    color: var(--poll-white);
    border: none;
    border-radius: var(--poll-radius-sm);
    font-family: var(--poll-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.poll__btn-primary:hover {
    background-color: var(--poll-btn-bg-hover);
}

.poll__btn-primary:focus-visible {
    outline: 2px solid var(--poll-focus-ring);
    outline-offset: 2px;
}

/* ============================================================
   Results — horizontal bar chart
   ============================================================ */

/* ---- Results list (replaces options-list) ---- */

.poll__results-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---- Individual result row ---- */

.poll__result {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

/* ---- Percentage ---- */

.poll__result-pct {
    flex-shrink: 0;
    width: 52px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--poll-text-primary);
    margin: 0;
}

/* ---- Bar + labels column ---- */

.poll__result-data {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
    justify-content: center;
}

/* ---- Bar track ---- */

.poll__result-bar {
    width: 100%;
    border: 1px solid var(--poll-border);
    box-sizing: border-box;
}

/* ---- Bar fill ---- */

.poll__result-bar-fill {
    height: 28px;
    background-color: var(--poll-purple-bar);
}

/* ---- Labels row (option text + count) ---- */

.poll__result-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.poll__result-label {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--poll-text-primary);
    margin: 0;
    white-space: nowrap;
}

.poll__result-count {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--poll-text-primary);
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Winner modifier ---- */

.poll__result--winner .poll__result-label {
    font-weight: 700;
    color: var(--poll-purple-label);
}
/* Poll : END */

/* Survey : START */
/* ============================================================
   conexiant-survey.css
   Shared styles for the Test Your Knowledge quiz component
   and the Results page component.
   ============================================================ */

/* ---- Google Fonts import ---- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap');

/* ============================================================
   Preview scaffold — remove when embedding in article template
   ============================================================ */



/* ============================================================
   Design tokens
   ============================================================ */

.post__copy.survey {
    --survey-font:              'Raleway', sans-serif;
    --survey-text-primary:      var(--dark);
    --survey-text-secondary:    var(--dark);
    --survey-text-tertiary:     var(--dark);;
    --survey-red:               #e92e16;   /* wrong answer text + feedback */
    --survey-red-radio:         #dc3545;   /* wrong answer radio fill */
    --survey-green-label:       #008236;   /* correct answer text */
    --survey-green-radio:       #198754;   /* correct answer radio fill */
    --survey-purple-progress:   #BF0C47;   /* progress bar fill */
    --survey-grey-track:        #e4e7ea;   /* progress track + option borders + dividers */
    --survey-card-bg:           #f7fafd;   /* rationale card bg */
    --survey-btn-bg:            var(--primary-clr-1);   /* Continue button */
    --survey-white:             #ffffff;
    --survey-radius-sm:         var(--survey-radius-sm);
    --survey-radius-md:         var(--survey-radius-sm);
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 620px;
    font-family: var(--survey-font);
    color: var(--survey-text-primary);
    box-sizing: border-box;
}

/* ============================================================
   Test Your Knowledge — quiz component
   ============================================================ */

/* ---- Header row (title + progress bar) ---- */

.post__copy .survey__header {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    width: 100%;
}

.post__copy .survey__title {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--survey-text-primary);
    margin: 0;
    padding-top: 16px;
}

.post__copy .survey__progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    width: 133px;
}

.post__copy .survey__progress-label {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--survey-text-primary);
    white-space: nowrap;
}

.post__copy .survey__progress-bar {
    position: relative;
    width: 100%;
    height: 16px;
}

.post__copy .survey__progress-track {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--survey-grey-track);
    border-radius: 2px;
}

.post__copy .survey__progress-fill {
    position: absolute;
    top: 6px;
    left: 0;
    height: 4px;
    background-color: var(--survey-purple-progress);
    border-radius: 2px;
}

/* ---- Quiz body ---- */

.post__copy .survey__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ---- Question text ---- */

.post__copy .survey__question {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--survey-text-primary);
    margin: 0;
}

/* ---- Continue button ---- */

.post__copy .survey__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    width: 100%;
}

.post__copy .survey__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--survey-btn-bg);
    color: var(--survey-white);
    border: none;
    border-radius: 2.5rem;
    padding: 6px 8px;
    min-height: 24px;
    font-family: var(--survey-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.post__copy .survey__btn:hover {
    background-color: #0f3a4d;
}

.post__copy .survey__btn:focus-visible {
    outline: 2px solid var(--survey-purple-progress);
    outline-offset: 2px;
}

/* ============================================================
   Shared options — used by both quiz and results
   ============================================================ */

/* ---- Options section wrapper ---- */

.post__copy .survey__options-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 28px;
    width: 100%;
    box-sizing: border-box;
}

/* ---- Feedback line ---- */

.post__copy .survey__feedback {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

.post__copy .survey__feedback--wrong {
    color: var(--survey-red);
}

.post__copy .survey__feedback--right {
    color: var(--survey-green-label);
}

/* ---- Options list ---- */

.post__copy .survey__options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---- Individual option ---- */

.post__copy .survey__option {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background-color: var(--survey-white);
    border: 1px solid var(--survey-grey-track);
    border-radius: var(--survey-radius-md);
    padding: 8px;
    box-sizing: border-box;
    min-width: 200px;
    height: 36px;
}

/* ---- Radio button ---- */

.post__copy .survey__radio {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: var(--survey-white);
    box-sizing: border-box;
}

/* Correct / valid selected state */
.post__copy .survey__option--correct .survey__radio {
    background-color: var(--survey-green-radio);
    border-color: var(--survey-green-radio);
}

.post__copy .survey__option--correct .survey__radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background-color: var(--survey-white);
}

/* Invalid / wrong selected state */
.post__copy .survey__option--invalid .survey__radio {
    background-color: var(--survey-red-radio);
    border-color: var(--survey-red-radio);
}

.post__copy .survey__option--invalid .survey__radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background-color: var(--survey-white);
}

/* ---- Option label text ---- */

.post__copy .survey__option-text {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--survey-text-primary);
}

.post__copy .survey__option--correct .survey__option-text {
    color: var(--survey-green-label);
}

.post__copy .survey__option--invalid .survey__option-text {
    color: var(--survey-red);
}

/* ---- State icon (check or X circle) ---- */

.post__copy .survey__state-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Rationale card ---- */

.post__copy .survey__rationale-section {
    padding-left: 28px;
    width: 100%;
    box-sizing: border-box;
}

.post__copy .survey__rationale-card {
    background-color: var(--survey-card-bg);
    border-radius: var(--survey-radius-md);
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
}

.post__copy .survey__rationale-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--survey-text-secondary);
    margin: 0;
}

.post__copy .survey__rationale-text + .post__copy .survey__rationale-text {
    margin-top: 8px;
}

.post__copy .survey__rationale-text strong {
    font-weight: 700;
    color: var(--survey-text-secondary);
}

/* ============================================================
   Results page — summary overview
   ============================================================ */

.post__copy .survey__summary-overview {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.post__copy .survey__summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    flex-shrink: 0;
}

/* ---- Grade heading ("Great job!") ---- */

.post__copy .survey__grade-heading {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--survey-text-primary);
    margin: 0;
}

/* ---- Score card + action links row ---- */

.post__copy .survey__score-links {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Score card */

.post__copy .survey__score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 120px;
    padding: 12px;
    border-radius: var(--survey-radius-md);
    box-shadow: 0 0 6px 0 rgba(23, 52, 64, 0.04);
    box-sizing: border-box;
    overflow: hidden;
    /* Radial gradient: white top-left → light blue bottom */
    background: var(--secondary-gray-20);
}

.post__copy .survey__score-label {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--survey-text-primary);
    margin: 0;
    text-align: center;
    width: 80px;
}

.post__copy .survey__score-value {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--survey-text-primary);
    margin: 0;
    text-align: center;
    width: 96px;
}

/* Action links */

.post__copy .survey__action-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
}

.post__copy .survey__action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    min-height: 24px;
    font-family: var(--survey-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--survey-text-tertiary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
}

.post__copy .survey__action-link:hover {
    color: var(--survey-text-primary);
}

.post__copy .survey__action-icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Helpful row ---- */

.post__copy .survey__helpful {
    display: flex;
    gap: 16px;
    align-items: center;
}

.post__copy .survey__helpful-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--survey-text-primary);
    white-space: nowrap;
}

.post__copy .survey__helpful-btns {
    display: flex;
    gap: 6px;
    align-items: center;
}

.post__copy .survey__helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    min-height: 24px;
    font-family: var(--survey-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--survey-text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.post__copy .survey__helpful-btn:hover {
    color: var(--survey-text-primary);
}

/* ============================================================
   Results page — divider
   ============================================================ */

.post__copy .survey__divider {
    width: 100%;
    border: none;
    border-top: 1px solid var(--survey-grey-track);
    margin: 8px 0;
}

.post__copy .survey__divider--thick {
    border-top-width: 3px;
}

/* ============================================================
   Results page — Your Results section
   ============================================================ */

.post__copy .survey__results {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    background: var(--survey-white);
}

.post__copy .survey__results-heading {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--survey-text-primary);
    margin: 0;
}

/* Q&A list */

.post__copy .survey__qa-list {
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
}

/* Collapsed state: clip height + fade overlay */

.post__copy .survey__results-body {
    position: relative;
}

.post__copy .survey__results-body--collapsed {
    max-height: 323px;
    overflow: hidden;
}

.post__copy .survey__results-body--collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 101px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 50%);
    pointer-events: none;
}

/* Individual Q&A block */

.post__copy .survey__qa-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.post__copy .survey__qa-question {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--survey-text-primary);
    margin: 0;
}

/* ============================================================
   Results page — expand / collapse toggle
   ============================================================ */

.post__copy .survey__toggle-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 4px;
}

.post__copy .survey__toggle-row {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.post__copy .survey__toggle-line {
    flex: 1;
    height: 1px;
    background-color: var(--survey-grey-track);
    min-width: 0;
}

.post__copy .survey__toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 6px;
    border: 1px solid #d0d4d7;
    border-radius: var(--survey-radius-sm);
    background: var(--survey-white);
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s;
}

.post__copy .survey__toggle-btn:hover {
    background-color: #f0f2f4;
}

.post__copy .survey__toggle-btn svg {
    transition: transform 0.2s ease;
}

.post__copy .survey__toggle-btn.is-expanded svg {
    transform: rotate(180deg);
}

.post__copy .survey__toggle-label {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--survey-text-primary);
    text-align: center;
    white-space: nowrap;
}

/* Survey : END */