/* ═══════════════════════════════════════════════════════════
   PAOS — Estilos globais de componentes reutilizáveis
   Usado em: Áreas Tecnológicas, PAOS Academy e outras páginas
════════════════════════════════════════════════════════════ */


/* ── GRID — ÁREAS TECNOLÓGICAS ──────────────────────────────
   Layout responsivo de 3 colunas que colapsa automaticamente
   para 2 ou 1 coluna consoante o espaço disponível.
   Usa minmax com 95%/3 para garantir sempre ~3 colunas em desktop.
─────────────────────────────────────────────────────────── */
.grid-area-tecnologica {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100% / 1, max(200px, 95% / 3)), 1fr));
    gap: 2rem;
    margin-bottom: 80px;
}

/* Centraliza os cards dentro do grid de features */
.features {
    justify-items: center !important;
}

/* Impede que os cards fiquem mais estreitos que o container
   (corrige o espaço excessivo entre colunas em desktop) */
.features .feature-item {
    max-width: 100%;
}

/* Card individual das áreas tecnológicas */
.grid-item-area-tech {
    background-color: rgba(34, 42, 54, 0.5);
    border-radius: 15px;
    padding: 30px;
    height: 405px;
    display: flex;
    flex-direction: column;
    height: 100%; /* Garante altura igual entre cards na mesma linha */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Efeito de elevação ao hover — padrão em todos os cards interativos do site */
.grid-item-area-tech:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(74, 141, 194, 0.3);
    background-color: rgba(34, 42, 54, 0.7);
}


/* ── FEATURE ITEM — CARD GENÉRICO ───────────────────────────
   Usado em múltiplas secções: Processo, Missão, Vantagens, etc.
─────────────────────────────────────────────────────────── */
.feature-item {
    background-color: rgba(34, 42, 54, 0.5);
    border-radius: 15px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(74, 141, 194, 0.3);
    background-color: rgba(34, 42, 54, 0.7);
}

/* Lista dentro dos cards de áreas tecnológicas */
.grid-item-area-tech ul {
    margin-top: 2rem;
}

.grid-item-area-tech ul li {
    list-style: none;
    font-size: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════
   TESTEMUNHOS — CAROUSEL SPOTLIGHT
   Secção exclusiva da página PAOS Academy.
════════════════════════════════════════════════════════════ */

.testimonials-section {
    margin-top: 100px;
    margin-bottom: 150px;
}

/* Contentor do carousel — esconde os slides fora do viewport */
.t-carousel-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

/* Faixa horizontal com todos os slides lado a lado.
   O transform: translateX() é controlado pelo JS para navegar. */
.t-carousel-track {
    display: flex;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform; /* Hint ao browser para otimizar a animação */
}

/* Cada slide ocupa 100% da largura do wrapper */
.t-carousel-slide {
    min-width: 100%;
    padding: 0 4px;
}

/* Card principal do testemunho */
.t-spotlight-card {
    background: #1c2833;
    border-radius: 15px;
    padding: 48px 56px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Suporte Safari */
}

/* Pseudo-elemento desativado — reservado para futuro efeito de glow */
.t-spotlight-card::before {
    display: none;
}

/* Aspa decorativa de fundo — tamanho grande e opacidade baixa
   para não competir com o texto do testemunho */
.t-quote-icon {
    font-size: 120px;
    line-height: 1;
    color: rgba(40, 130, 198, 0.25);
    font-family: 'Times New Roman', serif;
    position: absolute;
    top: 10px;
    left: 40px;
    user-select: none;
    pointer-events: none;
    letter-spacing: -8px;
}

/* Texto do testemunho em itálico para distinguir da UI */
.t-text {
    font-size: clamp(1.5rem, 1.8vw, 1.9rem);
    color: #e8edf2;
    line-height: 1.7;
    margin-top: 40px; 
    margin-bottom: 36px;
    font-style: italic;
}

/* Rodapé do card com identidade do autor */
.t-author {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid rgba(78, 147, 207, 0.15); 
    padding-top: 24px;
}

/* Avatar com iniciais — substitui foto para proteger privacidade dos estagiários */
.t-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2882c6, #4e93cf);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
    flex-shrink: 0; 
    border: 2px solid rgba(78, 147, 207, 0.4);
}

