/* =========================================================
   HOME GPS — estilos da HOME (INLIVE-like)
   (arquivo único de HOME: topo + leia também + boxes)
========================================================= */

/* ======================================
   HOME TOP (HERO + MOSAICO) — refinamento
====================================== */

.top-ad{ margin-bottom: 18px; }

@media (min-width: 1024px){
  .home-top-inner{ align-items: start; }

  .hero__media img{ height: 440px; }
  .mid-card__media img{ height: 190px; }

  .mid-list{ gap: 18px; }
  .home-side{ gap: 18px; }
  .side-box{ padding: 14px; }
}

.hero__title{ font-weight: 800; letter-spacing: -0.01em; }
.mid-card__title,
.card__title{ font-weight: 700; }

.hero__cat{
  border-color:#111;
  font-weight:800;
}


/* ======================================
   TOPO HOME – MOSAICO (igual ao live)
====================================== */
@media (min-width: 1024px){
  .home-top-inner{
    grid-template-columns: 2fr 1.25fr;
    gap: 24px;
    align-items: start;
  }

  .mid-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .mid-card:nth-child(1),
  .mid-card:nth-child(2){
    grid-column: 1 / -1;
  }

  .mid-card:nth-child(1) .mid-card__media img,
  .mid-card:nth-child(2) .mid-card__media img{
    height: 180px;
  }

  .mid-card:nth-child(3) .mid-card__media img,
  .mid-card:nth-child(4) .mid-card__media img{
    height: 120px;
  }

  .mid-card:nth-child(1) .mid-card__title,
  .mid-card:nth-child(2) .mid-card__title{
    font-size: 1.05rem;
    font-weight: 700;
  }

  .mid-card:nth-child(3) .mid-card__title,
  .mid-card:nth-child(4) .mid-card__title{
    font-size: .95rem;
    font-weight: 700;
  }
}

/* ======================================
   TAG DE CATEGORIA – SOBRE A IMAGEM (global)
====================================== */
[class$="__media"]{ position: relative; }

/* tags do topo (home-top-full) */
.home-top-full .mosaic-card__media,
.home-top-full .hero__media{
  position: relative;
}

.home-top-full .hero__tag{
  position: absolute;
  left: 16px;
  bottom: 16px;
  top: auto;
  z-index: 30;

  background: #fff;
  color: #111;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid #111;
  line-height: 1.2;
  pointer-events: none;
}

@media (min-width: 1024px){
  .mid-card:nth-child(3) [class$="__tag"],
  .mid-card:nth-child(4) [class$="__tag"]{
    font-size: 10px;
    padding: 3px 6px;
  }
}

/* ==========================================
   ESTRUTURA BASE — HOME (>=1024px)
========================================== */
@media (min-width:1024px){
  .home-layout.grid{
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 24px;
  }

  .home-layout.grid > .home-top-full{ grid-column: 1 / -1; }
  .home-layout.grid > .home-main{ grid-column: 1 / 2; }
  .home-layout.grid > .home-side{ grid-column: 2 / 3; }

  .home-top-grid{
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr);
    column-gap: 40px;
    row-gap: 20px;
    align-items: start;
  }

  :root{
    --mosaic-gap-y: 18px;
    --mosaic-media-h: calc((440px - var(--mosaic-gap-y)) / 2);
  }

  .mosaic-2x2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mosaic-gap-y) 40px;
  }

  .mosaic-card__media{
    height: var(--mosaic-media-h);
    position: relative;
    overflow: hidden;
  }

  .mosaic-card__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .mosaic-card__tag{
    position:absolute;
    top: calc(var(--mosaic-media-h) - 14px);
    bottom:auto;
    z-index:30;

    background:#fff;
    color:#111;
    font-size:11px;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
    padding:4px 8px;
    border:1px solid #111;
    line-height:1.2;
    pointer-events:none;
  }
}

/* Ajuste fino: respiro entre TAG e TÍTULO (HERO) */
.home-top-full .home-top-hero .hero__title{
  margin-top: 16px; /* ajuste fino — pode ser 14px ou 18px */
}

/* Ajuste fino: respiro entre TAG e TÍTULO (MOSAICO) */
.home-top-full .mosaic-card__title{
  margin-top: 14px;
}



