/* ==========================================================================
   Citiwell Montenegro · "Our specialists" (team.html, team-ru.html, team-en.html)
   Built on the "About us" look (about-us-page.css, .ab-*): light hero with a
   mosaic of the specialists, cards with a second photo, client quotes from
   Google, a dark "one standard" card and the studios with their teams.
   Everything new is scoped to .tm-*. Pages: tools/build-team-pages.py.
   ========================================================================== */

/* ---------- hero ---------- */
.ab-hero.tm-hero { padding-bottom: var(--cw-space, 40px); }
.tm-hero h1 { font-size: clamp(2.5rem, 1.3rem + 4.2vw, 4.4rem); }
.tm-hero h1 span { font-size: 0.56em; }

.tm-mosaic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 14px);
    transform: rotate(-2deg);
}

.tm-mosaic li {
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: clamp(14px, 1.6vw, 22px);
    background: var(--ab-aqua-soft);
    box-shadow: var(--ab-shadow-soft);
}

.tm-mosaic li:nth-child(3n + 2) { transform: translateY(18px); }
.tm-mosaic img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 901px) {
    .tm-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}

@media (max-width: 900px) {
    .tm-mosaic { transform: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tm-mosaic li:nth-child(n + 9) { display: none; }
    .tm-mosaic li:nth-child(3n + 2) { transform: none; }
    .tm-mosaic li:nth-child(2n) { transform: translateY(12px); }
}

.tm-stats {
    display: grid;
    gap: 12px;
    margin-top: clamp(36px, 5vw, 64px);
}

.tm-stats li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--ab-shadow-soft);
    color: var(--ab-muted);
    font-size: 0.92rem;
    line-height: 1.35;
}

.tm-stats .ab-ico { width: 26px; height: 26px; color: var(--ab-blue); }
.tm-stats strong { display: block; color: var(--ab-ink); font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }

@media (max-width: 619px) {
    .tm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tm-stats li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; font-size: 0.82rem; }
    .tm-stats .ab-ico { width: 22px; height: 22px; }
    .tm-stats strong { font-size: 1.35rem; }
}

@media (min-width: 620px) { .tm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .tm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- city filter ---------- */
.tm-filters {
    display: flex;
    gap: 8px;
    margin: 0 -20px clamp(22px, 3vw, 32px);
    padding: 2px 20px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tm-filters::-webkit-scrollbar { display: none; }

.tm-filter {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--ab-bg);
    box-shadow: inset 0 0 0 1.5px var(--ab-line);
    color: var(--ab-ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.tm-filter:hover { box-shadow: inset 0 0 0 1.5px var(--ab-blue); }
.tm-filter[id] { scroll-margin-top: calc(var(--ab-header-h) + 24px); }
.tm-filter.is-active { background: var(--ab-navy); box-shadow: none; color: #fff; }

/* ---------- cards ---------- */
.tm-grid { display: grid; gap: clamp(16px, 2vw, 24px); }

/* phones: one row of cards to swipe through, the next card peeking in */
@media (max-width: 679px) {
    .tm-grid {
        grid-auto-flow: column;
        grid-auto-columns: 86%;
        gap: 14px;
        margin: 0 -20px;
        padding: 4px 20px 18px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        scrollbar-width: none;
    }
    .tm-grid::-webkit-scrollbar { display: none; }
    .tm-card { scroll-snap-align: start; }
}

@media (min-width: 680px) { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tm-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #fff;
    box-shadow: var(--ab-shadow-soft), inset 0 0 0 1px var(--ab-line);
    scroll-margin-top: calc(var(--ab-header-h) + 16px);
}

.tm-card[hidden], .tm-quote[hidden] { display: none; }

.tm-photo { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--ab-aqua-soft); }
.tm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s ease, transform 0.6s ease; }
.tm-photo__alt { opacity: 0; }
.tm-photo.is-flipped .tm-photo__alt { opacity: 1; }
.tm-photo.is-flipped .tm-photo__main { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
    .tm-card:hover .tm-photo__alt { opacity: 1; }
    .tm-card:hover .tm-photo__main { opacity: 0; }
    .tm-card:hover .tm-photo img { transform: scale(1.03); }
}

.tm-flip {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    color: var(--ab-ink);
    box-shadow: 0 6px 16px rgba(11, 33, 53, 0.16);
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform 0.3s ease;
}

.tm-flip .ab-ico { width: 20px; height: 20px; }
.tm-flip[aria-pressed="true"] { transform: rotate(180deg); }

.tm-main p.tm-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ab-coral) 0%, var(--ab-coral-dark) 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 10px 22px rgba(240, 79, 90, 0.32);
}

.tm-body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 22px 22px 24px; }
.tm-body h3 { font-size: 1.6rem; letter-spacing: -0.03em; }
.tm-main p.tm-role { margin-top: -6px; color: var(--ab-muted); font-size: 0.92rem; font-weight: 600; }

.tm-main p.tm-exp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ab-aqua-soft);
    color: var(--ab-blue-dark);
    font-size: 0.88rem;
    font-weight: 700;
}

.tm-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.tm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px var(--ab-line);
    color: var(--ab-ink);
    font-size: 0.88rem;
    font-weight: 700;
    transition: box-shadow 0.18s ease, color 0.18s ease;
}

