/*
 * SENZA Formations - public trainer page.
 *
 * Page level rules of the trainer profile, loaded right after design-system.css. The two column
 * layout, the hero card, the sticky sidebar and the review blocks have no shared component: they
 * live here. Every other piece is rendered by a Sz component and is not restyled.
 *
 * main.css turns every hovered <a> and <button> yellow at 0-1-1 (see the rule in
 * design-system.css): any classed link declared below pins its own hover colour.
 */

/*
 * Scroll anchoring off for this page only. When the theme fixes its header, the browser reacts to the
 * header leaving the page flow before the section-nav placeholder takes over its height, and shifts
 * the scroll position in the middle of a smooth scroll (measured: +175px then -57px at 375px).
 */
html {
    overflow-anchor: none;
}

/* =============================================================
   Breadcrumb and layout
   ============================================================= */

.sz-trainer .sz-trainer__breadcrumb {
    padding: 24px 0;
}

.sz-trainer__breadcrumb-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--tg-common-color-gray-3);
}

.sz-trainer__breadcrumb-link {
    font-weight: var(--tg-fw-semi-bold);
    color: var(--tg-heading-color);
}

.sz-trainer__breadcrumb-link:hover,
.sz-trainer__breadcrumb-link:focus-visible {
    color: var(--tg-theme-primary);
}

.sz-trainer__breadcrumb-current {
    font-weight: var(--tg-fw-semi-bold);
    color: var(--tg-theme-primary);
}

.sz-trainer__body {
    padding-bottom: 72px;
}

/*
 * Shared top of the sticky navigation bar and of the sticky sidebar. The section-nav controller
 * writes the measured height of the fixed theme header into --section-nav-header-height; 90px is
 * the value measured on desktop, used until the header is fixed.
 */
.sz-trainer__layout {
    --sz-trainer-sticky-top: calc(var(--section-nav-header-height, 90px) + 6px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 36px;
    align-items: start;
}

.sz-trainer__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Groups the profile cards behind a single anchor. A real box, not display: contents, which could be
   neither scrolled to nor measured. */
.sz-trainer__group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Native anchor fallback without JavaScript: header plus navigation bar. */
.sz-trainer__main > [id] {
    scroll-margin-top: calc(var(--sz-trainer-sticky-top) + 70px);
}

/* A tab moves the focus to its section for keyboard users: no outline when the tab was clicked. */
.sz-trainer__main > [id]:focus:not(:focus-visible) {
    outline: none;
}

/* =============================================================
   Section navigation
   ============================================================= */

/* The lilac background and the overflowing gutters hide the cards and their hard shadows while they
   scroll under the bar. It sticks right against the header rather than at the shared sticky top:
   the 6px gap would otherwise show a strip of the card scrolling behind. The larger top padding
   keeps the tabs level with the top of the sidebar. */
.sz-trainer-nav {
    position: sticky;
    top: var(--section-nav-header-height, 90px);
    z-index: 5;
    display: flex;
    gap: 8px;
    margin: -16px -12px -10px;
    padding: 16px 12px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--tg-common-color-gray-2);
}

.sz-trainer-nav::-webkit-scrollbar {
    display: none;
}

.sz-trainer-nav__link {
    flex: none;
    padding: 10px 20px;
    border: 1px solid var(--tg-border-1);
    border-radius: var(--sz-radius-pill);
    background: var(--tg-common-color-white);
    font-family: var(--tg-heading-font-family);
    font-size: 14px;
    font-weight: var(--tg-fw-semi-bold);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--tg-heading-color);
    transition: all 0.2s ease;
}

.sz-trainer-nav__link:hover,
.sz-trainer-nav__link:focus-visible {
    border-color: var(--tg-theme-primary);
    color: var(--tg-theme-primary);
}

.sz-trainer-nav__link--active,
.sz-trainer-nav__link--active:hover,
.sz-trainer-nav__link--active:focus-visible {
    border-color: var(--tg-theme-primary);
    background: var(--tg-theme-primary);
    color: var(--tg-common-color-white);
    box-shadow: 3px 4px 0 0 var(--tg-common-color-blue);
}

/* =============================================================
   Hero
   ============================================================= */

.sz-trainer-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 32px;
    border-radius: var(--sz-radius-card);
    box-shadow: 6px 8px 0 0 var(--tg-common-color-blue);
}

.sz-trainer-hero::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(87, 81, 225, 0.2);
    pointer-events: none;
}

.sz-trainer-hero__photo {
    position: relative;
    flex: none;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: var(--sz-radius-card);
    box-shadow: 5px 6px 0 0 var(--tg-common-color-blue);
}

.sz-trainer-hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sz-trainer-hero__content {
    position: relative;
    min-width: 0;
}

.sz-trainer-hero__identity {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.sz-trainer-hero__certified {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tg-common-color-green);
    color: var(--tg-common-color-white);
}

