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

   The component half of the page layer: the card index, the FAQ disclosure,
   the team roster, the tariff table, the form wrapper and the vacancy list.

   Paired with tch-page-sections.css and loaded by the same widgets.
   ========================================================================== */

/* ==========================================================================
   Cards
   ========================================================================== */

.tch-cards__grid {
    display: grid;
    grid-template-columns: repeat(var(--tch-cards-cols, 3), minmax(0, 1fr));
    gap: clamp(.875rem, .6rem + 1vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tch-cards__item {
    display: flex;
}

.tch-cards__inner {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    padding: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
    border-radius: var(--tch-r-lg);
    text-decoration: none;
    color: inherit;
    transition: transform .4s var(--tch-ease), box-shadow .4s var(--tch-ease),
                border-color .4s var(--tch-ease-soft), background-color .4s var(--tch-ease-soft);
}

/* --- card styles ------------------------------------------------------- */

.tch-cards--outline .tch-cards__inner {
    border: 1px solid var(--tch-line);
    background: rgba(255, 255, 255, .55);
}

.tch-cards--solid .tch-cards__inner {
    border: 1px solid transparent;
    background: var(--tch-white);
    box-shadow: var(--tch-shadow-sm);
}

/* Bare cards are a typographic index, not panels: a rule instead of a box. */
.tch-cards--bare .tch-cards__inner {
    padding: 1.25rem 1.25rem 1.25rem 0;
    border-top: 2px solid var(--tch-blue-pale);
    border-radius: 0;
}

.tch-bg-white .tch-cards--outline .tch-cards__inner,
.tch-bg-white.tch-cards--outline .tch-cards__inner {
    background: var(--tch-cream);
}

.tch-bg-ink .tch-cards__inner {
    border-color: var(--tch-line-invert);
    background: rgba(255, 255, 255, .05);
}

/* --- interaction ------------------------------------------------------- */

.tch-cards__item--link .tch-cards__inner:hover,
.tch-cards__item--link .tch-cards__inner:focus-visible {
    transform: translateY(-3px);
    border-color: var(--tch-blue-pale);
    box-shadow: var(--tch-shadow-md);
}

.tch-bg-ink .tch-cards__item--link .tch-cards__inner:hover,
.tch-bg-ink .tch-cards__item--link .tch-cards__inner:focus-visible {
    background: rgba(255, 255, 255, .1);
    border-color: var(--tch-line-invert);
}

.tch-cards--bare .tch-cards__item--link .tch-cards__inner:hover {
    transform: none;
    border-top-color: var(--tch-blue);
    box-shadow: none;
}

.tch-cards__item--featured .tch-cards__inner {
    background: var(--tch-blue-deep);
    border-color: var(--tch-blue-deep);
    color: #fff;
}

.tch-cards__item--featured :is(.tch-cards__title, .tch-cards__num, .tch-cards__kicker) {
    color: #fff;
}

.tch-cards__item--featured .tch-cards__text {
    color: rgba(255, 255, 255, .82);
}

/* --- card contents ----------------------------------------------------- */

.tch-cards__num,
.tch-cards__kicker {
    font-family: var(--tch-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tch-blue);
}

.tch-cards .tch-cards__title {
    margin: 0;
}

.tch-cards__text {
    margin: 0;
    font-size: var(--tch-small);
    line-height: 1.6;
    color: var(--tch-ink-2);
}

.tch-bg-ink .tch-cards__text {
    color: rgba(255, 255, 255, .74);
}

.tch-cards__arrow {
    display: inline-flex;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--tch-blue-deep);
    transition: transform .35s var(--tch-ease);
}

.tch-cards__item--featured .tch-cards__arrow,
.tch-bg-ink .tch-cards__arrow {
    color: #fff;
}

.tch-cards__item--link .tch-cards__inner:hover .tch-cards__arrow {
    transform: translateX(5px);
}

.tch-cards__cta {
    margin: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) 0 0;
}

@media (max-width: 1024px) {
    .tch-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .tch-cards__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.tch-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    gap: clamp(1.75rem, 1rem + 3vw, 4.5rem);
    align-items: start;
}

.tch-faq__head {
    position: sticky;
    top: clamp(5.5rem, 4rem + 4vw, 7.5rem);
    margin-bottom: 0;
}

.tch-faq__list {
    border-top: 1px solid var(--tch-line);
}

