/*
 * Tabs: a centred heading, the tab bar (a scrolling row with arrows on phones), then the
 * active tab's panel (image and text side by side, stacked on tablets and phones).
 * Tab looks: Classic (dark, gold line), Underline, Pill (grey bar; one pill moves between
 * tabs). Panels: Open or Card (coloured text side, framed image).
 *
 * Colours: the block's colour theme (tokens.css .theme-*), always the same shades:
 *   pill bar: neutral-100, a tab under the pointer neutral-200 (whatever the theme), the selected pill 600 (white text)
 *   indicator 500 · panel subheadings 600 (200 on dark)
 *   underline tabs: selected 700, hovered 300 (on dark: 600 and 800)
 *   card text side 100 · card image side 900 · panel icon 800 on a 50 box
 */

.blk--tabs {
    --tabs-surface: var(--neutral-100);
    --tabs-fade: var(--black);
    --tabs-arrow: var(--white);
    --tabs-line: linear-gradient(95deg, var(--theme-200) 0%, var(--theme-400) 49.76%, var(--theme-200) 100%);
    --tabs-pill: var(--theme-600);
    --tabs-pill-text: var(--white);         /* 600 takes white text (the site’s text rule) */
    --tabs-indicator: var(--theme-500);   /* the selected tab's line or bar */
    --card-text-bg: var(--theme-100);
    --card-media-bg: var(--theme-900);
    --tabs-media-radius: 0px;
    text-align: center;
}

.blk--tabs:not(.tabs--classic) {
    --tabs-fade: var(--white);
    --tabs-arrow: var(--black);
}

.blk--tabs:not(.tabs--classic).tabs--open {
    --tabs-media-radius: var(--radius);
}

/* ---------- Heading ---------- */

.tabs__heading {
    --heading-width: 700px;
    --body-width: 700px;
}

.tabs__heading .text-group__heading,
.tabs__heading .text-group__body {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Tab bar (+ phone carousel, arrows added by script.js) ---------- */

.tabs__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 64px 0 56px;
}

.tabs__bar:first-child {
    margin-top: 0;
}

.tabs__list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar {
    display: none;
}

.tabs__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tabs-arrow);
    cursor: pointer;
}

.tabs__arrow--prev {
    left: calc(-50vw + 50%);
    background: linear-gradient(270deg, transparent 0%, var(--tabs-fade) 60%);
}

.tabs__arrow--next {
    right: calc(-50vw + 50%);
    background: linear-gradient(90deg, transparent 0%, var(--tabs-fade) 60%);
}

.tabs__arrow svg {
    width: 22px;
    height: 22px;
}

.tabs__arrow--prev svg {
    transform: scaleX(-1);
}

.tabs__arrow.is-off {
    opacity: 0;
    visibility: hidden; /* out of the keyboard order too */
    pointer-events: none;
}

@media (min-width: 861px) {
    .tabs__list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        overflow-x: visible;
    }

    .tabs__arrow {
        display: none;
    }
}

/* Classic (dark tabs, gold line under the active one) */
.tabs__tab {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: 166px;
    min-height: 50px;
    padding: 13px 20px;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: var(--neutral-900);
    color: var(--neutral-200);
    font: inherit;
    font-size: 16px;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.tabs__tab:focus-visible {
    outline: 2px solid var(--theme-600);
    outline-offset: 2px;
}

.tabs__tab.is-active,
.tabs__tab:hover {
    color: var(--white);
    border-image-source: var(--tabs-line);
    border-image-slice: 1;
}

@media (max-width: 860px) {
    .tabs__tab {
        min-width: 0;
        min-height: 0;
        padding: 16px 13px;
    }
}

/* Underline */
.tabs--underline .tabs__tab {
    position: relative;
    flex-wrap: nowrap;
    min-width: 130px;
    min-height: 0;
    padding: 12px 32px;
    background: var(--tabs-surface);
    color: var(--neutral-800);
    font-size: 14px;
}

.tabs--underline .tabs__tab:hover {
    color: var(--black);
    border-image: none;
}

/* The line under a tab: its own layer, 3px tall, growing up from the tab's bottom edge.
   Hovered (not selected): half height (2px) in the hover colour. Selected: it grows to full
   height (3px), turning the selected colour; the previous tab's line shrinks away meanwhile. Colours: --tabs-underline / --tabs-underline-hover. */
.tabs--underline .tabs__tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--tabs-underline-hover);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .2s ease-in, background-color .2s ease;
    pointer-events: none;
}

