/* =========================================================
   ÓRGÃO ASSOCIATIVO
   COTEC PORTUGAL
========================================================= */


/* =========================================================
   VARIÁVEIS
========================================================= */

:root {
    --cotec-orgao-red: var(--cotec-color-red);
    --cotec-orgao-black: var(--cotec-color-black);
    --cotec-orgao-white: var(--cotec-color-white);

    --cotec-orgao-grey: var(--cotec-color-surface-soft);
    --cotec-orgao-grey-featured: var(--cotec-color-surface-soft);
    --cotec-orgao-hover: var(--cotec-color-surface-soft);

    --cotec-orgao-border: var(--cotec-color-border);
    --cotec-orgao-image-bg: var(--cotec-color-grey-2);
}


/* =========================================================
   RESET LOCAL
========================================================= */

.cotec-orgao-page,
.cotec-orgao-page *,
.cotec-orgao-page *::before,
.cotec-orgao-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   PÁGINA
========================================================= */

.cotec-orgao-page {
    width: 100%;

    margin: 0;
    padding: 0;

    color: var(--cotec-orgao-black);
    background: var(--cotec-orgao-white);

    font-family: var(--cotec-font-family);
}


/* =========================================================
   CONTAINER
========================================================= */

.cotec-orgao-container {
    width: 100%;

    margin: 0 auto;

    padding-left: clamp(24px, 10.5vw, 202px);
    padding-right: clamp(24px, 10.5vw, 202px);
}

/* =========================================================
   SMART SLIDER
========================================================= */

.cotec-team-slider {
    position: relative;

    width: 100vw;
    max-width: none;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding: 0;

    overflow: hidden;

    background: var(--cotec-orgao-black);
}

.cotec-team-slider > div {
    width: 100%;
    max-width: none;
}

/* =========================================================
   HEADER
========================================================= */

.cotec-orgao-header {
    width: 100%;

    padding-top: clamp(30px, 2.5vw, 70px);
    padding-bottom: clamp(34px, 3vw, 76px);

    background: var(--cotec-orgao-white);
}


.cotec-orgao-header__eyebrow {
    margin: 0 0 16px;

    color: var(--cotec-orgao-red);

    font-size: clamp(17px, 1.1vw, 22px);
    font-weight: 500;
    line-height: 1.2;
}


.cotec-orgao-header__title {
    width: 100%;
    max-width: 1421px;

    margin: 0 auto;

    color: var(--cotec-orgao-black);

    font-family: var(--cotec-font-family);
    font-size: 45px;
    font-weight: 400;
    line-height: 1.08;

    text-align: center;
}


/* =========================================================
   TÍTULOS
========================================================= */

.cotec-orgao-section-title,
.cotec-orgao-area__title {
    margin: 0;

    color: var(--cotec-orgao-black);

    font-size: clamp(30px, 2.2vw, 44px);
    font-weight: 700;
    line-height: 1.08;

    letter-spacing: -0.02em;
}


/* =========================================================
   SECÇÃO DE DESTAQUES
========================================================= */

.cotec-orgao-featured {
    width: 100%;

    padding: clamp(58px, 5vw, 96px) 0;

    background: var(--cotec-orgao-grey-featured);
}


/* =========================================================
   GRID DOS 2 DESTAQUES
========================================================= */

.cotec-orgao-featured__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-auto-rows: 1fr;

    align-items: stretch;

    gap: clamp(28px, 3vw, 58px);

    width: 100%;

    margin-top: 38px;
}


/* =========================================================
   ÁREAS
========================================================= */

.cotec-orgao-area {
    width: 100%;

    padding: clamp(60px, 5vw, 96px) 0;

    border-bottom: 1px solid var(--cotec-orgao-border);
}


.cotec-orgao-area:nth-child(even) {
    background: var(--cotec-orgao-grey);
}


.cotec-orgao-area__header {
    margin-bottom: clamp(15px, 2vw, 32px);
}


