/* ============================================================
   Hospito — legacy content styles
   ------------------------------------------------------------
   The supplied page HTML carries the old site's own class names
   (.chk, .wcard, .tc, .symp-card, .proc, .costtable, .cchip …).
   Wherever that copy is pasted into a Text, SEO Content or HTML
   widget, those classes would otherwise render unstyled — which
   is what made branch and department text look "odd".

   Every rule here maps one of those legacy names onto the same
   design tokens the theme's own components use, so pasted
   content looks native without anyone having to rewrite it.
   ============================================================ */

/* ---------- Checklists (.chk) ---------- */

.hospito .chk {
	list-style: none;
	margin: var(--hos-space-5) 0;
	padding: 0;
	display: grid;
	gap: var(--hos-space-3);
}

.hospito .chk li {
	display: flex;
	align-items: flex-start;
	gap: var(--hos-space-3);
	font-size: var(--hospito-font-sm);
	color: var(--hos-on-surface-body);
	margin: 0;
	line-height: 1.6;
}

.hospito .chk li i {
	color: var(--hospito-primary);
	font-size: 1rem;
	margin-top: 0.2em;
	flex: 0 0 auto;
}

/* ---------- Keyword pills (.seo-pills) ---------- */

.hospito .seo-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hos-space-3);
	margin: var(--hos-space-6) 0 0;
}

.hospito .seo-pills span,
.hospito .seo-pills-span {
	display: inline-block;
	font-size: var(--hospito-font-xs);
	font-weight: 500;
	color: var(--hospito-heading);
	background: var(--hospito-primary-light);
	border: 1px solid var(--hospito-primary-soft);
	padding: 0.5rem 0.9375rem;
	border-radius: var(--hospito-radius-pill);
	margin: 0 var(--hos-space-2) var(--hos-space-2) 0;
}

/* ---------- Area / country chips (.cchip) ---------- */

.hospito .cchips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hos-space-3);
	justify-content: center;
}

.hospito .cchip {
	display: inline-flex;
	align-items: center;
	gap: var(--hos-space-2);
	background: #fff;
	border: 1px solid var(--hospito-border);
	border-radius: var(--hospito-radius-pill);
	padding: 0.5625rem 1.125rem;
	font-size: var(--hospito-font-sm);
	font-weight: 500;
	color: var(--hospito-heading);
	transition: all var(--hospito-transition);
}

.hospito .cchip:hover {
	border-color: var(--hospito-primary);
	box-shadow: var(--hospito-shadow-sm);
	transform: translateY(-2px);
}

/* ---------- Panel lists (.tpalist) ---------- */

.hospito .tpalist {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3;
	column-gap: var(--hos-space-8);
}

.hospito .tpalist li {
	break-inside: avoid;
	display: flex;
	align-items: flex-start;
	gap: var(--hos-space-3);
	font-size: var(--hospito-font-sm);
	color: var(--hospito-heading);
	padding: var(--hos-space-2) 0;
	border-bottom: 1px solid var(--hospito-border);
	margin: 0;
}

.hospito .tpalist li i {
	color: var(--hospito-primary);
	margin-top: 0.25em;
	flex: 0 0 auto;
}

/* ---------- Feature / why cards (.wg .wcard) ---------- */

.hospito .wg,
.hospito .howcards,
.hospito .eligrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--hos-grid-gap);
}

.hospito .wcard,
.hospito .hccard {
	background: #fff;
	border: 1px solid var(--hospito-border);
	border-radius: var(--hospito-radius-lg);
	padding: var(--hos-space-6) var(--hos-space-5);
	text-align: center;
	transition: transform var(--hospito-transition), box-shadow var(--hospito-transition);
}

.hospito .wcard:hover,
.hospito .hccard:hover {
	transform: translateY(-3px);
	box-shadow: var(--hospito-shadow-card);
}

.hospito .wic,
.hospito .hcnum {
	width: 52px;
	height: 52px;
	border-radius: var(--hospito-radius);
	background: var(--hospito-primary-light);
	color: var(--hospito-primary);
	display: grid;
	place-items: center;
	font-size: 1.375rem;
	margin: 0 auto var(--hos-space-4);
}

.hospito .hcnum {
	border-radius: 50%;
	background: var(--hospito-primary);
	color: #fff;
	font-weight: 800;
	font-size: 1.0625rem;
}

.hospito .wcard h4,
.hospito .hccard h4 {
	font-size: var(--hospito-font-h4);
	margin-bottom: var(--hos-space-2);
}

.hospito .wcard p,
.hospito .hccard p {
	font-size: var(--hospito-font-sm);
	color: var(--hospito-body);
	margin: 0;
}

/* ---------- Treatment cards (.tg .tc) ---------- */

.hospito .tg {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: var(--hos-grid-gap);
}

