/* ==========================================================================
   Phones (≤767px): shorter pages and a quick-links bar, so treatments,
   prices and booking details are easy to reach. Loaded after pages.css.
   ========================================================================== */

/* About page: "Doctor-led clinic" statement in the stats band. */
.tnv-stat-text .elementor-heading-title { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tnv-stat-text .tnv-stat-word {
	font-family: var(--tnv-serif);
	font-size: 46px;
	font-weight: 500;
	line-height: 1;
	color: var(--tnv-gold);
}
.tnv-stat-text .tnv-stat-sub {
	font-family: var(--tnv-sans);
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tnv-muted);
}

/* Quick-links bar (phones only). */
.tnv-mbar { display: none; }

@media (max-width: 767px) {
	.tnv-mbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 4px;
		padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
		background: rgba(253, 251, 247, .97);
		border-top: 1px solid var(--tnv-gold-line);
		box-shadow: 0 -8px 24px rgba(120, 95, 40, .1);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
	.tnv-mbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 52px;
		border-radius: 12px;
		font-family: var(--tnv-sans);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: .02em;
		color: var(--tnv-ink);
		text-decoration: none;
	}
	.tnv-mbar__item svg { color: var(--tnv-gold); }
	.tnv-mbar__item.is-primary { background: linear-gradient(135deg, var(--tnv-gold-light), var(--tnv-gold-deep)); color: #fff; }
	.tnv-mbar__item.is-primary svg { color: #fff; }
	body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
	/* The bar would cover the open menu panel's last links. */
	body:has(.tnv-nav.is-open) .tnv-mbar { display: none; }

	/* ---------- shorter pages ---------- */

	/* Headings and lead text a touch smaller. */
	.tnv-h2 .elementor-heading-title { font-size: 25px !important; }
	.tnv-lead p { font-size: 15.5px !important; line-height: 1.7; }
	.tnv-label .elementor-heading-title, .tnv-label p { margin-bottom: 4px !important; }

	/* Treatment pages: booking details are in the bar and the "Visit our clinic"
	   section, so the side card and the extra photo gallery are dropped. */
	.tnv-results-gallery { display: none !important; }

	/* Process steps: a compact 2 × 2 grid with titles only. */
	#tnv-about-steps > .elementor-container { display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px 10px; }
	#tnv-about-steps .elementor-column { width: 100% !important; padding: 0 !important; }
	#tnv-about-steps .elementor-icon-box-description { display: none; }
	#tnv-about-steps .elementor-icon-box-icon { width: 56px; height: 56px; margin-bottom: 10px !important; }
	#tnv-about-steps .elementor-icon-box-title { font-size: 19px !important; }
	#tnv-about-steps::before { display: none; }

	/* Homepage journal: one article instead of two. */
	.tnv-journal:not(.tnv-blog-grid) .tnv-post:nth-child(n+2) { display: none; }

	/* Services page: the tiles already list every treatment as a link, so the
	   long card grids below (and the tiles' jump buttons to them) are hidden. */
	[id^="svc-"],
	.tnv-tile-btn,
	.tnv-svc-photo,
	.tnv-svc-jump { display: none !important; }

	/* Treatment cards and FAQ a little tighter. */
	.tnv-tcard > .elementor-widget-wrap { padding: 22px 18px 18px !important; }
	.tnv-card-title .elementor-heading-title { font-size: 23px !important; margin-bottom: 12px; padding-bottom: 10px; }
	.tnv-tlist .elementor-icon-list-text { font-size: 15px !important; }
	.tnv-faq .elementor-accordion-item { margin-bottom: 8px; }

	/* Banners shorter. */
	#tnv-page-banner .tnv-banner-intro p { font-size: 15px !important; }
}

/* Address link on the frosted "Visit our clinic" card stays white and readable. */
.tnv-visit-card a { color: #fff !important; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 3px; }
.tnv-visit-card a:hover { text-decoration-color: #fff; }

@media (max-width: 767px) {
	/* Homepage treatment cards: two per row, icon and name only (each still links to the treatment). */
	/* Both rows of cards flow into one 2-column grid (headings span the full width). */
	#tnv-cards > .elementor-container > .elementor-column > .elementor-widget-wrap { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
	#tnv-cards > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget { grid-column: 1 / -1; }
	#tnv-cards .elementor-inner-section,
	#tnv-cards .elementor-inner-section > .elementor-container { display: contents !important; }
	#tnv-cards .elementor-inner-section .elementor-column { width: 100% !important; padding: 0 !important; }
	#tnv-cards .tnv-card { padding: 18px 12px 16px !important; }
	#tnv-cards .tnv-card::before,
	#tnv-cards .tnv-card::after,
	#tnv-cards .elementor-icon-box-description { display: none !important; }
	#tnv-cards .tnv-card .elementor-icon-box-wrapper { text-align: center !important; }
	#tnv-cards .tnv-card .elementor-icon-box-icon { width: 46px; height: 46px; margin: 0 auto 10px !important; }
	#tnv-cards .tnv-card .elementor-icon-box-title,
	#tnv-cards .tnv-card .elementor-icon-box-title a { font-size: 18px !important; line-height: 1.25; }
	/* Make the whole card tappable through its title link. */
	#tnv-cards .tnv-card { position: relative; }
	#tnv-cards .tnv-card .elementor-icon-box-title a::before { content: ""; position: absolute; inset: 0; }
}

@media (max-width: 767px) {
	/* Treatment pages: compact booking card (heading + Book Now / View Prices side by side). */
	.tnv-side > .elementor-widget-wrap { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; padding: 22px 18px !important; }
	.tnv-side > .elementor-widget-wrap > .elementor-widget { grid-column: 1 / -1; margin: 0 !important; }
	.tnv-side > .elementor-widget-wrap > .tnv-btn { grid-column: auto; width: 100% !important; }
	.tnv-side .tnv-side-text,
	.tnv-side .tnv-side-list { display: none; }
	.tnv-side .tnv-side-title .elementor-heading-title { font-size: 24px !important; margin: 0; }
	.tnv-side .tnv-btn .elementor-button { min-width: 0; width: 100%; padding: 15px 12px; justify-content: center; }

	/* Tap targets: every button at least 48px tall. */
	.tnv-btn .elementor-button,
	.tnv-form__submit { min-height: 48px; }

	/* Easier-to-read small text on phones. */
	.tnv-label .elementor-heading-title, .tnv-label p { font-size: 13px !important; letter-spacing: .16em !important; }
	.tnv-crumbs p { font-size: 15px !important; letter-spacing: .03em; }
	.tnv-tlist .elementor-icon-list-text,
	.tnv-results-stats .elementor-icon-list-text,
	.tnv-offer-list .elementor-icon-list-text { font-size: 16px !important; line-height: 1.6; }
	.tnv-tile-list .elementor-icon-list-text,
	.tnv-tile-list .elementor-icon-list-item a { font-size: 15.5px !important; }
	.tnv-visit-card small { font-size: 13px !important; letter-spacing: .1em; }
	.tnv-visit-card p { font-size: 16px !important; }
	.tnv-form__field label { font-size: 15px !important; }
	.tnv-faq .elementor-tab-content,
	.tnv-faq .elementor-tab-content p { font-size: 16px !important; line-height: 1.75; }
	.tnv-foot-links .elementor-icon-list-text,
	.tnv-foot-copy p,
	.tnv-foot-legal .elementor-icon-list-item > a { font-size: 16px !important; }
	.tnv-post__meta { font-size: 13.5px !important; }
	.tnv-price__label small, .tnv-price__group small { font-size: 14px; }
	.tnv-mbar__item { font-size: 13px; }
	#tnv-about-steps .elementor-icon-box-title { font-size: 20px !important; }
}

@media (max-width: 767px) {
	/* Uppercase labels at 14px on phones (eyebrows and the clinic card's field names). */
	.tnv-label .elementor-heading-title, .tnv-label p { font-size: 14px !important; letter-spacing: .14em !important; }
	.tnv-visit-card small { font-size: 14px !important; letter-spacing: .08em; }
}

@media (max-width: 767px) {
	/* FAQ boxes: less inner padding, still an easy tap target. */
	.tnv-faq .elementor-tab-title { padding: 12px 14px !important; min-height: 48px; }
	.tnv-faq .elementor-tab-content { padding: 0 14px 14px !important; }
	.tnv-faq .elementor-accordion-item { margin-bottom: 6px; }
	.tnv-faq .elementor-accordion-item:last-child { margin-bottom: 0; }
	/* Smaller gap between the FAQ and the "Visit our clinic" contact section. */
	.elementor-top-section:has(.tnv-faq) { padding-bottom: 14px !important; }
}

@media (max-width: 767px) {
	/* Treatment cards: 10px between stacked cards, none after the last card in a group. */
	.tnv-tcard { padding-bottom: 10px !important; }
	.elementor-inner-section:last-child > .elementor-container > .tnv-tcard:last-child { padding-bottom: 0 !important; }
}