/* =================================================================
   News element
   -----------------------------------------------------------------
   Cards take the site's own fonts (Biennale via the body) and set only
   their own small type. Section headings are Salient elements around
   this, not part of it. The filter controls copy the Events page
   (events-map) one for one: same fills, 1px line, 8px radius, 15.5px
   text, chevron, 12px panels with the soft shadow, and the drawer.
   ================================================================= */

.cl-news {
	--cl-news-ink: #061E21;
	--cl-news-soft: rgba(6, 30, 33, 0.7);
	--cl-news-line: rgba(6, 30, 33, 0.16);
	--cl-news-card: #FFFFFF;
	--cl-news-accent: #C91228;
	--cl-news-img-bg: #E5E3D9;
	color: var(--cl-news-ink);
	text-align: left;
}

.cl-news--dark {
	--cl-news-ink: #FDFDFC;
	--cl-news-soft: rgba(253, 253, 252, 0.7);
	--cl-news-card: rgba(253, 253, 252, 0.05);
	--cl-news-img-bg: rgba(253, 253, 252, 0.08);
}

.cl-news *,
.cl-news *::before,
.cl-news *::after { box-sizing: border-box; }

/* -----------------------------------------------------------------
   Cards
   ----------------------------------------------------------------- */
.cl-news__card { display: flex; min-width: 0; }

.cl-news .cl-news__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 16px 16px 24px;
	border-radius: 12px;
	background: var(--cl-news-card);
	color: inherit;
	text-decoration: none;
}

/* Same 2.5:1 frame as the featured image on the post itself, so the logo
   banners made for that frame are never cropped. */
.cl-news__img {
	position: relative;
	aspect-ratio: 5 / 2;
	width: 100%;
	overflow: hidden;
	border-radius: 10px;
	background: var(--cl-news-img-bg);
}

.cl-news .cl-news__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.cl-news__link:hover .cl-news__img img { transform: scale(1.04); }

/* The same very light hairline round the whole card (Jordan, 22 Sep). */
.cl-news--light .cl-news__link { border: 1px solid rgba(6, 30, 33, 0.08); }

/* A very light hairline on light cards, drawn over the image, so white
   logo banners separate from the white card (Jordan, 22 Sep). */
.cl-news--light .cl-news__img::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(6, 30, 33, 0.08);
	border-radius: inherit;
	pointer-events: none;
}

.cl-news__body { display: flex; flex-direction: column; flex: 1; padding: 20px 8px 0; }

.cl-news__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cl-news-soft);
}

.cl-news__meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* Scoped through .cl-news and the tag: Salient's `.row .col h3` (0,2,1)
   outranks a two-class selector and would set 38px titles. The line cap
   is --cl-news-lines lines, and the min-height keeps shorter titles on the
   same footprint, so every card is the same height. */
.cl-news h2.cl-news__title,
.cl-news h3.cl-news__title {
	--lh: 1.3;
	margin: 10px 0 0;
	padding: 0;
	color: var(--cl-news-ink);
	font-family: inherit;
	font-size: var(--cl-news-title, 20px);
	font-weight: 400;
	line-height: var(--lh);
	letter-spacing: normal;
	text-transform: none;
}

.cl-news:not(.is-no-cap) h2.cl-news__title,
.cl-news:not(.is-no-cap) h3.cl-news__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--cl-news-lines, 3);
	overflow: hidden;
	min-height: calc(var(--cl-news-lines, 3) * 1em * var(--lh));
}

.cl-news__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 20px;
	font-size: 15px;
	color: var(--cl-news-ink);
}

/* "Read more" as a button: the outline button from the Patient page's
   pharmacy cards ("Refer with this pharmacy", .cl-pf__btn--refer). The red
   main button was too strong repeated on every card (Jordan, 22 Sep).
   Chosen per element with the "Read more style" setting. */
