/**
 * WPCM TPG Composer — Camada universal (v6.5.1)
 * --------------------------------------------------------------------------
 * 1) Altura uniforme de imagens: nenhuma foto vertical ou muito grande
 *    distorce cards, slides ou faixas. Sempre object-fit: cover.
 * 2) Responsividade completa: desktop estreito, tablet e celulares de
 *    vários tamanhos, para os blocos editoriais (.wpcm-hb) e para as
 *    seções da capa wpcm-news-theme (.wpcm-th-*).
 *
 * Carregada DEPOIS de frontend.css e news-theme-home.css: em igualdade de
 * especificidade, a ordem de origem faz estas regras prevalecerem. Os
 * fallbacks usam :where() (especificidade zero) para nunca sobrescrever uma
 * altura já definida de propósito pelo layout.
 */

/* =========================================================================
 * 1. ALTURA UNIFORME DE IMAGENS
 * ====================================================================== */

/* Blocos editoriais: a imagem respeita a proporção (--hb-ratio) ou, quando
 * o usuário define uma altura fixa no inspetor, --hb-img-h assume o comando
 * e a proporção é ignorada automaticamente. */
.wpcm-hb .wpcm-hb__thumb {
  overflow: hidden;
}
.wpcm-hb .wpcm-hb__thumb img {
  display: block;
  width: 100%;
  height: var(--hb-img-h, auto);
  object-fit: cover;
}
/* Quando há altura fixa, a proporção não deve competir. */
.wpcm-hb .wpcm-hb__item--card .wpcm-hb__thumb img,
.wpcm-hb .wpcm-hb__item--overlay img,
.wpcm-hb .wpcm-hb__item--row .wpcm-hb__thumb img,
.wpcm-hb .wpcm-hb__item--large .wpcm-hb__thumb img,
.wpcm-hb .wpcm-hb__item--mini .wpcm-hb__thumb img {
  height: var(--hb-img-h, auto);
  aspect-ratio: var(--hb-img-h-ratio, var(--hb-ratio, 16 / 9));
}
.wpcm-hb[style*="--hb-img-h"] .wpcm-hb__thumb img {
  aspect-ratio: auto;
}

/* Seções da capa wpcm-news-theme: contêiner recorta o excesso; a imagem
 * preenche por inteiro sem esticar. Fallback de proporção só onde o layout
 * não fixou uma altura própria. */
:where(
  .wpcm-th-hero-slide__image,
  .wpcm-th-lead-main__image,
  .wpcm-th-news-card__image,
  .wpcm-th-quick-card__image,
  .wpcm-th-world-story__image,
  .wpcm-th-mini-story__image,
  .wpcm-th-spotlight__image,
  .wpcm-th-spotlight__thumb,
  .wpcm-th-darkband__image,
  .wpcm-th-showcase-slide__image,
  .wpcm-th-showcase-thumb,
  .wpcm-th-column-card__image,
  .wpcm-th-doc-card__image,
  .wpcm-th-mosaic__image
) {
  aspect-ratio: 16 / 9;
}
.wpcm-th-hero-slide__image,
.wpcm-th-lead-main__image,
.wpcm-th-news-card__image,
.wpcm-th-quick-card__image,
.wpcm-th-world-story__image,
.wpcm-th-mini-story__image,
.wpcm-th-spotlight__image,
.wpcm-th-spotlight__thumb,
.wpcm-th-darkband__image,
.wpcm-th-showcase-slide__image,
.wpcm-th-showcase-thumb,
.wpcm-th-column-card__image,
.wpcm-th-doc-card__image,
.wpcm-th-mosaic__image {
  overflow: hidden;
}
.wpcm-th-hero-slide__image img,
.wpcm-th-lead-main__image img,
.wpcm-th-news-card__image img,
.wpcm-th-quick-card__image img,
.wpcm-th-world-story__image img,
.wpcm-th-mini-story__image img,
.wpcm-th-spotlight__image img,
.wpcm-th-spotlight__thumb img,
.wpcm-th-darkband__image img,
.wpcm-th-showcase-slide__image img,
.wpcm-th-showcase-thumb img,
.wpcm-th-column-card__image img,
.wpcm-th-doc-card__image img,
.wpcm-th-mosaic__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
 * 2. RESPONSIVIDADE — BLOCOS EDITORIAIS (.wpcm-hb)
 * ====================================================================== */

