/* =============================================================================
   CC GALERIA — muro masonry + visor
   -----------------------------------------------------------------------------
   Todas las clases son propias (.ccg-*): no hereda ni pelea con el CSS del
   bloque Galeria de WordPress, ni con el del tema, ni con el de Elementor.

   Los colores y radios salen de los tokens del tema hijo CC si existen, y si
   no, de un valor de respaldo. Funciona igual con o sin el sistema CC.
   ============================================================================= */

.ccg {
  --ccg-gap: var(--cc-space-5, 20px);
  --ccg-radius: var(--cc-radius, 14px);
  --ccg-tile: var(--cc-bg-alt, #f1e1d8);
  --ccg-brand: var(--cc-brand, #3f5ea3);
  --ccg-ink: var(--cc-ink, #243354);
  --ccg-ease: var(--cc-ease, cubic-bezier(0.2, 0.7, 0.3, 1));
  --ccg-dur: var(--cc-dur, 720ms);

  position: relative;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.ccg *,
.ccg *::before,
.ccg *::after {
  box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   1. MURO
   Sin JavaScript: columnas CSS (se ve bien, pero se lee de arriba abajo).
   Con JavaScript: el script reparte las fotos en columnas en orden de
   lectura, izquierda a derecha, cada una en la columna mas corta. Asi las
   primeras fotos de la lista son las primeras que se ven.
   -------------------------------------------------------------------------- */

.ccg .ccg-wall {
  column-count: var(--ccg-cols, 3);
  column-gap: var(--ccg-gap);
}

.ccg.is-masonry .ccg-wall {
  column-count: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--ccg-gap);
}

.ccg .ccg-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ccg-gap);
}

.ccg .ccg-item {
  position: relative;
  display: block;
  margin: 0 0 var(--ccg-gap);
  padding: 0;
  overflow: hidden;
  border-radius: var(--ccg-radius);
  background: var(--ccg-tile);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  isolation: isolate;
}

.ccg.is-masonry .ccg-item {
  margin: 0;
}

/* El boton que envuelve cada foto. Los temas y Elementor pintan todos los
   <button> con fondo, borde y relleno: aqui se borra todo eso. */
.ccg .ccg-open {
  all: unset;
  display: block;
  width: 100%;
  cursor: zoom-in;
  box-sizing: border-box;
}

.ccg .ccg-open:hover,
.ccg .ccg-open:focus,
.ccg .ccg-open:active {
  background: none;
  color: inherit;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.ccg .ccg-open:focus-visible {
  outline: 3px solid var(--ccg-brand);
  outline-offset: -3px;
  border-radius: var(--ccg-radius);
}

.ccg .ccg-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: scale(1.001);
  transition: transform var(--ccg-dur) var(--ccg-ease),
              filter var(--ccg-dur) var(--ccg-ease);
}

/* Velo y lupa al pasar el cursor. */
.ccg .ccg-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(20, 26, 44, 0.32), transparent 48%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

.ccg .ccg-item::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.94);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243354' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  box-shadow: 0 6px 18px -6px rgba(20, 26, 44, 0.45);
  opacity: 0;
  transform: translateY(6px) scale(0.85);
  transition: opacity 320ms ease, transform 320ms ease;
  pointer-events: none;
}

.ccg .ccg-item:hover .ccg-img {
  transform: scale(1.045);
}

.ccg .ccg-item:hover::after,
.ccg .ccg-item:hover::before,
.ccg .ccg-item:focus-within::before {
  opacity: 1;
}

.ccg .ccg-item:hover::before,
.ccg .ccg-item:focus-within::before {
  transform: none;
}

/* Pie de foto, solo si la foto tiene leyenda en la Biblioteca de medios. */
.ccg .ccg-cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  margin: 0;
  padding: 36px 64px 14px 16px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  background: linear-gradient(to top, rgba(20, 26, 44, 0.6), transparent);
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   2. ENTRADA ESCALONADA
   El estado oculto solo existe si el JavaScript arranco (.ccg-js). Si el
   script falla, las fotos se ven igual: nunca un muro en blanco.
   -------------------------------------------------------------------------- */

.ccg.ccg-js .ccg-item {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms var(--ccg-ease), transform 700ms var(--ccg-ease);
  transition-delay: var(--ccg-d, 0ms);
}

.ccg.ccg-js .ccg-item.is-in {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------------------
   3. VISOR
   -------------------------------------------------------------------------- */

html.ccg-lock {
  overflow: hidden;
}

.ccg .ccg-viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
}

.ccg .ccg-viewer::backdrop {
  background: rgba(14, 18, 32, 0.94);
}

.ccg .ccg-viewer[open] {
  animation: ccg-in 260ms ease both;
}

@keyframes ccg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ccg .ccg-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 72px 96px 84px;
}

.ccg .ccg-full {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  transition: opacity 220ms ease;
}

.ccg .ccg-viewer.is-loading .ccg-full {
  opacity: 0.35;
}

.ccg .ccg-counter {
  position: absolute;
  top: 26px;
  left: 28px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.78);
}

.ccg .ccg-caption {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: min(90vw, 44rem);
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.86);
}

.ccg .ccg-caption:empty {
  display: none;
}

/* Botones del visor. El reseteo total va SOLO en la regla base: si se repite
   en :focus, borra tambien la posicion y el boton de cerrar acaba en una
   esquina equivocada en cuanto recibe el foco. Los estados se blindan con
   propiedades explicitas, que ganan a los "button:hover" del tema por
   especificidad. */
.ccg .ccg-btn {
  all: unset;
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 200ms ease, transform 200ms ease;
}

.ccg .ccg-btn:hover,
.ccg .ccg-btn:focus,
.ccg .ccg-btn:active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  padding: 0;
  box-shadow: none;
  text-decoration: none;
}

.ccg .ccg-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.ccg .ccg-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.ccg .ccg-btn[hidden] {
  display: none;
}

.ccg .ccg-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ccg .ccg-close { top: 16px; right: 18px; }
.ccg .ccg-prev  { top: 50%; left: 22px;  margin-top: -26px; }
.ccg .ccg-next  { top: 50%; right: 22px; margin-top: -26px; }

/* -----------------------------------------------------------------------------
   4. RESPONSIVE
   Los cortes de columnas tienen que coincidir con los de ccg.js.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .ccg .ccg-wall { column-count: min(2, var(--ccg-cols, 3)); }
}

@media (max-width: 560px) {
  .ccg { --ccg-gap: 12px; }
  .ccg .ccg-wall { column-count: 1; }

  .ccg .ccg-stage { padding: 64px 12px 96px; }
  .ccg .ccg-prev,
  .ccg .ccg-next { top: auto; bottom: 22px; margin-top: 0; width: 46px; height: 46px; }
  .ccg .ccg-prev { left: 18px; }
  .ccg .ccg-next { right: 18px; }
  .ccg .ccg-caption { bottom: 84px; }
}

/* En tactil no hay hover: sin lupa ni velo, que solo ensucian. */
@media (hover: none) {
  .ccg .ccg-item::before,
  .ccg .ccg-item::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ccg.ccg-js .ccg-item { opacity: 1; transform: none; transition: none; }
  .ccg .ccg-img { transition: none; }
  .ccg .ccg-item:hover .ccg-img { transform: none; }
  .ccg .ccg-viewer[open] { animation: none; }
}

/* Aviso para editoras cuando la galeria esta vacia. */
.ccg-aviso {
  padding: 16px 20px;
  border: 1px dashed currentColor;
  border-radius: 10px;
  opacity: 0.8;
}