@media (max-width:1023px){
  .home-top-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .mosaic-2x2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 14px;
  }

  .mosaic-card__media{
    height: 160px;
    overflow: visible; /* se você quiser tag “meio fora” no mobile */
  }

  .mosaic-card__tag{
    top: auto;
    bottom: -10px;
    left: 12px;
  }
}





/* =====================================================
   MOBILE HOME — Destaque vs demais
===================================================== */
@media (max-width: 1023px){

  /* Respiros gerais */
  .spacer{ height: 22px; }
  .container{ width: min(1160px, 100% - 24px); }

  /* HOME TOP vira 1 coluna */
  .home-top-grid{
    display: block !important;
  }

  /* HERO */
  .home-top-hero .hero__media{
    height: 260px !important;
    overflow: visible;
  }

  .home-top-hero .hero__title{
    font-size: 26px;     /* ajuste fino */
    line-height: 1.1;
    margin: 14px 0 10px;
    font-family: Raleway;
    font-weight: 700 !important;
  }

  .home-top-hero .hero__excerpt{
    font-size: 14px;
    line-height: 1.5;
    color: #767676;
  }

  .gps-card-vertical__excerpt{
    font-size: 14px;
    line-height: 1.5;
    color: #767676;
  }

  .home-top-hero .hero__badge{
    bottom: -10px;
  }

  /* MOSAICO no mobile (2 colunas) */
  .mosaic-2x2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
    margin-top: 18px;
  }

  .mosaic-card__media{
    height: 130px !important;
    overflow: hidden;
  }

  .mosaic-card__title{
    font-size: 16px;
    line-height: 1.2;
    margin-top: 12px;
    font-weight: 800;
  }

  /* TAG do mosaico “meio fora” sem cortar */
  .mosaic-card__media{ overflow: visible; }
  .mosaic-card__media img{ display:block; width:100%; height:100%; object-fit:cover; }
  .mosaic-card__tag{
    top: auto !important;
    bottom: 74px !important;
    transform: translateY(50%);
    left: 0;
  }

  /* =====================================================
     BLOCO “DESTAQUES” (ou leia-cards) — 1 destaque + lista
     (aplica pelo primeiro item do container)
  ====================================================== */

  /* se o seu container for .leia-cards .cards-2x2 */
  .leia-cards .cards-2x2{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* 1º item = destaque */
  .leia-cards .cards-2x2 > article:first-child .mini-card__media,
  .leia-cards .cards-2x2 > article:first-child .card__media{
    height: 260px !important;
  }

  .leia-cards .cards-2x2 > article:first-child .mini-card__title,
  .leia-cards .cards-2x2 > article:first-child .card__title{
    font-size: 26px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
  }

  .mosaic-card__body {
    padding-top: 10px;
  } 

  .leia-cards .cards-2x2 > article:first-child .mini-card__excerpt{
    display: block !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    color: #777 !important;
    margin-top: 10px !important;
  }

  /* Demais itens = menores */
  .leia-cards .cards-2x2 > article:not(:first-child) .mini-card__media,
  .leia-cards .cards-2x2 > article:not(:first-child) .card__media{
    height: 200px !important;
  }

  .leia-cards .cards-2x2 > article:not(:first-child) .mini-card__title,
  .leia-cards .cards-2x2 > article:not(:first-child) .card__title{
    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
  }

  .leia-cards .cards-2x2 > article:not(:first-child) .mini-card__excerpt{
    display: none !important;
  }

  /* TAG do mini-card no mobile (não cortar) */
  .mini-card__media{ overflow: visible; }
  .mini-card__tag{
    bottom: 0;
    transform: translateY(50%);
  }

  /* =====================================================
     ESPECIALISTAS no mobile
     - 1 coluna
     - centro vira topo (grande)
===================================================== */
  .home-block--especialistas .espec-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .home-block--especialistas .espec-card--big .espec-card__media{
    height: 320px !important;
  }
  .home-block--especialistas .espec-card--small .espec-card__media{
    height: 260px !important;
  }

  .home-block--especialistas .espec-title{
    font-size: 40px !important;
  }
}


/* ======================================
   PADRÃO GLOBAL – IMAGENS SEM BORDA
====================================== */
img,
figure,
picture,
.wp-post-image{
  border-radius: 0 !important;
}


/* =====================================================
   MINI-CARD (usado no Leia também / agenda2)
===================================================== */
.mini-card__link{
  display:block;
  color: inherit;
  text-decoration: none;
}