.sz-trainer .sz-trainer-hero__name {
    margin: 0;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.1;
    color: var(--tg-common-color-white);
}

.sz-trainer-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.sz-trainer-hero .sz-trainer-hero__senza-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--tg-common-color-white);
}

.sz-trainer-hero__senza-badge svg {
    color: var(--tg-common-color-green);
}

.sz-trainer-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-trainer-hero__stat {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: var(--tg-fw-medium);
    color: var(--tg-common-color-white);
}

.sz-trainer-hero__stat-icon {
    flex: none;
    color: var(--tg-theme-secondary);
}

.sz-trainer .sz-trainer-hero__joined {
    margin: 14px 0 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.75);
}

/* =============================================================
   Content blocks
   ============================================================= */

.sz-trainer .sz-trainer-block {
    padding: 28px 32px;
}

.sz-trainer .sz-trainer-block--lead {
    padding: 34px 38px;
}

.sz-trainer .sz-trainer-block__title {
    margin: 0 0 16px;
    font-size: 20px;
}

.sz-trainer .sz-trainer-block--lead > .sz-trainer-block__title {
    font-size: 22px;
}

.sz-trainer-block__section + .sz-trainer-block__section {
    margin-top: 30px;
}

.sz-trainer .sz-trainer-block__subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 16px;
    color: var(--tg-heading-color);
}

.sz-trainer-block__subtitle svg {
    flex: none;
    color: var(--tg-theme-primary);
}

.sz-trainer .sz-trainer-block__text p {
    margin: 0 0 14px;
    line-height: 1.8;
}

.sz-trainer-block__text > :last-child {
    margin-bottom: 0;
}

.sz-trainer-areas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-trainer-areas__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--tg-common-color-gray-2);
}

.sz-trainer-areas__index {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--sz-radius-sm);
    background: var(--tg-common-color-white);
    font-family: var(--tg-heading-font-family);
    font-weight: var(--tg-fw-extra-bold);
    color: var(--tg-theme-primary);
}

.sz-trainer-areas__title {
    font-family: var(--tg-heading-font-family);
    font-size: 15px;
    font-weight: var(--tg-fw-semi-bold);
    color: var(--tg-heading-color);
}

.sz-trainer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sz-trainer .sz-trainer-tags__item {
    padding: 7px 15px;
    font-size: 12.5px;
}

.sz-trainer .sz-trainer-tags__item--neutral {
    background: var(--tg-common-color-gray-2);
    color: var(--tg-heading-color);
}

/* =============================================================
   Career and places
   ============================================================= */

.sz-trainer-career__description > :last-child {
    margin-bottom: 0;
}

.sz-trainer-career__period {
    margin-top: 10px;
    font-size: 13px;
    color: var(--tg-common-color-gray-3);
}

.sz-trainer-diplomas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-trainer-diploma {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--tg-border-3);
    border-radius: 12px;
}

.sz-trainer-diploma__title {
    font-family: var(--tg-heading-font-family);
    font-size: 15px;
    font-weight: var(--tg-fw-semi-bold);
    line-height: 1.4;
    color: var(--tg-heading-color);
}

.sz-trainer-diploma__institution {
    font-size: 14px;
    line-height: 1.5;
}

.sz-trainer .sz-trainer-diploma__year {
    align-self: flex-start;
    margin-top: 6px;
}

.sz-trainer-places {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-trainer-places__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sz-trainer-places__picture {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
}

.sz-trainer-places__name {
    font-family: var(--tg-heading-font-family);
    font-size: 14.5px;
    font-weight: var(--tg-fw-semi-bold);
    color: var(--tg-heading-color);
}

/* =============================================================
   Reviews
   ============================================================= */

.sz-trainer-rating {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    margin-bottom: 24px;
    padding: 20px 24px;
    border-radius: 12px;
    background: var(--tg-common-color-gray-2);
}

.sz-trainer-rating__summary {
    text-align: center;
}

.sz-trainer-rating__value {
    font-family: var(--tg-heading-font-family);
    font-size: 40px;
    font-weight: var(--tg-fw-extra-bold);
    line-height: 1;
    color: var(--tg-heading-color);
}

.sz-trainer-rating__count {
    margin-top: 6px;
    font-size: 13px;
}

.sz-trainer-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 16px;
    line-height: 1;
    color: var(--tg-theme-secondary);
}

.sz-trainer-stars__star--off {
    color: var(--tg-border-1);
}

.sz-trainer-rating__distribution {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-trainer-rating__row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.sz-trainer-rating__bar {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tg-common-color-white);
}

.sz-trainer-rating__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--tg-theme-secondary);
}

.sz-trainer-review-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-trainer-review {
    padding: 18px 0;
    border-top: 1px solid var(--tg-border-3);
}

