/**
 * Componente Productos (section/products.php).
 * Origen: #s-productos de home-final.html (valores exactos).
 *
 * El panel se expande con :hover y con :focus-within (teclado). Con
 * enlace, todo el panel es clicable mediante un pseudo-elemento del enlace
 * del <h3>, recortado por el overflow:hidden del panel.
 *
 * @package silomasters
 */

.products-section{background:var(--bg);}
.products-intro{padding:96px 0 48px; text-align:center;}
@media(max-width:720px){ .products-intro{padding:60px 0 32px;} }
.products-intro .eyebrow{justify-content:center;}
.products-intro .lede{margin:16px auto 0;}

.products-panels{display:flex; height:640px; overflow:hidden;}
@media(max-width:720px){ .products-panels{height:auto; flex-direction:column;} }

.product-panel{
  position:relative; flex:1 1 0%; min-width:0; overflow:hidden;
  border-right:1px solid rgba(255,255,255,.08);
  transition:flex .6s cubic-bezier(.22,.61,.36,1);
}
.product-panel.has-link{cursor:pointer;}
.product-panel:last-child{border-right:none;}
.product-panel:hover,
.product-panel:focus-within{flex:4 1 0%;}

/* <img> en lugar del background-image del mockup (mismo encuadre: cover + center) */
.product-panel-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}

.product-panel-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.88) 100%);
}

.product-panel-head{
  position:absolute; top:24px; left:24px; z-index:2; color:var(--white);
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.product-panel-head .material-symbols-outlined{font-size:24px;}

.product-panel-title{
  position:absolute; left:24px; right:24px; bottom:24px; z-index:2; color:var(--white);
  font-family:var(--display); font-weight:800; font-size:28px; letter-spacing:.01em; text-transform:uppercase;
  line-height:.95; text-shadow:0 1px 6px rgba(0,0,0,.7);
  transition:opacity .3s ease;
}
.product-panel:hover .product-panel-title,
.product-panel:focus-within .product-panel-title{opacity:0;}

.product-panel-body{
  position:absolute; left:24px; right:24px; bottom:24px; z-index:2; color:var(--white);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.product-panel:hover .product-panel-body,
.product-panel:focus-within .product-panel-body{opacity:1; transition-delay:.1s; pointer-events:auto;}
.product-panel-count{font-family:var(--label); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.75);}
/* es un <h3>: color propio para no heredar el de la regla base de encabezados */
.product-panel-name{font-family:var(--display); font-weight:800; font-size:28px; letter-spacing:.01em; text-transform:uppercase; line-height:.95; margin-top:6px; color:var(--white);}
.product-panel-divider{height:1px; background:rgba(255,255,255,.4); margin:14px 0 16px; max-width:320px;}
.product-panel-list li{font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.02em; text-transform:uppercase; margin-bottom:11px; color:rgba(255,255,255,.9);}

/* ---- enlace extendido: todo el panel es clicable ---- */
.product-panel-name a{color:inherit; text-decoration:none;}
.product-panel-name a::after{content:''; position:absolute; inset:-2000px;}
.product-panel-name a:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
@supports selector(:has(*)){
  .product-panel-name a:focus-visible{outline:none;}
  .product-panel:has(a:focus-visible){outline:2px solid var(--orange); outline-offset:-2px;}
}

/* ---- pantallas táctiles (sin hover) por encima de 720px: lista siempre visible, sin expansión ---- */
@media(hover:none) and (min-width:721px){
  .product-panel:hover,
  .product-panel:focus-within{flex:1 1 0%;}
  .product-panel-title{display:none;}
  .product-panel-body{opacity:1; pointer-events:auto;}
}

@media(max-width:720px){
  .product-panel{height:auto; border-right:none; border-bottom:1px solid rgba(255,255,255,.08);}
  .product-panel:hover,
  .product-panel:focus-within{flex:1 1 0%;}
  .product-panel-title{display:none;}
  .product-panel-body{opacity:1; pointer-events:auto; position:static; padding:64px 24px 24px;}
}

@media(prefers-reduced-motion: reduce){
  .product-panel,
  .product-panel-title,
  .product-panel-body{transition:none;}
}