.mini-card__media{
  position: relative;
  overflow: visible;
  margin-bottom: 14px;
}

@media (min-width:1024px){ .mini-card__media{ height: 190px; } }
@media (max-width:1023px){ .mini-card__media{ height: 170px; } }

.mini-card__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.mini-card__tag{
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
  z-index: 50;

  background: #fff;
  color: #111;
  border: 1px solid #111;

  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;

  padding: 4px 8px;
  line-height: 1.2;
  pointer-events: none;
}

.mini-card__body{ padding-top: 6px; }

.mini-card__title{
  margin: 0 0 6px 0 !important;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
}

.mini-card__excerpt{
  margin: 0 !important;
  color: #444;
  font-size: 13px;
  line-height: 1.4;
}


/* =====================================================
   BOXES — GENTE / AGENDA / AGENDA2
===================================================== */

/* GENTE */
.box-gente__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.box-gente__grid > *{ min-width: 0; }

@media (max-width: 1024px){
  .box-gente__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .box-gente__grid{ grid-template-columns: 1fr; }
}

/* AGENDA (2x2x2) */
.box-agenda__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px){
  .box-agenda__grid{ grid-template-columns: 1fr; }
}

/* AGENDA 2 (destaque + 2x2) */
.box-agenda2__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.box-agenda2__featured{ grid-column: 1 / -1; }
@media (max-width: 768px){
  .box-agenda2__grid{ grid-template-columns: 1fr; }
}