.hospito .tc {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hospito-border);
	border-radius: var(--hospito-radius-lg);
	overflow: hidden;
	transition: transform var(--hospito-transition), box-shadow var(--hospito-transition);
}

.hospito .tc:hover {
	transform: translateY(-4px);
	box-shadow: var(--hospito-shadow-card);
}

.hospito .tbody {
	padding: var(--hos-space-6);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.hospito .tico {
	width: 46px;
	height: 46px;
	border-radius: var(--hospito-radius-sm);
	background: var(--hospito-primary-light);
	color: var(--hospito-primary);
	display: grid;
	place-items: center;
	font-size: 1.1875rem;
	margin-bottom: var(--hos-space-4);
}

.hospito .tc h4 {
	font-size: var(--hospito-font-h4);
	margin-bottom: var(--hos-space-2);
}

.hospito .tc p {
	font-size: var(--hospito-font-sm);
	color: var(--hospito-body);
	flex: 1;
	margin-bottom: var(--hos-space-4);
}

/* ---------- Symptom image cards (.sg .symp-card) ---------- */

.hospito .sg {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--hos-grid-gap);
}

.hospito .symp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hospito-border);
	border-radius: var(--hospito-radius);
	overflow: hidden;
	transition: transform var(--hospito-transition), box-shadow var(--hospito-transition);
}

.hospito .symp-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--hospito-shadow-card);
}

.hospito .simg {
	height: 130px;
	overflow: hidden;
	background: var(--hospito-background-soft);
}

.hospito .simg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hospito .sbody {
	padding: var(--hos-space-4);
}

.hospito .symp-card h5 {
	font-size: var(--hospito-font-sm);
	font-weight: 600;
	margin-bottom: var(--hos-space-1);
}

.hospito .symp-card p {
	font-size: var(--hospito-font-xs);
	color: var(--hospito-muted);
	margin: 0;
}

/* ---------- Process steps (.proc .pstep) ---------- */

.hospito .proc {
	display: flex;
	position: relative;
	gap: var(--hos-space-4);
}

.hospito .proc::before {
	content: "";
	position: absolute;
	top: 35px;
	left: 35px;
	right: 35px;
	height: 2px;
	background: var(--hospito-primary-soft);
	z-index: 0;
}

.hospito .pstep {
	flex: 1;
	text-align: center;
	position: relative;
	z-index: 1;
}

.hospito .pnum {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: var(--hospito-primary);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 800;
	display: grid;
	place-items: center;
	margin: 0 auto var(--hos-space-4);
	border: 4px solid #fff;
	box-shadow: 0 6px 20px rgba(22, 163, 74, 0.3);
}

.hospito .pstep h4 {
	font-size: var(--hospito-font-h4);
	margin-bottom: var(--hos-space-1);
}

.hospito .pstep p {
	font-size: var(--hospito-font-sm);
	color: var(--hospito-body);
	margin: 0;
}

/* ---------- Cost table (.costtable) ---------- */

.hospito .costtable {
	width: 100%;
	border-collapse: collapse;
	border-radius: var(--hospito-radius);
	overflow: hidden;
	box-shadow: var(--hospito-shadow-sm);
}

.hospito .costtable th,
.hospito .costtable td {
	padding: var(--hos-space-4) var(--hos-space-5);
	text-align: left;
	font-size: var(--hospito-font-sm);
}

.hospito .costtable thead th {
	background: var(--hospito-secondary);
	color: #fff;
	font-weight: 600;
}

.hospito .costtable tbody td {
	border-bottom: 1px solid var(--hospito-border);
	color: var(--hospito-body);
}

.hospito .costtable tbody tr:nth-child(even) {
	background: var(--hospito-background-grey);
}

.hospito .costnote {
	font-size: var(--hospito-font-xs);
	color: var(--hospito-muted);
	margin-top: var(--hos-space-3);
	font-style: italic;
}

/* ---------- Review cards (.rg .rcard) ---------- */

.hospito .rg {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--hos-grid-gap);
}

.hospito .rcard {
	background: #fff;
	border: 1px solid var(--hospito-border);
	border-radius: var(--hospito-radius-lg);
	padding: var(--hos-space-6);
}

.hospito .stars {
	color: var(--hospito-star);
	margin-bottom: var(--hos-space-3);
}

.hospito .rq {
	font-size: var(--hospito-font-sm);
	color: var(--hospito-body);
	font-style: italic;
	margin-bottom: var(--hos-space-4);
}

.hospito .rauthor {
	display: flex;
	align-items: center;
	gap: var(--hos-space-3);
}

.hospito .rav {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hospito-primary);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	flex: 0 0 auto;
}

.hospito .rname b {
	display: block;
	font-size: var(--hospito-font-sm);
	color: var(--hospito-heading);
}

.hospito .rname span {
	font-size: var(--hospito-font-xs);
	color: var(--hospito-primary);
}

/* ---------- Galleries (.gpic) ---------- */

