/*
 * TransplantOcare — shared public stylesheet
 * ------------------------------------------
 * One place for the site's design tokens, responsive rules and the component
 * patterns the pages actually use. Loaded once from layouts/app.blade.php,
 * last in the chain, so it can correct the legacy sheets underneath it.
 *
 * Spec §43 asks for "mobile responsive" as an acceptance criterion and §36 for
 * Core Web Vitals; both are served by having a single sheet instead of the
 * per-page CDN links and inline <style> blocks the pages grew.
 *
 * Rules when editing:
 *   - No new per-view CDN <link>. Add it here or use @push('styles').
 *   - Use the tokens below, not new hex values.
 *   - Anything that can overflow on a phone (tables, code, wide cards) gets a
 *     scroll container, never a horizontal scrollbar on <body>.
 */

:root {
    /* Brand — taken from the gradient the pages already use. */
    --tc-primary: #667eea;
    --tc-primary-dark: #5a67d8;
    --tc-secondary: #764ba2;
    --tc-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    --tc-ink: #1f2430;
    --tc-body: #4a5163;
    --tc-muted: #6c757d;
    --tc-line: #e6e8ef;
    --tc-surface: #ffffff;
    --tc-surface-alt: #f7f8fc;

    --tc-radius: 1rem;
    --tc-radius-sm: .625rem;
    --tc-shadow: 0 .25rem 1.25rem rgba(31, 36, 48, .07);
    --tc-shadow-lg: 0 .75rem 2rem rgba(31, 36, 48, .12);

    /* Fluid type: readable on a 360px phone, comfortable on a desktop. */
    --tc-h1: clamp(1.6rem, 1.15rem + 2.1vw, 2.75rem);
    --tc-h2: clamp(1.35rem, 1.05rem + 1.35vw, 2rem);
    --tc-h3: clamp(1.15rem, 1rem + .7vw, 1.5rem);
    --tc-lead: clamp(.98rem, .93rem + .28vw, 1.15rem);
}

/* ==================================================================
   Base
   ================================================================== */

html {
    -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */

    /* An in-page anchor must not land under the sticky header. */
    scroll-padding-top: 5rem;
}

body {
    font-family: 'Poppins', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--tc-body);
    background: var(--tc-surface);

    /*
     * Nothing should make the page scroll sideways on a phone — but
     * `overflow-x: hidden` here turns <body> into a scroll container and
     * silently breaks `position: sticky` on the header. `clip` prevents the
     * sideways scroll without creating that container.
     */
    overflow-x: clip;
}

/* Safari below 16 does not support overflow: clip; fall back there only. */
@supports not (overflow: clip) {
    body { overflow-x: hidden; }
}

h1, .h1 { font-size: var(--tc-h1); }
h2, .h2 { font-size: var(--tc-h2); }
h3, .h3 { font-size: var(--tc-h3); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--tc-ink);
    line-height: 1.25;
    /* Long clinical terms must not push the layout wide. */
    overflow-wrap: break-word;
}

p, li { line-height: 1.7; }
.lead { font-size: var(--tc-lead); }

/*
 * Bootstrap 5 underlines every link on hover. Across this site that means nav
 * items, card titles, breadcrumbs, footer columns and directory entries all
 * sprout an underline as the pointer crosses them, which reads as noise.
 *
 * Links are already distinguished by colour and by context, so the underline
 * is dropped by default. The exception is a link sitting inside a run of body
 * copy, where colour alone is not a reliable signal — those keep it.
 */
a {
    color: var(--tc-primary-dark);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--tc-secondary);
    text-decoration: none;
}

/* Inline links inside prose keep their underline — that is where it earns
   its place. */
.tc-prose p a,
.card-body > p a,
.alert a,
p.text-muted a {
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* Keyboard focus must stay visible — several legacy sheets removed it. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid rgba(102, 126, 234, .45);
    outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

/* ==================================================================
   Layout helpers
   ================================================================== */

main { display: block; }

/*
 * `styles.css` used to pin `.container` to max-width: 1000px above 1200px.
 * On a 1440px screen that left ~220px of dead space each side; on a 1920px
 * one, over 450px — which is why the header logo and the hero copy looked
 * stranded in the middle of an empty band. That rule is gone.
 *
 * This is Bootstrap's own ladder plus the xxl step the template never had.
 * The cap stops a line of body text running to an unreadable length on an
 * ultrawide monitor.
 */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

@media (min-width: 1800px) {
    .container { max-width: 1440px; }
}

/* Sections carry a lot of vertical padding on desktop; halve it on phones. */
@media (max-width: 767.98px) {
    section.py-5, div.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    section.py-4, div.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}

/* The gradient hero used at the top of most pages. */
.tc-hero,
section[style*="linear-gradient(135deg, #667eea"] {
    background: var(--tc-gradient) !important;
    color: #fff;
}

/* ==================================================================
   Shared page hero (partials/page-hero.blade.php)
   ================================================================== */

/*
 * A photograph alone never gives reliable contrast for white text, so the
 * image sits under a two-stop scrim: the brand gradient at high opacity on
 * the left where the words are, fading right so the picture still reads.
 */
.tc-page-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem) 0;
    background-color: var(--tc-secondary);
    color: #fff;
    overflow: hidden;
}

.tc-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--tc-hero-image);
    background-size: cover;
    background-position: center 35%;
}

.tc-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(74, 56, 140, .94) 0%, rgba(90, 72, 150, .88) 42%, rgba(101, 78, 160, .62) 100%);
}

.tc-page-hero > .container { position: relative; }

.tc-page-hero__title {
    color: #fff;
    font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 .5rem;
    max-width: 24ch;
}

.tc-page-hero__lead {
    color: rgba(255, 255, 255, .88);
    font-size: var(--tc-lead);
    max-width: 58ch;
    margin-bottom: 0;
}

/* ---- breadcrumbs ---- */

.tc-page-hero__crumbs {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, .45);
    font-size: .8125rem;
    margin-bottom: .85rem;
}