.tch-faq__item {
    border-bottom: 1px solid var(--tch-line);
}

.tch-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1rem, .85rem + .8vw, 1.5rem) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--tch-font-display);
    font-size: var(--tch-h4);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--tch-ink);
    transition: color .3s var(--tch-ease-soft);
}

/* Safari still paints its own disclosure triangle without this. */
.tch-faq__q::-webkit-details-marker {
    display: none;
}

.tch-faq__q:hover {
    color: var(--tch-blue-deep);
}

/* A plus that becomes a minus: two bars, one of which rotates away. */
.tch-faq__icon {
    position: relative;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: .125rem;
    border: 1px solid var(--tch-line);
    border-radius: 50%;
    transition: background-color .3s var(--tch-ease-soft), border-color .3s var(--tch-ease-soft);
}

.tch-faq__icon::before,
.tch-faq__icon::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: .625rem;
    height: 1.6px;
    border-radius: 2px;
    background: var(--tch-ink);
    translate: -50% -50%;
    transition: rotate .35s var(--tch-ease), background-color .3s var(--tch-ease-soft);
}

.tch-faq__icon::after {
    rotate: 90deg;
}

.tch-faq__item[open] .tch-faq__icon {
    background: var(--tch-blue-deep);
    border-color: var(--tch-blue-deep);
}

.tch-faq__item[open] .tch-faq__icon::before,
.tch-faq__item[open] .tch-faq__icon::after {
    background: #fff;
}

.tch-faq__item[open] .tch-faq__icon::after {
    rotate: 0deg;
}

.tch-faq__a {
    padding: 0 3.25rem 1.5rem 0;
}

.tch-faq__a .tch-text {
    max-width: 64ch;
}

/* Opened by the script, which measures the panel and animates to its height.
   Without JavaScript the panel simply appears, which is the point of using
   <details> for this in the first place. */
.tch-faq__item.is-animating .tch-faq__a {
    overflow: hidden;
}

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

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

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

.tch-bg-ink .tch-faq__icon::before,
.tch-bg-ink .tch-faq__icon::after {
    background: #fff;
}

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

    .tch-faq__head {
        position: static;
        margin-bottom: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    }
}

@media (max-width: 560px) {
    .tch-faq__q {
        gap: 1rem;
        font-size: 1.0625rem;
    }

    .tch-faq__a {
        padding-right: 2.75rem;
    }
}

/* ==========================================================================
   Team

   The card shell is the one from Cards above — a hairline, the large radius,
   the cream fill on white, the three-pixel lift on hover — with a portrait
   bled to the card's top edge instead of a padded box. Nothing here is new
   styling; it is the site's card, given a face.
   ========================================================================== */

.tch-team__group + .tch-team__group {
    margin-top: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);
}

.tch-team .tch-team__group-title {
    margin: 0 0 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--tch-line);
    font-family: var(--tch-font-body);
    font-size: var(--tch-label);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tch-ink-4);
}

.tch-team__grid {
    display: grid;
    /* Three across, the same default the Cards grid uses. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.875rem, .6rem + 1vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tch-team__item {
    display: flex;
}

/* --- the card ----------------------------------------------------------- */

.tch-team__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--tch-line);
    border-radius: var(--tch-r-lg);
    background: var(--tch-white);
    transition: transform .4s var(--tch-ease), box-shadow .4s var(--tch-ease),
                border-color .4s var(--tch-ease-soft);
}

.tch-bg-white .tch-team__card {
    background: var(--tch-cream);
}

.tch-bg-ink .tch-team__card {
    border-color: var(--tch-line-invert);
    background: rgba(255, 255, 255, .05);
}

/* The same lift the cards take, and for the same reason: the whole card is
   one object, so the whole card answers. */
.tch-team__card:hover,
.tch-team__card:focus-within {
    transform: translateY(-3px);
    border-color: var(--tch-blue-pale);
    box-shadow: var(--tch-shadow-md);
}

.tch-bg-ink .tch-team__card:hover,
.tch-bg-ink .tch-team__card:focus-within {
    border-color: var(--tch-line-invert);
    background: rgba(255, 255, 255, .1);
}

/* --- the portrait -------------------------------------------------------- */

/* Bled to the card's own edges: the card clips the top corners, so the
   primitive's radius has to come off or it rounds inside the border. */
