/*
 * TLP Team 5.x compatibility.
 *
 * The team plugin used to render Owl Carousel markup
 * (.tlp-team-container / .owl-stage / .owl-item / .owl-nav).
 * Version 5 renders Swiper markup instead
 * (.rt-team-container / .swiper-wrapper / .swiper-slide / .swiper-button-*).
 *
 * The layout templates in ../tlp-team/ already reproduce the old *inner*
 * markup, so custom-style.css keeps working. This file re-points the few
 * remaining rules that were tied to the old carousel class names, so the
 * design stays exactly as it was.
 *
 * Loaded after custom-style.css - see my_theme_enqueue_styles() in functions.php.
 */

/* ---- slide spacing (was .owl-stage / .owl-item rules) ---- */

/* IMPORTANT: these must stay scoped to carousel slides only.
   The old rules were scoped to .owl-stage, i.e. the carousel. Applying them
   to every .rt-team-container would turn the Mitglieder grid names white
   on a white background. Only carousel items carry .swiper-slide. */

.swiper-slide .team-member .single-team-area {
    padding: 2em;
    padding-bottom: 0 !important;
}

.swiper-slide .team-member .single-team-area .tlp-team-content {
    margin-top: 1rem;
}

.swiper-slide .team-member .single-team-area .tlp-team-content a {
    color: #fff !important;
}

.swiper-slide .team-member .single-team-area p {
    margin-bottom: 0 !important;
}

.swiper-slide .team-member {
    margin-top: 0 !important;
}

.swiper-slide .tlp-team-content .name:after {
    content: " ";
    display: none;
}

/* ---- navigation arrows (was .owl-prev / .owl-next) ---- */

/* The plugin parks both arrows in a black box above the slider
   (.top-nav .swiper-nav). Put them back at the left and right edge,
   level with the photos, with no box - as the Owl version had them. */
/* The plugin's own rules (.rt-carousel-holder.top-nav .swiper-nav) load after
   this file, so these need to be at least as specific to win. */
.rt-team-container .rt-carousel-holder.top-nav .swiper-nav,
.rt-team-container .rt-carousel-holder .swiper-nav {
    position: static !important;
    top: auto;
    right: auto;
    left: auto;
    margin-top: 0;
    width: auto;
    transform: none;
}

.rt-team-container .rt-carousel-holder .swiper-nav .swiper-arrow {
    position: absolute;
    top: 28%;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: none !important;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    z-index: 5;
}

.rt-team-container .rt-carousel-holder.top-nav .swiper-button-prev,
.rt-team-container .rt-carousel-holder .swiper-nav .swiper-button-prev {
    left: 0 !important;
    right: auto !important;
}

.rt-team-container .rt-carousel-holder.top-nav .swiper-button-next,
.rt-team-container .rt-carousel-holder .swiper-nav .swiper-button-next {
    right: 0 !important;
    left: auto !important;
}

/* Hide the plugin's chevron glyph and draw the long arrows instead. */
.rt-team-container .rt-carousel-holder .swiper-nav .swiper-arrow i {
    font-size: 0;
}

.rt-team-container .rt-carousel-holder .swiper-nav .swiper-arrow:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
    color: #fff;
}

.rt-team-container .rt-carousel-holder .swiper-nav .swiper-button-prev:before {
    content: '\f060';
}

.rt-team-container .rt-carousel-holder .swiper-nav .swiper-button-next:before {
    content: '\f061';
}

.rt-team-container .rt-carousel-holder .swiper-nav .swiper-arrow.swiper-button-disabled {
    opacity: .35;
}

/* Keep the arrows clear of the slides, as the old layout did. */
.rt-team-container.rt-pos-r {
    position: relative;
}

/* ---- container ---- */

/* The old rules were written for .tlp-team-container; keep the same
   spacing behaviour on the new container class. */
.rt-team-container .rt-row {
    margin-left: 0;
    margin-right: 0;
}

/* The plugin's own overlay/name styling never applies to our templates,
   but hide it defensively in case a layout we do not override is used. */
.rt-team-container .tlp-overlay1 .tlp-position a {
    color: inherit;
}

/* On the beige sections (front page carousel, Der Verband) the member names
   are white. Bootstrap would otherwise colour the links blue. The Mitglieder
   page is not .LICHT, so its dark names are untouched. */
.LICHT .rt-team-container .name,
.LICHT .rt-team-container .name a {
    color: #fff;
}

/* Der Verband: a last row that is not full sits centred, as before. */
.rt-team-container[data-layout="layout3"] .rt-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}