.sz-trainer-review:first-child {
    padding-top: 0;
    border-top: none;
}

.sz-trainer-review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 6px;
}

.sz-trainer-review__author {
    font-family: var(--tg-heading-font-family);
    font-size: 15px;
    font-weight: var(--tg-fw-semi-bold);
    color: var(--tg-heading-color);
}

.sz-trainer-review__date {
    font-size: 13px;
    color: var(--tg-common-color-gray-3);
}

.sz-trainer .sz-trainer-review__comment {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.7;
}

.sz-trainer .sz-trainer-reviews__empty {
    margin: 0;
}

.sz-trainer-review-feed__more {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.sz-trainer-reviews__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

/* =============================================================
   Sidebar
   ============================================================= */

/*
 * A sticky column taller than the viewport keeps its bottom out of reach until the end of the
 * page: with a video and a long training list the financing block could not be seen. The column is
 * capped to the viewport and scrolls on its own; the compensated padding keeps the card shadows
 * from being clipped by the overflow.
 */
.sz-trainer-sidebar {
    position: sticky;
    top: var(--sz-trainer-sticky-top);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - var(--sz-trainer-sticky-top) - 16px);
    margin: -12px -12px 0;
    padding: 12px 12px 16px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Capped in height, the flex column would otherwise squeeze its blocks instead of scrolling. */
.sz-trainer-sidebar > * {
    flex-shrink: 0;
}

.sz-trainer-video {
    overflow: hidden;
    border-radius: var(--sz-radius-card);
    background: var(--tg-common-color-black-2);
    box-shadow: var(--sz-shadow-card);
}

.sz-trainer-video__label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: var(--tg-fw-bold);
    color: var(--tg-common-color-white);
}

/* The embed code stored in the back office is a raw Vimeo snippet: an iframe that is not
   responsive on its own must still fit the column. */
.sz-trainer-video__embed iframe {
    display: block;
    max-width: 100%;
}

.sz-trainer .sz-trainer-contact {
    padding: 24px;
    text-align: center;
    box-shadow: var(--sz-shadow-card);
}

.sz-trainer .sz-trainer-contact__title {
    margin: 0 0 4px;
    font-size: 17px;
}

.sz-trainer .sz-trainer-contact__text {
    margin: 0 0 18px;
    font-size: 13px;
}

.sz-trainer-contact__stats {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.sz-trainer-contact__stat {
    flex: 1;
    padding: 12px 6px;
    border-radius: 10px;
    background: var(--tg-common-color-gray-2);
}

.sz-trainer-contact__stat-value {
    display: block;
    font-family: var(--tg-heading-font-family);
    font-size: 17px;
    font-weight: var(--tg-fw-extra-bold);
    line-height: 1;
    color: var(--tg-theme-primary);
}

.sz-trainer-contact__stat-label {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--tg-common-color-gray-3);
}

.sz-trainer .sz-trainer-trainings {
    padding: 22px 24px;
}

.sz-trainer .sz-trainer-trainings__title {
    margin: 0 0 6px;
    font-size: 15px;
}

.sz-trainer-trainings__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Separator drawn above each item rather than below: once the list is collapsed, the last visible
   item is not the last child, and a bottom border would leave a stray line above the toggle. */
.sz-trainer-trainings__link {
    display: block;
    padding: 13px 0;
    border-top: 1px solid var(--tg-border-3);
    font-size: 14px;
    font-weight: var(--tg-fw-semi-bold);
    line-height: 1.45;
    color: var(--tg-heading-color);
}

.sz-trainer-trainings__item:first-child .sz-trainer-trainings__link {
    border-top: none;
}

.sz-trainer .sz-trainer-trainings__toggle {
    margin-top: 10px;
}

.sz-trainer-trainings__link:hover,
.sz-trainer-trainings__link:focus-visible {
    color: var(--tg-theme-primary);
}

.sz-trainer-financing {
    padding: 20px 22px;
    border: 2px solid var(--tg-common-color-black-3);
    border-radius: var(--sz-radius-card);
    background: var(--tg-theme-secondary);
    color: var(--tg-heading-color);
}

.sz-trainer-financing__title {
    font-family: var(--tg-heading-font-family);
    font-size: 15px;
    font-weight: var(--tg-fw-bold);
}

.sz-trainer-financing__text {
    margin-top: 3px;
    font-size: 13px;
    opacity: 0.85;
}

/* =============================================================
   Responsive
   ============================================================= */

@media (max-width: 991px) {
    .sz-trainer__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sz-trainer-sidebar {
        position: static;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow-y: visible;
    }
}

@media (max-width: 575px) {
    .sz-trainer-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }

    .sz-trainer .sz-trainer-block,
    .sz-trainer .sz-trainer-block--lead {
        padding: 22px 20px;
    }

    .sz-trainer-rating {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
}