.tc-page-hero__crumbs .breadcrumb-item a { color: rgba(255, 255, 255, .78); }
.tc-page-hero__crumbs .breadcrumb-item a:hover { color: #fff; }
.tc-page-hero__crumbs .breadcrumb-item.active { color: rgba(255, 255, 255, .95); }

/* ---- stat chips ---- */

.tc-page-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.tc-page-hero__stats > span {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: .2rem .8rem;
    font-size: .8125rem;
}

/* ---- in-hero search ---- */

.tc-page-hero__search {
    margin-top: 1.5rem;
    max-width: 36rem;
}

.tc-page-hero__search .input-group {
    border-radius: var(--tc-radius-sm);
    overflow: hidden;
    box-shadow: 0 .6rem 1.5rem rgba(15, 20, 45, .22);
}

.tc-page-hero__search .input-group-text {
    background: #fff;
    border: 0;
    color: var(--tc-primary-dark);
    padding-left: 1rem;
}

.tc-page-hero__search .form-control {
    border: 0;
    padding-top: .7rem;
    padding-bottom: .7rem;
    font-size: 1rem;
}

.tc-page-hero__search .form-control:focus { box-shadow: none; }
.tc-page-hero__search .btn { border-radius: 0; font-weight: 600; }

.tc-page-hero__clear {
    display: inline-block;
    margin-top: .5rem;
    color: rgba(255, 255, 255, .85);
    font-size: .8125rem;
}

.tc-page-hero__clear:hover { color: #fff; }

.tc-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}

@media (max-width: 575.98px) {
    .tc-page-hero__search .input-group-text { display: none; }
    .tc-page-hero__actions .btn { width: 100%; }
}

/*
 * Headings inside any hero band are white. Without this the generic
 * `h1 { color: var(--tc-ink) }` rule above beats an inherited `.text-white`
 * on a parent, which is why "Our Expert Medical Team" rendered dark on the
 * purple band.
 */
.tc-page-hero h1, .tc-page-hero h2, .tc-page-hero h3,
.tc-hero h1, .tc-hero h2, .tc-hero h3,
.tc-hero .h1, .tc-hero .h2, .tc-hero .h3,
[class*="tc-hero"] .text-white,
.text-white > h1, .text-white > h2, .text-white > h3,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 {
    color: #fff;
}

/* ---- the homepage hero ---- */

.tc-hero--home {
    padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0;
    position: relative;
    overflow: hidden;
}

/* A soft highlight behind the copy stops the flat gradient reading as a
   printed block of colour. */
.tc-hero--home::after {
    content: '';
    position: absolute;
    inset: -30% -10% auto auto;
    width: 38rem;
    height: 38rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 65%);
    pointer-events: none;
}

.tc-hero--home > .container { position: relative; z-index: 1; }

.tc-hero__title {
    color: #fff;
    font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3.1rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    /* Long enough to break in a sensible place, short enough that the line
       never runs past comfortable reading length on a wide monitor. */
    max-width: 20ch;
}

/* The search box and buttons should not stretch the full width of a 1440px
   container — a 640px input looks like a mistake. */
.tc-hero--home .universal-search,
.tc-hero--home .tc-search-hints {
    max-width: 38rem;
}

/*
 * The subheading was .text-white-50 — 50% white on this gradient falls below
 * the contrast floor and was genuinely hard to read. 88% keeps the hierarchy
 * without sacrificing legibility.
 */
.tc-hero__lead {
    color: rgba(255, 255, 255, .88);
    font-size: var(--tc-lead);
    max-width: 52ch;
}

.tc-hero__note {
    color: rgba(255, 255, 255, .8);
    font-size: .875rem;
}

.tc-hero__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--tc-radius);
    box-shadow: 0 1.5rem 3rem rgba(15, 20, 45, .28);
}

/* Hero buttons: full width when they stack, auto when they sit side by side. */
@media (max-width: 575.98px) {
    .tc-hero--home .btn { width: 100%; }
}

.tc-hero h1,
section[style*="linear-gradient(135deg, #667eea"] h1,
section[style*="linear-gradient(135deg, #667eea"] h2 {
    color: #fff;
}

/*
 * The 118 imported condition pages carry their own teal-to-green hero, so the
 * site presented two different brand identities depending on which page a
 * visitor landed on — and organic search lands most of them on a condition
 * page. Bring those heroes onto the brand gradient. The in-page green accents
 * inside those pages are left alone: rewriting 130 inline style blocks would
 * risk far more than it gains, and as accents they read as intentional.
 */
.bg-gradient-green,
[style*="linear-gradient(135deg, #11998e"] {
    background: var(--tc-gradient) !important;
}

/*
 * The condition pages each carry their own hero band. Rewriting 118 imported
 * files to use the shared partial would be a large, risky edit for a visual
 * result CSS can deliver: give those bands the same photograph and scrim the
 * rest of the site uses, so a visitor landing from search sees one site.
 */
.hero-section,
[class^="hero-section-"],
.hero-modern {
    position: relative;
    isolation: isolate;
    background: var(--tc-secondary) !important;
    color: #fff;
}

.hero-section::before,
[class^="hero-section-"]::before,
.hero-modern::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('../img/heroes/conditions.jpg');
    background-size: cover;
    background-position: center 35%;
}

.hero-section::after,
[class^="hero-section-"]::after,
.hero-modern::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(74, 56, 140, .95) 0%, rgba(90, 72, 150, .9) 45%, rgba(101, 78, 160, .68) 100%);
}

.hero-section > *,
[class^="hero-section-"] > *,
.hero-modern > * { position: relative; }

/* The fifteen hand-written doctor pages carry their own header band; give it
   the doctor photograph and the same scrim. */
.doctor-header {
    position: relative;
    isolation: isolate;
    background: var(--tc-secondary) !important;
    color: #fff;
    padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem) 0;
}

.doctor-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('../img/heroes/doctors.jpg');
    background-size: cover;
    background-position: center 30%;
}

.doctor-header::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(74, 56, 140, .95) 0%, rgba(90, 72, 150, .9) 45%, rgba(101, 78, 160, .68) 100%);
}