.tabs--underline .tabs__tab:not(.is-active):hover::after {
    transform: scaleY(.6667); /* 2px */
    transition: transform .2s ease-out, background-color .2s ease;
}

.tabs--underline .tabs__tab.is-active::after {
    background: var(--tabs-underline);
    transform: scaleY(1);
    transition: transform .25s ease-out, background-color .3s ease;
}

.tabs--underline .tabs__tab.is-active,
.tabs--underline .tabs__tab.is-active:hover {
    color: var(--black);
    border-image: none;
    border-bottom-color: transparent;
}

/* Pill (a grey bar with rounded tabs and icons) */
.tabs--pill .tabs__bar {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.tabs--pill .tabs__list {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px;
    gap: 4px;
    border-radius: var(--pill);
    background: var(--tabs-surface);
}

.tabs--pill .tabs__tab {
    flex-wrap: nowrap;
    min-width: 0;
    min-height: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--pill);
    background: transparent;
    color: var(--black);
    font-size: 14px;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.tabs--pill .tabs__tab:not(.is-active):hover {
    border-image: none;
    color: var(--black);
    background: var(--neutral-200);
}

.tabs--pill .tabs__tab.is-active {
    border-image: none;
    color: var(--tabs-pill-text);
    background: var(--tabs-pill);
}

.tabs--pill.tabs--indicator-fade .tabs__tab {
    transition: background-color .2s ease-in, color .2s ease-in;
}

.tabs--pill.tabs--indicator-fade .tabs__tab.is-active {
    transition: background-color .3s ease-out .15s, color .3s ease-out .15s;
}

/* On phones the arrows sit inside the bar */
.tabs--pill .tabs__arrow {
    --tabs-fade: var(--tabs-surface);
}

.tabs--pill .tabs__arrow--prev {
    left: 0;
    border-radius: var(--pill) 0 0 var(--pill);
}

.tabs--pill .tabs__arrow--next {
    right: 0;
    border-radius: 0 var(--pill) var(--pill) 0;
}

/* The moving pill (script.js): one pill for the row, with a white copy of the labels
   clipped to its shape every frame, so labels are white only where it covers them. */
.tabs--worm .tabs__list {
    position: relative;
}

.tabs--worm .tabs__tab {
    position: relative;
    z-index: 1;
}

.tabs--worm .tabs__tab.is-active {
    background: transparent;
    color: var(--black);
}

.tabs__worm {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: var(--pill);
    background: var(--tabs-pill);
    pointer-events: none;
    will-change: transform, width;
}

.tabs__worm-labels {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    clip-path: inset(0 100% 100% 0);
    background: var(--tabs-pill); /* so the dark labels below don't fringe the white ones */
    pointer-events: none;
}

.tabs__worm-labels > .tabs__tab {
    position: absolute;
    margin: 0;
    background: transparent;
    color: var(--tabs-pill-text);
    letter-spacing: normal; /* as the buttons they copy (a span would take the page's spacing), so no label shifts under the pill */
    transition: none;
}

/* Icons: drawn as a mask in the text colour, whatever colour the uploaded SVG is */
.tabs__icon {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: var(--tabs-icon-colour, currentColor);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

/* ---------- Panels ---------- */

.tabs__panels {
    position: relative;
}

/* Touch: sideways swipes on the panels change tab (script.js); up and down, and pinching,
   stay the browser's */
.tabs__panels {
    touch-action: pan-y pinch-zoom;
}

.tabs__panel {
    display: none;
    text-align: left;
}

.tabs__panel.is-active {
    display: block;
}

.tabs__panel:focus-visible {
    outline: 2px solid var(--theme-600);
    outline-offset: 4px;
}

/* Sliding panels: the outgoing one is laid over the incoming one while both move */
.tabs__panel.is-leaving {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.tabs__panel-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.tabs__media,
.tabs__text {
    width: 50%;
    max-width: 600px;
}

.tabs__media {
    position: relative;
}

.tabs__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* every tab the same shape, whatever the photo's proportions */
    object-fit: cover;
    object-position: var(--img-pos, 50% 50%); /* the tab's Image position */
    border-radius: var(--tabs-media-radius);
}

/* The new tab's image fading in over the old one, during a switch */
.tabs__media .tabs__overlay-img {
    position: absolute;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
}

.tabs__text .text-group__subheading {
    width: 100%;
    margin-bottom: var(--subheading-gap);
}

.tabs__title {
    width: 100%;
    margin: 0;
}

.tabs__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
}

.tabs__body > * {
    margin: 0;
}

.tabs__button {
    margin-top: 32px;
}

.tabs__text.is-shifting {
    overflow: hidden;
}

@media (min-width: 1025px) {
    .tabs--media-right .tabs__media {
        order: 2;
    }
}

/* Card panels */
.tabs--card .tabs__panel-inner {
    align-items: stretch;
    gap: 0;
    border-radius: var(--radius);
    overflow: hidden;
}

.tabs--card :is(.tabs__text, .tabs__media) {
    width: 50%;
    max-width: none;
}

.tabs--card .tabs__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 40px;
    background: var(--card-text-bg);
    color: var(--neutral-800);
}

