/* Página de perfil — secção CLIENTES, texto corrido e fundo preto.
   Carregado só no template templates/profile.php (ver framework/options.php).
   O resto do site mantém o fundo #202023. */

.is-black,
.is-black .profile_wrapper,
.is-black .profile,
.is-black .footer--alt {
    background-color: #000;
}

/* Um pouco mais de ar entre secções do que o resto do site, como no layout */
.is-black .profile {
    padding: 42px 0;
}

/* Texto corrido: o WordPress guarda o texto em vários parágrafos, o layout mostra-o
   como um bloco só. O primeiro parágrafo é o título e fica em linha separada. */
.profile__text p {
    display: inline;
    /* o espaçamento lateral passa para o contentor: em linha, criava buracos no texto */
    padding: 0;
}

.profile__text {
    padding: 0 20px;
}

.profile__text p:first-child {
    display: block;
    margin-bottom: 1.5em;
}

/* ---------- clientes ----------
   Cada logótipo ocupa a largura que tem no layout (--w, em % da coluna de texto) e a
   linha é distribuída de ponta a ponta: o primeiro alinha à esquerda do texto, o
   último à direita. Os SVG têm a moldura recortada à arte na horizontal e 100
   unidades de altura, o que mantém as linhas uniformes e os logótipos centrados. */
.clients {
    padding: 0 20px;
}

.clients__row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cinco colunas iguais: a primeira encosta à esquerda do texto, a última à direita,
   as do meio ficam centradas na sua coluna (e portanto alinhadas entre linhas).

   A altura da moldura vem do padding (10.12% = 100 de 988 unidades da coluna de
   texto), não das proporções da imagem. O Safari não deduz as proporções de um SVG
   e, com height:auto, dava altura zero — os logótipos ficavam invisíveis. */
.clients__item {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    position: relative;
    padding-bottom: 10.12%;
}

.profile__container .clients__item img {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 100%;
    display: block;
    /* a largura vem do atributo style de cada imagem, em % da sua coluna */
}

.clients__item:first-child img {
    left: 0;
    -webkit-transform: none;
    transform: none;
}

.clients__item:last-child img {
    left: auto;
    right: 0;
    -webkit-transform: none;
    transform: none;
}

@media only screen and (min-width: 768px) {
    .is-black .profile {
        padding: 52px 0;
    }

    .clients,
    .profile__text {
        padding: 0;
    }
}

/* Em ecrãs estreitos, três por linha. As linhas de cinco do layout deixam de contar
   (display:contents) e os 20 logótipos voltam a distribuir-se de três em três.
   O mecanismo é o mesmo do desktop — moldura com altura dada pelo CSS —, só muda a
   largura da coluna: 1/3 em vez de 1/5, o que aumenta os logótipos na mesma proporção. */
@media only screen and (max-width: 767px) {
    .clients {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .clients__row {
        display: contents;
    }

    .clients__item {
        -ms-flex: 0 0 33.3333%;
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        /* altura da moldura: mantém a proporção com a coluna, agora mais larga */
        padding-bottom: 16.87%;
        margin-bottom: 4%;
    }

    /* aqui todos ficam centrados na sua coluna, incluindo o primeiro e o último
       de cada linha do layout */
    .clients__item:first-child img,
    .clients__item:last-child img {
        left: 50%;
        right: auto;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}