/*
  style.css – Pikaslab.it
  Tema POP CMYK + stili card recensioni
  Ogni blocco è commentato per facilitare lo studio.
*/

/* ----------------- RESET MINIMO ----------------- */
*{
  box-sizing:border-box;               /* include padding & border nel calcolo larghezza/altezza */
  margin:0;
  padding:0;
}
body{
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  line-height:1.6;
  background:#fff;
  color:#111;
}

/* ----------------- HEADER + NAV ----------------- */
header{
  background:linear-gradient(90deg, cyan, magenta, yellow);
  color:#000;
  text-align:center;
  padding:1.5rem 1rem;
}
nav{
  background:#000;
  text-align:center;
  padding:0.5rem;
}
nav ul{list-style:none;}
nav li{display:inline-block;margin:0 1rem;}
nav a{
  color:#fff;
  text-decoration:none;
  font-weight:bold;
}
nav a:hover{color:cyan;}

/* ----------------- CONTENITORE GENERALE ----------------- */
main{
  max-width:960px;          /* larghezza massima leggibile */
  margin:2rem auto;
  padding:0 1rem;
}
section{margin-bottom:2rem;}
h2{margin:1.2rem 0 0.6rem;color:#000;}
h3{margin:0.8rem 0;color:#000;}

/* ----------------- TABELLA SPECIFICHE ----------------- */
.table-wrapper{overflow-x:auto;} /* scroll orizzontale su mobile */

/* la classe .scheda viene creata dinamicamente nel file HTML */

/* ----------------- PULSANTE LINK AFFILIATO ----------------- */
.pulsante-link{
  display:inline-block;
  background:yellow;
  color:#000;
  padding:0.6rem 1.2rem;
  border:2px solid #000;
  border-radius:8px;
  font-weight:bold;
  text-decoration:none;
  transition:background 0.3s;
}
.pulsante-link:hover{
  background:magenta;
  color:#fff;
}

/* ----------------- CARD RECENSIONI (index delle recensioni) ----------------- */
.card{
  display:block;
  width:260px;               /* larghezza card su desktop */
  padding:1rem;
  border:2px solid magenta;  /* bordo CMYK */
  border-radius:10px;
  background:#fff;
  text-align:center;
  margin:1rem auto;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  transition:transform 0.2s;
}
.card:hover{transform:translateY(-4px);} /* piccola animazione al passaggio */
.card-img{
  width:100%;
  height:180px;            /* altezza fissa → card uniformi */
  object-fit:contain;      /* fa sì che l'immagine non venga tagliata */
  margin-bottom:0.5rem;
  border-radius:6px;
}
.card h3{font-size:1.1rem;margin:0.4rem 0;color:#000;}

/* ----------------- FOOTER ----------------- */
footer{
  background:#000;
  color:#fff;
  text-align:center;
  padding:1rem;
  font-size:0.9rem;
}

/* ----------------- MEDIA QUERY RESPONSIVE ----------------- */
@media(max-width:600px){
  .card{width:100%;}
  .card-img{height:160px;}
}