/* ==========================================================================
   TreatmentCosts — Base styles + components (consumes tokens.css)
   ========================================================================== */

/* --- Reset-ish --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--tc-font-sans);
	font-size: var(--tc-fs-base);
	line-height: var(--tc-lh-base);
	color: var(--tc-ink);
	background: var(--tc-bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tc-primary); text-decoration: none; }
a:hover { color: var(--tc-primary-dark); text-decoration: underline; }

h1, h2, h3, h4 { line-height: var(--tc-lh-tight); color: var(--tc-ink); margin: 0 0 var(--tc-sp-4); font-weight: 700; }
h1 { font-size: var(--tc-fs-2xl); letter-spacing: -.01em; }
h2 { font-size: var(--tc-fs-xl); }
h3 { font-size: var(--tc-fs-lg); }
p  { margin: 0 0 var(--tc-sp-4); }

/* --- Layout --- */
.tc-container { width: 100%; max-width: var(--tc-container); margin-inline: auto; padding-inline: var(--tc-sp-5); }
.tc-narrow { max-width: var(--tc-container-narrow); }
.tc-section { padding-block: var(--tc-sp-8); }
.tc-bg-alt { background: var(--tc-bg-alt); }

/* --- Skip link (a11y) --- */
.tc-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--tc-ink); color: #fff; padding: var(--tc-sp-2) var(--tc-sp-4); border-radius: 0 0 var(--tc-radius-sm) 0;
}
.tc-skip-link:focus { left: 0; }

/* --- Header --- */
.tc-header {
	border-bottom: 1px solid var(--tc-line);
	background: var(--tc-bg);
	position: sticky; top: 0; z-index: 50;
}
.tc-header__inner { display: flex; align-items: center; gap: var(--tc-sp-5); min-height: 68px; }
.tc-brand { font-size: var(--tc-fs-lg); font-weight: 800; color: var(--tc-ink); letter-spacing: -.02em; }
.tc-brand:hover { text-decoration: none; }
.tc-brand b { color: var(--tc-primary); }
.tc-nav { margin-left: auto; display: flex; gap: var(--tc-sp-5); align-items: center; }
.tc-nav a { color: var(--tc-ink-soft); font-size: var(--tc-fs-sm); font-weight: 600; }

