/* ============================================================================
   Ledea — le pagine di lettura (issue #51)
   ============================================================================

   Le risorse pubbliche (post type «risorse», del plugin), la guida per lo staff
   vista da FUORI dall'area dei professionisti (chi non ha effettuato l'accesso,
   un paziente, o il plugin spento) e la pagina dei risultati di ricerca. Prima
   erano l'eroe con l'immagine di sfondo e le card di Bootstrap dell'era Leira;
   ora hanno la stessa grafica della guida nell'area dei professionisti
   (ledea-plugin/css/lap_staff.css, sezione 14): testata con occhiello, titolo e
   riga di spiegazione, colonna di lettura, tessere per gli elenchi, stato vuoto.

   Il foglio lo carica let_enqueue_reading() (functions.php) solo su quelle
   pagine, e ogni selettore discende da .le-rd, il contenitore che i template
   stampano: fuori di li' non tocca niente. Prefisso classi «le-rd-», dopo
   le-hp-, le-gate-, le-404-, le-pt-, le-auth- e le-st-. Nessun esadecimale: solo
   token del design system. `.le-rd-btn` e' nell'elenco :not() della regola
   degli hover dei link di testo in style.css (l'ottava famiglia); le altre ancore
   di qui (tessere, ritorno indietro) si difendono da se' a 0,3,1.

   Nell'area dei professionisti queste pagine NON passano di qui: guida e
   ricerca nella guida hanno il telaio e il foglio del plugin.                 */

.le-rd {
  background: var(--page);
  color: var(--body-text);
  padding-bottom: var(--space-10);
  min-height: 60vh;
}

.le-rd-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.le-rd-wrap--read { max-width: 768px; }
.le-rd-wrap--top  { padding-top: var(--space-10); }
@media (max-width: 575.98px) {
  .le-rd-wrap { padding-inline: var(--space-4); }
}

/* La testata: una fascia appena piu' scura della pagina, che stacca il titolo
   dal testo senza la foto di sfondo di prima (che schiariva l'immagine con un
   velo bianco al 30% e ci scriveva sopra un titolo nero, illeggibile sulle foto
   chiare). L'immagine in evidenza, se c'e', scende nel testo. */
.le-rd-hero {
  background: var(--page-alt);
  border-bottom: 1px solid var(--border);
  padding: var(--space-9) 0 var(--space-7);
  margin-bottom: var(--space-7);
}
.le-rd-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary);
  text-decoration: none;
}
.le-rd a.le-rd-back:hover, .le-rd a.le-rd-back:focus { color: var(--teal-900); text-decoration: underline; }
.le-rd-back i { font-size: 12px; }
.le-rd-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
}
.le-rd-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.08;
  letter-spacing: var(--letter-tight);
  color: var(--teal-900);
  text-wrap: balance;
}
.le-rd-lead {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted-text);
  max-width: 62ch;
  text-wrap: pretty;
}
.le-rd-lead p { margin: 0; }
.le-rd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  font-size: 13.5px;
  color: var(--faint-text);
}
.le-rd-meta i { margin-right: 4px; }

/* La colonna di lettura: stessa tipografia dell'articolo della guida nell'area
   dei professionisti, piu' quello che l'editor a blocchi produce e la guida
   non usava (tabelle, citazioni, immagini, bottoni dei blocchi). */
.le-rd-figure { margin: 0 0 var(--space-6); }
.le-rd-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.le-rd-article {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body-text);
}
.le-rd-article > *:first-child { margin-top: 0; }
.le-rd-article h2 {
  margin: var(--space-7) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--teal-900);
}
.le-rd-article h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: var(--teal-900);
}
.le-rd-article h4, .le-rd-article h5, .le-rd-article h6 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--teal-900);
}
.le-rd-article p { margin: 0 0 var(--space-4); text-wrap: pretty; }
.le-rd-article ul, .le-rd-article ol { margin: 0 0 var(--space-4); padding-left: 1.3em; }
.le-rd-article li { margin-bottom: 8px; }
.le-rd-article img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.le-rd-article figure { margin: var(--space-5) 0; }
.le-rd-article figcaption { margin-top: 6px; font-size: 13.5px; color: var(--faint-text); }
.le-rd-article blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-3) var(--space-5);
  border-left: 3px solid var(--primary);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--teal-900);
}
.le-rd-article blockquote p:last-child { margin-bottom: 0; }
.le-rd-article hr { margin: var(--space-7) 0; border: 0; border-top: 1px solid var(--border); opacity: 1; }
.le-rd-article table { width: 100%; margin: var(--space-5) 0; border-collapse: collapse; font-size: 15px; }
.le-rd-article th, .le-rd-article td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.le-rd-article th { background: var(--page-alt); font-weight: 700; color: var(--teal-900); }
/* Una tabella larga scorre dentro la sua figura invece di spingere la pagina.
   Il blocco Tabella di WordPress porta la sua gabbia (un filo scuro su ogni
   cella e tre pixel sotto l'intestazione): qui diventa una cornice sola, con i
   fili orizzontali del resto del sito. */
