@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);
}


/* 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 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-regular);
    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);
}




/* 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;
}

.badge{
	font-size: var(--asco-fs-2);
	font-weight: var(--asco-fw-medium);
	text-transform: uppercase;
	padding: 0;
}

.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);
}

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

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

.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__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;
}







.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;
}