/*
  SERVIÇOS — listagem (page-servicos.php) e single (single-area-atividade.php)
  Só variáveis do tema. Usa também .container, .stack, .sec, .sec--titulo, .eyebrow,
  .band, .band-cta, .btn, .btn--claro, .grid, .card, .card-corpo, .duas, .arco-img do sobre.css.
*/

#conteudo .lead{ font-size: 19px; max-width: 680px; }

/* ==========================================================================
   LISTAGEM — cartões
   ========================================================================== */

#conteudo .sec--servicos{ padding-top: 8px; }
#conteudo .grid-3{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* Cartão todo clicável */
#conteudo a.card{
    text-decoration: none;
    color: var(--primaryTextColor);
}
#conteudo .card img{
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform .4s ease;
}
#conteudo .card--tracejado{ border-style: dashed; }
#conteudo .card-titulo{ font-size: 28px; }
#conteudo .card-corpo .push{ margin-top: auto; }
#conteudo a.card:hover .link-seta,
#conteudo a.card:focus-visible .link-seta{ border-bottom-color: var(--primaryColor); }

/* Etiqueta ("Brevemente") */
#conteudo .badge{
    display: inline-block;
    font-family: var(--primaryTextFont), sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    border: 2px solid var(--primaryColor);
    color: var(--primaryColor);
}
#conteudo .badge--cheio{
    background: var(--primaryColor);
    color: var(--secondaryTextColor);
}

/* Ligação com seta ("Ver mais →") */
#conteudo .link-seta{
    display: inline-block;
    font-family: var(--primaryTextFont), sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--primaryColor);
    border-bottom: 3px solid var(--terciaryColor);
    padding: 10px 0 4px;
    min-height: 44px;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
#conteudo .link-seta:hover{ border-bottom-color: var(--primaryColor); }

/* ==========================================================================
   SINGLE — serviço com subserviços
   ========================================================================== */

#conteudo .eyebrow a{ border-bottom: 2px solid var(--terciaryColor); }

/* Botões de navegação para os subserviços */
#conteudo .filtros{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
#conteudo .chip{
    display: inline-flex;
    align-items: center;
    font-family: var(--primaryTextFont), sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 24px;
    border-radius: 999px;
    min-height: 44px;
    border: 2px solid var(--primaryColor);
    background: transparent;
    color: var(--primaryColor);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
#conteudo .chip:hover,
#conteudo .chip:focus-visible{
    background: var(--primaryColor);
    color: var(--secondaryTextColor);
}

/* Blocos de subserviço: texto do editor + lista com linha lateral */
#conteudo .servico-bloco .conteudo > * + *{ margin-top: 16px; }
#conteudo .servico-bloco .conteudo ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#conteudo .servico-bloco .conteudo li{
    border-left: 4px solid var(--terciaryColor);
    padding-left: 14px;
}
#conteudo .servico-bloco.band .conteudo a{ color: inherit; }

/* Imagem à esquerda, depois à direita, depois à esquerda... (desktop).
   Em ecrãs pequenos a imagem fica sempre por cima do texto. */
@media (min-width: 992px){
    #conteudo .servico-bloco .duas{ flex-wrap: nowrap; }
    #conteudo .servico-bloco .duas > *{ flex: 1 1 0; min-width: 0; }
    #conteudo .servico-bloco .duas .arco-img{ order: 1; }
    #conteudo .servico-bloco .duas > .stack{ order: 2; }
    #conteudo .servico-bloco .duas.inv .arco-img{ order: 3; }
}

/* ---- Efeitos ---- */
#conteudo .card{ overflow: hidden; }
@media (hover: hover){
    #conteudo a.card:hover img{ transform: scale(1.05); }
    #conteudo .chip:hover{ transform: translateY(-2px); }
}
#conteudo .eyebrow a{ transition: border-color .2s ease, color .2s ease; }
#conteudo .eyebrow a:hover{ border-bottom-color: var(--primaryColor); }

/* ---- Responsivo ---- */
@media (max-width: 640px){
    #conteudo .lead{ font-size: 17px; }
    #conteudo .card img{ height: 200px; }
    #conteudo .card-titulo{ font-size: 24px; }
    #conteudo .chip{ padding: 8px 18px; font-size: 14px; }
    #conteudo .card-corpo{ padding: 22px; }
}