/* Dr Megha Patel: styles that theme.json cannot express. */

:root {
	--drm-ease: cubic-bezier(.16, .84, .44, 1);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-variant-ligatures: common-ligatures;
}

/* Fraunces reads warmer with a little soft/wonk at display sizes. */
h1,
h2,
.drm-display {
	font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 110;
}

h3,
h4 {
	font-variation-settings: "SOFT" 10, "WONK" 0, "opsz" 36;
}

/* ---------- Header ---------- */

.drm-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* No backdrop-filter here. A filtered ancestor becomes the containing block
   for fixed-position descendants, which trapped the mobile menu overlay
   inside the header instead of covering the viewport. */

/* Thin utility strip: location, today's hours, and the phone number. */
.drm-topbar {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .01em;
}

.drm-topbar p {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.drm-topbar a {
	text-decoration: none;
}

.drm-topbar a:hover {
	text-decoration: underline;
}

.drm-topbar__contact {
	flex: 0 0 auto;
}

/* Main bar: brand on the left, navigation and the booking button right. */
.drm-header__bar {
	flex-wrap: nowrap !important;
	gap: 1.5rem;
}

.drm-header__brand {
	min-width: 0;
	flex: 0 1 auto;
}

.drm-header__brand .wp-block-site-title {
	margin: 0;
	line-height: 1.1;
	white-space: nowrap;
}

.drm-header__strap {
	margin: .12rem 0 0;
	white-space: nowrap;
}

.drm-header__actions {
	flex: 0 0 auto;
	margin-left: auto;
}

/* Navigation */

.wp-block-navigation .wp-block-navigation-submenu__toggle svg {
	opacity: .55;
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	border-color: var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--lift);
	padding: .4rem;
	background-color: var(--wp--preset--color--surface);
	min-width: 15rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 9px;
	padding: .5rem .75rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--sand);
}

/* A quiet underline that grows on hover, rather than a colour flip. */
@media (min-width: 782px) {
	.drm-header__actions .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		position: relative;
		padding-block: .35rem;
	}

	.drm-header__actions .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1.5px;
		background-color: var(--wp--preset--color--accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .35s var(--drm-ease);
	}

	.drm-header__actions .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
		transform: scaleX(1);
	}

	/* The submenu arrow sits too far from its label by default. */
	.wp-block-navigation .wp-block-navigation-submenu__toggle {
		padding-right: .2rem;
	}
}

/* Mobile overlay */

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	z-index: 100;
	padding: 1.25rem 1.5rem 2.5rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background-color: var(--wp--preset--color--base);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.15rem;
	padding-block: .35rem;
}

/* Expanded, the menu runs to forty-odd links. The overlay shows the seven
   top-level destinations instead; each index page carries its own full list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: .85rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: -.01em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
}

/* The fixed Call / WhatsApp bar sits in the root stacking context, so it
   would otherwise paint over the overlay. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .drm-actionbar {
	display: none;
}

body:has(.wp-block-navigation__responsive-container.is-menu-open) .drm-header {
	z-index: 200;
}

body:has(.wp-block-navigation__responsive-container.is-menu-open) {
	overflow: hidden;
}

/* ---------- Eyebrow / section label ---------- */

.drm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: .25rem;
}

.drm-eyebrow::before {
	content: "";
	width: 1.6rem;
	height: 1px;
	background: currentColor;
	opacity: .5;
}

/* ---------- Cards ---------- */

.wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: clamp(1.4rem, 3vw, 2rem);
	box-shadow: 0 1px 2px rgba(22, 33, 29, .03);
	transition: transform .4s var(--drm-ease), box-shadow .4s var(--drm-ease), border-color .4s var(--drm-ease);
	height: 100%;
}

.wp-block-group.is-style-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lift);
	border-color: var(--wp--preset--color--accent-light);
}

.wp-block-group.is-style-card-outline {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: clamp(1.4rem, 3vw, 2rem);
	height: 100%;
}

/* Cards sitting in columns should stretch to equal height. */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .wp-block-group.is-style-card,
.wp-block-columns > .wp-block-column > .wp-block-group.is-style-card-outline {
	height: 100%;
}

.wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-column > .wp-block-group.is-style-card,
.wp-block-column > .wp-block-group.is-style-card-outline {
	flex: 1;
}

/* ---------- Page asides ---------- */

/* An aside card hugs its content and follows the reader, instead of
   stretching to the height of the article beside it. */
.drm-aside > .wp-block-group.is-style-card,
.drm-aside > .wp-block-group.is-style-card-outline {
	flex: 0 0 auto;
	height: auto;
}