.doctor-header > * { position: relative; }
.doctor-header h1, .doctor-header h2, .doctor-header p, .doctor-header strong { color: #fff; }
.doctor-header .experience-badge {
    display: inline-block;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: .2rem .8rem;
    font-size: .8125rem;
    margin-bottom: .75rem;
}

.hero-section h1, .hero-section h2, .hero-section p,
[class^="hero-section-"] h1, [class^="hero-section-"] h2,
.hero-modern h1, .hero-modern h2 { color: #fff; }

/* The imported heroes set a 600px minimum, which is most of a phone screen
   before the content even starts. */
.hero-section, .hero-modern { padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem) 0; }

@media (max-width: 767.98px) {
    .hero-section, .hero-modern { min-height: 0 !important; }
}

.btn-gradient-green {
    background: var(--tc-gradient) !important;
    border: 0;
    color: #fff !important;
}

/* ==================================================================
   Grid spacing
   ================================================================== */

/*
 * Cards across the whole site used to sit flush against each other because
 * `vertical-tabs-with-links-and-contents.css` zeroed the padding on every
 * `.col-*` class and the margins on `.row` — which kills Bootstrap's gutter
 * system outright, on every page, since that sheet loads everywhere. Both
 * resets have been deleted at source, so Bootstrap's own gutters apply again
 * and `g-*` classes work as written.
 *
 * What is still missing is Bootstrap's own gap:
 *
 * rows have **no vertical gutter** unless `g-*` / `gy-*` is
 * set, so wrapped columns stack with no gap. Most markup here sets neither.
 * The :not() guards mean a row that declares its own gutter keeps it — the
 * selector simply does not match.
 */
.row:not([class*="g-"]):not([class*="gy-"]):not([class*="gx-"]):not(.no-gutters) {
    --bs-gutter-y: 1.5rem;
}

/*
 * A card in a grid should fill its column so a row of cards lines up — but
 * ONLY when it is the column's only child. Applied to a sidebar that stacks
 * three cards, each one tried to be the full column height, so the stack grew
 * to three times the column and spilled over the footer.
 */
.row > [class*="col-"] > .card:only-child { height: 100%; }

/* Restoring the negative row margins would push a row out of any container
   that has no padding of its own. These are the ones that matter. */
.dropdown-menu > .row,
.card-body > .row:only-child,
.modal-body > .row {
    margin-left: 0;
    margin-right: 0;
}

.dropdown-menu > .row > *,
.modal-body > .row > * { padding-left: 0; padding-right: 0; }

@media (max-width: 767.98px) {
    .row:not([class*="g-"]):not([class*="gy-"]):not([class*="gx-"]):not(.no-gutters) {
        --bs-gutter-y: 1rem;
    }
}

/* ==================================================================
   Cards, badges, pills
   ================================================================== */

.card {
    border-radius: var(--tc-radius);
    border-color: var(--tc-line);
}

.card.shadow-sm { box-shadow: var(--tc-shadow) !important; }

/* Cards that are links lift slightly — but not on touch, where there is no
   hover and the transform just causes repaint churn. */
@media (hover: hover) {
    .card.tc-lift,
    a > .card,
    .doctor-card,
    .hospital-card {
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .card.tc-lift:hover,
    a:hover > .card,
    .doctor-card:hover,
    .hospital-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--tc-shadow-lg) !important;
    }
}

.badge { font-weight: 600; letter-spacing: .01em; }

/* ==================================================================
   Buttons
   ================================================================== */

.btn { border-radius: var(--tc-radius-sm); font-weight: 600; }

/* A tap target below ~44px is hard to hit accurately on a phone. */
@media (max-width: 767.98px) {
    .btn:not(.btn-sm):not(.btn-close) { min-height: 44px; padding-top: .6rem; padding-bottom: .6rem; }
    .btn-group-sm > .btn, .btn-sm { min-height: 36px; }
}

/*
 * A button must look like a button at rest and go *darker* on hover.
 *
 * `styles.css` used to strip the background and border from every `.btn`
 * inside a `.card` and hand them back only on `.card:hover` — so card buttons
 * read as plain text, and on a touch device, where there is no hover, they
 * never appeared at all. Both rules are deleted; these are the replacements,
 * and they apply inside cards as everywhere else.
 */
.btn-primary {
    --bs-btn-bg: var(--tc-primary-dark);
    --bs-btn-border-color: var(--tc-primary-dark);
    --bs-btn-hover-bg: #4c56b8;
    --bs-btn-hover-border-color: #4c56b8;
    --bs-btn-active-bg: #434b9e;
    --bs-btn-active-border-color: #434b9e;
    --bs-btn-disabled-bg: var(--tc-primary);
    --bs-btn-disabled-border-color: var(--tc-primary);
    color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--tc-primary-dark);
    --bs-btn-border-color: var(--tc-primary-dark);
    --bs-btn-hover-bg: var(--tc-primary-dark);
    --bs-btn-hover-border-color: var(--tc-primary-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #4c56b8;
    --bs-btn-active-border-color: #4c56b8;
    border-width: 1px;
    border-style: solid;
    background-color: transparent;
}

/* Belt and braces: whatever a legacy sheet does, a button in a card keeps its
   own box and never depends on the card being hovered. */
.card .btn {
    background-clip: border-box;
    margin-left: 0;
}

