/* ============================================
   CATEGORY — categoria, arquivos, busca e 404
   ============================================ */

/* Hero de categoria: texto de um lado e a foto inteira do outro, em moldura de
   adesivo. Fundo azul-noite liso e uma faixa na cor da categoria embaixo. */
.cat-hero {
  --cat-cor: var(--turquesa);
  background: var(--azul-noite);
  border-bottom: 10px solid var(--cat-cor);
  box-shadow: 0 3px 0 var(--azul-noite);
  color: var(--agua-de-coco);
}
.cat-hero--alimentacao { --cat-cor: var(--manga); }
.cat-hero--comportamento { --cat-cor: var(--magenta); }
.cat-hero--cuidados-e-higiene { --cat-cor: var(--agua-de-coco); }
.cat-hero--curiosidades { --cat-cor: var(--verde-limao); }

.cat-hero__container { display: grid; gap: 28px; align-items: center; padding-block: 32px 40px; }
.cat-hero__texto { display: grid; justify-items: start; gap: 12px; min-width: 0; }
.cat-hero__titulo { font-size: clamp(36px, 8vw, 60px); line-height: 1.05; color: var(--agua-de-coco); }
.cat-hero__descricao { max-width: 520px; font-size: 19px; font-weight: 700; line-height: 1.45; }
.cat-hero .busca { margin-top: 6px; }

.cat-hero__foto {
  border: 3px solid var(--agua-de-coco);
  border-radius: var(--raio);
  box-shadow: 7px 7px 0 var(--cat-cor);
  overflow: hidden;
}
.cat-hero__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.cat-hero .breadcrumb { margin-bottom: 0; }
.cat-hero .breadcrumb__item[aria-current="page"] { color: var(--agua-de-coco); opacity: 0.85; }
.cat-hero :focus-visible { outline-color: var(--manga); }

@media (min-width: 900px) {
  .cat-hero__container { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; padding-block: 48px 56px; }
}