.cl-news--more-button .cl-news__more {
	align-self: flex-start;
	margin-top: auto;
	height: 42px;
	padding: 0 18px;
	border: 1px solid rgba(6, 30, 33, 0.16);
	border-radius: 6px;
	background: transparent;
	color: #16232B;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cl-news--more-button .cl-news__link:hover .cl-news__more { background: #F4F5F3; border-color: #16232B; }

.cl-news--more-button h2.cl-news__title,
.cl-news--more-button h3.cl-news__title { margin-bottom: 20px; }

.cl-news__arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* -----------------------------------------------------------------
   Featured + list
   ----------------------------------------------------------------- */
.cl-news__featured { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; }

.cl-news__featured > .cl-news__card .cl-news__link { padding-bottom: 28px; }
.cl-news__featured > .cl-news__card .cl-news__body { padding: 24px 12px 0; }
.cl-news__featured > .cl-news__card h3.cl-news__title { --lh: 1.25; font-size: var(--cl-news-feature, 28px); }

.cl-news__list { display: flex; flex-direction: column; gap: 16px; }
.cl-news__list .cl-news__card { flex: 1; }

/* Rows: thumbnail on the left running the full height of the row
   (Jordan, 22 Sep), text on the right. */
.cl-news .cl-news__list .cl-news__link {
	display: grid;
	grid-template-columns: minmax(0, 42%) 1fr;
	gap: 24px;
	align-items: stretch;
	padding: 16px;
}

.cl-news__list .cl-news__img { aspect-ratio: auto; height: 100%; min-height: 120px; border-radius: 8px; }
.cl-news__list .cl-news__body { align-self: center; padding: 8px 8px 8px 0; }
.cl-news__list .cl-news__more { display: none; }
.cl-news__list h3.cl-news__title { font-size: var(--cl-news-title, 18px); }

/* A row's box is taller than 5:2, so a logo banner would lose the ends of
   its logos. It shows whole instead, centred on its own background colour
   (sampled by script.js), so the box still reads as one image. */
.cl-news .cl-news__list .cl-news__img.is-banner img { object-fit: contain; }

/* -----------------------------------------------------------------
   Grid
   ----------------------------------------------------------------- */
.cl-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 32px; }
.cl-news__card[hidden] { display: none; }

.cl-news__empty { margin: 24px 0 0; color: var(--cl-news-soft); font-size: 16px; }
.cl-news__empty[hidden] { display: none; }

.cl-news__loadmore { display: flex; justify-content: center; margin-top: 56px; }
.cl-news__loadmore[hidden] { display: none; }

/* -----------------------------------------------------------------
   Buttons (as events-map)
   ----------------------------------------------------------------- */
.cl-news .cl-news__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	background: var(--cl-news-accent) !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	box-shadow: none !important;
	cursor: pointer;
}

.cl-news .cl-news__btn:hover { filter: brightness(0.92); }

.cl-news .cl-news__btn--ghost { background: rgba(6, 30, 33, 0.06) !important; color: #061E21 !important; }

/* "Load more": the white outline button the site uses beside its red one
   (e.g. "View the formulary"). */
.cl-news .cl-news__btn--outline {
	background: #fff !important;
	border-color: rgba(6, 30, 33, 0.16) !important;
	color: #061E21 !important;
	padding: 11px 20px !important;
	font-weight: 400 !important;
}

.cl-news .cl-news__btn--outline:hover { filter: none; border-color: rgba(6, 30, 33, 0.7) !important; }

/* -----------------------------------------------------------------
   Filter bar (as events-map)
   ----------------------------------------------------------------- */
.cl-news__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 32px;
}

.cl-news__bar-content { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }

.cl-news__drop { position: relative; }

.cl-news .cl-news__fbtn,
.cl-news .cl-news__trigger {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--cl-news-line);
	border-radius: 8px;
	background: #fff;
	color: #061E21;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.4;
	flex: 0 0 auto;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: border-color 0.15s ease;
}

/* One radius for every control, as events-map: Salient's own button
   styles outrank the rule above and set 4px on the dropdown buttons,
   while the search box (a label) kept 8px (Jordan, 22 Sep). */
.cl-news button.cl-news__fbtn,
.cl-news button.cl-news__trigger,
.cl-news button.cl-news__close,
.cl-news .cl-news__search { border-radius: 8px !important; }

.cl-news .cl-news__fbtn:hover,
.cl-news .cl-news__trigger:hover { border-color: rgba(6, 30, 33, 0.7); }
.cl-news .cl-news__fbtn[aria-expanded="true"] { border-color: #061E21; }

.cl-news__chev {
	width: 6.5px;
	height: 6.5px;
	margin-left: 1px;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 0.18s ease;
}

.cl-news__fbtn[aria-expanded="true"] .cl-news__chev { transform: rotate(225deg) translate(-2px, -2px); }

.cl-news__panel-drop {
	position: absolute;
	z-index: 40;
	top: calc(100% + 10px);
	left: 0;
	min-width: 288px;
	max-height: 320px;
	overflow-y: auto;
	padding: 8px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(15, 35, 33, 0.13);
}

.cl-news__panel-drop[hidden] { display: none; }
.cl-news__drop--end .cl-news__panel-drop { left: auto; right: 0; }

.cl-news__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 8px;
	color: #061E21;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
}

.cl-news__row:hover { background: #FAF9F7; }

.cl-news .cl-news__tick,
.cl-news .cl-news__radio {
	flex: 0 0 auto;
	width: 21px !important;
	height: 21px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(6, 30, 33, 0.7) !important;
	background: #FEFDFD !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.cl-news .cl-news__tick { border-radius: 6px !important; }
.cl-news .cl-news__radio { border-radius: 50% !important; }

.cl-news .cl-news__tick:checked,
.cl-news .cl-news__radio:checked { border-color: var(--cl-news-accent) !important; background: var(--cl-news-accent) !important; }

.cl-news .cl-news__tick:checked::after {
	content: "";
	display: block;
	width: 5px;
	height: 9px;
	margin: 3px auto 0;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.cl-news .cl-news__radio:checked::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	margin: 6px auto;
	border-radius: 50%;
	background: #fff;
}

.cl-news__search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 1 260px;
	min-width: 140px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--cl-news-line);
	border-radius: 8px;
	background: #fff;
	transition: border-color 0.15s ease;
}