.card .btn-primary { background-color: var(--tc-primary-dark); border-color: var(--tc-primary-dark); }
.card .btn-primary:hover { background-color: #4c56b8; border-color: #4c56b8; }

.card .btn-outline-primary { border-color: var(--tc-primary-dark); color: var(--tc-primary-dark); }
.card .btn-outline-primary:hover { background-color: var(--tc-primary-dark); color: #fff; }

.card .btn-light { background-color: #fff; border-color: var(--tc-line); }
.card .btn-light:hover { background-color: var(--tc-surface-alt); }

/* Stacked buttons on a phone shouldn't sit flush against each other. */
@media (max-width: 575.98px) {
    .btn + .btn { margin-top: .35rem; }
    .d-flex.gap-2 > .btn + .btn,
    .btn-group .btn + .btn { margin-top: 0; }
}

/* ==================================================================
   Demo banner
   ================================================================== */

.tc-demo-banner {
    background: #1b2233;
    color: rgba(255, 255, 255, .82);
    font-size: .8125rem;
    padding: .45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.tc-demo-banner__tag {
    background: #f0b429;
    color: #241c00;
    font-weight: 700;
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .1rem .45rem;
    border-radius: .25rem;
}

.tc-demo-banner__text { line-height: 1.4; }

/* ==================================================================
   Universal search (the hero box)
   ================================================================== */

.universal-search .input-group {
    border-radius: var(--tc-radius) !important;
    box-shadow: 0 .75rem 1.75rem rgba(15, 20, 45, .18) !important;
}

.universal-search .form-control { font-size: 1rem; }
.universal-search .form-control:focus { box-shadow: none; }
.universal-search .btn { border-radius: 0; font-weight: 600; }

/* The example queries were faint 50%-white links that wrapped mid-phrase.
   Make them chips so each stays whole and reads as tappable. */
.universal-search .tc-search-hints { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.universal-search .tc-search-hint {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff !important;
    font-size: .8125rem;
    line-height: 1.5;
    white-space: nowrap;
}

.universal-search .tc-search-hint:hover { background: rgba(255, 255, 255, .28); }

/* On a light page the same chips need the opposite treatment. */
.universal-search .tc-search-hints--dark .tc-search-hint {
    background: rgba(102, 126, 234, .12);
    color: var(--tc-primary-dark) !important;
}

@media (max-width: 575.98px) {
    .universal-search .input-group-text { display: none; }
    .universal-search .btn { padding-left: 1rem; padding-right: 1rem; }
}

/* ==================================================================
   Navigation
   ================================================================== */

.navbar {
    padding-top: .5rem;
    padding-bottom: .5rem;
    /* A fixed row height means the bar never grows or shrinks as menus open,
       so the page below it never jumps. */
    min-height: 4.25rem;
}

/*
 * Keep the brand, nav and CTA on one line only from the expand breakpoint up.
 * Applying `nowrap` at every width stopped the collapsed menu dropping onto
 * its own row, so on a phone the open menu sat beside the logo in a narrow
 * column instead of below it.
 */
@media (min-width: 1200px) {
    .navbar > .container { flex-wrap: nowrap; }
}

.navbar-brand img { width: 44px; height: 44px; }

.navbar .nav-link {
    font-weight: 500;
    color: var(--tc-ink);
    padding-left: .7rem;
    padding-right: .7rem;
}

.navbar .nav-link.active,
.navbar .nav-link:hover { color: var(--tc-primary-dark); }

/*
 * Above the collapse breakpoint the bar is one line that must hold eight
 * items plus a language switch and the booking button. Keep it on one line,
 * let the links tighten as the window narrows, and never let the button be
 * the thing that gets squeezed off the edge.
 */
@media (min-width: 1200px) {
    .tc-main-nav { flex-wrap: nowrap; }

    .tc-main-nav > .nav-item { flex-shrink: 1; min-width: 0; }

    .tc-main-nav .nav-link {
        padding-left: clamp(.3rem, .12rem + .55vw, .8rem);
        padding-right: clamp(.3rem, .12rem + .55vw, .8rem);
        white-space: nowrap;
    }

    /* The CTA keeps its size whatever else has to give. */
    .tc-main-nav > .nav-item:last-child { flex-shrink: 0; }
}

/* Between 1200 and 1400 the labels need to be a touch smaller to fit. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .tc-main-nav .nav-link { font-size: .9rem; }
    .tc-main-nav .btn { font-size: .875rem; padding-left: .75rem; padding-right: .75rem; }
    .navbar-brand span { font-size: 1rem; }
}

/*
 * Open dropdowns on hover on a pointer device. Bootstrap's click handler is
 * left in place, so touch and keyboard still work — and because the menu is
 * absolutely positioned, opening one never moves the content underneath.
 */
@media (min-width: 1200px) {
    @media (hover: hover) {
        .tc-hover-dropdown:hover > .dropdown-menu,
        .tc-hover-dropdown:focus-within > .dropdown-menu {
            display: block;
            margin-top: 0;
        }

        /* Bridge the gap between the link and the menu so the menu does not
           close while the pointer travels to it. */
        .tc-hover-dropdown > .dropdown-menu::before {
            content: '';
            position: absolute;
            top: -.6rem;
            left: 0;
            right: 0;
            height: .6rem;
        }
    }

    /* A wide menu opening near the right edge must stay on screen. */
    .tc-dropdown-wide { min-width: 30rem; }

    .tc-main-nav > .nav-item:nth-last-child(-n+3) .dropdown-menu {
        right: 0;
        left: auto;
    }
}

.dropdown-menu {
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius-sm);
    box-shadow: var(--tc-shadow);
}

.dropdown-item { padding-top: .5rem; padding-bottom: .5rem; }
.dropdown-item:active { background: var(--tc-primary-dark); }

/*
 * Collapsed state — below 1200px, which is where navbar-expand-xl switches.
 * The menu is a long column, so it scrolls inside itself rather than pushing
 * the page down, and the wide "Locations" panel drops to one column.
 */
@media (max-width: 1199.98px) {
    .navbar-collapse {
        max-height: calc(100vh - 5.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: .75rem;
        /* Full width on its own row, below the brand. */
        width: 100%;
        flex-basis: 100%;
        margin-top: .5rem;
        border-top: 1px solid var(--tc-line);
        padding-top: .5rem;
    }

    /* `ms-auto` pushes the list to the right, which on a phone leaves the
       labels hugging the edge. Collapsed, they read as a normal left-aligned
       list. */
    .navbar-nav.ms-auto { margin-left: 0 !important; }
    .tc-main-nav { align-items: stretch; }
    .tc-main-nav > .nav-item { width: 100%; }
    .tc-main-nav .nav-link { padding-left: 0; padding-right: 0; }

    /* Give each row a real tap target and a divider so the list is scannable. */
    .tc-main-nav > .nav-item > .nav-link {
        padding-top: .6rem;
        padding-bottom: .6rem;
        border-bottom: 1px solid var(--tc-line);
    }

    .tc-main-nav > .nav-item:last-child > .nav-link { border-bottom: 0; }

    .navbar-nav .dropdown-menu {
        border: 0;
        box-shadow: none;
        padding-left: .75rem;
        background: var(--tc-surface-alt);
    }

    .navbar .dropdown-menu,
    .navbar .tc-dropdown-wide {
        min-width: 0 !important;
        width: 100%;
    }

    .navbar .dropdown-menu .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }

    /* The CTA is a full-width button at the end of the collapsed list. */
    .tc-main-nav > .nav-item:last-child .btn { width: 100%; }
}

/* ==================================================================
   Flex rows
   ================================================================== */

/*
 * The pages use `d-flex justify-content-between` for "title on the left,
 * button on the right" throughout. On a phone that pair does not fit, and
 * without wrapping the button is pushed off the edge. Allow those rows to
 * wrap — but not the ones whose layout depends on staying in a line
 * (the navbar, input groups, button groups, table cells).
 */
@media (max-width: 767.98px) {
    .d-flex.justify-content-between:not(.navbar):not(.input-group):not(.btn-group):not(.flex-nowrap),
    .d-flex.gap-2:not(.btn-group):not(.flex-nowrap),
    .d-flex.gap-3:not(.btn-group):not(.flex-nowrap) {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
}

/*
 * A long reference, URL or clinical identifier with no spaces will push the
 * page wider than the screen. Break it instead.
 */
p, li, dd, td, th, .card-body, .alert, .badge {
    overflow-wrap: break-word;
}

/* ==================================================================
   Account avatar (partials/avatar.blade.php)
   ================================================================== */

.tc-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--tc-surface-alt);
}

.tc-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    user-select: none;
}

/* The account menu sits at the end of a crowded nav; keep it compact. */
.tc-account-menu .nav-link { padding-top: .25rem; padding-bottom: .25rem; }
.tc-account-menu .dropdown-menu { min-width: 15rem; }
.tc-account-menu .dropdown-menu .text-truncate { max-width: 13rem; }

/* ==================================================================
   Tables — the biggest source of horizontal overflow
   ================================================================== */

.table-responsive { -webkit-overflow-scrolling: touch; }

/* Any table not already wrapped still scrolls rather than breaking the page. */
table { max-width: 100%; }

/*
 * Imported condition markup is stored as HTML in the diseases table, so a
 * table inside it cannot be wrapped by editing a blade. Make an unwrapped
 * table its own scroll container instead: `display: block` on a <table> is
 * only safe because the alternative is the whole page scrolling sideways.
 */
@media (max-width: 767.98px) {
    main table:not(.table-responsive table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .table { font-size: .875rem; }
    .table > :not(caption) > * > * { padding: .55rem .5rem; }
}

/* ==================================================================
   Forms
   ================================================================== */

.form-control, .form-select {
    border-radius: var(--tc-radius-sm);
    border-color: var(--tc-line);
}

.form-control:focus, .form-select:focus {
    border-color: var(--tc-primary);
    box-shadow: 0 0 0 .2rem rgba(102, 126, 234, .18);
}

.form-label { font-weight: 600; color: var(--tc-ink); }

/*
 * iOS zooms the page when a focused input's font-size is under 16px. Every
 * filter bar on the site uses form-control-sm, so pin those to 16px on small
 * screens and keep the compact look through padding instead.
 */
@media (max-width: 767.98px) {
    .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; }
    .form-control-sm, .form-select-sm { padding: .4rem .6rem; }
}

/* Filter bars: wrap instead of squeezing every control into one line. */
.tc-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.tc-filters > * { flex: 1 1 12rem; min-width: 0; }

@media (max-width: 575.98px) {
    .tc-filters > * { flex: 1 1 100%; }
}

/* ==================================================================
   Homepage sections
   ================================================================== */

/*
 * The page alternated three different background tints applied at random.
 * Two bands, strictly alternating, so the eye can tell where one section
 * stops and the next begins.
 */
.tc-band { padding: clamp(2.25rem, 1.5rem + 3vw, 4.5rem) 0; }
.tc-band--alt { background: var(--tc-surface-alt); }

/* ---- section header ---- */

.tc-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.tc-section-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tc-section-head--center .tc-section-head__lead { margin-left: auto; margin-right: auto; }

.tc-section-head__eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tc-primary-dark);
    margin-bottom: .35rem;
}