/* =========================================================
   GRID DOS MEMBROS
   DESKTOP = 6 COLUNAS
========================================================= */

.cotec-orgao-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    grid-auto-rows: 1fr;

    align-items: stretch;

    gap: clamp(15px, 2vw, 26px);

    width: 100%;
}


/* =========================================================
   CARD BASE
========================================================= */

.cotec-member-card {
    min-width: 0;
    height: 100%;
}


/* =========================================================
   BOTÃO / CARD
========================================================= */

.cotec-member-card__button {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 0;

    color: inherit;
    background: transparent;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 5px 15px rgb(0 0 0 / 10%);

    transition:
        background-color 250ms ease,
        box-shadow 250ms ease,
        transform 250ms ease;

    appearance: none;
}


/* =========================================================
   IMAGEM DOS CARDS NORMAIS
   QUADRADA
========================================================= */

.cotec-member-card__image {
    position: relative;

    display: block;
    flex: 0 0 auto;

    width: 100%;

    aspect-ratio: 1 / 1;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;

    background: var(--cotec-orgao-image-bg);

    line-height: 0;
    font-size: 0;
}


/* =========================================================
   PICTURE
========================================================= */

.cotec-member-card__image picture {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    line-height: 0;
}


/* =========================================================
   FOTOGRAFIA
========================================================= */

.cotec-member-card__image img,
.cotec-member-card__photo {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    vertical-align: top !important;

    transition: transform 300ms ease;
}


/* =========================================================
   CONTEÚDO DOS CARDS
========================================================= */

.cotec-member-card__content {
    display: flex;

    flex: 1 1 auto;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    padding: 20px;
}


/* =========================================================
   NOME
========================================================= */

.cotec-member-card__name {
    margin: 0;

    color: var(--cotec-orgao-black);

    font-size: clamp(20px, 1.25vw, 25px);
    font-weight: 700;
    line-height: 1.15;

    transition: color 250ms ease;
}


/* =========================================================
   CARGO
========================================================= */

.cotec-member-card__cargo {
    margin: 8px 0 0;

    color: var(--cotec-orgao-red);

    font-size: clamp(15px, 0.95vw, 18px);
    font-weight: 500;
    line-height: 1.35;

    transition: color 250ms ease;
}


/* =========================================================
   FUNÇÃO
========================================================= */

.cotec-member-card__function {
    margin: 5px 0 0;

    color: var(--cotec-color-muted);

    font-size: clamp(14px, 0.85vw, 16px);
    font-weight: 400;
    line-height: 1.4;

    transition: color 250ms ease;
}


/* =========================================================
   RESET APÓS CLIQUE
========================================================= */

.cotec-member-card__button:focus,
.cotec-member-card__button:active {
    color: inherit !important;
    background-color: transparent !important;
}


.cotec-member-card__button:focus
.cotec-member-card__name,

.cotec-member-card__button:active
.cotec-member-card__name {
    color: var(--cotec-orgao-black) !important;
}


.cotec-member-card__button:focus
.cotec-member-card__cargo,

.cotec-member-card__button:active
.cotec-member-card__cargo {
    color: var(--cotec-orgao-red) !important;
}


.cotec-member-card__button:focus
.cotec-member-card__function,

.cotec-member-card__button:active
.cotec-member-card__function {
    color: var(--cotec-color-muted) !important;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .cotec-member-card__button:hover {
        background-color: var(--cotec-orgao-hover) !important;

        box-shadow:
            0 12px 30px rgb(0 0 0 / 13%);
    }


    .cotec-member-card__button:hover
    .cotec-member-card__name,

    .cotec-member-card__button:hover
    .cotec-member-card__cargo,

    .cotec-member-card__button:hover
    .cotec-member-card__function {
        color: var(--cotec-orgao-black) !important;
    }


    .cotec-member-card__button:hover
    .cotec-member-card__image img,

    .cotec-member-card__button:hover
    .cotec-member-card__photo {
        transform: scale(1.035);
    }
}


