/* ==========================================================================
   Tandheelkundig Centrum Huissen — content page sections

   The layout half of the page layer: the hero every subpage opens on, the
   prose section that carries the bulk of the copy, the numbered steps, the
   facts strip and the callout panel.

   Everything here reads from the token sheet; no colour, radius, font or
   duration is invented locally. Breakpoints follow the homepage sheet:
   1024px for the column collapse, 560px for the phone.
   ========================================================================== */

/* ==========================================================================
   Shared section opening
   ========================================================================== */

.tch-page-head {
    margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
    max-width: 44rem;
}

.tch-page-head .tch-lead {
    margin-top: 1.125rem;
}

/* ==========================================================================
   Page hero
   ========================================================================== */

.tch-page-hero {
    padding-top: clamp(3rem, 1.6rem + 6vw, 6.5rem);
    padding-bottom: clamp(3.25rem, 1.8rem + 6vw, 7rem);
    overflow: clip;
}

.tch-page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
}

.tch-page-hero--plain .tch-page-hero__grid {
    grid-template-columns: minmax(0, 1fr);
}

/* Without a photograph there is nothing to balance the text against, so the
   hero balances itself: title on the left, everything that follows it in a
   second column. A single left-aligned column under a 1360px shell would
   leave half the hero empty and read as an unfinished page. */
.tch-page-hero--plain .tch-page-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: clamp(1.5rem, .8rem + 2.6vw, 4rem);
    align-items: start;
}

.tch-page-hero--plain .tch-page-hero__lede .tch-page-hero__title {
    margin-bottom: 0;
    max-width: 15ch;
}

/* Optical alignment: the lead's x-height sits level with the headline's cap
   height rather than with the top of its line box. */
.tch-page-hero--plain .tch-page-hero__rest {
    padding-top: .5rem;
}

.tch-page-hero--plain .tch-page-hero__action-row {
    margin-top: 1.75rem;
}

.tch-page-hero--plain .tch-page-hero__lead {
    max-width: 46ch;
}

.tch-page-hero--compact {
    padding-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* The drawn accent hangs below the baseline, so the gap under the headline
   has to clear the line as well as the descenders. */
.tch-page-hero .tch-page-hero__title {
    margin-bottom: 2.25rem;
    font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.75rem);
}

.tch-page-hero__lead {
    max-width: 40ch;
}

.tch-page-hero__action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    margin-top: 2.25rem;
}

.tch-page-hero__actions {
    gap: 1rem;
}

.tch-page-hero__phone {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin: 0;
}

.tch-page-hero__phone-label {
    font-size: var(--tch-small);
    color: var(--tch-ink-3);
}

.tch-phone-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--tch-font-display);
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tch-ink);
    text-decoration: none;
    transition: color .3s var(--tch-ease-soft);
}

.tch-phone-link svg {
    flex: none;
    color: var(--tch-blue);
}

.tch-phone-link:hover,
.tch-phone-link:focus-visible {
    color: var(--tch-blue-deep);
}

.tch-bg-ink .tch-phone-link {
    color: #fff;
}

.tch-bg-ink .tch-phone-link svg {
    color: var(--tch-blue-soft);
}

.tch-page-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .625rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.tch-page-hero__facts li {
    padding: .4375rem .875rem;
    border: 1px solid var(--tch-line);
    border-radius: var(--tch-r-pill);
    background: rgba(255, 255, 255, .6);
    font-size: var(--tch-small);
    color: var(--tch-ink-2);
}

.tch-bg-ink .tch-page-hero__facts li {
    border-color: var(--tch-line-invert);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .82);
}

.tch-page-hero__figure {
    border-radius: var(--tch-r-xl);
    box-shadow: var(--tch-shadow-md);
}

@media (max-width: 1024px) {
    .tch-page-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    }

    .tch-page-hero--plain .tch-page-hero__body {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .tch-page-hero--plain .tch-page-hero__lede .tch-page-hero__title {
        margin-bottom: 0;
        max-width: 24ch;
    }

    .tch-page-hero--plain .tch-page-hero__rest {
        padding-top: 0;
    }

    .tch-page-hero__figure {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 560px) {
    .tch-page-hero__action-row {
        gap: 1.25rem;
    }

    .tch-page-hero__actions {
        width: 100%;
    }

    .tch-page-hero__actions .tch-btn {
        width: 100%;
    }

    .tch-page-hero__figure {
        aspect-ratio: 4 / 3;
    }
}

/* ==========================================================================
   Prose
   ========================================================================== */

.tch-prose__grid {
    display: grid;
    gap: clamp(1.75rem, 1rem + 3vw, 4.5rem);
}

/* --- split: label column beside the measure ---------------------------- */

.tch-prose--split .tch-prose__grid {
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    align-items: start;
}

/* The title stays with the reader through a long answer; `top` clears the
   sticky site header rather than pinning the title to the very edge. */
.tch-prose--split .tch-prose__head {
    position: sticky;
    top: clamp(5.5rem, 4rem + 4vw, 7.5rem);
}

/* --- stack: one measured column ---------------------------------------- */

.tch-prose--stack .tch-prose__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 46rem;
}