@media (min-width: 782px) {
	.drm-aside {
		position: sticky;
		top: 7.5rem;
		align-self: start;
	}

	.drm-aside > .wp-block-group.is-style-card:hover,
	.drm-aside > .wp-block-group.is-style-card-outline:hover {
		transform: none;
	}
}

/* ---------- Check list ---------- */

.wp-block-list.is-style-checks {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-checks li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: .7rem;
}

.wp-block-list.is-style-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .36em;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2312332A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.3'/%3E%3C/svg%3E");
	background-size: 72%;
	background-repeat: no-repeat;
	background-position: center;
}

/* ---------- Stat row ---------- */

.wp-block-columns.is-style-stat-row {
	gap: 0;
	border-block: 1px solid var(--wp--preset--color--border);
	padding-block: clamp(1.5rem, 4vw, 2.25rem);
}

.wp-block-columns.is-style-stat-row > .wp-block-column {
	text-align: center;
	padding-inline: 1rem;
	border-right: 1px solid var(--wp--preset--color--border);
}

.wp-block-columns.is-style-stat-row > .wp-block-column:last-child {
	border-right: 0;
}

@media (max-width: 781px) {
	.wp-block-columns.is-style-stat-row > .wp-block-column {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
		padding-block: 1.1rem;
	}

	.wp-block-columns.is-style-stat-row > .wp-block-column:last-child {
		border-bottom: 0;
	}
}

.drm-stat-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 80;
}

.drm-stat-label {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: .45rem;
}

/* ---------- Arch image ---------- */

.wp-block-image.is-style-arch img {
	border-radius: 50vw 50vw 18px 18px;
	width: 100%;
	object-fit: cover;
}

/* ---------- Images ---------- */

img.drm-arch,
img.drm-rounded,
img.drm-aside-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	background-color: var(--wp--preset--color--sand);
}

/* The arch echoes a temple niche, used only for portraits of Dr. Megha. */
img.drm-arch {
	border-radius: 50vw 50vw 20px 20px;
	aspect-ratio: 3 / 4;
	box-shadow: 0 18px 48px rgba(22, 33, 29, .12);
}

img.drm-rounded {
	border-radius: 20px;
	aspect-ratio: 3 / 2;
	box-shadow: 0 14px 40px rgba(22, 33, 29, .10);
}

img.drm-aside-img {
	border-radius: 18px;
	aspect-ratio: 3 / 2;
	margin-bottom: 1.3rem;
	box-shadow: 0 10px 30px rgba(22, 33, 29, .09);
}

/* ---------- Card media ---------- */

/* A card that leads with an image: the picture bleeds to the card's edges,
   so the padding sits only around the text below it. */
.wp-block-group.is-style-card.drm-card-with-media {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.drm-card-media {
	display: block;
	margin: 0 0 1.2rem;
	line-height: 0;
	overflow: hidden;
}

.drm-card-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background-color: var(--wp--preset--color--sand);
	transition: transform .6s var(--drm-ease);
}

.wp-block-group.drm-card-with-media:hover .drm-card-media img {
	transform: scale(1.035);
}

.wp-block-group.drm-card-with-media > *:not(.drm-card-media) {
	padding-inline: clamp(1.4rem, 3vw, 1.75rem);
}

.wp-block-group.drm-card-with-media > *:last-child {
	padding-bottom: clamp(1.4rem, 3vw, 1.75rem);
}

/* ---------- Published works ---------- */

/* The books are real; their covers are not ours to invent, so the card
   carries a typographic panel rather than a mocked-up jacket. */
.drm-book {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .5rem;
	min-height: 200px;
	margin-bottom: 1.2rem;
	padding: 1.4rem;
	border-radius: 14px;
	background: linear-gradient(155deg, #1E4D3F 0%, #12332A 100%);
	box-shadow: inset -1px 0 0 rgba(232, 201, 138, .25);
}

.drm-book-kicker {
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-light);
}

.drm-book-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--base);
	font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 60;
}

/* ---------- Opening hours ---------- */

.drm-hours {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35rem 1.25rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.drm-hours dt {
	color: var(--wp--preset--color--muted);
}

.drm-hours dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
}

.drm-hours-status {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: .9rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.drm-hours-status::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--muted);
}

.drm-hours-status.is-open {
	color: var(--wp--preset--color--primary);
}

.drm-hours-status.is-open::before {
	background-color: #2E9E6B;
	box-shadow: 0 0 0 3px rgba(46, 158, 107, .2);
}

/* ---------- Review stars ---------- */

