/* Doctor Smile Article hero. Colours match the .tmj-blog articles. */

.drsmile-hero {
	--dsh-ink: #1b2733;
	--dsh-mut: #5c6b75;
	--dsh-line: #e3ebf2;
	--dsh-accent: #0a5fa8;
	--dsh-tint: #eef4fd;
	margin: 0 0 2em;
	color: var(--dsh-ink);
}

.drsmile-hero *,
.drsmile-hero *::before,
.drsmile-hero *::after {
	box-sizing: border-box;
}

.drsmile-hero .drsmile-hero__head {
	background: var(--dsh-tint);
	padding: clamp(24px, 3vw, 40px) 24px;
	border-radius: 16px;
}

/* Tinted band reaches both screen edges. The text stays in the column. */
.drsmile-hero--bleed .drsmile-hero__head {
	padding-left: 0;
	padding-right: 0;
	border-radius: 0;
	box-shadow: 0 0 0 100vmax var(--dsh-tint);
	clip-path: inset(0 -100vmax);
}

.drsmile-hero .drsmile-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--dsh-accent);
}

.drsmile-hero .drsmile-hero__title {
	margin: 0;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--dsh-ink);
}

@media (min-width: 768px) {
	.drsmile-hero .drsmile-hero__title {
		font-size: 36px;
	}
}

.drsmile-hero--serif .drsmile-hero__title {
	font-family: "Noto Serif Display", "Playfair Display", Georgia, "Times New Roman", serif;
}

.drsmile-hero .drsmile-hero__intro {
	max-width: 640px;
	margin: 20px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--dsh-mut);
}

.drsmile-hero .drsmile-hero__media {
	margin: 32px 0 0;
}

.drsmile-hero .drsmile-hero__img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--dsh-line);
	border-radius: 16px;
}

/* The widget shows the featured image, so hide the theme copy in the article. The blue title band stays. */
body:has(.drsmile-hero) .tpl-single > .entry-header {
	display: none;
}

/*
 * The widget's own title is now the page's real <h1>. The theme prints its
 * own h1.entry-title too - either in the blue band (pages, and posts with
 * the title option on), or plain above the content (posts with that
 * option off). Either way it repeats the same text a second time, so it
 * is hidden wherever the widget is on the page. The blue band itself
 * (background + breadcrumbs) stays; only its title text goes.
 */
body:has(.drsmile-hero) h1.entry-title {
	display: none;
}

/* Hero in the top area, between the theme title band and the content. */
.drsmile-hero-top {
	background: var(--dsh-page, #f4f7ff);
	padding-bottom: 2px;
}

/* The widget spot in the page content stays empty. Hide it, and its row when the row has nothing else. */
body.drsmile-hero-on-top .so-panel.widget_drsmile-article-hero {
	display: none;
}

body.drsmile-hero-on-top .panel-grid:has(.widget_drsmile-article-hero):not(:has(.so-panel:not(.widget_drsmile-article-hero))) {
	display: none;
}