#intro{
  padding-top: 45vh;
  position: relative;
  overflow: clip;
}

#intro .bg-svg{
  position: absolute;
  top: -25px;
  left: -50px; /* ← questo crea il taglio */

  z-index: 0;
  pointer-events: none;
}


#intro .bg-svg svg{
  width: clamp(350px, 302px + 15vw, 590px);
  height: auto;

  transform: rotate(36deg); /* verso destra */
  transform-origin: 50% 50%;

  color: rgba(0,0,0,.18);
  filter: grayscale(1);
  opacity: .35;
}

#intro .contenitore{
  position: relative;
  z-index: 1;
}


#intro .contenitore header h1{
  font-size: clamp(22px, 7.2px + 4.625vw, 96px);
}

@media (max-width: 768px){
  #intro .bg-svg{
    opacity: .18;
    top: -60px;
    left: -60px;
  }

  #intro .bg-svg svg{
    width: 360px;
  }
}

/* desktop */
@media only screen and (min-width: 768px){
  #intro .contenitore .contenuto{
    padding-left: 30%;
  }
}



/* === Referenze: layout base === */

#referenze .referenze-items {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* mobile */
}

/* tablet: 2 colonne */
@media (min-width: 600px) {
  #referenze .referenze-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* desktop fino a 1024px: 3 colonne */
@media (min-width: 1024px) {
  #referenze .referenze-items {
    grid-template-columns: repeat(3, 1fr);
  }
}



#referenze .referenze-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px; /* opzionale */
  min-height: 240px;   /* garantisce un’altezza “card” decente */
}

/* sfondo */
#referenze .referenze-sfondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#referenze .referenze-sfondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* overlay/copy */
#referenze .referenze-copy {
  position: absolute;
  inset: 0;
  z-index: 1;

  /* allineamento in basso-sinistra */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;

  /* padding del contenuto */
  
  padding: 1rem;

  /* overlay nascosto di default: “sale” dal basso */
  transform: translateY(100%);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
  background-color: var(--bg-footer);



}

/* Hover mouse + focus tastiera */
@media (hover: hover) and (pointer: fine) {
  #referenze .referenze-item:hover .referenze-copy {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Accessibilità tastiera: se dentro c’è un <a>, quando va in focus mostra l’overlay */
#referenze .referenze-item:focus-within .referenze-copy {
  transform: translateY(0);
  opacity: 1;
}

/* Titolo sempre in basso a sinistra (già garantito dal flex) */
#referenze .referenze-copy h3 {
  margin: 0;
  /* se il tuo tema usa già colori, puoi ometterlo */
  color: inherit;
  font-size: 36px;
}

/*
  Spazi uniformi: anche se .link è vuoto deve occupare area
  così tutti gli h3 finiscono sulla stessa baseline.
*/
#referenze .referenze-copy .link {
  width: 100%;
  min-height: 30px; /* “slot” per il link: regola questo in base al tuo stile */
  display: flex;
  justify-content: flex-end;
  /*
  align-items: flex-end;
  align-content: flex-end;
   align-self: flex-end;
  text-align: right;
  */
}

/* Se vuoi che l'h3 resti “appoggiato” e il link sia l'ultima riga */
#referenze .referenze-copy .link > p {
 margin: 0;
  width: 100%;               /* <-- così il p occupa tutta la riga */
  display: flex;
  justify-content: flex-end; /* <-- ancora più robusto */
}

/* (opzionale) per evitare che un <p> vuoto crei comportamenti strani */
#referenze .referenze-copy .link:empty {
  /* non nascondo: deve tenere spazio */
}

/* Bonus: se vuoi ridurre motion per utenti che lo chiedono */
@media (prefers-reduced-motion: reduce){
  #referenze .referenze-sfondo img,
  #referenze .referenze-copy{
    transition: none;
  }
}

#referenze .referenze-sfondo img{
  transform: scale(1);
  transition:
    transform .9s cubic-bezier(.19,1,.22,1);
  will-change: transform;
}

#referenze .referenze-copy{
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform .55s cubic-bezier(.19,1,.22,1),
    opacity .35s ease;
  transition-delay: .12s; /* entra dopo lo zoom */
}

/* ===============================
   DESKTOP – HOVER
   =============================== */

@media (hover:hover) and (pointer:fine){
  #referenze .referenze-item:hover .referenze-sfondo img{
    transform: scale(1.08) translateY(-2%);
  }

  #referenze .referenze-item:hover .referenze-copy{
    transform: translateY(0);
    opacity: 1;
  }
}


#referenze .link{
  text-align: right;
  padding-top: 0.7em;
}
#referenze .link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.25s ease;
  text-align: right;
  font-size: 0.9em;
}
#referenze  .link a .icon {
  transition: transform 0.25s ease;
}
#referenze  .link a:hover,
#referenze  .link a:focus-visible {
  color: var(--arancione);
}
#referenze  .link a:hover .icon,
#referenze  .link a:focus-visible .icon {
  transform: rotate(45deg);
}