.drm-stars {
	display: inline-flex;
	gap: .1rem;
	color: var(--wp--preset--color--accent);
	font-size: 1rem;
	line-height: 1;
	letter-spacing: .08em;
}

.drm-rating-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ---------- Numbered journey ---------- */

.drm-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: .9rem;
}

/* ---------- FAQ (details blocks) ---------- */

.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 1.1rem;
}

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
	letter-spacing: -.01em;
	list-style: none;
	position: relative;
	padding-right: 2.25rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: .25rem;
	top: .4em;
	width: 1rem;
	height: 1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23B8782A' stroke-width='2' stroke-linecap='round' d='M8 2v12M2 8h12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	transition: transform .35s var(--drm-ease);
}

.wp-block-details[open] summary::after {
	transform: rotate(135deg);
}

.wp-block-details > *:not(summary) {
	margin-top: .9rem;
	color: var(--wp--preset--color--muted);
	max-width: 60ch;
}

/* ---------- Sticky mobile action bar ---------- */

.drm-actionbar {
	display: none;
}

@media (max-width: 781px) {
	.drm-actionbar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 60;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		background-color: var(--wp--preset--color--border);
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 -6px 24px rgba(22, 33, 29, .08);
	}

	.drm-actionbar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		padding: .95rem .5rem;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		text-decoration: none;
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--contrast);
		min-height: 48px;
	}

	.drm-actionbar a.is-call {
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
	}

	.drm-actionbar a.is-whatsapp {
		background-color: #25D366;
		color: #07331A;
	}

	body {
		padding-bottom: 3.6rem;
	}
}

/* ---------- Footer ---------- */

.drm-footer a {
	text-decoration: none;
}

.drm-footer a:hover {
	text-decoration: underline;
}

/* Footer link lists are navigation, not prose, so no bullets. */
.drm-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.drm-footer .wp-block-list li {
	margin-bottom: 0;
}

/* ---------- Utilities ---------- */

.drm-measure p {
	max-width: 62ch;
}