.tch-team .tch-team__figure {
    border-radius: 0;
    background: var(--tch-sand-deep);
}

/* Faces sit high in a portrait, so the crop takes from the bottom. */
.tch-team__img {
    object-position: 50% 18%;
}

/* --- the frame without a photograph -------------------------------------- */

/* Held deliberately quiet: eight saturated placeholders would shout louder
   than the eight photographs they stand in for. */
.tch-team__figure--empty {
    background: linear-gradient(160deg, var(--tch-sand), var(--tch-mist));
    border-bottom: 1px solid var(--tch-line);
}

.tch-team__monogram {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.tch-team__monogram-mark {
    position: absolute;
    inset: auto auto 1.125rem 50%;
    width: 1.5rem;
    height: auto;
    translate: -50% 0;
    color: var(--tch-blue);
    opacity: .34;
}

.tch-team__initials {
    position: relative;
    font-family: var(--tch-font-display);
    font-size: clamp(1.375rem, 1rem + 1.3vw, 2rem);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--tch-ink-3);
}

/* --- the card body -------------------------------------------------------- */

.tch-team__body {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: clamp(1rem, .85rem + .7vw, 1.375rem);
}

/* The kicker from Cards, carrying the role: the discipline reads before the
   name, which is the order someone looking for a hygienist reads in. */
.tch-team .tch-team__role {
    margin: 0 0 .3125rem;
    font-family: var(--tch-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tch-blue);
    /* "Preventieassistente" is wider than a two-up card at phone width, and a
       tracked-out capital label has no space to break at. Same treatment the
       token sheet gives headings, so it breaks where Dutch breaks instead of
       being clipped by the card. */
    hyphens: auto;
    hyphenate-limit-chars: 15 6 4;
    overflow-wrap: break-word;
}

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

.tch-team .tch-team__name {
    margin: 0;
    font-family: var(--tch-font-display);
    font-size: clamp(1.0625rem, .99rem + .3vw, 1.25rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--tch-ink);
}

.tch-bg-ink .tch-team__name {
    color: var(--tch-white);
}

/* --- the biography -------------------------------------------------------- */

/* Pushed to the foot of the card the way the Cards arrow is, so the link sits
   on one line across the row whether or not a neighbour has a biography. */
.tch-team__bio {
    margin-top: auto;
    padding-top: .875rem;
}

.tch-team__bio > summary {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    cursor: pointer;
    list-style: none;
    font-size: var(--tch-small);
    font-weight: 600;
    color: var(--tch-blue-deep);
}

.tch-team__bio > summary::-webkit-details-marker {
    display: none;
}

.tch-bg-ink .tch-team__bio > summary {
    color: var(--tch-blue-soft);
}

.tch-team__bio-icon {
    position: relative;
    width: .5rem;
    height: .5rem;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate .3s var(--tch-ease), translate .3s var(--tch-ease);
}

.tch-team__bio[open] .tch-team__bio-icon {
    rotate: -135deg;
    translate: 0 2px;
}

.tch-team__bio .tch-text {
    margin-top: .75rem;
}

.tch-team .tch-team__bio .tch-text p {
    font-size: var(--tch-small);
    line-height: 1.65;
}

.tch-team__note {
    margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 0;
    max-width: 62ch;
    font-size: var(--tch-small);
    color: var(--tch-ink-3);
}

/* Two across from tablet down: a portrait card narrower than this stops
   being a portrait. */
@media (max-width: 900px) {
    .tch-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Rates table
   ========================================================================== */

.tch-rates__scroll {
    overflow-x: auto;
    border-radius: var(--tch-r-md);
}

.tch-rates__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tch-small);
}

.tch-rates__table thead th {
    padding: .75rem 1rem .75rem 0;
    text-align: left;
    border-bottom: 2px solid var(--tch-ink);
    font-family: var(--tch-font-body);
    font-size: var(--tch-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tch-ink);
    white-space: nowrap;
}

.tch-rates__table tbody td {
    padding: .8125rem 1rem .8125rem 0;
    border-bottom: 1px solid var(--tch-line);
    vertical-align: top;
    color: var(--tch-ink-2);
}

.tch-rates__section th {
    padding: 1.75rem 0 .625rem;
    text-align: left;
    font-family: var(--tch-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tch-ink);
    border-bottom: 1px solid var(--tch-line);
}