.tc-section-head__title {
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
    font-weight: 700;
    color: var(--tc-ink);
    margin: 0;
    letter-spacing: -.015em;
}

.tc-section-head__lead {
    color: var(--tc-muted);
    margin: .4rem 0 0;
    max-width: 58ch;
}

.tc-section-head__link {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.tc-section-head__link i { font-size: .75rem; transition: transform .18s ease; }

@media (hover: hover) {
    .tc-section-head__link:hover i { transform: translateX(3px); }
}

/* ---- organ cards (transplant finder) ---- */

.tc-organ-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
    height: 100%;
    padding: 1.5rem 1rem;
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tc-organ-card__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(102, 126, 234, .1);
    margin-bottom: .35rem;
}

.tc-organ-card__name { font-weight: 700; color: var(--tc-ink); }
.tc-organ-card__meta { font-size: .8125rem; color: var(--tc-muted); }

.tc-organ-card__go {
    margin-top: .4rem;
    color: var(--tc-primary-dark);
    font-size: .8rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
}

@media (hover: hover) {
    .tc-organ-card:hover {
        border-color: rgba(102, 126, 234, .45);
        box-shadow: var(--tc-shadow-lg);
        transform: translateY(-3px);
    }

    .tc-organ-card:hover .tc-organ-card__go { opacity: 1; transform: translateY(0); }
}

/* Touch has no hover, so the affordance is always shown there. */
@media (hover: none) {
    .tc-organ-card__go { opacity: 1; transform: none; }
}

/* ---- finder cards (doctor / hospital search) ---- */

.tc-finder {
    height: 100%;
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow);
    padding: 1.5rem;
}

.tc-finder__head { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; }

.tc-finder__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--tc-gradient);
    color: #fff;
    flex-shrink: 0;
}

.tc-finder__title { font-size: 1.0625rem; font-weight: 700; margin: 0 0 .15rem; color: var(--tc-ink); }
.tc-finder__lead { font-size: .8125rem; color: var(--tc-muted); margin: 0; }
.tc-finder .form-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tc-muted); margin-bottom: .25rem; }

/* ---- cost cards ---- */

.tc-cost-card {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    height: 100%;
    padding: 1.25rem;
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-left: 4px solid var(--tc-primary);
    border-radius: var(--tc-radius-sm);
    transition: box-shadow .18s ease, transform .18s ease;
}

.tc-cost-card__organ { font-weight: 700; color: var(--tc-ink); }
.tc-cost-card__range { font-weight: 700; color: var(--tc-primary-dark); font-size: 1.0625rem; }
.tc-cost-card__note { font-size: .75rem; color: var(--tc-muted); }

@media (hover: hover) {
    .tc-cost-card:hover { box-shadow: var(--tc-shadow-lg); transform: translateY(-2px); }
}

/* ---- feature blocks ---- */

.tc-feature {
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
    height: 100%;
}

.tc-feature--muted { background: var(--tc-surface-alt); }