/* =====================================================
   BOX LIST (Flay / Política / Eventos / Gastro / Mundo)
===================================================== */
.box-list{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.box-list__item{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.box-list__thumb{
  width: 120px;
  height: 90px;
  overflow: hidden;
  display: block;
}

.box-list__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.box-list__content{ min-width: 0; }

.box-list__title{
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}
.box-list__title a{ color: inherit; text-decoration: none; }
.box-list__title a:hover{ text-decoration: underline; }

.box-list__excerpt{
  margin: 6px 0 0 !important;
  font-size: 14px;
  line-height: 1.45;
  opacity: .85;
}

/* POLÍTICA / EVENTOS / GASTRO: thumb 90x90 + sem excerpt */
.box-politica .box-list__item,
.box-eventos .box-list__item,
.box-gastronomia .box-list__item{
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 16px;
}

.box-politica .box-list__thumb,
.box-eventos .box-list__thumb,
.box-gastronomia .box-list__thumb{
  width: 90px;
  height: 90px;
}

.box-politica .box-list__excerpt,
.box-eventos .box-list__excerpt,
.box-gastronomia .box-list__excerpt{
  display: none !important;
}

/* MUNDO: sem thumb + com resumo */
.box-mundo .box-list__item{
  display: block;
}
.box-mundo .box-list__item:first-child{
  border-top: 0;
  padding-top: 0;
}
.box-mundo .box-list__thumb{ display: none !important; }
.box-mundo .box-list__excerpt{ display: block !important; }

/* Banner abaixo da Política */
.box-politica-banner{
  width: 100%;
  display: block;
}
.box-politica-banner .ad-slot,
.box-politica-banner > *{
  width: 100%;
  max-width: 100%;
  display: block;
}


/* =====================================================
   LEIA TAMBÉM — GRID OFICIAL (MEIO + DIREITA)
===================================================== */

/* .section-title (barra dourada) — mantenha 1 única versão */
.section-title{
  position: relative;
  padding-left: 14px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
}
.section-title::before{
  content: "";
  position: absolute;
  left: 0;
  /* top: 0.15em; */
  width: 4px;
  height: 1em;
  background: #b58a2b;
  border-radius: 2px;
}

.home-block--leia-tambem{ margin-top: 15px; }

.leia-grid{
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: 24px;
  align-items: start;
}

.leia-left,
.leia-mid-right{ min-width: 0; }

/* grid interno (meio+direita) */
.leia-mid-right{
  display: grid;
  /* grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); */
  grid-template-columns: minmax(0, 1fr) minmax(300px, 300px);
  grid-template-areas:
    "mid     side"
    "banner  banner"
    "gente   gente"
    "banner2 banner2"
    "agenda  agenda"
    "banner3 banner3"
    "flay    politica"
    "agenda2 politicaBanner"
    "agenda2 eventos"
    "agenda2 mundo"
    "agenda2 gastronomia";
  gap: 24px;
  align-items: start;
}

.leia-mid-right > *{ min-width: 0; }

.leia-cards{ grid-area: mid; }
.leia-side{  grid-area: side; }

.leia-banner-span2{ width: 100%; display: block; }
.leia-mid-right > .leia-banner-span2{ grid-column: 1 / -1; }

.leia-banner-span2--after-paula{  grid-area: banner; }
.leia-banner-span2--after-gente{  grid-area: banner2; }
.leia-banner-span2--after-agenda{ grid-area: banner3; }

.leia-banner-span2 .ad-slot,
.leia-banner-span2 > *{
  width: 100%;
  max-width: 100%;
  display: block;
}

.box-gente{  grid-area: gente; }
.box-agenda{ grid-area: agenda; }

.box-flay{      grid-area: flay; }
.box-politica{  grid-area: politica; }

.box-agenda2{         grid-area: agenda2; }
.box-politica-banner{ grid-area: politicaBanner; }

.box-eventos{      grid-area: eventos; }
.box-mundo{        grid-area: mundo; }
.box-gastronomia{  grid-area: gastronomia; }

/* Leia também 2x2 */
.cards-2x2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}
@media (max-width: 640px){
  .cards-2x2{ grid-template-columns: 1fr; }
}

/* Moda e Beleza (alinhamento topo) */
.side-list{
  display:flex;
  flex-direction: column;
  gap: 18px;
}

.side-item__link{
  display:flex;
  gap: 14px;
  align-items: flex-start;
  text-decoration:none;
  color:inherit;
}

.side-item__thumb{
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  overflow:hidden;
}

.side-item__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.side-item__content{ flex:1; min-width:0; }

.side-item__title{
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
}

/* Responsivo */
@media (max-width:1024px){
  .leia-grid{ grid-template-columns: 1fr; }

  .leia-mid-right{
    grid-template-columns: 1fr;
    grid-template-areas:
      "mid"
      "side"
      "banner"
      "gente"
      "banner2"
      "agenda"
      "banner3"
      "flay"
      "politica"
      "agenda2"
      "politicaBanner"
      "eventos"
      "mundo"
      "gastronomia";
  }

  .cards-2x2{ grid-template-columns: 1fr; }
}


/* =====================================================
   AJUSTE FINO — PAULA SANTANA (igual InLive)
   Thumb do InLive: ~181 x ~127
===================================================== */

@media (min-width:1024px){

  /* 1) Grid do Paula: gaps menores (mais “justo” como InLive) */
  .box-3col__grid{
    gap: 18px !important; /* ajuste fino: 16–22 */
    align-items: start;
  }

  /* 2) Imagem com altura igual ao InLive */
  .box-3col .gps-card-vertical__media{
    height: 127px;          /* <- 126.94px do InLive */
    overflow: hidden;
  }

  .box-3col .gps-card-vertical__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 3) Tipografia: InLive trabalha com base menor */
  .box-3col{
    font-size: 14px;        /* base */
    padding-bottom: 10px;
  }

  /* título mais “inlive” (menos gigante) */
  .box-3col .gps-card-vertical__title{
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 10px 0 6px !important;
    font-weight: 800;
  }

  /* excerpt alinhado e menor */
  .box-3col .gps-card-vertical__excerpt{
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: rgba(17,17,17,.75);
    padding-bottom: 10px;
  }

  .gps-card-vertical__excerpt {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: rgba(17,17,17,.75);
    padding-bottom: 10px;
  }

}


/* AJUSTE CIRÚRGICO — dar mais espaço pro mosaico (direita) */
/* antes estava mais “pesado” pra esquerda */
/*
@media (min-width:1024px){
  .home-top-grid{
    grid-template-columns: 51% 49%; 
  }
}
*/

/* AJUSTE FINO — reduzir coluna esquerda (Life) */
/*
@media (min-width:1024px){
  .leia-grid{
    grid-template-columns: minmax(0, .90fr) minmax(0, 2.10fr);
  }
}




.leia-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
    gap: 24px;
    align-items: start;
}

.leia-mid-right {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.85fr);
    grid-template-areas:
        "mid side"
        "banner banner"
        "gente gente"
        "banner2 banner2"
        "agenda agenda"
        "banner3 banner3"
        "flay politica"
        "agenda2 politicaBanner"
        "agenda2 eventos"
        "agenda2 mundo"
        "agenda2 gastronomia";
    gap: 24px;
    align-items: start;
}

*/