.tch-rates__code {
    width: 6.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tch-ink);
    white-space: nowrap;
}

.tch-rates__price,
.tch-rates__price-col {
    width: 7rem;
    text-align: right;
    padding-right: 0 !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tch-ink);
    white-space: nowrap;
}

.tch-rates__note {
    margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
    max-width: 66ch;
    font-size: var(--tch-small);
}

/* Below the grid breakpoint every row becomes its own labelled block: a
   visitor looking up one code should never have to pan sideways for a price. */
@media (max-width: 700px) {
    .tch-rates__scroll {
        overflow-x: visible;
    }

    .tch-rates__table,
    .tch-rates__table tbody,
    .tch-rates__table tr,
    .tch-rates__table td {
        display: block;
        width: auto;
    }

    .tch-rates__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .tch-rates__table tbody tr {
        padding: .875rem 0;
        border-bottom: 1px solid var(--tch-line);
    }

    .tch-rates__table tbody td {
        padding: 0;
        border: 0;
    }

    .tch-rates__code {
        margin-bottom: .125rem;
        font-size: var(--tch-label);
        letter-spacing: .1em;
        color: var(--tch-blue);
    }

    .tch-rates__price {
        margin-top: .375rem;
        text-align: left;
    }

    .tch-rates__section {
        display: block;
        padding: 0;
        border: 0;
    }

    .tch-rates__section th {
        display: block;
        padding-top: 1.5rem;
    }
}

/* ==========================================================================
   Form
   ========================================================================== */

.tch-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    gap: clamp(1.75rem, 1rem + 3vw, 4rem);
    align-items: start;
}

.tch-form--solo .tch-form__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 46rem;
}

/* The theme already styles Contact Form 7 — card, fields, submit, validation
   messages — in site.css. Duplicating any of that here would give the form two
   cards and two sets of focus rings, so this widget only supplies the layout
   around it and lets the theme dress the form itself. */
.tch-form__fields > .wpcf7 {
    margin-top: 0;
}

.tch-form__disclaimer {
    margin-top: 1.25rem;
    max-width: 60ch;
    font-size: var(--tch-small);
    color: var(--tch-ink-3);
}

.tch-form__disclaimer p {
    font-size: var(--tch-small);
    color: var(--tch-ink-3);
}

.tch-form__aside {
    padding: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
    border-radius: var(--tch-r-lg);
    background: var(--tch-mist);
}

.tch-form .tch-form__aside-title {
    margin: 0 0 .625rem;
}

.tch-form__aside-text {
    margin: 0;
    font-size: var(--tch-small);
    line-height: 1.65;
    color: var(--tch-ink-2);
}

.tch-form__meta {
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(22, 40, 47, .1);
}

.tch-form__meta-row + .tch-form__meta-row {
    margin-top: .875rem;
}

.tch-form__meta dt {
    font-size: var(--tch-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tch-ink-4);
}

.tch-form__meta dd {
    margin: .1875rem 0 0;
    font-family: var(--tch-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tch-ink);
}

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

/* ==========================================================================
   Vacancies
   ========================================================================== */

.tch-vacancies__list {
    display: grid;
    gap: clamp(1.25rem, .9rem + 1.4vw, 2rem);
}

.tch-vacancies__item {
    padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    border-radius: var(--tch-r-lg);
    border: 1px solid var(--tch-line);
    background: var(--tch-white);
}

.tch-vacancies__item-head {
    margin-bottom: 1rem;
}

.tch-vacancies__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .875rem 0 0;
    padding: 0;
    list-style: none;
}

.tch-vacancies__meta li {
    padding: .375rem .8125rem;
    border-radius: var(--tch-r-pill);
    background: var(--tch-mist);
    font-size: var(--tch-small);
    color: var(--tch-blue-deep);
}

.tch-vacancies__intro {
    margin-bottom: 1.25rem;
}

.tch-vacancies__body {
    max-width: 70ch;
}

/* Headings, lists and links inside the vacancy body come from the shared
   .tch-text rules in tch-page-sections.css. */

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

.tch-vacancies__empty {
    max-width: 46rem;
    padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    border-radius: var(--tch-r-lg);
    background: var(--tch-mist);
}

.tch-vacancies__empty .tch-lead {
    margin-top: .875rem;
}