.le-rd-article .wp-block-table {
  overflow-x: auto;
  margin: var(--space-5) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.le-rd-article .wp-block-table table { margin: 0; border: 0; }
.le-rd-article .wp-block-table thead { border-bottom: 0; }
.le-rd-article .wp-block-table th,
.le-rd-article .wp-block-table td { border: 0; border-bottom: 1px solid var(--border); }
.le-rd-article .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.le-rd-article .wp-block-table figcaption { padding: 8px 12px; margin: 0; }

/* I figli di una risorsa: la pagina «Documenti» con sotto i singoli documenti. */
.le-rd-section { margin-top: var(--space-8); }
.le-rd-section-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--teal-900);
}
.le-rd-section-text { margin: -8px 0 var(--space-4); font-size: 14px; color: var(--faint-text); }

/* Le tessere degli elenchi (archivio delle risorse, risultati di ricerca). */
.le-rd-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.le-rd-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.le-rd a.le-rd-tile:hover, .le-rd a.le-rd-tile:focus {
  transform: translateY(-3px);
  border-color: var(--teal-100);
  color: inherit;
  text-decoration: none;
}
.le-rd-tile-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.le-rd-tile-eyebrow {
  margin: 0 0 -6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--faint-text);
}
.le-rd-tile-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--teal-900);
}
.le-rd-tile-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-text);
  text-wrap: pretty;
}
.le-rd-tile-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
}

/* La ricerca: un campo solo, largo, con il bottone accanto. */
.le-rd-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  max-width: 620px;
}
.le-rd-search-field { position: relative; flex: 1 1 260px; min-width: 0; margin: 0; }
.le-rd-search-field i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--faint-text);
  pointer-events: none;
}
.le-rd-search-field input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--body-text);
}
.le-rd-search-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-soft); }

/* I bottoni: gli stessi pesi dell'area dei professionisti. */
.le-rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.2;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.le-rd-btn--fill { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.le-rd a.le-rd-btn--fill:hover, .le-rd a.le-rd-btn--fill:focus,
.le-rd button.le-rd-btn--fill:hover, .le-rd button.le-rd-btn--fill:focus {
  background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-text); text-decoration: none;
}
.le-rd-btn--soft { background: var(--primary-soft-bg); color: var(--primary-soft-text); border-color: var(--primary-soft-border); }
.le-rd a.le-rd-btn--soft:hover, .le-rd a.le-rd-btn--soft:focus,
.le-rd button.le-rd-btn--soft:hover, .le-rd button.le-rd-btn--soft:focus {
  background: var(--teal-100); color: var(--primary-soft-text); text-decoration: none;
}
.le-rd-btn--dismiss { background: transparent; color: var(--dismiss-text); border-color: var(--dismiss-border); }
.le-rd a.le-rd-btn--dismiss:hover, .le-rd a.le-rd-btn--dismiss:focus {
  background: var(--dismiss-hover-bg); color: var(--dismiss-text); text-decoration: none;
}
.le-rd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

/* Lo stato vuoto, e la sua variante «riservato»: la guida vista da chi non e'
   dello staff. Prima era una riga d'allarme gialla in cima a una pagina bianca,
   senza nessun modo di andare avanti. */
.le-rd-empty {
  text-align: center;
  padding: var(--space-9) var(--space-6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  background: var(--page-alt);
}
.le-rd-empty--locked { border-style: solid; background: var(--surface-card); }
.le-rd-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--primary);
  font-size: 22px;
}
.le-rd-empty--locked .le-rd-empty-icon { background: var(--gray-100); color: var(--gray-600); }
.le-rd-empty-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--teal-900);
}
.le-rd-empty-text {
  margin: 0 auto var(--space-5);
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-text);
  text-wrap: pretty;
}
.le-rd-empty-text:last-child { margin-bottom: 0; }
.le-rd-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* La paginazione dell'archivio (the_posts_pagination()). */
.le-rd .navigation.pagination { margin-top: var(--space-7); }
.le-rd .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.le-rd .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-size: 14px;
  font-weight: 700;
  color: var(--body-text);
  text-decoration: none;
}
.le-rd .page-numbers.current { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.le-rd a.page-numbers:hover { border-color: var(--teal-100); color: var(--teal-900); text-decoration: none; }

/* Movimento: lo stesso ingresso delle pagine dello staff. */
@keyframes leRdRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.le-rd-rise { animation: leRdRise 460ms var(--ease-standard) both; }
.le-rd-rise--1 { animation-delay: 60ms; }
.le-rd-rise--2 { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  .le-rd *, .le-rd *::before, .le-rd *::after { animation: none !important; transition: none !important; }
  .le-rd a.le-rd-tile:hover { transform: none; }
}