/* =========================================================
   CASO CLÍNICO INTERESANTE DEL MES V3
   Diseño editorial compacto:
   título → texto breve → galería 2×2.
   SOLO afecta #caso-del-mes.
   ========================================================= */

#caso-del-mes.case-month-editorial{
  display:block !important;

  width:100% !important;
  max-width:none !important;

  padding:clamp(2.8rem,4vw,4rem) 0 !important;

  color:#443c42 !important;
  background:#f5f5f0 !important;
}

#caso-del-mes .case-month-shell{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}

/* ---------------------------------------------------------
   ENCABEZADO
   --------------------------------------------------------- */

#caso-del-mes .case-month-heading{
  margin:0 0 clamp(1.25rem,2vw,1.7rem);
  padding:0 0 clamp(1rem,1.4vw,1.25rem);

  border-bottom:1px solid rgba(77,48,73,.11);
}

#caso-del-mes .case-month-heading .eyebrow{
  display:block;

  margin:0 0 .5rem;

  color:#d96e58;

  font-size:.7rem;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
}

#caso-del-mes .case-month-heading h2{
  max-width:20ch;
  margin:0;

  color:#4d3049;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.35rem,3.7vw,3.75rem);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:.98;

  text-wrap:balance;
}

/* ---------------------------------------------------------
   ESTRUCTURA:
   texto arriba + galería abajo
   --------------------------------------------------------- */

#caso-del-mes .case-month-layout{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:clamp(1.25rem,2vw,1.7rem) !important;
  align-items:start !important;
}

#caso-del-mes .case-month-copy{
  width:100%;
  min-width:0;
}

#caso-del-mes .case-month-body{
  width:100%;
  min-height:0 !important;
  height:auto !important;

  margin:0;
  padding:1.15rem 1.25rem;

  color:#665c63;
  background:#fffdf9;

  border:1px solid rgba(77,48,73,.08);
  border-left:3px solid #d96e58;
  border-radius:15px;

  box-shadow:0 8px 22px rgba(58,43,54,.025);

  font-size:clamp(.94rem,1vw,1rem);
  line-height:1.72;
}

/* Mantiene el cuadro breve aunque el texto tenga pocas líneas */
#caso-del-mes .case-month-body{
  max-width:none;
}

/* ---------------------------------------------------------
   GALERÍA 2×2
   Un marco común para verticales y horizontales.
   --------------------------------------------------------- */

#caso-del-mes .case-month-gallery{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:.8rem !important;

  width:100%;
  min-width:0;
}

#caso-del-mes .case-month-photo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100%;
  min-width:0;
  height:clamp(250px,24vw,340px) !important;

  margin:0;
  padding:.65rem;

  overflow:hidden;

  background:#f0eae5;

  border:1px solid rgba(77,48,73,.085);
  border-radius:15px;

  box-sizing:border-box;
}

#caso-del-mes .case-month-photo img{
  display:block !important;

  width:auto !important;
  height:auto !important;

  max-width:100% !important;
  max-height:100% !important;

  object-fit:contain !important;
  object-position:center !important;

  border-radius:9px;
}

/* 1 imagen: grande pero controlada */
#caso-del-mes .case-month-gallery.case-month-count-1{
  grid-template-columns:minmax(0,760px) !important;
}

#caso-del-mes .case-month-gallery.case-month-count-1 .case-month-photo{
  height:400px !important;
}

/* 2 imágenes: una fila */
#caso-del-mes .case-month-gallery.case-month-count-2{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

/* 3 imágenes: la primera toma todo el ancho para equilibrar */
#caso-del-mes .case-month-gallery.case-month-count-3 .case-month-photo:first-child{
  grid-column:1 / -1;
  height:330px !important;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:900px){
  #caso-del-mes.case-month-editorial{
    padding:2.8rem 0 !important;
  }

  #caso-del-mes .case-month-shell{
    width:min(760px,calc(100% - 40px));
  }

  #caso-del-mes .case-month-photo{
    height:clamp(220px,38vw,300px) !important;
  }

  #caso-del-mes .case-month-gallery.case-month-count-1 .case-month-photo{
    height:340px !important;
  }

  #caso-del-mes .case-month-gallery.case-month-count-3 .case-month-photo:first-child{
    height:290px !important;
  }
}

/* ---------------------------------------------------------
   MÓVIL
   --------------------------------------------------------- */

@media(max-width:600px){
  #caso-del-mes.case-month-editorial{
    padding:2.35rem 0 !important;
  }

  #caso-del-mes .case-month-shell{
    width:calc(100% - 32px);
  }

  #caso-del-mes .case-month-heading{
    margin-bottom:1rem;
    padding-bottom:.85rem;
  }

  #caso-del-mes .case-month-heading .eyebrow{
    font-size:.63rem;
  }

  #caso-del-mes .case-month-heading h2{
    max-width:none;

    font-size:clamp(1.95rem,8.7vw,2.7rem);
    line-height:1;
  }

  #caso-del-mes .case-month-layout{
    gap:1rem !important;
  }

  #caso-del-mes .case-month-body{
    padding:.95rem 1rem;

    font-size:.9rem;
    line-height:1.64;

    border-radius:12px;
  }

  /* Dos por fila para mantener la sección compacta */
  #caso-del-mes .case-month-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.5rem !important;
  }

  #caso-del-mes .case-month-photo{
    height:190px !important;

    padding:.35rem;

    border-radius:11px;
  }

  #caso-del-mes .case-month-photo img{
    border-radius:7px;
  }

  #caso-del-mes .case-month-gallery.case-month-count-1{
    grid-template-columns:1fr !important;
  }

  #caso-del-mes .case-month-gallery.case-month-count-1 .case-month-photo{
    height:280px !important;
  }

  #caso-del-mes .case-month-gallery.case-month-count-3 .case-month-photo:first-child{
    height:220px !important;
  }
}

/* Teléfonos extremadamente estrechos */
@media(max-width:340px){
  #caso-del-mes .case-month-gallery{
    grid-template-columns:1fr !important;
  }

  #caso-del-mes .case-month-photo,
  #caso-del-mes .case-month-gallery.case-month-count-3 .case-month-photo:first-child{
    height:230px !important;
  }
}