/* ==========================================================
   BASE LAYOUT E TIPOGRAFIA
   ========================================================== */

/* 
  BODY
  - Imposta il font globale
  - Centra verticalmente la card nella viewport
  - Aggiunge padding laterale per una migliore resa su mobile
*/
body {
  font-family: "Manrope", sans-serif;
  margin: 0;
  padding: 0 16px; /* un po' di spazio laterale in modalità mobile */
  background-color: var(--grey-200);
  display: flex;
  flex-direction: column; /* card sopra, attribution sotto */
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding-block: 4rem;
  padding-inline: 1.5rem;
}

/* 
  CARD (mobile-first)
  - Layout verticale: immagine sopra, testo sotto
  - position: relative per eventuali posizionamenti interni
*/
.card {
  display: flex;
  position: relative;
  flex-direction: column; /* default: immagine sopra, testo sotto */
  width: 100%;
  height: auto;
  margin: 0 auto;
  /* overflow: hidden;  // rimosso per permettere al popover di uscire se necessario */
}

/* 
  PICTURE + IMMAGINE
  - picture: blocco per evitare spazi indesiderati
  - overflow hidden per evitare stacchi ai bordi
  - immagine responsive con taglio controllato
*/
picture {
  display: block;
  overflow: hidden; /* evita stacchi ai bordi dell'immagine */
}

.image-drawers {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover; /* riempie senza distorsioni */
  border-radius: 8px 8px 0 0; /* arrotondati solo sopra */
}

/* 
  CARD-TEXT
  - Contenitore del contenuto testuale
  - border-radius solo sotto per completare la card
*/
.card-text {
  background-color: var(--white);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0 0 8px 8px; /* arrotondati solo sotto */
}

/* 
  FOOTER (autore + bottone share)
  - Layout orizzontale
  - Spazio tra blocco autore e bottone
*/
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  width: 100%;
  padding: 0;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 
  Bottone dentro card-text
  - Allineato a destra rispetto al contenuto testuale
*/
.card-text button {
  align-self: flex-end;
}

/* ==========================================================
   POPOVER SHARE (.shared) — STATO BASE
   ========================================================== */

/* 
  .shared
  - Di base è assoluto (verrà posizionato via media query)
  - Flex per allineare icone e testo
  - transform: translateX(-50%) usato se centrato con left:50%
*/
.shared {
  position: absolute;
  /* left: 50%;  // usato solo se si centra rispetto al contenitore */

  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--grey-900);
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  z-index: 1000; 
  transform: translateX(-50%); /* centratura orizzontale se combinato con left:50% */
}

/* 
  .hide
  - Classe di utilità per nascondere il popover
*/
.hide {
  display: none;
}

/* 
  Triangolino del popover (solo desktop/tablet)
  - Posizionato sotto il popover
  - Centrato orizzontalmente rispetto al popover
*/
.shared::after { 
  content: ""; 
  position: absolute; 
  bottom: -10px; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent; 
  border-right: 10px solid transparent; 
  border-top: 10px solid var(--grey-900); 
}

/* 
  share-btn--open
  - Stato opzionale per cambiare sfondo del bottone quando attivo
*/
.share-btn--open {
  background: var(--grey-900);
}

/* 
  author--reduce
  - Classe non più usata nel nuovo flusso, ma lasciata per compatibilità
*/
.author--reduce {
  justify-content: center;
  padding: 20px 0;
}

/* ==========================================================
   TIPOGRAFIA
   ========================================================== */

.text-present-1 {
  font-family: var(--tp1-font-family);
  font-weight: var(--tp1-font-weight);
  font-size: var(--tp1-font-size);
  line-height: var(--tp1-line-height);
  letter-spacing: var(--tp1-letter-spacing);
  color: var(--grey-900);
  margin-bottom: 10px;
}

.text-present-2-bold {
  font-family: var(--tp2b-font-family);
  font-weight: var(--tp2b-font-weight);
  font-size: var(--tp2b-font-size);
  line-height: var(--tp2b-line-height);
  letter-spacing: var(--tp2b-letter-spacing);
  color: var(--grey-900);
}

.text-present-2-medium {
  font-family: var(--tp2m-font-family);
  font-weight: var(--tp2m-font-weight);
  font-size: var(--tp2m-font-size);
  line-height: var(--tp2m-line-height);
  letter-spacing: var(--tp2m-letter-spacing);
  color: var(--grey-400);
}

.text-present-3 {
  font-family: var(--tp3-font-family);
  font-weight: var(--tp3-font-weight);
  font-size: var(--tp3-font-size);
  line-height: var(--tp3-line-height);
  letter-spacing: var(--tp3-letter-spacing);
  color: var(--grey-400);
}

