/* ============================================================
   CIUTEK 1 - VELVET NEXUS  |  ciutek-perfil.css
   Estruturas sociais: perfil, capa, contorno de nivel, abas.
   Seletores medidos no navegador antes da troca:
     capa    .cardheader.user-cover            1120x365  (3.07:1)
     cartao  .list-group.card.hovercard        1120x488
     anel    .circle-progress-value            traco #0e9da5 (verde-agua)
   ============================================================ */

/* ---------- 1. Largura do perfil ---------- */
.ctk-app .profile-container{
  max-width:var(--ck-perfil-max) !important;
  margin-left:auto !important; margin-right:auto !important;
}

/* ---------- 2. Cartao do perfil ---------- */
/* o modo Instagram usa .list-group.card.hovercard e o modo completo
   usa apenas .card.hovercard; o seletor cobre os dois */
.ctk-app .card.hovercard{
  background:var(--ck-superficie) !important;
  border:1px solid var(--ck-borda) !important;
  border-radius:var(--ck-r-painel) !important;
  box-shadow:var(--ck-sombra-2) !important;
  overflow:hidden !important;
}

/* ---------- 3. Capa fina ----------
   antes: altura 365px, proporcao 3.07:1 no desktop, comendo a tela.
   agora: proporcao real por faixa, com limites de altura:
     desktop 5:1 (180-224px) | tablet 4:1 (160-190px) | celular 3:1 (120-152px) */
.ctk-app .cardheader.user-cover,
.ctk-app .user-cover-reposition-container,
.ctk-app .user-cover-reposition-w{
  height:auto !important;
  aspect-ratio:5 / 1;
  min-height:180px !important;
  max-height:224px !important;
}
.ctk-app .cardheader.user-cover{
  border-radius:var(--ck-r-painel) var(--ck-r-painel) 0 0 !important;
  overflow:hidden !important;
  position:relative !important;
}
.ctk-app .cardheader.user-cover img,
.ctk-app .user-cover-reposition-w img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important;
}

/* degrade na base da capa, para o nome nunca competir com a foto */
.ctk-app .cardheader.user-cover::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:52%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 100%);
  pointer-events:none;
}

@media (max-width:1023px){
  .ctk-app .cardheader.user-cover,
  .ctk-app .user-cover-reposition-container,
  .ctk-app .user-cover-reposition-w{
    aspect-ratio:4 / 1; min-height:160px !important; max-height:190px !important;
  }
}
@media (max-width:767px){
  .ctk-app .cardheader.user-cover,
  .ctk-app .user-cover-reposition-container,
  .ctk-app .user-cover-reposition-w{
    aspect-ratio:3 / 1; min-height:120px !important; max-height:152px !important;
  }
  .ctk-app .cardheader.user-cover{ border-radius:var(--ck-r-cartao) var(--ck-r-cartao) 0 0 !important; }
}

/* ---------- 4. Anel de conclusao do perfil ----------
   antes: traco verde-agua #0e9da5, fora da identidade */
.ctk-app .circle-progress-value{ stroke:var(--ck-cor-primaria) !important; }
.ctk-app .circle-progress-circle{ stroke:var(--ck-borda-forte) !important; }
.ctk-app .circle-progress-text{ fill:var(--ck-texto) !important; }

/* ---------- 5. Contorno de nivel no avatar do perfil ----------
   Camadas, de dentro para fora: foto -> respiro -> contorno do nivel.
   A classe de nivel e posta pelo selo-niveis.js, a partir da mesma
   fonte que decide o selo. Sem nivel, nenhum anel aparece. */
