/* ============================================================================
   Contact page — action-first split.
   Distinct: quick-contact cards on top, form + info side-by-side, working
   hours as day-slot chips, map with external open link.
   ============================================================================ */

/* ============================================================ HERO ==== */
.ctc-hero {
    position: relative;
    padding-block: clamp(2.5rem, 6vw, 4rem);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.ctc-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(600px 260px at 50% 0%, var(--brand-glow), transparent 55%),
        radial-gradient(400px 300px at 90% 100%, var(--accent-soft), transparent 55%),
        var(--bg);
}
.ctc-hero__inner { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.ctc-hero__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--fg);
    margin: .5rem 0 0 0;
}
.ctc-hero__lead {
    font-size: 1.02rem;
    color: var(--fg-muted);
    max-width: 60ch;
    line-height: 1.85;
    margin: 0;
}
.ctc-hero__manage {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    background: transparent;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--fg-muted);
    font-size: .82rem;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.ctc-hero__manage:hover {
    color: var(--brand-strong);
    border-color: var(--brand);
    background: var(--brand-soft);
}
:root[data-theme="dark"] .ctc-hero__manage:hover { color: var(--brand); }

/* ============================================================ PRACTICES ==== */
/*
 * One card per practice — address, numbers, opening hours and a directions
 * link inside the block that names the city.
 *
 * This replaced a single three-column bar (address / phones / email) built
 * from one clinic-wide record. With two locations that bar could only be
 * right about one of them while reading as if it described both.
 */
.ctc-quick { padding-block: 1.5rem; }

.ctc-branches {
    display: grid;
    /* `auto-fit` with a wide floor: with the email card moved out this row
       holds only real practices, so two of them each take half the width
       instead of a third — and a future third city still wraps rather than
       scrolling sideways. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.ctc-branch {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.6rem 1.5rem 1.4rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.ctc-branch::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

.ctc-branch__head {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.ctc-branch__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 1.05rem;
}
:root[data-theme="dark"] .ctc-branch__icon { color: var(--brand); }
.ctc-branch__icon--alt {
    background: linear-gradient(135deg, var(--accent-soft), transparent);
    color: var(--accent);
}
.ctc-branch__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg);
}
.ctc-branch__city {
    margin: .15rem 0 0;
    font-size: .8rem;
    color: var(--fg-subtle);
}

.ctc-branch__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.ctc-branch__row {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: .7rem;
    align-items: start;
}
.ctc-branch__row > i {
    margin-top: .2rem;
    color: var(--brand);
    text-align: center;
}
.ctc-branch__row h3 {
    margin: 0 0 .3rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--fg-subtle);
    letter-spacing: .01em;
}
.ctc-branch__row p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.85;
    color: var(--fg);
    text-wrap: pretty;
}
.ctc-branch__muted { color: var(--fg-muted); font-size: .85rem; }

.ctc-branch__hours {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}
/* Numbers sit side by side rather than stacked: they are the shortest lines
   in the card and a column of two left a lot of empty card beside them. */
.ctc-branch__numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.ctc-branch__hours li {
    font-size: .9rem;
    line-height: 1.8;
    color: var(--fg);
}
/* Plain bold text with a trailing arrow, and nothing said it was a phone
   number you could press — the arrow pointed left into the margin and read
   as a bullet. It is the same pill the home page's branch card already uses,
   with the same `fa-phone`, so a number looks tappable in both places. */
.ctc-branch__number {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    font-feature-settings: 'tnum';
    transition: background .2s ease, color .2s ease;
}
:root[data-theme="dark"] .ctc-branch__number { color: var(--brand); }
.ctc-branch__number i { font-size: .8em; }
.ctc-branch__number:hover,
.ctc-branch__number:focus-visible { background: var(--brand); color: #fff; }
:root[data-theme="dark"] .ctc-branch__number:hover,
:root[data-theme="dark"] .ctc-branch__number:focus-visible { color: #fff; }


.ctc-branch__actions {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.ctc-branch__action {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
:root[data-theme="dark"] .ctc-branch__action { color: var(--brand); }
.ctc-branch__action:hover { background: var(--brand); color: #fff; transform: translateY(-1px); }
.ctc-branch__action--ghost {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--fg-muted);
}
.ctc-branch__action--ghost:hover { background: var(--bg-muted); color: var(--brand); }

.ctc-quick__empty {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-elevated);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--fg-muted);
}
.ctc-quick__empty i { color: var(--brand); }

/* ============================================================ MAIN GRID ==== */
.ctc-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

/* Form card */
.ctc-form-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.ctc-form-card__head h2 { margin: .5rem 0 .35rem 0; font-size: clamp(1.3rem, 2.2vw, 1.75rem); color: var(--fg); }
.ctc-form-card__head p  { margin: 0; color: var(--fg-muted); }

.ctc-form { display: flex; flex-direction: column; gap: 1rem; }
.ctc-form__field { display: flex; flex-direction: column; gap: .4rem; }
.ctc-form__field label {
    color: var(--fg);
    font-weight: 600;
    font-size: .92rem;
}
.ctc-form__field label span { color: var(--danger); margin-inline-start: .1rem; }
.ctc-form__field input:not([type="hidden"]):not([type="checkbox"]),
.ctc-form__field textarea,
.ctc-form__field select {
    width: 100%;
    padding: .75rem 1rem;
    font: inherit;
    font-size: .95rem;
    background: var(--bg-muted);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ctc-form__field input:focus,
.ctc-form__field textarea:focus,
.ctc-form__field select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-glow);
    background: var(--bg-elevated);
}
.ctc-form__field textarea { min-height: 130px; resize: vertical; }

.ctc-form__hint { color: var(--fg-subtle); font-size: .78rem; }
.ctc-form__error {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--danger);
    font-size: .82rem;
    margin: 0;
}
.ctc-form__field.has-error input,
.ctc-form__field.has-error textarea { border-color: var(--danger); }

.ctc-form__submit { align-self: stretch; justify-content: center; margin-top: .5rem; }

/* Info column */
.ctc-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.ctc-info__block {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.ctc-info__head h3 { margin: .35rem 0 0 0; color: var(--fg); font-size: 1.2rem; }
.ctc-info__empty {
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .75rem 0 0 0;
    font-size: .9rem;
}
.ctc-info__empty i { color: var(--brand); }

/* Consultation CTA card — one call button per practice, then the booking link. */
.ctc-cta-card {
    text-align: center;
    background:
        radial-gradient(circle at 80% 0%, var(--brand-glow), transparent 55%),
        linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: var(--shadow-lg);
}
.ctc-cta-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.ctc-cta-card h3 { margin: 0 0 .35rem 0; color: #fff; font-size: 1.25rem; }
.ctc-cta-card p  { margin: 0 0 1.25rem 0; color: rgba(255,255,255,.9); line-height: 1.7; font-size: .92rem; }
.ctc-cta-card .ds-btn--primary {
    background: #fff;
    color: var(--brand-strong);
}
.ctc-cta-card .ds-btn--primary:hover { color: var(--brand-strong); }
/* One call button per practice, stacked and full width, so the city label and
   the number never end up on separate lines from each other. */
.ctc-cta-card .ds-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: .5rem;
}
.ctc-cta-card .ds-btn + .ds-btn { margin-top: .5rem; }

/* Email card — the written route to the clinic, under the consultation box.
   It used to sit in the practices row where its shape read as a third
   location. */
.ctc-mail-card {
    display: flex;
    /* Heading plus address, nothing else — two short lines, so the icon
       centres against them instead of hanging off the top. */
    align-items: center;
    gap: 1rem;
}
.ctc-mail-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 1.1rem;
}
:root[data-theme="dark"] .ctc-mail-card__icon { color: var(--brand); }
.ctc-mail-card__body { min-width: 0; }
.ctc-mail-card__body h3 { margin: 0 0 .25rem; color: var(--fg); font-size: 1.1rem; }
.ctc-mail-card__address {
    display: inline-block;
    font-weight: 700;
    color: var(--brand-strong);
    text-decoration: none;
    word-break: break-all;
    border-bottom: 1px dashed currentColor;
}
:root[data-theme="dark"] .ctc-mail-card__address { color: var(--brand); }
.ctc-mail-card__address:hover { color: var(--fg); }

/* ============================================================ MAP ==== */
.ctc-map {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}
.ctc-map__head {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto clamp(1.5rem, 3vw, 2rem);
}
.ctc-map__head h2 { margin: .35rem 0 .35rem 0; color: var(--fg); font-size: clamp(1.4rem, 2.8vw, 2rem); }
.ctc-map__head p  { color: var(--fg-muted); margin: 0; }

.ctc-map__wrap {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}
.ctc-map__canvas {
    height: clamp(320px, 45vw, 480px);
    width: 100%;
    background: var(--bg-muted);
}
.ctc-map__external {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--fg);
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--shadow);
    transition: transform .2s ease, background .2s ease;
    z-index: 500;
}
.ctc-map__external:hover { transform: translateY(-2px); color: var(--brand); }
.ctc-map__external i { color: var(--brand); }