/* =====================================================
   PATCH — PAULA SANTANA (força grid + thumb igual InLive)
   Cole NO FINAL do home-gps.css
===================================================== */

/* garante que o container é grid SEMPRE */
.box-3col .box-3col__grid{
  display: grid !important;
  gap: 18px !important;
  align-items: start !important;
}

/* desktop: 3 colunas */
@media (min-width:1024px){
  .box-3col .box-3col__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* thumb no tamanho do InLive (~127px de altura) */
  .box-3col .gps-card-vertical__media{
    height: 127px !important;
    overflow: hidden !important;
  }
  .box-3col .gps-card-vertical__media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* tipografia (aprox. InLive) */
  .box-3col{
    font-size: 14px;
  }
  .box-3col .gps-card-vertical__title{
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 10px 0 6px !important;
    font-weight: 800 !important;
  }
  .box-3col .gps-card-vertical__excerpt{
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: rgba(17,17,17,.75) !important;
  }
}

/* tablet/mobile: 1 coluna */
@media (max-width:1023px){
  .box-3col .box-3col__grid{
    grid-template-columns: 1fr !important;
  }
}



/* =====================================================
   PAULA SANTANA — FORÇA tamanho do título (sem cortar)
===================================================== */

.home-block--leia-tambem .box-3col h3.gps-card-vertical__title{
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;

  /* garante que NÃO exista clamp/corte herdado */
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}


/* =====================================================
   REFINO — PAULA SANTANA (tipografia + clamp + respiro)
   Cole NO FINAL do home-gps.css
===================================================== */