.tm-main a.tm-chip { color: var(--ab-ink); }
.tm-main a.tm-chip:hover { color: var(--ab-blue-dark); box-shadow: inset 0 0 0 1.5px var(--ab-blue); }
.tm-chip .ab-ico { width: 16px; height: 16px; color: var(--ab-coral); }

.tm-intro { color: var(--ab-text); font-size: 0.98rem; line-height: 1.6; }

.tm-voices {
    display: grid;
    gap: 10px;
    padding: 16px 16px 14px;
    border-radius: 16px;
    background: var(--ab-bg);
}

.tm-main p.tm-voices__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ab-blue-dark);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.tm-voices__label .ab-ico { width: 16px; height: 16px; }
.tm-quote { display: grid; gap: 6px; animation: tm-fade 0.35s ease; }
.tm-quote blockquote { margin: 0; color: var(--ab-ink); font-size: 0.97rem; font-weight: 500; line-height: 1.55; }
.tm-quote figcaption { color: var(--ab-muted); font-size: 0.8rem; font-weight: 600; }

@keyframes tm-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.tm-more {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ab-blue-dark);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
}

.tm-more .ab-ico { width: 15px; height: 15px; transition: transform 0.3s ease; }
.tm-more:hover .ab-ico { transform: rotate(90deg); }

.tm-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 6px;
}

.tm-main p.tm-count {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    flex: 1 1 160px;
    color: var(--ab-muted);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
}

.tm-count .ab-ico { width: 16px; height: 16px; margin-top: 1px; color: #f5a623; fill: #f5a623; }
.tm-main .ab-btn.tm-book { min-height: 46px; padding: 0 22px; font-size: 0.95rem; }

/* the instructor: a wide card on large screens */
@media (min-width: 1080px) {
    .tm-card--featured { grid-column: 1 / -1; flex-direction: row; }
    .tm-card--featured .tm-photo { flex: 0 0 38%; aspect-ratio: auto; min-height: 420px; }
    .tm-card--featured .tm-photo img { object-position: 50% 18%; }
    .tm-card--featured .tm-body { padding: 34px 38px; }
    .tm-card--featured .tm-body h3 { font-size: 2.2rem; }
    .tm-card--featured .tm-intro { font-size: 1.06rem; max-width: 640px; }
}

.tm-main p.tm-footnote { max-width: 760px; margin-top: 22px; color: var(--ab-muted); font-size: 0.84rem; line-height: 1.5; }

/* ---------- one standard ---------- */
.tm-main .tm-standard__link { margin-top: clamp(22px, 3vw, 32px); }

/* ---------- studios ---------- */
.tm-studios__grid { display: grid; gap: 14px; }

@media (min-width: 620px) { .tm-studios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .tm-studios__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tm-studio {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: var(--ab-radius);
    background: var(--ab-bg);
    box-shadow: inset 0 0 0 1px var(--ab-line);
}

.tm-studio__head { display: flex; align-items: flex-start; gap: 12px; }
.tm-studio__head h3 { font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.015em; }
.tm-studio__head p { margin-top: 3px; color: var(--ab-muted); font-size: 0.86rem; line-height: 1.4; }
.tm-studio__head .ab-tile { width: 42px; height: 42px; border-radius: 12px; background: #fff; }

.tm-main p.tm-studio__rating { display: inline-flex; align-items: center; gap: 6px; color: var(--ab-ink); font-size: 0.88rem; font-weight: 700; }
.tm-studio__rating .ab-ico { width: 16px; height: 16px; color: #f5a623; fill: #f5a623; }

.tm-faces { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.tm-faces a { display: grid; justify-items: center; gap: 4px; color: var(--ab-ink); font-size: 0.78rem; font-weight: 700; }
.tm-faces img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(11, 33, 53, 0.12); transition: transform 0.18s ease; }
.tm-faces a:hover img { transform: translateY(-2px); }

.tm-studio__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--ab-blue-dark);
    font-size: 0.92rem;
    font-weight: 800;
}

.tm-main a.tm-studio__link { color: var(--ab-blue-dark); }
.tm-studio__link .ab-ico { width: 16px; height: 16px; transition: transform 0.18s ease; }
.tm-studio__link:hover .ab-ico { transform: translateX(3px); }

/* ---------- a small team (citiwell.rs): two specialists ---------- */
.tm-mosaic--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; justify-self: center; }
.tm-mosaic--duo li:nth-child(3n + 2) { transform: none; }
.tm-mosaic--duo li:nth-child(2n) { transform: translateY(22px); }
@media (max-width: 900px) { .tm-mosaic--duo { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }
@media (min-width: 680px) { .tm-grid--duo { max-width: 940px; margin-inline: auto; } }
@media (min-width: 1080px) { .tm-grid--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 679px) { .tm-grid--duo { grid-auto-flow: row; grid-auto-columns: auto; margin: 0; padding: 0; overflow: visible; } }
@media (min-width: 620px) { .tm-studios__grid--one { grid-template-columns: minmax(0, 420px); } }

@media (prefers-reduced-motion: reduce) {
    .tm-photo img, .tm-flip, .tm-quote, .tm-more .ab-ico { transition: none; animation: none; }
}