/* One map per practice, side by side. A single map centred between two cities
   200km apart frames neither of them. */
.ctc-maps {
    display: grid;
    /* `min(100%, …)` so the track can shrink below its floor on a 320px
       phone instead of pushing the page sideways. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
}
.ctc-map__item { display: flex; flex-direction: column; gap: .85rem; }
.ctc-map__item-head h3 {
    margin: 0 0 .2rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg);
}
.ctc-map__item-head p {
    margin: 0;
    font-size: .85rem;
    color: var(--fg-muted);
    line-height: 1.7;
}
/* Two maps in a row are each half as wide, so the fixed 480px ceiling made
   them read as tall narrow slots. */
.ctc-maps .ctc-map__canvas { height: clamp(280px, 32vw, 400px); }

.ctc-map__missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    height: clamp(280px, 32vw, 400px);
    padding: 1.5rem;
    text-align: center;
    background: var(--bg-muted);
    color: var(--fg-muted);
}
.ctc-map__missing i { font-size: 1.9rem; color: var(--brand); }
.ctc-map__missing p { margin: 0; font-size: .88rem; line-height: 1.8; max-width: 34ch; }

/* ============================================================ RESPONSIVE ==== */
@media (max-width: 1023.98px) {
    .ctc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 639.98px) {
    .ctc-branch { padding: 1.35rem 1.25rem 1.2rem; }
    .ctc-branch__row { grid-template-columns: 22px 1fr; gap: .55rem; }
    .ctc-branch__action { flex: 1 1 100%; justify-content: center; }
    .ctc-maps .ctc-map__canvas,
    .ctc-map__missing { height: 300px; }
    /* The floating "open in maps" chip overlaps the top-right of a narrow map
       and covers the marker; below it instead. */
    .ctc-map__external {
        position: static;
        width: 100%;
        justify-content: center;
        border-radius: 0;
    }
}