/* Teams and riders (Views/MultiOverviewTeamsOC2024.cshtml): placeholders, discipline filter,
   grid. Linked from the view, after foundation.css: .discBtn overrides Foundation's button colours. */

/* Placeholder shown when a team/rider has no actionImages.
   Pure-CSS silhouettes (no image asset needed):
   riders = single head & shoulders, teams = two overlapping figures. */

.sponsoredPlaceholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 240px;
    background: linear-gradient(160deg, #f5f6f8 0%, #e6e9ee 100%);
    border-radius: 6px;
    overflow: hidden;
}

/* --- Rider: single head & shoulders --- */

.riderSilhouette {
    position: relative;
    width: 150px;
    height: 150px;
}

.riderSilhouette::before {
    /* head */
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 56px;
    height: 56px;
    margin-left: -28px;
    background: #c2c8d1;
    border-radius: 50%;
}

.riderSilhouette::after {
    /* shoulders / bust */
    content: "";
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 128px;
    height: 82px;
    margin-left: -64px;
    background: #c2c8d1;
    border-radius: 64px 64px 0 0;
}

/* --- Team: two overlapping figures (front + one behind) --- */

.teamSilhouette {
    position: relative;
    width: 176px;
    height: 150px;
}

.teamSilhouette .ts-person {
    position: absolute;
    bottom: 8px;
}

.teamSilhouette .ts-person::before,
.teamSilhouette .ts-person::after {
    content: "";
    position: absolute;
    left: 50%;
    background: #c2c8d1;
}

.teamSilhouette .ts-person::before {
    /* head */
    top: 0;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    border-radius: 50%;
}

.teamSilhouette .ts-person::after {
    /* shoulders / bust */
    bottom: 0;
    width: 92px;
    height: 64px;
    margin-left: -46px;
    border-radius: 46px 46px 0 0;
}

.teamSilhouette .ts-front {
    left: 54px;
    width: 92px;
    height: 116px;
    z-index: 2;
}

.teamSilhouette .ts-back {
    left: 0;
    width: 92px;
    height: 116px;
    bottom: 18px;
    transform: scale(0.84);
    transform-origin: bottom center;
    opacity: 0.85;
    z-index: 1;
}

/* Discipline filter bar - reuses the standard (square) Foundation .button.
   Inactive = secondary grey, active = primary dark, matching the site palette. */

.disciplineFilter {
    margin: 18px 0 48px;
}

.disciplineFilter .discBtn {
    margin: 0 6px 10px;
}

.discBtn {
    background-color: #888;
    border-color: #6d6d6d;
    color: #fff;
}

.discBtn:hover,
.discBtn:focus {
    background-color: #6d6d6d;
}

.discBtn.active {
    background-color: #282828;
    border-color: #202020;
}

.discBtn.active:hover,
.discBtn.active:focus {
    background-color: #202020;
}

.TeamRow.discHidden {
    display: none;
}

/* Explore the Equipment grid: flexbox so uneven items still wrap into clean,
   clearing rows (replaces the float block-grid + equalizer). */

.ee-grid {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ee-grid > li {
    float: none !important;
    width: 33.333%;
    box-sizing: border-box;
    padding: 0 8px 16px;
    display: flex;
}

.ee-grid > li > a {
    display: flex;
    width: 100%;
}

.ee-grid .compound-featurebox {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.ee-grid .compound-featurebox img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.ee-grid .compound-featurebox p {
    margin-top: auto;
    overflow-wrap: anywhere; /* long German words (Bremsscheibendurchmesser) break inside a third of a phone */
}