/* «Cosa faccio» (scelta di Leo, APPROVATO.md): sotto le tre lastre, cinque riquadri grandi, uno per tipo di lavoro,
   con dentro le schermate vere che si danno il cambio; il clic apre la pagina di quel tipo di lavoro coi suoi esempi
   (stili/lavori.css). I riquadri li scrive la costruzione da pagine/parti/riquadro.html. */
.riquadri {
  position: relative;
  margin-top: 60px;
}
.riquadri-testa {
  scroll-margin-top: 120px;
}
/* L'invito segue i riquadri */
.riquadri ~ .invito {
  margin-top: 80px;
}
.riquadri-testa h2 {
  font-size: 40px;
  letter-spacing: -0.03em;
}
.riquadri-testa p {
  margin-top: 6px;
  font-size: 18px;
  color: var(--text-2);
}
.riq-griglia {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  margin-top: 28px;
}
.riq-griglia.tre-due .riq {
  grid-column: span 2;
}
.riq-griglia.tre-due .riq:nth-child(4) {
  grid-column: 2 / span 2;
}

/* Il riquadro */
.riq {
  --riq-alto: #f4f2ec;
  --riq-basso: #ddd7cc;
  --riq-scuro: #3c3c3f;
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  padding: 28px 28px 0;
  border-radius: 34px;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(160deg, var(--riq-alto) 0%, var(--riq-basso) 100%);
  box-shadow:
    inset 0 1px 0 var(--bianco),
    0 0 0 1px var(--bianco-60),
    0 26px 50px -32px var(--apparecchio-ombra);
  transition:
    transform 0.55s var(--ease),
    box-shadow 0.55s var(--ease);
}
/* gli effetti col mouse sopra, qui e più giù, solo col mouse vero («hover»): toccando col dito il telefono finge un
   mouse sopra, che faceva partire il sollevamento proprio mentre si cambia pagina */
@media (hover: hover) {
  .riq:hover {
    transform: translateY(-6px);
    box-shadow:
      inset 0 1px 0 var(--bianco),
      0 0 0 1px var(--bianco-60),
      0 36px 60px -30px var(--apparecchio-ombra);
  }
}
.riq-siti {
  --riq-alto: #f4f2e6;
  --riq-basso: #dbd6b4;
  --riq-scuro: #6c6a3b;
}
.riq-negozi {
  --riq-alto: #fbf2ec;
  --riq-basso: #ead1c6;
  --riq-scuro: #7a3a32;
}
.riq-piattaforme {
  --riq-alto: #eff6f5;
  --riq-basso: #cde1de;
  --riq-scuro: #1f3f40;
}
.riq-gestionali {
  --riq-alto: #f8f2ea;
  --riq-basso: #e2d3c0;
  --riq-scuro: #4a3428;
}
.riq-app {
  --riq-alto: #f2f2f5;
  --riq-basso: #d5d7de;
  --riq-scuro: #2b3036;
}
.riq-testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.riq-ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bianco-70);
  box-shadow: 0 6px 14px -8px var(--apparecchio-ombra);
}
.riq-ico svg {
  width: 22px;
  height: 22px;
}
.riq-conta {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--riq-scuro);
  background: var(--bianco-60);
}
.riq h3 {
  margin-top: 18px;
  font-size: 30px;
  letter-spacing: -0.02em;
}
.riq p {
  margin-top: 6px;
  max-width: 330px;
  font-size: 15px;
  line-height: 1.42;
  color: var(--text-2);
}
.riq-vai {
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: 22px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bianco);
  background: var(--riq-scuro);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}
@media (hover: hover) {
  .riq:hover .riq-vai {
    opacity: 1;
    transform: none;
  }
}

/* Le schermate che si danno il cambio, in una finestra che esce dal fondo del riquadro */
.riq-vista {
  position: relative;
  flex: 1;
  margin-top: 22px;
}
.riq-finestra {
  position: absolute;
  left: 4%;
  right: -16%;
  top: 0;
  bottom: -12%;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: var(--bianco);
  box-shadow:
    0 0 0 1px var(--bianco-60),
    0 22px 40px -18px var(--apparecchio-ombra);
  transition: transform 0.6s var(--ease);
}
@media (hover: hover) {
  .riq:hover .riq-finestra {
    transform: translateY(-8px);
  }
}
.riq-barra {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 5px;
  align-items: center;
  height: 20px;
  padding-left: 10px;
  background: var(--portatile-barra);
  border-bottom: 1px solid var(--screen-line);
}
.riq-barra i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--portatile-luci);
}
.riq-finestra img {
  position: absolute;
  left: 0;
  top: 21px;
  width: 100%;
  height: calc(100% - 21px);
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  transform-origin: 20% 0;
}
.riq-finestra img:first-of-type {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .riq-finestra img {
    animation: riq-giro 9s var(--ease) infinite;
    animation-delay: -0.55s;
  }
  .riq-finestra img:nth-of-type(2) {
    animation-delay: 2.45s;
  }
  .riq-finestra img:nth-of-type(3) {
    animation-delay: 5.45s;
  }
}
@keyframes riq-giro {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  6% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  39% {
    opacity: 0;
    transform: scale(1.07);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}