/* Desktop estreito / laptaps pequenos */
@media (max-width: 1200px) {
  .wpcm-hb .wpcm-hb__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .wpcm-hb .wpcm-hb__grid--3,
  .wpcm-hb .wpcm-hb__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpcm-hb .wpcm-hb-row--split { grid-template-columns: 1fr; }
  .wpcm-hb .wpcm-hb-col--side,
  .wpcm-hb .wpcm-hb-col--wide { width: 100%; }
}
/* Tablet */
@media (max-width: 782px) {
  .wpcm-hb .wpcm-hb__grid--2,
  .wpcm-hb .wpcm-hb__grid--3,
  .wpcm-hb .wpcm-hb__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpcm-hb .wpcm-hb-row,
  .wpcm-hb .wpcm-hb-row--main { grid-template-columns: 1fr; }
}
/* Celular */
@media (max-width: 600px) {
  .wpcm-hb .wpcm-hb__grid,
  .wpcm-hb .wpcm-hb__grid--2,
  .wpcm-hb .wpcm-hb__grid--3,
  .wpcm-hb .wpcm-hb__grid--4 { grid-template-columns: 1fr; }
  .wpcm-hb .wpcm-hb__item--large .wpcm-hb__thumb img { height: var(--hb-img-h, auto); }
  .wpcm-hb .wpcm-hb__head h2 { font-size: clamp(15px, 4.6vw, var(--hb-section-title, 18px)); }
}
/* Celular pequeno */
@media (max-width: 380px) {
  .wpcm-hb .wpcm-hb__item h3,
  .wpcm-hb .wpcm-hb__item--card h3,
  .wpcm-hb .wpcm-hb__item--mini h3 { font-size: clamp(14px, 4.4vw, var(--hb-card-title, 16px)); }
}

/* =========================================================================
 * 3. RESPONSIVIDADE — SEÇÕES DA CAPA (.wpcm-th-*)
 * ====================================================================== */

@media (max-width: 1200px) {
  .wpcm-th-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wpcm-th-columns-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .wpcm-th-news-grid,
  .wpcm-th-columns-grid,
  .wpcm-th-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpcm-th-hero { grid-template-columns: 1fr; }
  .wpcm-th-lead-main,
  .wpcm-th-spotlight,
  .wpcm-th-showcase { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
  .wpcm-th-mini-grid,
  .wpcm-th-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpcm-th-ranking { grid-template-columns: 1fr; }
  .wpcm-th-showcase__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wpcm-th-news-grid,
  .wpcm-th-columns-grid,
  .wpcm-th-quick-grid,
  .wpcm-th-mini-grid,
  .wpcm-th-mosaic,
  .wpcm-th-showcase__thumbs { grid-template-columns: 1fr; }
  /* Alturas de imagem mais baixas no celular para caber melhor na tela. */
  :where(
    .wpcm-th-hero-slide__image,
    .wpcm-th-lead-main__image,
    .wpcm-th-showcase-slide__image
  ) { aspect-ratio: 3 / 2; }
}
@media (max-width: 380px) {
  .wpcm-th-hero-slide h2,
  .wpcm-th-lead-main h2 { font-size: clamp(18px, 6vw, 26px); line-height: 1.2; }
}

/* =========================================================================
 * 4. PREVIEW RESPONSIVO DENTRO DO BUILDER
 * ====================================================================== */

/* Quando o builder força largura de tablet/celular no preview, as mesmas
 * regras acima já valem por serem baseadas em largura do contêiner do
 * iframe. Reforço apenas o comportamento fluido das imagens. */
.wpcm-fb-canvas img,
.wpcm-vc-preview img { max-width: 100%; }