/* 
  Avatar autore
*/
.image-michelle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.footer-text {
  display: flex;
  flex-direction: column;
}

/* 
  Bottone share
  - Nessun bordo
  - z-index alto per rimanere sopra il popover su tablet/desktop
*/
.share-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 30;
}

/* 
  Icona share
  - Cerchio con sfondo grigio chiaro
*/
.icon-share {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: var(--grey-200);
  color: var(--grey-500);
  border: none;
  padding: 8px;
}

/* 
  Attribution footer
*/
.attribution {
  font-size: 0.75rem;
  text-align: center;
  margin-top: 20px;
  color: var(--grey);
}

/* ==========================================================
   DESKTOP (≥ 730px)
   - Layout orizzontale fisso
   - Popover posizionato manualmente (top:50%, left:93%)
========================================================== */
@media (min-width: 730px) {
  .card {
    display: flex;
    flex-direction: row; /* immagine a sinistra, testo a destra */
    width: 730px; 
    height: 280px;
    overflow: visible; /* permette al popover di uscire dai bordi */
  }

  .card > picture { 
    flex: 0 0 280px; 
    height: 100%;
  } 

  .image-drawers {
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* mantiene il taglio */ 
    object-position: center; 
    border-radius: 8px 0 0 8px; /* arrotondati solo a sinistra */
  }

  .card-text {
    flex: 0 0 445px; /* larghezza testo */ 
    height: 100%;
    border-radius: 0 8px 8px 0; /* arrotondati solo a destra */
    display: flex; 
    flex-direction: column; 
    justify-content: center;
  }

  /* 
    Bottone share
    - position: relative per eventuali riferimenti futuri
    - z-index alto per rimanere sopra il popover
  */
  .share-btn { 
    position: relative; 
    z-index: 20; /* il bottone resta sopra */ 
  }

  /* 
    Popover su desktop
    - Posizionato manualmente rispetto alla card
    - top:50% e left:93% sono valori scelti per allinearlo visivamente
  */
  .shared { 
    position: absolute; 
    top: 50%;
    left: 93%;
    z-index: 10; /* il popover resta sopra il bottone */
  }
}

/* ==========================================================
   TABLET (480px – 729px)
   - Layout orizzontale
   - Popover posizionato manualmente (top:50%, left:93%)
========================================================== */
@media (min-width: 480px) and (max-width: 729px) {

  .card {
    display: flex;
    flex-direction: row; /* affiancamento */
    width: 608px;
    height: 346px;
    overflow: visible; /* evita il taglio del popover */
  }

  .card > picture {
    flex: 0 0 229px; /* immagine */
    height: 100%;
  }

  .image-drawers {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px 0 0 8px;
  }

  .card-text {
    flex: 0 0 379px; /* testo */
    height: 100%;
    border-radius: 0 8px 8px 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* 
    Popover su tablet
    - Stesso posizionamento del desktop per coerenza visiva
  */
  .shared { 
    position: absolute; 
    top: 50%;
    left: 93%;
  }
}

/* ==========================================================
   MOBILE ONLY (≤ 479px)
   - Footer diventa barra share a tutta larghezza
========================================================== */
@media (max-width: 479px) {
  .card > picture,
  .card > .card-text {
    width: 100%;
  }

  /* 
    Quando il pannello share è aperto:
    - il footer diventa verticale
    - .shared può espandersi a tutta larghezza
  */
  .card-footer.footer--share-open { 
    flex-direction: column; /* permette a .shared di espandersi */ 
    align-items: stretch; /* .shared prende tutta la larghezza */ 
  }

  /* 
    Nascondo avatar + nome + bottone quando lo share è aperto
  */ 
  .footer--share-open .footer-left { 
    display: none; 
  } 
  
  .footer--share-open .share-btn { 
    display: none; 
  }

  /* 
    Popover su mobile
    - Diventa una barra a tutta larghezza interna alla card
    - Compensa il padding di .card-text con width + margin negativi
  */
  .footer--share-open .shared { 
    position: relative; 

    width: calc(100% + 60px); /* 100% + padding sx/dx di .card-text */
    margin-left: -30px; /* annulla padding sinistro */ 
    margin-right: -30px; /* annulla padding destro */ 

    margin-top: 20px; 
    margin-bottom: -30px;
    padding: 20px;
    border-radius: 0 0 8px 8px; 
    justify-content: center; 
    transform: none; /* rimuove la centratura */ 
  } 

  /* 
    Su mobile il triangolino non serve
  */
  .footer--share-open .shared::after { 
    display: none; /* niente triangolino su mobile */ 
  }
}