.tc-feature--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.tc-feature--split > :first-child { flex: 1 1 28rem; }

.tc-feature__eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tc-primary-dark);
    margin-bottom: .4rem;
}

.tc-feature__title {
    font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
    font-weight: 700;
    color: var(--tc-ink);
    margin: 0 0 .6rem;
}

.tc-feature__lead { color: var(--tc-body); margin-bottom: 1rem; }

/* ---- hospital card ---- */

.tc-hospital-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tc-hospital-card__photo { width: 100%; height: 150px; object-fit: cover; }
.tc-hospital-card__body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.25rem; }
.tc-hospital-card__name { font-weight: 700; color: var(--tc-ink); line-height: 1.35; }

.tc-hospital-card__place {
    font-size: .8125rem;
    color: var(--tc-muted);
    display: flex;
    gap: .4rem;
    align-items: center;
}

.tc-hospital-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }

.tc-hospital-card__tags > span {
    font-size: .6875rem;
    font-weight: 600;
    background: rgba(102, 126, 234, .1);
    color: var(--tc-primary-dark);
    border-radius: 999px;
    padding: .1rem .55rem;
}

@media (hover: hover) {
    .tc-hospital-card:hover {
        border-color: rgba(102, 126, 234, .45);
        box-shadow: var(--tc-shadow-lg);
        transform: translateY(-3px);
    }
}

/* ---- content card (articles, videos, stories, resources) ---- */

.tc-content-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tc-content-card__link { position: absolute; inset: 0; z-index: 1; }

.tc-content-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--tc-surface-alt); }
.tc-content-card__media img { width: 100%; height: 100%; object-fit: cover; }

.tc-content-card__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.1rem;
}

.tc-content-card__play::before {
    content: '';
    position: absolute;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: rgba(17, 20, 40, .62);
    backdrop-filter: blur(2px);
}

.tc-content-card__play i { position: relative; margin-left: 3px; }

.tc-content-card__type {
    position: absolute;
    top: .65rem;
    left: .65rem;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(255, 255, 255, .94);
    color: var(--tc-ink);
    border-radius: 999px;
    padding: .15rem .6rem;
}

.tc-content-card__body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }

.tc-content-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tc-ink);
    margin: 0;
    line-height: 1.4;
}

.tc-content-card__excerpt { font-size: .8125rem; color: var(--tc-muted); margin: 0; }

.tc-content-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .75rem;
    font-size: .75rem;
    color: var(--tc-muted);
    margin-top: auto;
    padding-top: .6rem;
}

@media (hover: hover) {
    .tc-content-card:hover {
        border-color: rgba(102, 126, 234, .45);
        box-shadow: var(--tc-shadow-lg);
        transform: translateY(-3px);
    }
}

/* ---- closing CTA ---- */

.tc-closing-cta {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0;
}

.tc-closing-cta__title {
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem);
    margin-bottom: .75rem;
}

.tc-closing-cta__lead {
    color: rgba(255, 255, 255, .75);
    max-width: 58ch;
    margin: 0 auto 1.75rem;
}

/* The lead image on an article: a fixed ratio keeps the column from jumping
   as it loads, whatever the source image's shape. */
.tc-article-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow);
}

/* ==================================================================
   Sign in / register
   ================================================================== */

.tc-auth {
    background: var(--tc-surface-alt);
    padding: clamp(1.5rem, 1rem + 3vw, 4rem) 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.tc-auth__panel {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 62rem;
    margin: 0 auto;
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow-lg);
    overflow: hidden;
}

@media (min-width: 992px) {
    .tc-auth__panel { grid-template-columns: 1.05fr .95fr; }
}

.tc-auth__form { padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.75rem); }

.tc-auth__brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--tc-ink) !important;
    margin-bottom: 1.75rem;
}

.tc-auth__brand img { border-radius: .4rem; }

.tc-auth__title {
    font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem);
    font-weight: 700;
    color: var(--tc-ink);
    margin-bottom: .35rem;
}

.tc-auth__lead { color: var(--tc-muted); margin-bottom: 1.5rem; }

.tc-auth__fields { display: flex; flex-direction: column; gap: 1.1rem; }

.tc-auth__fields .form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tc-ink);
    margin-bottom: .3rem;
}

.tc-auth__fields .input-group-text {
    background: var(--tc-surface-alt);
    border-right: 0;
    color: var(--tc-muted);
}

.tc-auth__fields .form-control { border-left: 0; }
.tc-auth__fields .form-control:focus { border-color: var(--tc-line); box-shadow: none; }

/* Keep the focus ring on the group rather than one segment of it. */
.tc-auth__fields .input-group:focus-within {
    border-radius: var(--tc-radius-sm);
    box-shadow: 0 0 0 .2rem rgba(102, 126, 234, .18);
}

.tc-auth__consent { font-size: .75rem; color: var(--tc-muted); margin: 0; }

.tc-auth__switch {
    text-align: center;
    font-size: .875rem;
    color: var(--tc-muted);
    margin: .25rem 0 0;
}

/* ---- supporting panel ---- */

.tc-auth__aside {
    background: var(--tc-gradient);
    color: #fff;
    padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.75rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tc-auth__aside-title { color: #fff; font-size: 1.15rem; font-weight: 700; margin: 0; }
.tc-auth__aside-lead { color: rgba(255, 255, 255, .85); font-size: .9rem; margin: 0; }

.tc-auth__benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .9rem; }

.tc-auth__benefits li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    font-size: .875rem;
    color: rgba(255, 255, 255, .92);
    line-height: 1.5;
}

.tc-auth__benefits i {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: .8rem;
}

.tc-auth__aside-foot,
.tc-auth__aside-note {
    margin-top: auto;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--tc-radius-sm);
    padding: .9rem 1rem;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .92);
}

.tc-auth__aside-foot { display: flex; gap: .6rem; align-items: center; }
.tc-auth__aside-note a { color: #fff !important; text-decoration: underline; }

/* The supporting panel is context, not instruction — on a phone it belongs
   under the form, not above it. */
@media (max-width: 991.98px) {
    .tc-auth__panel { display: flex; flex-direction: column; }
    .tc-auth__aside { order: 2; }
    .tc-auth__form { order: 1; }
}

/* ==================================================================
   Video page
   ================================================================== */

.tc-video-stage {
    border-radius: var(--tc-radius);
    overflow: hidden;
    background: #0f1424;
    box-shadow: var(--tc-shadow-lg);
}

.tc-video-stage iframe { border: 0; }

.tc-video-stage__poster {
    position: relative;
    aspect-ratio: 16 / 9;
    background-image: var(--tc-poster);
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
}

.tc-video-stage__poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13, 17, 32, .62);
}