.hospito .hugallery,
.hospito .ingallery,
.hospito .ldgallery,
.hospito .obgallery,
.hospito .gbgallery,
.hospito .jbgallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--hos-grid-gap);
}

.hospito .gpic {
	border-radius: var(--hospito-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--hospito-primary-light);
	box-shadow: var(--hospito-shadow-sm);
}

.hospito .gpic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.hospito .gpic:hover img {
	transform: scale(1.05);
}

/* ---------- Two-column blocks (.dp-two, .solongo) ---------- */

.hospito .dp-two,
.hospito .solongo,
.hospito .gb-two,
.hospito .jb-two,
.hospito .nb-two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(1.5rem, 1rem + 2.6vw, 3rem);
	align-items: center;
}

.hospito .dept-img,
.hospito .spic {
	border-radius: var(--hospito-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--hospito-shadow-card);
}

.hospito .dept-img img,
.hospito .spic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Notes and callouts ---------- */

.hospito .note,
.hospito .branchnote {
	background: var(--hospito-primary-light);
	border: 1px solid var(--hospito-primary-soft);
	border-radius: var(--hospito-radius);
	padding: var(--hos-space-5) var(--hos-space-6);
	font-size: var(--hospito-font-sm);
	color: var(--hospito-heading);
	display: flex;
	align-items: center;
	gap: var(--hos-space-4);
}

.hospito .branchnote i {
	color: var(--hospito-primary);
	font-size: 1.125rem;
	flex: 0 0 auto;
}

.hospito .sbadge {
	display: inline-flex;
	align-items: center;
	gap: var(--hos-space-2);
	background: var(--hospito-primary-light);
	color: var(--hospito-primary);
	font-size: var(--hospito-font-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.375rem 0.875rem;
	border-radius: var(--hospito-radius-pill);
	margin-bottom: var(--hos-space-4);
}

/* ---------- Numbered admission list (.admit) ---------- */

.hospito .admit {
	background: #fff;
	border: 1px solid var(--hospito-border);
	border-radius: var(--hospito-radius-lg);
	padding: var(--hos-space-8);
	box-shadow: var(--hospito-shadow-sm);
}

.hospito .admit ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hosac;
}

.hospito .admit li {
	position: relative;
	padding: var(--hos-space-4) 0 var(--hos-space-4) var(--hos-space-12);
	border-bottom: 1px solid var(--hospito-border);
	font-size: var(--hospito-font-sm);
	color: var(--hospito-body);
	counter-increment: hosac;
}

.hospito .admit li:last-child {
	border-bottom: 0;
}

.hospito .admit li::before {
	content: counter(hosac);
	position: absolute;
	left: 0;
	top: var(--hos-space-4);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--hospito-primary);
	color: #fff;
	font-weight: 700;
	font-size: var(--hospito-font-xs);
	display: grid;
	place-items: center;
}

/* ---------- Video wrapper (.vid-wrap) ---------- */

.hospito .vid-wrap {
	max-width: 860px;
	margin-inline: auto;
	border-radius: var(--hospito-radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--hospito-secondary);
	box-shadow: var(--hospito-shadow-lg);
}

.hospito .vid-wrap iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ---------- Dark highlight panel (.nimisha) ---------- */

.hospito .nimisha {
	background: linear-gradient(120deg, var(--hospito-secondary) 0%, var(--hospito-secondary-alt) 60%, #123a1f 135%);
	border-radius: var(--hospito-radius-xl);
	padding: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	color: #fff;
	text-align: center;
}

.hospito .nimisha h2,
.hospito .nimisha strong {
	color: #fff;
}

.hospito .nimisha p {
	color: rgba(255, 255, 255, 0.82);
}

.hospito .nimisha .nlogo {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: rgba(95, 227, 155, 0.15);
	color: var(--hospito-mint);
	display: grid;
	place-items: center;
	font-size: 1.875rem;
	margin: 0 auto var(--hos-space-5);
	border: 2px solid rgba(95, 227, 155, 0.4);
}

.hospito .nimisha .ntag {
	color: var(--hospito-mint);
	font-weight: 600;
	font-size: var(--hospito-font-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--hos-space-4);
}

.hospito .npills {
	display: flex;
	gap: var(--hos-space-4);
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--hos-space-6);
}

.hospito .npill {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--hospito-radius-pill);
	padding: 0.5rem 1.25rem;
	font-size: var(--hospito-font-sm);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: var(--hos-space-2);
}

.hospito .npill i {
	color: var(--hospito-mint);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.hospito .tpalist {
		columns: 2;
	}
}

@media (max-width: 640px) {
	.hospito .tpalist {
		columns: 1;
	}

	.hospito .proc {
		flex-direction: column;
	}

	.hospito .proc::before {
		display: none;
	}

	.hospito .branchnote,
	.hospito .note {
		flex-direction: column;
		text-align: center;
	}
}