/* --- media: photograph beside the copy --------------------------------- */

.tch-prose--media .tch-prose__grid {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    align-items: center;
}

/* The heading and the copy are one column here, not two grid rows: as two
   rows a tall photograph beside them would stretch the gap between the title
   and its first sentence to whatever the image happened to leave over. */
.tch-prose--media .tch-prose__col {
    display: flex;
    flex-direction: column;
}

.tch-prose--media .tch-prose__head {
    margin-bottom: clamp(1rem, .8rem + .8vw, 1.5rem);
}

.tch-prose--media .tch-prose__media {
    order: -1;
}

.tch-prose--media.tch-prose--flip .tch-prose__media {
    order: 1;
}

/* Flipping swaps which side the photograph sits on, not how much room the
   copy gets, so the column widths swap with it. */
.tch-prose--media.tch-prose--flip .tch-prose__grid {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
}

.tch-prose__media .tch-figure {
    border-radius: var(--tch-r-xl);
}

.tch-prose__head .tch-h2 {
    max-width: 20ch;
}

.tch-prose__quote {
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
    border-left: 3px solid var(--tch-green-soft);
}

/* The editor writes plain WYSIWYG, and it writes it into more than the prose
   section: a callout, a vacancy and an FAQ answer all end up as .tch-text.
   Styling the shared class once is what keeps a bulleted list looking the same
   wherever the copy happens to sit. These rules live in the page sheet, so the
   homepage — which has no lists, headings or tables in its copy — is untouched.
   ------------------------------------------------------------------------ */

.tch-section .tch-text :is(h2, h3, h4) {
    margin: 2.25rem 0 .75rem;
    font-family: var(--tch-font-display);
    font-size: var(--tch-h4);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--tch-ink);
}

.tch-section .tch-text :is(h2, h3, h4):first-child {
    margin-top: 0;
}

.tch-section .tch-text :is(ul, ol) {
    margin: 0 0 1.05em;
    padding-left: 0;
    list-style: none;
}

.tch-section .tch-text :is(ul, ol):last-child {
    margin-bottom: 0;
}

.tch-section .tch-text li {
    position: relative;
    margin-bottom: .5rem;
    padding-left: 1.625rem;
    color: var(--tch-ink-2);
    line-height: 1.65;
}

.tch-section .tch-text ul li::before {
    content: "";
    position: absolute;
    top: .6em;
    left: .3125rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tch-green-soft);
}

.tch-section .tch-text ol {
    counter-reset: tch-prose-list;
}

.tch-section .tch-text ol li {
    counter-increment: tch-prose-list;
}

.tch-section .tch-text ol li::before {
    content: counter(tch-prose-list, decimal-leading-zero);
    position: absolute;
    top: .15em;
    left: 0;
    font-family: var(--tch-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--tch-blue);
}

.tch-section .tch-text a:not(.tch-btn) {
    color: var(--tch-blue-deep);
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .4s var(--tch-ease);
}

.tch-section .tch-text a:not(.tch-btn):hover {
    background-size: 0 1px;
}

.tch-section .tch-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25em;
    font-size: var(--tch-small);
}

.tch-section .tch-text :is(th, td) {
    padding: .625rem .875rem .625rem 0;
    text-align: left;
    border-bottom: 1px solid var(--tch-line);
    vertical-align: top;
}

.tch-bg-ink .tch-text li {
    color: rgba(255, 255, 255, .76);
}

.tch-prose__text {
    max-width: 68ch;
}

.tch-prose__cta {
    margin: 1.75rem 0 0;
}

.tch-bg-ink .tch-prose__quote {
    border-left-color: var(--tch-blue-soft);
    color: #fff;
}

@media (max-width: 1024px) {
    .tch-prose--split .tch-prose__grid,
    .tch-prose--media .tch-prose__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tch-prose--split .tch-prose__head {
        position: static;
    }

    /* Stacked, the photograph always leads — a heading orphaned above an
       image it introduces reads as a caption for the wrong thing. */
    .tch-prose--media .tch-prose__media,
    .tch-prose--media.tch-prose--flip .tch-prose__media {
        order: -1;
    }

    .tch-prose__media .tch-figure {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 560px) {
    .tch-prose__media .tch-figure {
        aspect-ratio: 4 / 3;
    }
}

/* ==========================================================================
   Steps
   ========================================================================== */

.tch-steps__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tch-steps--rows .tch-steps__list {
    display: grid;
    gap: 0;
    max-width: 58rem;
    border-top: 1px solid var(--tch-line);
}

.tch-steps--rows .tch-steps__item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0 1.5rem;
    padding: clamp(1.25rem, .9rem + 1.2vw, 1.875rem) 0;
    border-bottom: 1px solid var(--tch-line);
}

.tch-steps--grid .tch-steps__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
}

