/* Guia Conecta Brasil V6 — padronização global de margens, alinhamentos e ritmo visual */
@import url('/assets/css/guia-v5.css');

/*
  A V5 tinha alguns componentes que também carregavam a classe .container
  (hero-grid, detail-hero-grid e article-layout) e depois recebiam width:100%.
  Este arquivo restabelece uma única régua de largura para TODO o portal.
*/
.v4{
  --gc-container:1240px;
  --gc-gutter:32px;
  --gc-section-y:72px;
  --gc-card-radius:18px;
}

/* Régua global: nunca encostar conteúdo nas laterais do navegador */
body.v4 .container{
  width:min(calc(100% - (var(--gc-gutter) * 2)),var(--gc-container))!important;
  max-width:var(--gc-container)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Componentes que dividem o mesmo elemento com .container não podem anular a régua */
body.v4 .container.hero-grid,
body.v4 .container.detail-hero-grid,
body.v4 .container.article-layout,
body.v4 .container.profile-layout,
body.v4 .container.header-inner,
body.v4 .container.v4-about-grid{
  width:min(calc(100% - (var(--gc-gutter) * 2)),var(--gc-container))!important;
  max-width:var(--gc-container)!important;
  margin-inline:auto!important;
}

/* Seções: espaçamento e alinhamento consistentes */
.v4 .section,
.v4 .page-section{padding-top:var(--gc-section-y);padding-bottom:var(--gc-section-y)}
.v4 .section-heading{margin-bottom:30px}
.v4 .section-heading h2{max-width:900px}
.v4 .section-heading p{max-width:780px}
.v4 .content-group{padding:48px 0}
.v4 .content-group-head{margin-bottom:26px}

/* Header: mesma régua da página e melhor estabilidade */
.v4 .header-inner{min-height:78px}
.v4 .primary-nav{gap:25px}

/* Home hero: agora respeita exatamente a mesma margem das demais seções */
.v4 .hero-grid{
  grid-template-columns:minmax(0,1.1fr) minmax(340px,.72fr);
  gap:58px;
  padding:72px 0;
  min-height:540px;
}
.v4 .hero-content{max-width:760px}
.v4 .hero-panel{width:100%;max-width:470px;justify-self:end}

/* Heros internos: texto + imagem dentro da mesma régua */
.v4-page-hero{padding:58px 0!important}
.v4 .detail-hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(360px,430px);
  gap:54px;
  align-items:center;
}
.v4 .detail-hero-copy{max-width:730px}
.v4 .detail-hero-media{width:100%;max-width:430px;justify-self:end;aspect-ratio:16/9}
.v4 .detail-hero-media img{width:100%!important;height:100%!important;object-fit:cover!important}
.v4 .detail-hero-copy h1{max-width:760px}

/* Cards de listagens: mesma geometria em Serviços, Negócios e Conteúdos */
.v4 .listing-card,.v4 .content-card{border-radius:var(--gc-card-radius)!important}
.v4 .listing-media,.v4 .content-media{aspect-ratio:16/9!important}
.v4 .listing-media img,.v4 .content-media img{width:100%!important;height:100%!important;object-fit:cover!important}
.v4 .listing-content,.v4 .content-body{min-width:0}
.v4 .listing-content h3,.v4 .content-card h3{overflow-wrap:break-word}

/* Negócios: 3 + 2 centralizados no desktop, sem cards espremidos */
.v4 .listing-grid.v4-five-grid,
.v4-news .v4-five-grid,
.v4 .content-group .v4-five-grid{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:22px!important;
}
.v4 .listing-grid.v4-five-grid>*,
.v4-news .v4-five-grid>*,
.v4 .content-group .v4-five-grid>*{grid-column:span 2}
.v4 .listing-grid.v4-five-grid>*:nth-child(4):nth-last-child(2),
.v4-news .v4-five-grid>*:nth-child(4):nth-last-child(2),
.v4 .content-group .v4-five-grid>*:nth-child(4):nth-last-child(2){grid-column:2 / span 2}
.v4 .listing-grid.v4-five-grid>*:nth-child(5):last-child,
.v4-news .v4-five-grid>*:nth-child(5):last-child,
.v4 .content-group .v4-five-grid>*:nth-child(5):last-child{grid-column:4 / span 2}

/* Serviços: grid uniforme e último card centralizado */
.v4-three-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important}
.v4-three-grid>*:last-child:nth-child(10){grid-column:2}
.service-card-v4 .content-body{min-height:250px}