.t-author-name {
    font-weight: 700;
    font-size: 1.6rem;
    color: #e8edf2;
}

/* Tipo de estágio e data em azul claro — hierarquia secundária */
.t-author-meta {
    font-size: 1.2rem;
    color: #4e93cf;
    font-style: italic;
    margin-top: 2px;
}


/* ── CONTROLOS DO CAROUSEL ───────────────────────────────────
   Setas de navegação e dots de paginação
─────────────────────────────────────────────────────────── */
.t-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 28px;
}

/* Botões seta — circular com borda subtil, consistente com o estilo dos outros botões do site */
.t-ctrl-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(78, 147, 207, 0.3);
    background: rgba(26, 32, 44, 0.6);
    color: #4e93cf;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    backdrop-filter: blur(8px);
    line-height: 1;
}

.t-ctrl-btn:hover {
    background: #2882c6;
    border-color: #2882c6;
    color: #fff;
}

.t-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Dot inativo — pequeno e discreto */
.t-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3a4a5e;
    cursor: pointer;
    transition: all .25s ease;
    border: none;
    padding: 0;
}

/* Dot ativo — alarga horizontalmente para indicar posição atual */
.t-dot.active {
    background: #4e93cf;
    width: 24px;
    border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

/* Carousel — ajuste de padding e tamanho da aspa em ecrãs pequenos */
@media (max-width: 768px) {
    .t-spotlight-card {
        padding: 36px 24px 28px;
    }
    .t-quote-icon {
        left: 20px;
        font-size: 60px;
    }
}

/* Áreas tecnológicas — 2 colunas em tablet */
@media screen and (max-width: 767px) {
    .grid-area-tecnologica {
        display: grid;
        grid-template-columns: repeat(2, minmax(40%, 1fr));
    }

    .grid-item-area-tech > h5 {
        font-size: 1.8rem;
    }
}

/* Áreas tecnológicas — 1 coluna em mobile pequeno */
@media screen and (max-width: 490px) {
    .grid-area-tecnologica {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Títulos h2 em mobile */
@media screen and (max-width: 576px) {
    h2 {
        font-size: 4.2rem;
        line-height: 1.2;
    }
}

/* Features — força 1 coluna em mobile para todos os grids da página */
@media screen and (max-width: 768px) {
    .features {
        grid-template-columns: 1fr !important;
        justify-items: center;
    }
}

/* Hero banner — empilha texto e imagem verticalmente em mobile */
@media (max-width: 768px) {
    .Custom-box {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    .image-placeholder {
        display: flex;
        justify-content: center;
    }

    .image-placeholder img {
        height: 200px;
    }
}

/* Timeline — converte layout horizontal em vertical para mobile.
   A linha azul passa a ser vertical (::before) e os círculos
   ficam posicionados absolutamente sobre ela. */
@media (max-width: 768px) {
    .timeline {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding-left: 0;
        background: none !important;
        height: auto !important;
        width: 100%;
    }

    /* Linha vertical da timeline em mobile */
    .timeline::before {
        content: "";
        position: absolute;
        left: 45px;
        top: 0;
        width: 3px;
        height: 109%;
        background: #2882c6;
    }

    .timeline-item {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 40px;
        padding-left: 75px;
        width: 100%;
    }

    /* Círculo posicionado sobre a linha vertical */
    .circle {
        position: absolute;
        left: 27px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        background: #6fa8dc;
        border-radius: 50%;
        z-index: 1;
    }

    .timeline-item p {
        margin: 0;
        width: 100%;
        position: relative;
        z-index: 2;
    }
}

/* Grid de 2 colunas — mantém 2 colunas até tablet (992px).
   Necessário porque o inline style seria sobrescrito pelo media query anterior. */
@media screen and (max-width: 992px) {
    .features[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Grid de 2 colunas — colapsa para 1 coluna em mobile pequeno */
@media screen and (max-width: 576px) {
    .features[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    .feature-item {
        max-width: 100%;
        width: 100%;
    }
}