/* =========================================================
   FOCUS ACESSIBILIDADE
========================================================= */

.cotec-member-card__button:focus-visible {
    position: relative;

    z-index: 2;

    outline: 3px solid var(--cotec-orgao-red);
    outline-offset: 4px;
}


/* =========================================================
   CARDS DE DESTAQUE
========================================================= */

.cotec-member-card--featured {
    min-width: 0;
    height: 100%;
}


/* =========================================================
   DESTAQUE — ESTRUTURA
========================================================= */

.cotec-member-card--featured
.cotec-member-card__button {
    display: grid;

    /*
     * Fotografia à esquerda.
     * Conteúdo à direita.
     */
    grid-template-columns:
        minmax(190px, 0.88fr)
        minmax(0, 1fr);

    align-items: center;

    width: 100%;
    height: 100%;

    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--cotec-orgao-white);

    box-shadow:
        0 8px 24px rgb(0 0 0 / 10%);
}


/* =========================================================
   DESTAQUE — FOTO
   RETANGULAR VERTICAL
========================================================= */

.cotec-member-card--featured
.cotec-member-card__image {
    position: relative;

    display: block;

    align-self: center;

    width: 100%;
    height: auto;

    min-width: 0;
    min-height: 0;

    max-width: none;
    max-height: none;

    /*
     * Vertical equilibrado.
     *
     * Exemplo:
     * 250px largura
     * 300px altura
     */
    aspect-ratio: 5 / 6;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--cotec-orgao-image-bg);

    line-height: 0;
    font-size: 0;
}


/* =========================================================
   DESTAQUE — PICTURE
========================================================= */

.cotec-member-card--featured
.cotec-member-card__image picture {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   DESTAQUE — FOTOGRAFIA
========================================================= */

.cotec-member-card--featured
.cotec-member-card__image img,

.cotec-member-card--featured
.cotec-member-card__photo {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;
}


/* =========================================================
   DESTAQUE — CONTEÚDO
========================================================= */

.cotec-member-card--featured
.cotec-member-card__content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    width: 100%;
    min-width: 0;

    padding:
        clamp(24px, 2.5vw, 44px);
}


/* =========================================================
   DESTAQUE — NOME
========================================================= */

.cotec-member-card--featured
.cotec-member-card__name {
    font-size:
        clamp(26px, 1.8vw, 36px);

    line-height: 1.08;

    letter-spacing: -0.025em;
}


/* =========================================================
   DESTAQUE — CARGO
========================================================= */

.cotec-member-card--featured
.cotec-member-card__cargo {
    margin-top: 10px;

    font-size:
        clamp(16px, 1vw, 19px);
}


/* =========================================================
   DESTAQUE — FUNÇÃO
========================================================= */

.cotec-member-card--featured
.cotec-member-card__function {
    margin-top: 7px;

    font-size:
        clamp(14px, 0.9vw, 17px);
}


/* =========================================================
   DESTAQUE — ESTADOS
========================================================= */

.cotec-member-card--featured
.cotec-member-card__button:focus,

.cotec-member-card--featured
.cotec-member-card__button:active {
    background-color: var(--cotec-orgao-white) !important;
}


@media (hover: hover) and (pointer: fine) {

    .cotec-member-card--featured
    .cotec-member-card__button:hover {
        background-color:
            var(--cotec-orgao-hover) !important;
    }
}


/* =========================================================
   MODAL
========================================================= */

.cotec-member-modal {
    width: min(1100px, calc(100% - 40px));
    max-width: none;

    max-height:
        min(820px, calc(100vh - 40px));

    margin: auto;
    padding: 0;

    overflow: visible;

    border: 0;

    color: var(--cotec-orgao-black);
    background: transparent;
}