.tc-video-stage__play,
.tc-video-stage__empty { position: relative; z-index: 1; text-align: center; color: #fff; }

.tc-video-stage__play {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    color: #fff !important;
    font-weight: 600;
}

.tc-video-stage__play i {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--tc-primary-dark);
    font-size: 1.25rem;
    padding-left: 4px;
    transition: transform .18s ease;
}

@media (hover: hover) {
    .tc-video-stage__play:hover i { transform: scale(1.08); }
}

.tc-video-stage__empty { max-width: 32rem; padding: 1.5rem; }
.tc-video-stage__empty i { font-size: 1.75rem; opacity: .7; margin-bottom: .6rem; display: block; }
.tc-video-stage__empty p { color: rgba(255, 255, 255, .85); }

/* ---- meta strip ---- */

.tc-video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    font-size: .8125rem;
    color: var(--tc-muted);
}

.tc-video-meta > span { display: inline-flex; align-items: center; gap: .4rem; }
.tc-video-meta i { color: var(--tc-primary); }

/* ---- "more videos" list ---- */

.tc-video-aside {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .5rem;
    border-radius: var(--tc-radius-sm);
    transition: background .18s ease;
}

.tc-video-aside:hover { background: var(--tc-surface-alt); }

.tc-video-aside__thumb {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 54px;
    border-radius: .4rem;
    overflow: hidden;
    background: var(--tc-surface-alt);
}

.tc-video-aside__thumb img { width: 100%; height: 100%; object-fit: cover; }

.tc-video-aside__thumb i {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .75rem;
    background: rgba(13, 17, 32, .35);
}

.tc-video-aside__text { min-width: 0; }

.tc-video-aside__title {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tc-ink);
    line-height: 1.4;
}

.tc-video-aside__meta { font-size: .75rem; color: var(--tc-muted); }

/* ==================================================================
   Filter panel + active-filter chips (directory pages)
   ================================================================== */

.tc-filter-panel {
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow);
    padding: 1.25rem;
}

/* Search is the control people reach for first, so it sits on its own line
   with the filters behind a toggle rather than as one of seven equal boxes. */
.tc-filter-panel__search {
    display: flex;
    gap: .75rem;
    align-items: stretch;
}

.tc-filter-panel__search .input-group { flex: 1; }

.tc-filter-panel__search .input-group-text {
    background: var(--tc-surface-alt);
    border-right: 0;
    color: var(--tc-primary-dark);
}

.tc-filter-panel__search .form-control {
    border-left: 0;
    font-size: 1rem;
}

.tc-filter-panel__search .form-control:focus {
    border-color: var(--tc-line);
    box-shadow: none;
}

.tc-filter-panel__toggle { white-space: nowrap; flex-shrink: 0; }

.tc-filter-panel .form-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tc-muted);
    margin-bottom: .3rem;
}

@media (max-width: 575.98px) {
    .tc-filter-panel { padding: 1rem; }
    .tc-filter-panel__search { flex-direction: column; }
    .tc-filter-panel__toggle { width: 100%; }
}

/* ---- active filter chips ---- */

.tc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.tc-chips__label {
    font-size: .8125rem;
    color: var(--tc-muted);
}

.tc-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(102, 126, 234, .1);
    border: 1px solid rgba(102, 126, 234, .25);
    color: var(--tc-primary-dark) !important;
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .8125rem;
}

.tc-chip:hover { background: rgba(102, 126, 234, .18); }
.tc-chip__key { color: var(--tc-muted); }
.tc-chip i { font-size: .7rem; opacity: .7; }

.tc-chips__clear {
    font-size: .8125rem;
    color: var(--tc-muted) !important;
    text-decoration: underline;
}

/* ==================================================================
   Doctor card (directory)
   ================================================================== */

/*
 * The old card put a 220px photograph above eight rows of truncated text and
 * two stacked buttons, four across. Nothing was legible. This leads with who
 * the person is, carries three facts at full length, and makes the whole card
 * the link — with the booking button as the one separate target.
 */
.tc-doctor-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    padding: 1.25rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

@media (hover: hover) {
    .tc-doctor-card:hover {
        border-color: rgba(102, 126, 234, .45);
        box-shadow: var(--tc-shadow-lg);
        transform: translateY(-2px);
    }
}

/* A stretched link over the whole card, with the book button lifted above it. */
.tc-doctor-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.tc-doctor-card__head {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.tc-doctor-card__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--tc-surface-alt);
}

.tc-doctor-card__identity { min-width: 0; }

.tc-doctor-card__name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--tc-ink);
    margin: 0 0 .15rem;
    line-height: 1.3;
}

.tc-doctor-card__speciality {
    font-size: .8125rem;
    color: var(--tc-primary-dark);
    margin: 0 0 .35rem;
}

.tc-doctor-card__verified {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1a7f5a;
    background: rgba(26, 127, 90, .1);
    border-radius: 999px;
    padding: .1rem .5rem;
}

/* ---- facts ---- */

.tc-doctor-card__facts { margin: 0 0 1rem; }

.tc-doctor-card__facts > div {
    display: flex;
    gap: .6rem;
    margin-bottom: .4rem;
    font-size: .8125rem;
    line-height: 1.45;
}

.tc-doctor-card__facts dt {
    flex-shrink: 0;
    width: 1rem;
    color: var(--tc-primary);
    font-weight: 400;
}

.tc-doctor-card__facts dd {
    margin: 0;
    color: var(--tc-body);
    min-width: 0;
    /* Full text, wrapped — not truncated to 22 characters. */
    overflow-wrap: break-word;
}

/* ---- numbers ---- */

.tc-doctor-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    font-size: .75rem;
    color: var(--tc-muted);
    padding-top: .75rem;
    border-top: 1px solid var(--tc-line);
    margin-top: auto;
}

.tc-doctor-card__meta strong { color: var(--tc-ink); }

/* ---- actions ---- */

.tc-doctor-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .9rem;
}