.tabs--card .tabs__text :is(h3, p, li) {
    color: var(--black);
}

.tabs--card .tabs__title {
    font-size: 24px;
    line-height: 1.25;
}

.tabs--card .tabs__body {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.6;
}

.tabs__panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
    border-radius: var(--radius);
    background: var(--theme-50);
    --tabs-icon-colour: var(--theme-800);
}

/* The panel's icon, much larger than the one in its tab */
.tabs__panel-icon .tabs__icon {
    width: 40px;
    height: 40px;
}

@media (max-width: 600px) {
    .tabs__panel-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 20px;
    }

    .tabs__panel-icon .tabs__icon {
        width: 32px;
        height: 32px;
    }
}

.tabs--card .tabs__media {
    display: flex;
    align-items: center;
    padding: 20px;
    background: var(--card-media-bg);
}

.tabs--card .tabs__media img {
    height: auto;
}

/* Desktop: the image fills its side's full height when the text side is taller (narrower
   windows), cropping to fit; it's never shorter than its usual 16:9 (the ::before keeps that) */
@media (min-width: 1025px) {
    .tabs--card .tabs__media {
        position: relative;
    }

    .tabs--card .tabs__media::before {
        content: '';
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .tabs--card .tabs__media > img:not(.tabs__overlay-img) {
        position: absolute;
        inset: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        aspect-ratio: auto;
    }
}

/* Equal heights: the panel area keeps the tallest panel's height (set by script.js);
   the open panel stretches to fill it, its content centred. */
.tabs--equal .tabs__panels {
    display: flex;
    flex-direction: column;
}

.tabs--equal .tabs__panel.is-active {
    display: flex;
    flex: 1 1 auto;
}

.tabs--equal .tabs__panel-inner {
    flex: 1 1 auto;
    align-items: center;
}

.tabs--equal.tabs--card .tabs__panel-inner {
    align-items: stretch;
}

/* Desktop, open panels: the image fills the row's height beside taller text (cropping to
   fit; never shorter than 16:9, kept by the ::before), the text centred beside it */
@media (min-width: 1025px) {
    .tabs--open .tabs__panel-inner {
        align-items: stretch;
    }

    .tabs--open .tabs__text {
        align-self: center;
    }

    .tabs--open .tabs__media::before {
        content: '';
        display: block;
        aspect-ratio: 16 / 9;
    }

    .tabs--open .tabs__media > img:not(.tabs__overlay-img) {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
    }
}

/* Tablets and phones: stacked, text first unless the image is set to go above */
@media (max-width: 1024px) {
    .tabs__panel-inner {
        flex-direction: column;
        max-width: 600px;
        margin-inline: auto; /* centred under the tabs */
        gap: 40px;
    }

    .tabs__text,
    .tabs__media,
    .tabs--card :is(.tabs__text, .tabs__media) {
        width: 100%;
        max-width: none;
    }

    .tabs__text {
        order: 1;
    }

    .tabs__media {
        order: 2;
    }

    .tabs--media-above .tabs__media {
        order: 0;
    }

    .tabs--card .tabs__panel-inner {
        max-width: none;
        gap: 0;
        justify-content: flex-start;
    }

    /* Equal heights: any extra height goes to the text side, so it meets the image with no gap */
    .tabs--card .tabs__text {
        flex: 1 1 auto;
    }

    /* Open panels with equal heights: the extra height goes to the image instead, which grows
       to fill it (never shorter than 16:9) */
    .tabs--equal.tabs--open .tabs__panel-inner {
        justify-content: flex-start;
    }

    .tabs--equal.tabs--open .tabs__media {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .tabs--equal.tabs--open .tabs__media::before {
        content: '';
        display: block;
        aspect-ratio: 16 / 9;
    }

    .tabs--equal.tabs--open .tabs__media > img:not(.tabs__overlay-img) {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
    }
}

@media (max-width: 860px) {
    .tabs__panel-inner {
        gap: 32px;
    }

    .tabs--card .tabs__panel-inner {
        gap: 0;
    }

    .tabs--card .tabs__text {
        padding: 24px 16px;
    }

    .tabs--card .tabs__media {
        padding: 16px;
    }

    .tabs--pill .tabs__bar {
        margin-top: 40px;
        margin-bottom: 24px;
    }

    .tabs--pill .tabs__bar:first-child {
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .tabs__button,
    .tabs__button .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tabs--underline .tabs__tab::after,
    .tabs--underline .tabs__tab.is-active::after {
        transition: none;
    }
}

/* ---------- Entrance (script.js) ----------
   Everything comes in with the heading: the heading rises in; the tabs follow it one
   after another (the Pill bar grows out from its centre, its tabs fading in from the
   middle outwards, then the pill); the panel comes in with them (Card backgrounds first,
   the image settling in with the masked zoom, the text in from the left, part by part). */

.blk--tabs {
    --tabs-stagger: .08s;
    --tabs-lag: .2s;            /* tabs after the heading starts */
    --tabs-panel-lag: .35s;     /* the panel after the heading starts */
    --tabs-card-fade: .5s;
}

.blk--tabs.tabs--card {
    --tabs-content-lag: calc(var(--tabs-card-fade) * .8);
}

.blk--tabs.rv .tabs__heading,
.blk--tabs.rv:not(.rv-in) .tabs__list > .tabs__tab,
.blk--tabs.rv :is(.tabs__worm, .tabs__worm-labels),
.blk--tabs.rv .tabs__text > *,
.blk--tabs.rv .tabs__media > img:not(.tabs__overlay-img) {
    opacity: 0;
}

.blk--tabs.rv .tabs__heading {
    transform: translateY(var(--reveal-rise));
}

.blk--tabs.rv.tabs--pill .tabs__bar {
    clip-path: inset(0 50% round var(--pill));
}

.blk--tabs.rv .tabs__text > * {
    translate: calc(var(--reveal-shift) * -.6) 0;
}

/* Masked zoom (the entrance, and switches in script.js): --mz drives the scale and the clip */
.blk--tabs .tabs__media > img {
    scale: var(--mz);
    clip-path: inset(calc((1 - 1 / var(--mz)) * 50%) round calc(var(--tabs-media-radius) / var(--mz)));
}

.blk--tabs.rv .tabs__media > img:not(.tabs__overlay-img) {
    --mz: var(--reveal-zoom);
}

.blk--tabs.rv.tabs--card :is(.tabs__text, .tabs__media) {
    background-color: transparent;
}

.blk--tabs.rv-armed .tabs__heading {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--reveal-ease);
}

/* The tabs: a one-off animation (so their own colour transitions are left alone) */
.blk--tabs.rv.rv-in .tabs__list > .tabs__tab {
    animation: tabs-tab-in calc(var(--reveal-text) * .6) var(--reveal-ease) backwards;
    animation-delay: calc(var(--tabs-lag) + var(--rv-i, 0) * var(--tabs-stagger));
}

.blk--tabs.rv.rv-in.tabs--pill .tabs__list > .tabs__tab {
    animation-name: tabs-pill-tab-in;
    animation-delay: calc(var(--tabs-lag) + .15s + var(--rv-i, 0) * var(--tabs-stagger));
}

@keyframes tabs-tab-in {
    from {
        opacity: 0;
        translate: 0 calc(var(--reveal-rise) * .5);
    }
}

@keyframes tabs-pill-tab-in {
    from { opacity: 0; }
}

.blk--tabs.rv-armed.tabs--pill .tabs__bar {
    transition: clip-path .6s var(--reveal-ease) var(--tabs-lag);
}

.blk--tabs.rv-armed :is(.tabs__worm, .tabs__worm-labels) {
    transition: opacity .4s ease calc(var(--tabs-lag) + .55s);
}

.blk--tabs.rv-armed.tabs--card :is(.tabs__text, .tabs__media) {
    transition: background-color var(--tabs-card-fade) ease var(--tabs-panel-lag);
}

.blk--tabs.rv-armed .tabs__text > * {
    --rv-text-delay: calc(var(--tabs-panel-lag) + var(--tabs-content-lag, 0s) + var(--rv-t, 0) * .08s);
    transition:
        opacity var(--reveal-text) ease var(--rv-text-delay),
        translate var(--reveal-text) var(--reveal-ease) var(--rv-text-delay);
}

.blk--tabs.rv-armed .tabs__media > img:not(.tabs__overlay-img) {
    transition:
        opacity calc(var(--reveal-media) * .75) ease calc(var(--tabs-panel-lag) + var(--tabs-content-lag, 0s)),
        --mz var(--reveal-media) var(--reveal-ease) calc(var(--tabs-panel-lag) + var(--tabs-content-lag, 0s));
}

.blk--tabs.rv.rv-in .tabs__heading,
.blk--tabs.rv.rv-in :is(.tabs__worm, .tabs__worm-labels),
.blk--tabs.rv.rv-in .tabs__text > * {
    opacity: 1;
    transform: none;
    translate: none;
}

.blk--tabs.rv.rv-in.tabs--pill .tabs__bar {
    clip-path: inset(0 0 round var(--pill));
}

.blk--tabs.rv.rv-in.tabs--card .tabs__text {
    background-color: var(--card-text-bg);
}

.blk--tabs.rv.rv-in.tabs--card .tabs__media {
    background-color: var(--card-media-bg);
}

.blk--tabs.rv.rv-in .tabs__media > img:not(.tabs__overlay-img) {
    opacity: 1;
    --mz: 1;
}

/* Each panel's subheading (e.g. "Our clinic") in the theme colour */
.tabs__panel .text-group__subheading {
    color: var(--theme-600);
}

.is-dark .tabs__panel .text-group__subheading,
.blk--tabs.is-dark .tabs__panel .text-group__subheading {
    color: var(--theme-200);
}

/* Underline tabs: the selected tab's line, and a hovered tab's */
.tabs--underline {
    --tabs-indicator: var(--theme-600);
    --tabs-underline: var(--theme-700);
    --tabs-underline-hover: var(--theme-300);
}

.is-dark .tabs--underline,
.tabs--underline.is-dark {
    --tabs-indicator: var(--theme-200);
    --tabs-underline: var(--theme-600);
    --tabs-underline-hover: var(--theme-800);
}