/**
 * Ficha de caso de éxito (single-caso-de-exito.php).
 * Origen: #s-case-overview y #s-case-description de single-case-study.html
 * (valores exactos). Se carga solo con is_singular( 'caso-de-exito' ).
 * Globales usados aquí (style.css): .spec-table, .product-cta-row,
 * .btn-outline y .sr-only.
 *
 * Cambios respecto al mockup: sin paso automático, diapositivas como
 * enlaces a la imagen grande y visor con <dialog> nativo ([open] en lugar
 * de .open). Sin JS: primera foto visible y controles ocultos (hidden).
 *
 * @package silomasters
 */

/* =====================================================
   FICHA Y GALERÍA
   ===================================================== */
.cs-overview{display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:stretch;}
@media(max-width:900px){ .cs-overview{grid-template-columns:1fr; gap:32px;} }

/* ficha técnica */
.cs-specs{background:var(--white); border:1px solid var(--border); border-radius:10px; padding:32px 32px 24px; box-shadow:0 30px 60px -40px rgba(22,22,22,.25);}
@media(max-width:560px){ .cs-specs{padding:24px 20px 16px;} }
/* <h2> con el aspecto del <div> del mockup: anula la tipografía base de h2 */
.cs-specs-title{font-family:var(--label); font-size:13px; font-weight:700; letter-spacing:.06em; line-height:1.6; text-transform:uppercase; color:var(--orange); margin-bottom:12px;}
.cs-specs .spec-table{margin-top:0;}
.cs-specs .spec-table th{width:150px;}
.cs-specs .spec-table tr:last-child{border-bottom:none;}

/* galería */
.cs-slider{position:relative; overflow:hidden; border-radius:10px; background:var(--black); min-height:420px;}
@media(max-width:900px){ .cs-slider{min-height:0; aspect-ratio:4/3;} }
.cs-slide{position:absolute; inset:0; display:block; width:100%; border:none; padding:0; background:none; cursor:zoom-in; opacity:0; transition:opacity .8s ease; pointer-events:none;}
.cs-slide.active{opacity:1; pointer-events:auto;}
.cs-slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 6s ease;}
.cs-slide.active img{transform:scale(1);}
/* foco dentro de la diapositiva (el carrusel recorta lo que sobresale) */
.cs-slide:focus-visible{outline:3px solid var(--orange); outline-offset:-3px;}
.cs-slider::after{content:''; position:absolute; inset:auto 0 0 0; height:120px; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);}

.cs-slider-controls{position:absolute; left:20px; right:20px; bottom:18px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.cs-slider-dots{display:flex; gap:8px;}
.cs-slider-dot{width:28px; height:4px; border:none; padding:0; border-radius:2px; background:rgba(255,255,255,.4); transition:background .3s ease, width .3s ease;}
.cs-slider-dot.active{background:var(--orange); width:44px;}
.cs-slider-arrows{display:flex; gap:8px;}
.cs-slider-arrow{width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.25); color:var(--white); display:flex; align-items:center; justify-content:center; transition:background .2s ease, border-color .2s ease;}
.cs-slider-arrow:hover{background:var(--orange); border-color:var(--orange);}
.cs-slider-arrow .material-symbols-outlined{font-size:20px;}
.cs-slider-dot:focus-visible,
.cs-slider-arrow:focus-visible{outline:2px solid var(--white); outline-offset:3px;}

/* =====================================================
   DESCRIPCIÓN
   ===================================================== */
.cs-description{background:var(--bg-tint);}
.cs-description .lede{max-width:none; margin-top:18px;}
.cs-description .product-cta-row{margin-top:32px;}

/* =====================================================
   VISOR AMPLIADO (<dialog> nativo)
   Se resetean el borde, el padding, el fondo y el tamaño máximo por
   defecto del dialog; el oscurecido va en ::backdrop.
   ===================================================== */
dialog.cs-lightbox{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; border:0; padding:24px; background:transparent; color:var(--white); overflow:hidden;
}
dialog.cs-lightbox[open]{display:flex; align-items:center; justify-content:center; animation:csLightboxIn .25s ease;}
dialog.cs-lightbox::backdrop{background:rgba(0,0,0,.9);}
@keyframes csLightboxIn{ from{opacity:0;} to{opacity:1;} }
.cs-lightbox img{max-width:min(1200px,100%); max-height:85vh; border-radius:var(--r-lg); object-fit:contain;}
.cs-lightbox-btn{position:absolute; background:rgba(255,255,255,.1); border:1px solid var(--border-dark); color:var(--white); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
/* icono blanco: fondo --orange-dark por contraste */
.cs-lightbox-btn:hover{background:var(--orange-dark); border-color:var(--orange-dark);}
.cs-lightbox-btn:focus-visible{outline:2px solid var(--white); outline-offset:3px;}
.cs-lightbox-close{top:20px; right:20px;}
.cs-lightbox-prev{left:20px; top:50%; transform:translateY(-50%);}
.cs-lightbox-next{right:20px; top:50%; transform:translateY(-50%);}
@media(max-width:560px){ .cs-lightbox-prev, .cs-lightbox-next{top:auto; bottom:20px; transform:none;} }

/* =====================================================
   MOVIMIENTO REDUCIDO: sin fundido ni zoom
   ===================================================== */
@media(prefers-reduced-motion: reduce){
  .cs-slide,
  .cs-slide img,
  .cs-slider-dot,
  .cs-slider-arrow,
  .cs-lightbox-btn{transition:none;}
  .cs-slide img{transform:none;}
  dialog.cs-lightbox[open]{animation:none;}
}