/* Cleubi.com - camada mobile responsiva para rede social
   Ajusta visual sem mexer no banco nem nas regras reais do Salve. */

@media (max-width: 760px){

  html,
  body{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    font-size:15px !important;
    line-height:1.35 !important;
  }

  /* Cabeçalho */
  header,
  .site-header,
  .topbar,
  .navbar{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  header a,
  .site-header a,
  .topbar a,
  .navbar a{
    font-size:16px !important;
  }

  /* Container geral das páginas sociais */
  main,
  .main,
  .container,
  .page,
  .content,
  .feed,
  .perfil,
  .profile,
  .publicacao,
  .publication{
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  /* Cards grandes do feed/perfil/publicação */
  article,
  section,
  .card,
  .clb-card,
  .clb-post,
  .feed-card,
  .publicacao-card,
  .publication-card,
  [data-post-code],
  [data-post-id]{
    max-width:calc(100vw - 28px) !important;
    width:calc(100vw - 28px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-top:16px !important;
    margin-bottom:16px !important;
    padding:28px 20px 22px !important;
    border-radius:28px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* Card de título, tipo "Feed" */
  main > section:first-child,
  main > .card:first-child,
  .feed > section:first-child,
  .feed > .card:first-child{
    padding:30px 22px 26px !important;
    margin-top:14px !important;
    margin-bottom:18px !important;
  }

  /* Títulos */
  h1{
    font-size:34px !important;
    line-height:1.08 !important;
    margin:0 0 16px !important;
    letter-spacing:-.5px !important;
  }

  h2{
    font-size:29px !important;
    line-height:1.12 !important;
    margin:0 0 13px !important;
    letter-spacing:-.4px !important;
  }

  h3{
    font-size:24px !important;
    line-height:1.15 !important;
    margin:0 0 10px !important;
  }

  /* Nome do autor dentro do card */
  [data-post-code] h1,
  [data-post-code] h2,
  [data-post-code] h3,
  [data-post-id] h1,
  [data-post-id] h2,
  [data-post-id] h3,
  article h1,
  article h2,
  article h3,
  .clb-post h1,
  .clb-post h2,
  .clb-post h3,
  .feed-card h1,
  .feed-card h2,
  .feed-card h3{
    font-size:27px !important;
    line-height:1.12 !important;
    margin-bottom:12px !important;
  }

  /* Texto comum e metadados */
  p,
  .meta,
  .date,
  .time,
  .username,
  .handle,
  .post-meta,
  .publicacao-meta{
    font-size:17px !important;
    line-height:1.28 !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }

  [data-post-code] p,
  [data-post-id] p,
  article p,
  .clb-post p,
  .feed-card p{
    font-size:24px !important;
    line-height:1.22 !important;
    margin-top:8px !important;
    margin-bottom:14px !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }

  /* Texto da publicação: reduz para não estourar no celular */
  .post-text,
  .texto,
  .body,
  .message,
  .content-text,
  .publication-text{
    font-size:24px !important;
    line-height:1.22 !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }

  /* Barra dos botões sociais novos */
  .clbs-actions{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:5px !important;
    margin-top:12px !important;
    padding:2px 0 4px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity !important;
    scrollbar-width:none !important;
    box-sizing:border-box !important;
    clear:both !important;
  }

  .clbs-actions::-webkit-scrollbar{
    display:none !important;
  }

  /* Botões novos menores */
  .clbs-btn{
    flex:0 0 43px !important;
    width:43px !important;
    min-width:43px !important;
    max-width:43px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    border-radius:10px !important;
    padding:2px 2px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .clbs-emoji{
    font-size:11px !important;
    line-height:1 !important;
  }

  .clbs-count{
    font-size:9px !important;
    line-height:1 !important;
  }

  .clbs-label{
    font-size:6.5px !important;
    line-height:1 !important;
  }

  /* Garante respiro no fim da rolagem horizontal dos botões */
  .clbs-actions::after{
    content:"" !important;
    flex:0 0 8px !important;
    width:8px !important;
    height:1px !important;
  }

  /* Impede botão de passar por baixo do rodapé/barra do celular */
  footer,
  .footer{
    margin-top:28px !important;
  }

  body::after{
    content:"" !important;
    display:block !important;
    height:18px !important;
  }
}

/* Celulares pequenos */
@media (max-width: 430px){

  article,
  section,
  .card,
  .clb-card,
  .clb-post,
  .feed-card,
  .publicacao-card,
  .publication-card,
  [data-post-code],
  [data-post-id]{
    max-width:calc(100vw - 22px) !important;
    width:calc(100vw - 22px) !important;
    padding:24px 16px 20px !important;
    margin-top:14px !important;
    margin-bottom:14px !important;
    border-radius:26px !important;
  }

  main > section:first-child,
  main > .card:first-child,
  .feed > section:first-child,
  .feed > .card:first-child{
    padding:28px 18px 24px !important;
  }

  h1{
    font-size:31px !important;
  }

  h2{
    font-size:27px !important;
  }

  [data-post-code] h1,
  [data-post-code] h2,
  [data-post-code] h3,
  [data-post-id] h1,
  [data-post-id] h2,
  [data-post-id] h3,
  article h1,
  article h2,
  article h3,
  .clb-post h1,
  .clb-post h2,
  .clb-post h3,
  .feed-card h1,
  .feed-card h2,
  .feed-card h3{
    font-size:25px !important;
  }

  [data-post-code] p,
  [data-post-id] p,
  article p,
  .clb-post p,
  .feed-card p,
  .post-text,
  .texto,
  .body,
  .message,
  .content-text,
  .publication-text{
    font-size:22px !important;
    line-height:1.2 !important;
  }

  .meta,
  .date,
  .time,
  .username,
  .handle,
  .post-meta,
  .publicacao-meta{
    font-size:16px !important;
  }

  .clbs-actions{
    gap:4px !important;
    margin-top:10px !important;
  }

  .clbs-btn{
    flex-basis:42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:33px !important;
    min-height:33px !important;
    max-height:33px !important;
    border-radius:10px !important;
  }

  .clbs-emoji{
    font-size:10.5px !important;
  }

  .clbs-count{
    font-size:8.8px !important;
  }

  .clbs-label{
    font-size:6.3px !important;
  }
}

/* iPhone estreito */
@media (max-width: 390px){

  article,
  section,
  .card,
  .clb-card,
  .clb-post,
  .feed-card,
  .publicacao-card,
  .publication-card,
  [data-post-code],
  [data-post-id]{
    max-width:calc(100vw - 18px) !important;
    width:calc(100vw - 18px) !important;
    padding:22px 14px 18px !important;
  }

  .clbs-btn{
    flex-basis:40px !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }

  .clbs-label{
    font-size:6px !important;
  }
}