.tch-steps--grid .tch-steps__item {
    padding-top: 1.25rem;
    border-top: 2px solid var(--tch-blue-pale);
}

.tch-steps__num {
    font-family: var(--tch-font-body);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tch-blue);
    padding-top: .35em;
}

.tch-steps--grid .tch-steps__num {
    display: block;
    margin-bottom: .625rem;
    padding-top: 0;
}

.tch-steps .tch-steps__title {
    margin-bottom: .4375rem;
}

.tch-steps__text {
    margin: 0;
    max-width: 62ch;
    color: var(--tch-ink-2);
    line-height: 1.65;
}

.tch-steps__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .75rem 2rem;
    margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

.tch-steps__note {
    margin: 0;
    max-width: 60ch;
    font-size: var(--tch-small);
    color: var(--tch-ink-3);
}

.tch-bg-ink .tch-steps--rows .tch-steps__list,
.tch-bg-ink .tch-steps--rows .tch-steps__item {
    border-color: var(--tch-line-invert);
}

.tch-bg-ink .tch-steps__text,
.tch-bg-ink .tch-steps__note {
    color: rgba(255, 255, 255, .76);
}

.tch-bg-ink .tch-steps__num {
    color: var(--tch-blue-soft);
}

@media (max-width: 560px) {
    .tch-steps--rows .tch-steps__item {
        grid-template-columns: minmax(0, 1fr);
        gap: .375rem;
    }

    .tch-steps__num {
        padding-top: 0;
    }
}

/* ==========================================================================
   Stats
   ========================================================================== */

.tch-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--tch-line);
}

.tch-stats__item {
    padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) clamp(1.25rem, .8rem + 1.6vw, 2.25rem) clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) 0;
    border-bottom: 1px solid var(--tch-line);
}

.tch-stats__value {
    margin: 0 0 .375rem;
    font-family: var(--tch-font-display);
    font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--tch-blue-deep);
}

.tch-stats__label {
    margin: 0 0 .5rem;
    font-family: var(--tch-font-display);
    font-size: var(--tch-h4);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--tch-ink);
}

.tch-stats__text {
    margin: 0;
    max-width: 40ch;
    font-size: var(--tch-small);
    line-height: 1.6;
    color: var(--tch-ink-2);
}

.tch-bg-ink .tch-stats__grid,
.tch-bg-ink .tch-stats__item {
    border-color: var(--tch-line-invert);
}

.tch-bg-ink .tch-stats__value {
    color: var(--tch-blue-soft);
}

.tch-bg-ink .tch-stats__text {
    color: rgba(255, 255, 255, .76);
}

/* ==========================================================================
   Callout
   ========================================================================== */

.tch-callout__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    align-items: center;
    padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    border-radius: var(--tch-r-lg);
    border: 1px solid transparent;
}

.tch-callout__panel--mist {
    background: var(--tch-mist);
    border-color: rgba(46, 127, 166, .16);
}

.tch-callout__panel--moss {
    background: var(--tch-moss);
    border-color: rgba(82, 118, 54, .16);
}

.tch-callout__panel--sand {
    background: var(--tch-sand);
    border-color: var(--tch-line);
}

.tch-callout__panel--ink {
    background: var(--tch-ink);
    color: rgba(255, 255, 255, .78);
}

.tch-callout__panel--ink :is(h2, h3, strong) {
    color: #fff;
}

.tch-callout__panel--ink .tch-text p {
    color: rgba(255, 255, 255, .78);
}

.tch-callout__panel--ink .tch-eyebrow,
.tch-callout__panel--ink .tch-eyebrow__mark {
    color: var(--tch-blue-soft);
}

.tch-callout .tch-eyebrow {
    margin-bottom: .75rem;
}

.tch-callout .tch-callout__title {
    margin-bottom: .75rem;
}

.tch-callout__text {
    max-width: 64ch;
}

.tch-callout__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .875rem;
}

.tch-callout__phone-label {
    margin: 0;
    font-size: var(--tch-small);
    color: var(--tch-ink-3);
}

.tch-callout__panel--ink .tch-callout__phone-label {
    color: rgba(255, 255, 255, .66);
}

.tch-callout__phone {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--tch-font-display);
    font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--tch-ink);
    text-decoration: none;
    transition: color .3s var(--tch-ease-soft);
}

.tch-callout__phone svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--tch-blue);
}

.tch-callout__phone:hover,
.tch-callout__phone:focus-visible {
    color: var(--tch-blue-deep);
}

.tch-callout__panel--ink .tch-callout__phone {
    color: #fff;
}

.tch-callout__panel--ink .tch-callout__phone svg {
    color: var(--tch-blue-soft);
}

.tch-callout__actions {
    gap: .75rem;
}

@media (max-width: 1024px) {
    .tch-callout__panel {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 560px) {
    .tch-callout__actions {
        width: 100%;
    }

    .tch-callout__actions .tch-btn {
        width: 100%;
    }
}