.cotec-member-modal::backdrop {
    background:
        rgb(0 0 0 / 65%);

    backdrop-filter:
        blur(3px);
}


/* =========================================================
   MODAL — CAIXA
========================================================= */

.cotec-member-modal__box {
    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        var(--cotec-orgao-white);

    box-shadow:
        0 30px 80px rgb(0 0 0 / 30%);
}


/* =========================================================
   MODAL — GRID
========================================================= */

.cotec-member-modal__layout {
    display: grid;

    grid-template-columns:
        minmax(300px, 42%)
        minmax(0, 1fr);

    width: 100%;
}


/* =========================================================
   MODAL — IMAGEM
========================================================= */

.cotec-member-modal__image {
    position: relative;

    min-height: 540px;

    overflow: hidden;

    background: var(--cotec-color-grey-2);
}


.cotec-member-modal__photo {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 540px;

    max-width: none;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center center;
}


/* =========================================================
   MODAL — CONTEÚDO
========================================================= */

.cotec-member-modal__content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        clamp(42px, 5vw, 82px);

    background:
        var(--cotec-orgao-white);
}


/* =========================================================
   MODAL — ÁREA
========================================================= */

.cotec-member-modal__area {
    margin: 0 0 18px;

    color:
        var(--cotec-orgao-red);

    font-size:
        clamp(15px, 1vw, 19px);

    font-weight: 500;
    line-height: 1.3;
}


/* =========================================================
   MODAL — NOME
========================================================= */

.cotec-member-modal__name {
    margin: 0;

    color:
        var(--cotec-orgao-black);

    font-size:
        clamp(34px, 3vw, 58px);

    font-weight: 700;
    line-height: 1.04;

    letter-spacing: -0.03em;
}


/* =========================================================
   MODAL — CARGO
========================================================= */

.cotec-member-modal__cargo {
    margin: 22px 0 0;

    color:
        var(--cotec-orgao-black);

    font-size:
        clamp(19px, 1.3vw, 25px);

    font-weight: 500;
    line-height: 1.35;
}


/* =========================================================
   MODAL — FUNÇÃO
========================================================= */

.cotec-member-modal__function {
    margin: 10px 0 0;

    color: var(--cotec-color-muted);

    font-size:
        clamp(16px, 1vw, 20px);

    line-height: 1.5;
}


/* =========================================================
   MODAL — FECHAR
========================================================= */

.cotec-member-modal__close {
    position: absolute;

    z-index: 4;

    top: 18px;
    right: 18px;

    display: flex;

    width: 46px;
    height: 46px;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    color:
        var(--cotec-orgao-black);

    background:
        var(--cotec-orgao-white);

    box-shadow:
        0 4px 18px rgb(0 0 0 / 12%);

    font-size: 31px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    appearance: none;
}


.cotec-member-modal__close:hover,
.cotec-member-modal__close:focus-visible {
    color:
        var(--cotec-orgao-white);

    background:
        var(--cotec-orgao-red);
}


/* =========================================================
   TABLET GRANDE
========================================================= */

@media (max-width: 1000px) {

    /*
     * Restantes membros:
     * 6 -> 3 colunas
     */

    .cotec-orgao-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    /*
     * Os dois destaques continuam lado a lado,
     * mas cada card passa a fotografia em cima
     * e conteúdo em baixo.
     */

    .cotec-member-card--featured
    .cotec-member-card__button {
        grid-template-columns: 1fr;

        align-items: stretch;
    }


    .cotec-member-card--featured
    .cotec-member-card__image {
        width: 100%;
        height: auto;

        min-height: 0;

        aspect-ratio: 5 / 6;
    }


    .cotec-member-card--featured
    .cotec-member-card__content {
        padding:
            26px 24px 30px;
    }
}


/* =========================================================
   TABLET PEQUENO
========================================================= */