.ctk-app .ck-contorno{
  position:relative;
  border-radius:var(--ck-r-capsula);
}
.ctk-app .ck-contorno::before{
  content:'';
  position:absolute; inset:calc(-1 * var(--ck-contorno-respiro, 4px) - var(--ck-contorno-traco, 3px));
  border-radius:inherit;
  padding:var(--ck-contorno-traco, 3px);
  background:var(--ck-contorno-cor, transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

.ctk-app .ck-contorno--verificado{
  --ck-contorno-cor:linear-gradient(152deg,#a8d5ff 0%,#4a9bf0 47%,#073a86 100%);
}
.ctk-app .ck-contorno--oficial{
  --ck-contorno-cor:linear-gradient(152deg,#e4d0ff 0%,#a76dff 45%,#43128f 100%);
}
.ctk-app .ck-contorno--autoridade{
  --ck-contorno-cor:linear-gradient(152deg,#fff0c2 0%,#e8b64a 47%,#8a5a00 100%);
}

/* no tamanho reduzido o efeito simplifica */
@media (max-width:767px){
  .ctk-app .ck-contorno{ --ck-contorno-traco:2px; --ck-contorno-respiro:3px; }
}

/* ---------- 6. Abas do perfil ---------- */
.ctk-app .nav-tabs > li > a,
.ctk-app .profile-menu a{
  border-radius:var(--ck-r-campo) !important;
  font-weight:var(--ck-p-cartao);
}

/* ---------- 7. Anel de Story ----------
   antes: .wow_post_usr_ava_active com box-shadow de 2.5px, colado na foto.
   agora: anel mais grosso e com respiro entre a foto e o anel,
   como as camadas do contorno de nivel. */
:root{
  --ck-story-traco:3.5px;
  --ck-story-respiro:2px;
  /* O azul #55acee vinha da base e e o azul do Twitter. Alem de fora da
     identidade, ele repetia a cor do selo de verificado: duas coisas
     diferentes na mesma cor confundem. O anel passa para o roxo do Ciutek
     e o significado continua o mesmo: anel aceso = Story ainda nao visto. */
  --ck-story-cor:linear-gradient(140deg, var(--ck-roxo-300) 0%, var(--ck-roxo-500) 55%, var(--ck-roxo-700) 100%);
  --ck-story-cor-solida:var(--ck-roxo-500);
}
.ctk-app .wow_post_usr_ava_active,
.ctk-app .avatar.wow_post_usr_ava_active{
  box-shadow:
    0 0 0 var(--ck-story-respiro) var(--ck-fundo),
    0 0 0 calc(var(--ck-story-respiro) + var(--ck-story-traco)) var(--ck-story-cor-solida)
    !important;
}

/* no celular o anel afina um pouco, para nao engolir a foto */
@media (max-width:767px){
  :root{ --ck-story-traco:3px; --ck-story-respiro:2px; }
}

/* ---------- 8. Contorno de nivel um pouco mais presente ---------- */
:root{
  --ck-contorno-traco:4px;
  --ck-contorno-respiro:4px;
}
@media (max-width:767px){
  :root{ --ck-contorno-traco:3px; --ck-contorno-respiro:3px; }
}

/* ============================================================
   14. Vitrine Ciutek
   Tres espacos no perfil. Desktop: tres cartoes lado a lado.
   Tablet: dois visiveis. Celular: carrossel com encaixe, o
   cartao ocupando ~84% da largura e o proximo aparecendo.
   ============================================================ */
.ctk-vitrine{
  max-width:var(--ck-perfil-max);
  margin:var(--ck-e-5) auto 0;
  padding:0 var(--ck-margem-lateral);
}
.ctk-vitrine__topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--ck-e-3); margin-bottom:var(--ck-e-3);
}
.ctk-vitrine__titulo{
  font-family:var(--ck-fonte-titulo); font-size:var(--ck-t-secao);
  line-height:var(--ck-t-secao-lh); font-weight:var(--ck-p-titulo);
  margin:0; color:var(--ck-texto);
}
.ctk-vitrine__lista{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ck-e-4);
}

.ctk-vitrine__item{
  display:flex; flex-direction:column;
  background:var(--ck-superficie);
  border:1px solid var(--ck-borda);
  border-radius:var(--ck-r-cartao);
  box-shadow:var(--ck-sombra-2);
  overflow:hidden;
  min-height:180px;
  text-decoration:none; color:inherit;
  transition:transform var(--ck-mov-rapido) var(--ck-curva),
             box-shadow var(--ck-mov-rapido) var(--ck-curva);
}
a.ctk-vitrine__item:hover{
  transform:translateY(calc(-2px * var(--ck-mov-fator,1)));
  box-shadow:var(--ck-sombra-3);
}
.ctk-vitrine__foto{
  width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  background:var(--ck-superficie-2);
}
.ctk-vitrine__corpo{ padding:var(--ck-cartao-interno); display:flex; flex-direction:column; gap:6px; }
.ctk-vitrine__nome{ font-size:var(--ck-t-cartao); line-height:var(--ck-t-cartao-lh); font-weight:var(--ck-p-cartao); }
.ctk-vitrine__texto{ font-size:var(--ck-t-apoio); line-height:var(--ck-t-apoio-lh); color:var(--ck-texto-suave); }
.ctk-vitrine__acao{
  margin-top:auto; padding-top:var(--ck-e-2);
  font-size:var(--ck-t-legenda); font-weight:var(--ck-p-legenda);
  color:var(--ck-cor-primaria-suave);
}

/* tablet: dois visiveis, o terceiro alcancavel pela rolagem */
@media (max-width:1023px){
  .ctk-vitrine__lista{ grid-template-columns:repeat(2,1fr); }
}

/* celular: carrossel com encaixe */
@media (max-width:767px){
  .ctk-vitrine__lista{
    display:flex; gap:var(--ck-e-3);
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:var(--ck-e-2);
    scrollbar-width:none;
  }
  .ctk-vitrine__lista::-webkit-scrollbar{ display:none; }
  .ctk-vitrine__item{
    flex:0 0 84%; scroll-snap-align:start; min-height:0;
  }
}