@media (min-width:1024px){

  /* 3 colunas estável + espaçamento mais parecido com InLive */
  .box-3col .box-3col__grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important; /* ajuste fino: 18–28 */
    align-items: start !important;
  }

  /* imagem (thumb) do Paula */
  .box-3col .gps-card-vertical__media{
    height: 126px !important;  /* ~126.9 no seu print do InLive */
    overflow: hidden !important;
  }
  .box-3col .gps-card-vertical__media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* TÍTULO — menor e com clamp (evita “gigante”) */
  .box-3col .gps-card-vertical__title{
    margin: 10px 0 8px !important;
    font-size: 18px !important;     /* ajuste fino: 16–18 */
    line-height: 1.2 !important;
    font-weight: 800 !important;

    display: -webkit-box;
    -webkit-line-clamp: 3;          /* 2–3 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* EXCERPT — mais leve, menor, e com clamp (padrão portal/InLive) */
  .box-3col .gps-card-vertical__excerpt{
    margin: 0 !important;
    font-size: 14px !important;     /* aqui fica “14” como você pediu */
    line-height: 1.5 !important;
    color: rgba(17,17,17,.72) !important;

    /* display: -webkit-box; */
    -webkit-line-clamp: 3;          /* 2–3 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}




/* =====================================================
   PAULA SANTANA — ajuste fino de título (igual InLive)
   - NÃO corta título
   - Fonte menor
   - Line-height mais fechado
===================================================== */

.box-3col .gps-card-vertical__title{
  font-size: 18px;      /* InLive ~17–18px */
  line-height: 1.25;    /* mais compacto */
  font-weight: 800;

  /* garante que NÃO exista corte */
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}






@media (min-width:1024px){

  /* MERCADO / AGENDA — card destacado */
  .home-block--mercado .mini-card--featured .mini-card__media,
  .box-agenda2 .mini-card--featured .mini-card__media{
    height: 420px;          /* ajuste fino: 380–460 */
    overflow: hidden;
  }

  .home-block--mercado .mini-card--featured .mini-card__media img,
  .box-agenda2 .mini-card--featured .mini-card__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}






@media (min-width:1024px){

  /* AGENDA (featured) — permitir que a TAG “saia” pra fora */
  .box-agenda2 .mini-card--featured .mini-card__media{
    overflow: visible !important;     /* deixa a tag aparecer fora */
    position: relative;               /* garante z-index da tag */
  }

  /* mas mantém o recorte da imagem dentro do bloco */
  .box-agenda2 .mini-card--featured .mini-card__media img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    border-radius: 0;
  }

  /* se seu recorte dependia do overflow do container, força pelo próprio img */
  .box-agenda2 .mini-card--featured .mini-card__media{
    height: 420px !important;         /* mantém sua altura */
  }

  /* TAG: exatamente “meio pra fora” como no modelo */
  .box-agenda2 .mini-card--featured .mini-card__tag{
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(50%) !important;
    z-index: 10 !important;
  }
}




/* =====================================================
   ESPECIALISTAS — versão final (DESKTOP + MOBILE)
   Cole no FINAL do home-gps.css
===================================================== */

/* segurança anti scroll lateral causado por abs */
.home-block--especialistas{ overflow-x: clip; }

.home-block--especialistas .espec-head{
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 34px;
  padding: 0 16px;
}

/* título */
.home-block--especialistas .espec-title{
  position: relative;
  display: inline-block;           /* <- importante pra bolha “colar” */
  margin: 0 auto;
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #2b2b2b;
}

/* bolha GPS */
.home-block--especialistas .espec-title__bubble{
  position: absolute;
  left: 100%;
  top: 0;
  transform: translate(12px, -55%);
  z-index: 3;
  background: #c7961e;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.6px !important;
  padding: 6px 10px;
  border-radius: 3px 3px 3px 0;
  white-space: nowrap;
}

/* “pontinha” (triângulo) – igual balão */
.home-block--especialistas .espec-title__bubble::before{
    content: "";
    position: absolute;
    left: 0px;
    top: 101%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    /* border-color: #b28405 transparent transparent transparent !important; */
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid transparent;
    border-left: 6px solid #c7961e;
}

/* subtítulo com linha */
.home-block--especialistas .espec-subtitle{
  margin-top: 12px;
  font-size: 15px;
  font-style: italic;
  color: #c7961e;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.home-block--especialistas .espec-subtitle::before,
.home-block--especialistas .espec-subtitle::after{
  content:"";
  flex: 1;
  height: 2px;
  background: #e5e5e5;
}

/* grid 3 cards (pequeno | grande | pequeno) */
@media (min-width:1024px){
  .home-block--especialistas .espec-grid{
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,2.25fr) minmax(0,1fr);
    gap: 28px;
    align-items: start;
  }
}

/* TAG sobre a foto (não cortar) */
.home-block--especialistas .espec-card__media{
  position: relative;
  overflow: visible !important; /* tag “vaza” */
}

.home-block--especialistas .espec-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* a tag (subcategoria) */
.home-block--especialistas .espec-card__tag{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 10;

  background: #fff;
  border: 1px solid #111;
  padding: 6px 12px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* alturas desktop */
@media (min-width:1024px){
  .home-block--especialistas .espec-card--small .espec-card__media{ height: 312px; }
  .home-block--especialistas .espec-card--big   .espec-card__media{ height: 464px; }
}

/* MOBILE */
@media (max-width:1023px){
  .home-block--especialistas .espec-title{
    font-size: 40px;
  }

  .home-block--especialistas .espec-grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .home-block--especialistas .espec-card__media{
    height: 240px !important;
  }

  .home-block--especialistas .espec-title__bubble{
    transform: translate(10px, -50%);
  }
  .home-block--especialistas .espec-title__bubble::after{
    left: 10px;
    bottom: -6px;
  }
}




/* =====================================================
   FIX MOBILE — TOPO MOSAICO (empilhar 1 por linha)
   Cole NO FINAL do home-gps.css
===================================================== */

@media (max-width:1023px){

  /* garante que o topo vira 1 coluna (hero em cima, mosaico embaixo) */
  .home-top-full .home-top-grid{
    display: block !important;
  }

  /* empilha os 4 cards do mosaico */
  .home-top-full .mosaic-2x2{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 18px;
  }

  /* altura boa pro mobile (ajuste se quiser) */
  .home-top-full .mosaic-card__media{
    height: 170px !important;
  }
}






.espec-card__title {
      padding-top: 20px;
}

.espec-card__excerpt {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        color: rgba(17, 17, 17, .75);
        padding-bottom: 10px;
}



/* escondido por padrão (desktop) */
.home-hero-ad-mobile {
  display: none;
}

/* mobile */
@media (max-width: 1023px) {
  .home-hero-ad-mobile {
    display: flex;
    justify-content: center;
    margin: 16px 0 8px;
  }

  .home-hero-ad-mobile .ad-300x250 {
    width: 300px;
    height: 250px;
  }
}