/* --- Buttons --- */
.tc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--tc-sp-2);
	font-weight: 700; font-size: var(--tc-fs-base);
	padding: var(--tc-sp-3) var(--tc-sp-5);
	border-radius: var(--tc-radius-pill); border: 0; cursor: pointer;
	transition: transform var(--tc-dur) var(--tc-ease), background var(--tc-dur) var(--tc-ease);
}
.tc-btn:hover { text-decoration: none; transform: translateY(-1px); }
.tc-btn--primary { background: var(--tc-accent); color: #fff; }
.tc-btn--primary:hover { background: var(--tc-accent-dark); color: #fff; }
.tc-btn--ghost { background: var(--tc-primary-light); color: var(--tc-primary-dark); }

/* --- Hero / search --- */
.tc-hero { background: linear-gradient(160deg, var(--tc-primary-light), #fff 70%); padding-block: var(--tc-sp-10); }
.tc-hero h1 { font-size: var(--tc-fs-3xl); max-width: 16ch; }
.tc-hero__lead { font-size: var(--tc-fs-md); color: var(--tc-ink-soft); max-width: 52ch; }
.tc-search {
	display: flex; gap: var(--tc-sp-2); flex-wrap: wrap;
	background: #fff; padding: var(--tc-sp-2); border-radius: var(--tc-radius-lg);
	box-shadow: var(--tc-shadow); max-width: 720px; margin-top: var(--tc-sp-5);
}
.tc-search input {
	flex: 1 1 200px; border: 1px solid var(--tc-line); border-radius: var(--tc-radius);
	padding: var(--tc-sp-3) var(--tc-sp-4); font-size: var(--tc-fs-base); color: var(--tc-ink);
}
.tc-search input:focus { outline: 2px solid var(--tc-primary); outline-offset: 1px; }
.tc-trust-strip { margin-top: var(--tc-sp-4); font-size: var(--tc-fs-sm); color: var(--tc-muted); }

/* --- Cards / tiles --- */
.tc-grid { display: grid; gap: var(--tc-sp-5); }
.tc-grid--3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tc-grid--4 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.tc-card {
	background: #fff; border: 1px solid var(--tc-line); border-radius: var(--tc-radius);
	padding: var(--tc-sp-5); box-shadow: var(--tc-shadow-sm);
	transition: box-shadow var(--tc-dur) var(--tc-ease), transform var(--tc-dur) var(--tc-ease);
}
.tc-card:hover { box-shadow: var(--tc-shadow); transform: translateY(-2px); }
.tc-tile-title { font-weight: 700; font-size: var(--tc-fs-md); margin-bottom: var(--tc-sp-1); }
.tc-tile-sub { color: var(--tc-muted); font-size: var(--tc-fs-sm); }

/* --- Price components (hero typography) --- */
.tc-price { font-family: var(--tc-font-num); font-weight: 700; color: var(--tc-ink); letter-spacing: -.02em; }
.tc-price--xl { font-size: var(--tc-fs-2xl); }
.tc-pill {
	display: inline-flex; align-items: center; gap: var(--tc-sp-1);
	font-size: var(--tc-fs-xs); font-weight: 700; padding: 2px var(--tc-sp-2);
	border-radius: var(--tc-radius-pill); text-transform: uppercase; letter-spacing: .03em;
}
.tc-pill--verified { background: rgba(31,157,87,.12); color: var(--tc-verified); }
.tc-pill--from { background: rgba(217,138,0,.14); color: var(--tc-from); }

/* --- Data sentence banner (the hero element of money pages) --- */
.tc-data-sentence {
	background: var(--tc-primary-light); border: 1px solid #cfe7e9;
	border-radius: var(--tc-radius); padding: var(--tc-sp-5);
	font-size: var(--tc-fs-md); color: var(--tc-ink);
}
.tc-data-sentence .tc-price { color: var(--tc-primary-dark); }

/* --- Page hero (procedure / money / clinic) --- */
.tc-hero--page { padding-block: var(--tc-sp-6) var(--tc-sp-6); }
.tc-hero--page h1 { font-size: var(--tc-fs-2xl); }

/* --- Distribution bar --- */
.tc-dist { margin-top: var(--tc-sp-4); max-width: 520px; }
.tc-dist__track {
	position: relative; height: 10px; border-radius: var(--tc-radius-pill);
	background: linear-gradient(90deg, var(--tc-primary-light), var(--tc-primary));
}
.tc-dist__median {
	position: absolute; top: -4px; width: 3px; height: 18px; border-radius: 2px;
	background: var(--tc-ink); transform: translateX(-50%);
}
.tc-dist__labels { display: flex; justify-content: space-between; font-size: var(--tc-fs-xs); color: var(--tc-muted); margin-top: var(--tc-sp-2); }
.tc-dist__mid { color: var(--tc-ink-soft); font-weight: 600; }

/* --- Clinic table --- */
.tc-clinic-table { width: 100%; border-collapse: collapse; margin-top: var(--tc-sp-4); }
.tc-clinic-table th, .tc-clinic-table td { text-align: left; padding: var(--tc-sp-3) var(--tc-sp-3); border-bottom: 1px solid var(--tc-line); vertical-align: middle; }
.tc-clinic-table th { font-size: var(--tc-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--tc-muted); }
.tc-clinic-table tbody tr:hover { background: var(--tc-bg-alt); }
.tc-btn--sm { padding: var(--tc-sp-1) var(--tc-sp-3); font-size: var(--tc-fs-sm); }

/* --- Chips (nearby cities) --- */
.tc-chips { display: flex; flex-wrap: wrap; gap: var(--tc-sp-2); }
.tc-chip {
	display: inline-block; padding: var(--tc-sp-1) var(--tc-sp-3);
	background: var(--tc-primary-light); color: var(--tc-primary-dark);
	border-radius: var(--tc-radius-pill); font-size: var(--tc-fs-sm); font-weight: 600;
}
.tc-chip:hover { text-decoration: none; background: #d6ecee; }

/* --- FAQ --- */
.tc-faq { max-width: var(--tc-container-narrow); }
.tc-faq__item { border: 1px solid var(--tc-line); border-radius: var(--tc-radius); padding: var(--tc-sp-3) var(--tc-sp-4); margin-bottom: var(--tc-sp-3); background: #fff; }
.tc-faq__item summary { font-weight: 700; cursor: pointer; }
.tc-faq__a { margin-top: var(--tc-sp-2); color: var(--tc-ink-soft); }

/* --- Responsive clinic table → stacked cards --- */
@media (max-width: 600px) {
	.tc-clinic-table, .tc-clinic-table tbody, .tc-clinic-table tr, .tc-clinic-table td { display: block; width: 100%; }
	.tc-clinic-table thead { display: none; }
	.tc-clinic-table tr { border: 1px solid var(--tc-line); border-radius: var(--tc-radius); margin-bottom: var(--tc-sp-3); padding: var(--tc-sp-2); }
	.tc-clinic-table td { border: 0; padding: var(--tc-sp-2); }
	.tc-clinic-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--tc-muted); }
}

/* --- Footer --- */
.tc-footer { border-top: 1px solid var(--tc-line); background: var(--tc-bg-alt); padding-block: var(--tc-sp-8); margin-top: var(--tc-sp-10); }
.tc-footer__cols { display: grid; gap: var(--tc-sp-6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tc-footer a { color: var(--tc-ink-soft); font-size: var(--tc-fs-sm); display: block; padding: 2px 0; }
.tc-footer small { color: var(--tc-muted); }

/* --- Content (single/page) --- */
.tc-content { max-width: var(--tc-container-narrow); margin-inline: auto; }
.tc-content img { border-radius: var(--tc-radius); }

/* --- Utilities --- */
.tc-mt-0 { margin-top: 0; }
.tc-text-center { text-align: center; }
.screen-reader-text {
	position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden;
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.tc-hero h1 { font-size: var(--tc-fs-2xl); }
	.tc-nav { display: none; }
}