/* =============================================================================
   Frame Articoli PraticalLaw — foglio di stile
   -----------------------------------------------------------------------------
   Tutti i valori cromatici e tipografici passano da variabili CSS, così il
   modulo eredita l'identità visiva del sito ospite senza modifiche al codice.
   Per allinearlo alla grafica di commercialista.info basta ridefinire le
   variabili in :root (o su un contenitore più specifico).
   ========================================================================== */

:root {
  --pl-colore-testo:        #23282d;
  --pl-colore-testo-tenue:  #6b7480;
  --pl-colore-accento:      #1b5e8c;
  --pl-colore-sfondo:       transparent;
  --pl-colore-card:         #ffffff;
  --pl-colore-bordo:        #e3e7eb;
  --pl-raggio:              4px;
  --pl-ombra:               0 1px 3px rgba(0, 0, 0, .06);
  --pl-ombra-hover:         0 6px 18px rgba(0, 0, 0, .10);
  --pl-font:                inherit;
  --pl-font-titolo:         inherit;
  --pl-spazio:              20px;
  --pl-colonne-min:         260px;   /* larghezza minima di una scheda */
}

/* --------------------------------------------------------------------------
   Contenitore
   -------------------------------------------------------------------------- */

.pl-articoli {
  font-family: var(--pl-font);
  color: var(--pl-colore-testo);
  background: var(--pl-colore-sfondo);
}

.pl-articoli__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pl-colonne-min), 1fr));
  gap: var(--pl-spazio);
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Scheda articolo
   -------------------------------------------------------------------------- */

.pl-articolo {
  display: flex;
  flex-direction: column;
  background: var(--pl-colore-card);
  border: 1px solid var(--pl-colore-bordo);
  border-radius: var(--pl-raggio);
  box-shadow: var(--pl-ombra);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.pl-articolo:hover,
.pl-articolo:focus-within {
  box-shadow: var(--pl-ombra-hover);
  transform: translateY(-2px);
}

.pl-articolo__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--pl-colore-bordo);
}

.pl-articolo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pl-articolo__corpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
  flex: 1 1 auto;
}

.pl-articolo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pl-articolo__categoria {
  color: var(--pl-colore-accento);
  font-weight: 700;
}

.pl-articolo__data {
  color: var(--pl-colore-testo-tenue);
}

.pl-articolo__titolo {
  font-family: var(--pl-font-titolo);
  font-size: 1.02rem;
  line-height: 1.35;
  margin: 0;
  font-weight: 600;
}

.pl-articolo__titolo a {
  color: inherit;
  text-decoration: none;
}

.pl-articolo__titolo a:hover,
.pl-articolo__titolo a:focus-visible {
  color: var(--pl-colore-accento);
  text-decoration: underline;
}

.pl-articolo__estratto {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--pl-colore-testo-tenue);
}

/* --------------------------------------------------------------------------
   Piede e stati
   -------------------------------------------------------------------------- */

.pl-articoli__piede {
  margin-top: var(--pl-spazio);
  text-align: right;
}

.pl-articoli__tutti {
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--pl-colore-accento);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.pl-articoli__tutti:hover,
.pl-articoli__tutti:focus-visible {
  opacity: .75;
}

.pl-articoli__errore {
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--pl-colore-bordo);
  border-radius: var(--pl-raggio);
  color: var(--pl-colore-testo-tenue);
  font-size: .9rem;
}

.pl-articoli__errore p {
  margin: 0 0 10px;
}

/* Contenuto servito dalla cache scaduta perché la rete non risponde */
.pl-articoli--obsoleta .pl-articoli__piede::before {
  content: 'Dati dalla copia locale';
  float: left;
  font-size: .75rem;
  color: var(--pl-colore-testo-tenue);
}

/* --------------------------------------------------------------------------
   Placeholder di caricamento
   -------------------------------------------------------------------------- */

.pl-articolo--scheletro {
  padding: 0 0 18px;
  pointer-events: none;
}

.pl-scheletro {
  background: linear-gradient(90deg,
              var(--pl-colore-bordo) 25%,
              rgba(255, 255, 255, .55) 50%,
              var(--pl-colore-bordo) 75%);
  background-size: 200% 100%;
  animation: pl-onda 1.4s linear infinite;
  border-radius: 3px;
}

.pl-scheletro--media  { aspect-ratio: 16 / 9; border-radius: 0; }
.pl-scheletro--riga   { height: 12px; margin: 14px 18px 0; }
.pl-scheletro--corta  { width: 55%; }

@keyframes pl-onda {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root { --pl-colonne-min: 100%; }

  .pl-articoli__lista { gap: 14px; }
  .pl-articolo__corpo { padding: 14px 15px 16px; }
  .pl-articoli__piede { text-align: left; }
}

/* --------------------------------------------------------------------------
   Accessibilità
   -------------------------------------------------------------------------- */

.pl-articoli a:focus-visible {
  outline: 2px solid var(--pl-colore-accento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pl-articolo,
  .pl-scheletro {
    transition: none;
    animation: none;
  }
}