.cl-news__search:hover,
.cl-news__search:focus-within { border-color: rgba(6, 30, 33, 0.7); }

.cl-news .cl-news__search input {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #061E21;
	font-family: inherit !important;
	font-size: 15.5px !important;
	line-height: 1.4 !important;
	outline: none;
}

.cl-news .cl-news__search input::placeholder { color: #061E21; opacity: 1; }

.cl-news__i {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cl-news__i--muted { color: rgba(6, 30, 33, 0.7); }

.cl-news p.cl-news__count { margin: 0; padding: 0; font-size: 15px; color: var(--cl-news-soft); white-space: nowrap; }

/* Drawer chrome and the "Filters" button: only below the stacking width
   (the per-instance rule switches them on). */
.cl-news__triggers { display: none; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 24px; }
.cl-news .cl-news__trigger { padding: 8px 12px; font-size: 14px; }

.cl-news__trigger-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--cl-news-accent);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
}

.cl-news__trigger-count[hidden] { display: none; }

.cl-news__scrim,
.cl-news__drawer-head,
.cl-news__drawer-foot { display: none; }

.cl-news__close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--cl-news-line);
	border-radius: 8px;
	background: #FEFDFD;
	color: rgba(6, 30, 33, 0.7);
	cursor: pointer;
}

/* -----------------------------------------------------------------
   Tablet and phone
   ----------------------------------------------------------------- */
@media (max-width: 999px) {
	.cl-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.cl-news__featured { grid-template-columns: 1fr; }
}

@media (max-width: 690px) {
	.cl-news__grid { grid-template-columns: 1fr; }

	/* Rows stack on phones and the thumbnail goes back to the 5:2 frame,
	   the same as the grid cards. */
	.cl-news .cl-news__list .cl-news__link { grid-template-columns: 1fr; gap: 0; padding: 16px 16px 24px; }
	.cl-news__list .cl-news__img { aspect-ratio: 5 / 2; height: auto; min-height: 0; border-radius: 10px; }
	.cl-news .cl-news__list .cl-news__img.is-banner img { object-fit: cover; }
	.cl-news__list .cl-news__body { padding: 20px 8px 0; }
}

/* The drawer (below the stacking width, opened by the "Filters" button).
   While open, script.js puts it and the scrim in the browser's top layer
   so the site header can't cover it (see events-map, 1.9.37). */
.cl-news.is-drawer-open .cl-news__bar,
.cl-news .cl-news__bar[popover] {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 1002;
	width: min(380px, 88vw);
	height: auto;
	margin: 0;
	padding: 18px 20px 20px;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 12px;
	overflow-y: auto;
	border: 0;
	background: #fff;
	color: #061E21;
	box-shadow: -12px 0 40px rgba(15, 35, 33, 0.18);
}

.cl-news.is-drawer-open .cl-news__scrim,
.cl-news .cl-news__scrim[popover] {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 1001;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(15, 35, 33, 0.45);
}

.cl-news.is-drawer-open .cl-news__drawer-head,
.cl-news .cl-news__bar[popover] .cl-news__drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cl-news-line);
}

.cl-news .cl-news__drawer-title { margin: 0 !important; color: #061E21; font-size: 19px !important; line-height: 1.2 !important; font-weight: 400 !important; }

.cl-news.is-drawer-open .cl-news__drawer-foot,
.cl-news .cl-news__bar[popover] .cl-news__drawer-foot {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--cl-news-line);
}

.cl-news__drawer-foot .cl-news__btn { flex: 1 1 0; }

.cl-news.is-drawer-open .cl-news__bar-content,
.cl-news .cl-news__bar[popover] .cl-news__bar-content { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }

.cl-news.is-drawer-open .cl-news__fbtn,
.cl-news .cl-news__bar[popover] .cl-news__fbtn { width: 100%; justify-content: space-between; }

.cl-news.is-drawer-open .cl-news__search,
.cl-news .cl-news__bar[popover] .cl-news__search { flex: 0 0 auto; width: 100%; }

.cl-news.is-drawer-open .cl-news__panel-drop,
.cl-news .cl-news__bar[popover] .cl-news__panel-drop { position: static; width: 100%; min-width: 0; margin-top: 6px; box-shadow: none; background: #FAF9F7; }

.cl-news.is-drawer-open .cl-news__bar .cl-news__count,
.cl-news .cl-news__bar[popover] .cl-news__count { display: none; }