.drm-hairline {
	border-top: 1px solid var(--wp--preset--color--border);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

:where(a:focus-visible),
:where(button:focus-visible),
:where(summary:focus-visible),
:where(input:focus-visible),
:where(textarea:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ================================================================
   Mobile refinements
   Phones are most of this clinic's traffic, so these are
   corrections rather than afterthoughts.
   ================================================================ */

@media (max-width: 781px) {

	/* The credentials bar is set to stay unstacked, which crushes "M.D."
	   and "HOD" onto two lines at phone width. Grid rather than flex,
	   because the layout container's 32px column gap pushed each 50%
	   column onto its own row. */
	.wp-block-columns.is-style-stat-row,
	.wp-block-columns.is-not-stacked-on-mobile.is-style-stat-row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0 !important;
		column-gap: 0 !important;
		row-gap: 0 !important;
		padding-block: 0;
	}

	.wp-block-columns.is-style-stat-row > .wp-block-column {
		flex-basis: auto !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 1.15rem .5rem;
		border-right: 1px solid var(--wp--preset--color--border);
		border-bottom: 1px solid var(--wp--preset--color--border);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.wp-block-columns.is-style-stat-row > .wp-block-column:nth-child(2n) {
		border-right: 0;
	}

	.wp-block-columns.is-style-stat-row > .wp-block-column:nth-last-child(-n+2) {
		border-bottom: 0;
	}

	.drm-stat-num {
		font-size: 1.6rem;
		white-space: nowrap;
	}

	.drm-stat-label {
		font-size: .68rem;
		letter-spacing: .04em;
		line-height: 1.3;
		margin-top: .3rem;
	}

	/* Micro-labels were rendering at 10.5px, below comfortable reading. */
	.drm-eyebrow,
	.wp-block-group.is-style-card p[style*="text-transform:uppercase"],
	.wp-block-group.drm-card-with-media p[style*="text-transform:uppercase"] {
		font-size: .72rem !important;
		letter-spacing: .09em;
	}

	/* Section rhythm: desktop padding is too generous on a phone. */
	.wp-block-group.alignfull {
		padding-top: clamp(2.25rem, 7vw, 3rem) !important;
		padding-bottom: clamp(2.25rem, 7vw, 3rem) !important;
	}

	/* The credentials strip is a rule, not a section; it needs far less air. */
	.wp-block-group.alignfull:has(> .is-style-stat-row) {
		padding-top: 1.25rem !important;
		padding-bottom: 1.25rem !important;
	}

	/* Section intros sit closer to the content they introduce, but the
	   heading still needs air before its standfirst. */
	.wp-block-group[style*="margin-bottom:var(--wp--preset--spacing--60)"] {
		margin-bottom: 1.75rem !important;
	}

	.wp-block-group[style*="margin-bottom:var(--wp--preset--spacing--60)"] h2 + p {
		margin-top: .7rem;
	}

	.drm-eyebrow + h2 {
		margin-top: .35rem;
	}

	/* Cards: shallower images and tighter padding, so the page is
	   a reasonable length rather than an endless scroll. */
	.drm-card-media img {
		aspect-ratio: 16 / 10;
	}

	.wp-block-group.is-style-card,
	.wp-block-group.is-style-card-outline {
		padding: 1.25rem;
	}

	.wp-block-group.is-style-card.drm-card-with-media {
		padding: 0;
	}

	.wp-block-group.drm-card-with-media > *:not(.drm-card-media) {
		padding-inline: 1.25rem;
	}

	.wp-block-group.drm-card-with-media > *:last-child {
		padding-bottom: 1.25rem;
	}

	.drm-card-media {
		margin-bottom: 1rem;
	}

	/* The hero portrait should not take a whole screen on its own. */
	img.drm-arch {
		max-height: 58vh;
		width: auto;
		margin-inline: auto;
	}

	img.drm-aside-img {
		aspect-ratio: 16 / 10;
	}

	/* Cards in a stacked column no longer need to stretch. */
	.wp-block-column > .wp-block-group.is-style-card,
	.wp-block-column > .wp-block-group.is-style-card-outline {
		height: auto;
	}

	/* Tap targets in the footer and nav. */
	.drm-footer .wp-block-list a,
	.wp-block-navigation__responsive-container-content a {
		display: inline-block;
		padding-block: .2rem;
	}

	.drm-hours {
		grid-template-columns: 1fr;
		gap: .1rem;
	}

	.drm-hours dt {
		margin-top: .55rem;
	}
}

@media (max-width: 420px) {
	/* Two words is enough on the narrowest phones. */
	.drm-topbar .wp-block-group {
		gap: .15rem;
	}
}

@media (max-width: 781px) {

	/* Stacked image cards become very tall very fast, so on a phone the
	   card turns sideways: picture on the left, text on the right. It
	   roughly halves the height of every index page. */
	.wp-block-group.is-style-card.drm-card-with-media {
		display: grid;
		grid-template-columns: 33% 1fr;
		grid-template-rows: auto auto auto;
		align-items: start;
		column-gap: 0;
	}

	.drm-card-media {
		grid-row: 1 / -1;
		grid-column: 1;
		height: 100%;
		margin-bottom: 0;
	}

	.drm-card-media img {
		height: 100%;
		min-height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}

	.wp-block-group.drm-card-with-media > *:not(.drm-card-media) {
		grid-column: 2;
		padding-inline: 1.1rem;
	}

	.wp-block-group.drm-card-with-media > *:nth-child(2) {
		padding-top: 1.1rem;
	}

	.wp-block-group.drm-card-with-media > *:last-child {
		padding-bottom: 1.1rem;
	}

	/* Hover lift is meaningless on touch and causes jitter on tap. */
	.wp-block-group.is-style-card:hover {
		transform: none;
		box-shadow: 0 1px 2px rgba(22, 33, 29, .03);
	}

	.wp-block-group.drm-card-with-media:hover .drm-card-media img {
		transform: none;
	}
}

@media (max-width: 520px) {
	.drm-hide-xs {
		display: none;
	}
}

/* ---------- Header on phones ---------- */

@media (max-width: 781px) {
	/* One row: brand left, hamburger right. The booking button is dropped
	   because the fixed Call / WhatsApp bar already carries the action. */
	.drm-header__cta,
	.wp-block-buttons.drm-header__cta {
		display: none !important;
	}

	.drm-header__bar {
		gap: 1rem;
	}

	.drm-header__brand .wp-block-site-title {
		font-size: 1.22rem;
	}

	.drm-header__strap {
		font-size: .63rem !important;
		letter-spacing: .1em !important;
	}

	.drm-header__main {
		padding-top: .6rem !important;
		padding-bottom: .6rem !important;
	}

	.drm-topbar {
		font-size: .7rem;
	}

	.drm-topbar__row {
		gap: .75rem;
	}

	/* A comfortable tap target for the menu button. */
	.wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
	}
}

@media (max-width: 400px) {
	.drm-header__brand .wp-block-site-title {
		font-size: 1.1rem;
	}

	.drm-topbar {
		font-size: .66rem;
	}
}