.tc-doctor-card__cta {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tc-primary-dark);
}

.tc-doctor-card__cta i {
    font-size: .7rem;
    transition: transform .18s ease;
}

@media (hover: hover) {
    .tc-doctor-card:hover .tc-doctor-card__cta i { transform: translateX(3px); }
}

/* Lifted above the stretched link so it is its own target. */
.tc-doctor-card__book { position: relative; z-index: 2; }

/* ==================================================================
   Doctor profile (spec §16)
   ================================================================== */

.tc-doctor-hero { padding: clamp(1.75rem, 1.25rem + 2vw, 3rem) 0; }

.tc-doctor-hero__crumbs { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .5); }
.tc-doctor-hero__crumbs .breadcrumb-item a { color: rgba(255, 255, 255, .8); }
.tc-doctor-hero__crumbs .breadcrumb-item a:hover { color: #fff; }
.tc-doctor-hero__crumbs .breadcrumb-item.active { color: rgba(255, 255, 255, .95); }

.tc-doctor-hero__avatar {
    width: clamp(88px, 70px + 5vw, 128px);
    height: clamp(88px, 70px + 5vw, 128px);
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .85);
    box-shadow: 0 .75rem 1.5rem rgba(15, 20, 45, .25);
    background: #fff;
}

.tc-doctor-hero__avatar--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-primary-dark);
    font-size: 2rem;
}

.tc-doctor-hero__name {
    color: #fff;
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
    font-weight: 700;
    /* A long name with post-nominals must wrap, not run under the button. */
    overflow-wrap: break-word;
}

.tc-doctor-hero__speciality {
    color: rgba(255, 255, 255, .9);
    font-size: var(--tc-lead);
}

.tc-doctor-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    color: rgba(255, 255, 255, .82);
    font-size: .875rem;
}

.tc-doctor-hero__facts > span { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.tc-doctor-hero__facts i { opacity: .85; }

.tc-doctor-hero__verified {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: .1rem .6rem;
}

/*
 * The sidebar sticks on a large screen — but only when it is shorter than the
 * viewport. `sticky-top` with a fixed offset used to cut the bottom off the
 * card on a laptop with no way to reach it.
 */
@media (min-width: 992px) {
    .tc-doctor-aside {
        position: sticky;
        top: 5.5rem;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: .25rem;
    }
}

/* Label/value pairs in the sidebar. */
.tc-facts { margin: 0; }
.tc-facts dt {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tc-muted);
    font-weight: 600;
}
.tc-facts dd {
    margin: 0 0 .75rem;
    color: var(--tc-ink);
    overflow-wrap: break-word;
}
.tc-facts dd:last-child { margin-bottom: 0; }

/* Ticked lists used through the profile body. */
.tc-tick-list { list-style: none; padding-left: 0; margin: 0; }

.tc-tick-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .55rem;
    color: var(--tc-body);
    overflow-wrap: break-word;
}

.tc-tick-list li::before {
    content: '\f058';                    /* fa-circle-check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .1rem;
    color: var(--tc-primary);
    font-size: .9rem;
}

.tc-tick-list li:last-child { margin-bottom: 0; }

@media (max-width: 767.98px) {
    .w-md-auto { width: 100% !important; }
}

/* ==================================================================
   Content typography inside long articles
   ================================================================== */

.tc-prose { color: var(--tc-body); }
.tc-prose h2 { margin-top: 2rem; }
.tc-prose h3 { margin-top: 1.5rem; }
.tc-prose ul, .tc-prose ol { padding-left: 1.25rem; }
.tc-prose img { border-radius: var(--tc-radius-sm); }

/* Long URLs and clinical strings inside prose must not force a sideways scroll. */
.tc-prose a, .tc-prose code, .tc-prose pre { overflow-wrap: anywhere; }
.tc-prose pre { overflow-x: auto; padding: .75rem; background: var(--tc-surface-alt); border-radius: var(--tc-radius-sm); }

/* ==================================================================
   Footer
   ================================================================== */

footer { background: var(--tc-ink); }
footer a { color: rgba(255, 255, 255, .75); text-decoration: none; }
footer a:hover { color: #fff; }
footer h4, footer h5, footer h6 { color: #fff; }

@media (max-width: 767.98px) {
    footer .row > [class*="col-"] + [class*="col-"] { margin-top: 1.5rem; }
}

/*
 * The footer's contact form sits on a near-black panel. Bootstrap's default
 * placeholder and border colours are almost invisible there, so the fields
 * rendered as plain empty boxes with no hint of what belonged in them.
 */
.tc-footer-field {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
}

.tc-footer-field::placeholder { color: rgba(255, 255, 255, .5); }

.tc-footer-field:focus {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .12);
    color: #fff;
}

/* The select's own dropdown list is rendered by the OS in light colours. */
.tc-footer-field option { color: var(--tc-ink); background: #fff; }

/*
 * Bootstrap's chevron for .form-select is a dark SVG. Swapping it for a light
 * one needs the full background shorthand: setting only `background-image`
 * left the earlier `background` declaration's `repeat` in force, so the arrow
 * tiled across the control and sat on top of the selected text.
 */
select.tc-footer-field {
    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='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* ==================================================================
   Utilities the pages reach for
   ================================================================== */

.tc-surface-alt { background: var(--tc-surface-alt); }
.tc-line { border-color: var(--tc-line) !important; }

/* Clamp a summary to n lines so cards in a grid stay the same height. */
.tc-clamp-2, .tc-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tc-clamp-2 { -webkit-line-clamp: 2; }
.tc-clamp-3 { -webkit-line-clamp: 3; }

/* Skip link for keyboard and screen-reader users. */
.tc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1080;
    padding: .65rem 1rem;
    background: var(--tc-ink);
    color: #fff;
    border-radius: 0 0 var(--tc-radius-sm) 0;
}

.tc-skip-link:focus {
    left: 0;
    color: #fff;
}

/* ==================================================================
   Print — patients do print checklists and document lists
   ================================================================== */

@media print {
    .navbar, footer, .btn, .tc-skip-link, .alert-dismissible .btn-close { display: none !important; }
    a[href]::after { content: " (" attr(href) ")"; font-size: .75em; word-break: break-all; }
    .card { box-shadow: none !important; border: 1px solid #ccc; }
}

/* ==================================================================
   Reduced motion
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}