/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* =========================
   HOME: Grid 4 tarjetas
========================= */
.home .breed-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

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

/* =========================
   ARCHIVE RAZAS (Sidebar + Grid)
========================= */
.breed-section{ padding: 40px 16px; }
.breed-container{ max-width: 1180px; margin: 0 auto; }
.breed-page-title{ margin: 0 0 22px; font-size: 34px; }

.breed-layout{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
}

.breed-sidebar-box{
  background:#fff;
  border-radius:16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  padding:16px;
}

@media (max-width: 1024px){
  .breed-layout{ grid-template-columns: 1fr; }
}

/* Grid cards (archive + shortcode home) */
.breed-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
}

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

/* =========================
   TARJETA RAZA (como imagen 2)
========================= */
.breed-card{
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}

.breed-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(0,0,0,.14);
}

/* Imagen (tu HTML usa .breed-img-el) */
.breed-img{ display: block; }
.breed-img-el{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Cuerpo */
.breed-info{
  padding: 18px 18px 22px;
  text-align: center;
}

.breed-title{
  margin: 14px 0 10px;
  color: #0f4a46;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
}

.breed-tag{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fde7dc;
  color: #e35b2b;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  margin: 0 0 12px;
}

.breed-desc{
  color: #6b7280;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
}

.breed-btn{
  display: inline-block;
  border: 2px solid #0f4a46;
  color: #0f4a46;
  background: transparent;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  text-decoration: none;
  transition: all .18s ease;
}



/* =========================
   SINGLE RAZA
========================= */
.raza-single{ padding: 40px 16px; }
.raza-container{ max-width: 980px; margin: 0 auto; }

.raza-header{ text-align: center; margin-bottom: 16px; }

.raza-title{
  font-size: 42px;
  font-weight: 800;
  color: #0f4a46;
  margin: 0 0 10px;
  line-height: 1.1;
}

.raza-badge{
  display:inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fde9df;
  color: #ec642c;
  font-weight: 700;
  font-size: 14px;
}

.raza-image{
  max-width: 760px;
  margin: 18px auto;
  border-radius: 18px;
  overflow: hidden;
}

/* Control de alto visible */
.raza-featured{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px){
  .raza-featured{ height: 280px; }
}

.raza-desc{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 18px;
  font-size: 16px;
  line-height: 1.6;
  color: #4b5563;
  opacity: 0.95;
}

.raza-wp-content{
  max-width: 760px;
  margin: 0 auto;
}

/* ===============================
   FIX DEFINITIVO BADGE + SINGLE RAZA
   (mata estilos Blocksy)
=============================== */

.raza-single .raza-badge{
  position: relative !important;
  display: inline-block !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: #fde9df !important;
  color: #ec642c !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

/* 🔥 MATA el "pico" de Blocksy */
.raza-single .raza-badge::before,
.raza-single .raza-badge::after{
  content: none !important;
  display: none !important;
}

/* Imagen como card, no hero */
.raza-single .raza-image{
  max-width: 760px !important;
  margin: 20px auto !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.10) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
}

/* Controla altura real */
.raza-single .raza-featured{
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 768px){
  .raza-single .raza-featured{
    height: 280px !important;
  }
}

/* Archive razas: que el grid se vea y no quede pegado */
body.post-type-archive-raza .breed-container{
  padding-top: 10px;
}

body.post-type-archive-raza .breed-grid{
  min-height: 200px; /* para que no parezca “no hay nada” mientras cargas */
}


.breed-title-link{
  color: inherit;
  text-decoration: none;
}
.breed-title-link:hover{
  text-decoration: none;
}

/* Hover botón tarjeta raza */
.breed-card .breed-btn {
  border: 2px solid #0f4a46;
  color: #0f4a46;
  background: transparent;
  transition: all 0.2s ease;
}

.breed-card .breed-btn:hover {
  background: #ec642c;      /* naranja */
  border-color: #ec642c;
  color: #ffffff;
}

.breed-card .breed-title a {
  color: #0f4a46;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breed-card .breed-title a:hover {
  color: #ec642c;
}

/* FORCE hover naranja en botón de tarjetas */
.breed-grid .breed-card .breed-btn{
  border: 2px solid #0f4a46 !important;
  color: #0f4a46 !important;
  background: transparent !important;
  transition: all .2s ease !important;
}

.breed-grid .breed-card .breed-btn:hover,
.breed-grid .breed-card .breed-btn:focus{
  background: #ec642c !important;
  border-color: #ec642c !important;
  color: #ffffff !important;
}

.breed-page-subtitle{
  max-width: 720px;
  margin: 6px 0 28px;
  font-size: 16px;
  line-height: 1.6;
  color: #6b7280;
}

/* =========================
   HERO – Página Razas
========================= */
.breed-page-title{
  font-size: 42px;
  font-weight: 800;
  color: #0f4a46;
  margin: 0 0 10px;
  line-height: 1.15;
}

.breed-page-subtitle{
  max-width: 720px;
  font-size: 18px;
  line-height: 1.7;
  color: #6b7280;
  margin: 0 0 36px;
}

/* Ajustes responsive */
@media (max-width: 768px){
  .breed-page-title{
    font-size: 32px;
  }
  .breed-page-subtitle{
    font-size: 16px;
  }
}