@media (max-width: 760px) {

    .cotec-orgao-container {
        padding-left: 24px;
        padding-right: 24px;
    }


    /*
     * Os dois destaques passam
     * a um card por linha.
     */

    .cotec-orgao-featured__grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    /*
     * Restantes membros:
     * 3 -> 2 colunas
     */

    .cotec-orgao-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /*
     * Destaques em mobile/tablet:
     * ligeiramente menos verticais para
     * não ficarem demasiado compridos.
     */

    .cotec-member-card--featured
    .cotec-member-card__image {
        aspect-ratio: 5 / 6;
    }


    /*
     * Modal vertical
     */

    .cotec-member-modal {
        width: calc(100% - 24px);

        max-height:
            calc(100vh - 24px);
    }


    .cotec-member-modal__box {
        max-height:
            calc(100vh - 24px);

        overflow-y: auto;
    }


    .cotec-member-modal__layout {
        grid-template-columns: 1fr;
    }


    .cotec-member-modal__image,
    .cotec-member-modal__photo {
        min-height: 0;
    }


    .cotec-member-modal__image {
        aspect-ratio: 4 / 3;
    }


    .cotec-member-modal__photo {
        height: 100%;
    }


    .cotec-member-modal__content {
        padding:
            30px 24px 36px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

    .cotec-orgao-container {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* Header */

    .cotec-orgao-header {
        padding-top: 34px;
        padding-bottom: 38px;
    }


    .cotec-orgao-header__title {
        font-size:
            clamp(34px, 10vw, 42px);
    }


    /* Destaques */

    .cotec-orgao-featured {
        padding-top: 48px;
        padding-bottom: 52px;
    }


    .cotec-orgao-featured__grid {
        margin-top: 28px;

        gap: 30px;
    }


    /*
     * Mais espaço lateral para
     * os cards de destaque.
     */

    .cotec-orgao-featured
    .cotec-orgao-container {
        padding-left:
            clamp(30px, 8vw, 40px);

        padding-right:
            clamp(30px, 8vw, 40px);
    }


    .cotec-member-card--featured
    .cotec-member-card__image {
        /*
         * Retrato vertical equilibrado
         */
        aspect-ratio: 5 / 6;
    }


    .cotec-member-card--featured
    .cotec-member-card__content {
        padding:
            24px 22px 28px;
    }


    .cotec-member-card--featured
    .cotec-member-card__name {
        font-size: 28px;
    }


    .cotec-member-card--featured
    .cotec-member-card__cargo {
        font-size: 16px;
    }


    .cotec-member-card--featured
    .cotec-member-card__function {
        font-size: 14px;
    }


    /* Restantes membros */

    .cotec-orgao-grid {
        gap: 30px 16px;
    }


    .cotec-member-card__content {
        padding: 16px;
    }


    .cotec-member-card__name {
        font-size: 18px;
    }


    .cotec-member-card__cargo {
        font-size: 14px;
    }


    .cotec-member-card__function {
        font-size: 13px;
    }


    /* Modal */

    .cotec-member-modal__content {
        padding:
            28px 22px 32px;
    }


    .cotec-member-modal__name {
        font-size: 34px;
    }


    .cotec-member-modal__cargo {
        margin-top: 16px;

        font-size: 18px;
    }


    .cotec-member-modal__function {
        font-size: 15px;
    }
}


/* =========================================================
   MOBILE PEQUENO
========================================================= */

@media (max-width: 380px) {

    .cotec-orgao-container {
        padding-left: 16px;
        padding-right: 16px;
    }


    .cotec-orgao-featured
    .cotec-orgao-container {
        padding-left: 28px;
        padding-right: 28px;
    }


    .cotec-member-card--featured
    .cotec-member-card__name {
        font-size: 26px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cotec-member-card__image img,
    .cotec-member-card__photo,
    .cotec-member-card__button,
    .cotec-member-card__name,
    .cotec-member-card__cargo,
    .cotec-member-card__function {
        transition: none !important;
    }
}