/* Conteúdos: leitura mais limpa entre grupos */
.v4 .content-group+.content-group{border-top:1px solid #e7eef5}
.v4 .content-group-head>div{max-width:820px}
.v4 .content-meta{gap:12px}

/* Perfis: conteúdo e lateral na mesma largura interna do artigo */
.v4 .profile-layout{grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}
.v4 .profile-content-grid{gap:14px}
.v4 .sidebar{min-width:0}

/* Artigos: margem externa, coluna de leitura e sidebar totalmente padronizadas */
.v4 .article-layout{grid-template-columns:minmax(0,1fr) 286px;gap:30px;align-items:start}
.v4 .article-card{padding:40px 42px}
.v4 .article-rich{max-width:850px}
.v4 .article-rich p{line-height:1.8}
.v4 .article-rich h2{margin-top:32px}
.v4 .sidebar-card{padding:22px}

/* CTA e rodapé seguem a mesma régua horizontal */
.v4 .prefooter{padding:4px 0 70px}
.v4 .prefooter-card{padding:30px 36px}
.v4 .site-footer{padding:56px 0 28px}
.v4 .footer-grid{gap:48px}

/* Desktop intermediário / notebook */
@media (max-width:1180px){
  .v4{--gc-gutter:28px}
  .v4 .hero-grid{grid-template-columns:minmax(0,1fr) 390px;gap:42px}
  .v4 .detail-hero-grid{grid-template-columns:minmax(0,1fr) 360px;gap:38px}
  .v4 .listing-grid.v4-five-grid,
  .v4-news .v4-five-grid,
  .v4 .content-group .v4-five-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v4 .listing-grid.v4-five-grid>*,.v4-news .v4-five-grid>*,.v4 .content-group .v4-five-grid>*{grid-column:auto!important}
  .v4 .listing-grid.v4-five-grid>*:last-child:nth-child(5),
  .v4-news .v4-five-grid>*:last-child:nth-child(5),
  .v4 .content-group .v4-five-grid>*:last-child:nth-child(5){grid-column:1 / -1!important;width:min(100%,calc(50% - 11px));justify-self:center}
}

/* Tablet */
@media (max-width:900px){
  .v4{--gc-gutter:20px;--gc-section-y:58px}
  .v4 .hero-grid{grid-template-columns:1fr;gap:32px;padding:56px 0;min-height:0}
  .v4 .hero-panel{justify-self:start;max-width:720px}
  .v4 .detail-hero-grid{grid-template-columns:1fr;gap:26px}
  .v4 .detail-hero-media{justify-self:start;max-width:680px}
  .v4 .article-layout,.v4 .profile-layout,.v4-about-grid{grid-template-columns:1fr}
  .v4 .sidebar{position:static}
  .v4-three-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v4-three-grid>*:last-child:nth-child(10){grid-column:1 / -1;width:min(100%,calc(50% - 12px));justify-self:center}
  .v4 .article-card{padding:32px}
}

/* Mobile */
@media (max-width:620px){
  .v4{--gc-gutter:18px;--gc-section-y:48px}
  body.v4 .container,
  body.v4 .container.hero-grid,
  body.v4 .container.detail-hero-grid,
  body.v4 .container.article-layout,
  body.v4 .container.profile-layout,
  body.v4 .container.header-inner,
  body.v4 .container.v4-about-grid{
    width:calc(100% - (var(--gc-gutter) * 2))!important;
  }
  .v4-page-hero{padding:42px 0!important}
  .v4 .detail-hero-copy h1{font-size:clamp(2.15rem,10vw,3rem)}
  .v4 .listing-grid.v4-five-grid,
  .v4-news .v4-five-grid,
  .v4 .content-group .v4-five-grid,
  .v4-three-grid{grid-template-columns:1fr!important}
  .v4 .listing-grid.v4-five-grid>*:last-child:nth-child(5),
  .v4-news .v4-five-grid>*:last-child:nth-child(5),
  .v4 .content-group .v4-five-grid>*:last-child:nth-child(5),
  .v4-three-grid>*:last-child:nth-child(10){grid-column:auto!important;width:100%;max-width:none}
  .v4 .article-card{padding:24px 22px}
  .v4 .content-group{padding:36px 0}
  .v4 .prefooter-card{padding:26px 24px}
}
