/*
Theme Name: Daniele Pescara
Theme URI: https://danielepescara.com
Description: Tema figlio di Hello Elementor per il sito personale di Daniele Pescara. Direzione grafica "La Firma": bianco e nero ad alto contrasto, il nome come marchio.
Author: Media Creators
Version: 1.0.0
Template: hello-elementor
Text Domain: daniele-pescara
*/

/* Il grosso dell'aspetto sta nelle impostazioni globali di Elementor.
   Qui restano solo le poche cose che Elementor non sa fare da solo. */

/* Il nome in apertura deve poter arrivare a corpo enorme senza spezzare la riga
   e senza lasciare aria sopra e sotto: Elementor non espone line-height sotto 1. */
.dp-nome .elementor-heading-title {
  line-height: .82;
  letter-spacing: -.055em;
}

/* Firma autografa: finche' non arriva la scansione, usa il carattere calligrafico. */
.dp-firma .elementor-heading-title {
  line-height: .9;
}

/* Le schede cliccabili per intero (temi, news): il link copre tutta la scheda. */
.dp-scheda-link a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Sottolineatura dei titoli al passaggio del mouse dentro le schede. */
.dp-scheda:hover .dp-scheda-titolo .elementor-heading-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------------------------------------------------------------------------
   Il segno del fuoco da tastiera.

   Il tema padre lo disegna con un contorno nero. Sulle sezioni chiare si vede,
   ma il sito ha diciannove elementi raggiungibili da tastiera appoggiati sul
   fondo scuro del marchio (#101112), dove un contorno nero fa 1,11:1 contro lo
   sfondo: sparisce. Chi naviga con il tasto Tab, da li' in poi, non sa piu'
   dove si trova.

   Nessun colore solo funziona su tutti e due i fondi: il giallo fa 12,6:1 sullo
   scuro ma 1,4:1 sulla carta, il nero il contrario. Quindi se ne usano due, uno
   dentro l'altro: qualunque sia il fondo, almeno uno dei due si stacca.
   --------------------------------------------------------------------------- */
/* Niente :where() qui: azzera la specificita' e la regola del tema padre, che
   e' solo «a:focus-visible», vincerebbe lo stesso. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor-form .elementor-field:focus-visible {
  outline: 2px solid #101112;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #F7D146;
}

/* Sul telefono le tre colonne della fascia di contatto si impilano, e il
   ritratto scontornato finiva in cima: Daniele appariva sospeso sopra il testo
   invece di spuntare dal fondo. Mandandolo per ultimo resta attaccato al piede,
   come su schermo grande. */
@media (max-width: 767px) {
  .dp-colonna-ritratto { order: 3; }
}

/* Sul telefono i campi del modulo devono essere almeno 16px: sotto quella
   misura Safari su iPhone ingrandisce la pagina appena si tocca un campo, e
   chi scrive si ritrova il sito zoomato da ripinzare a mano. */
@media (max-width: 767px) {
  .elementor-field-textual,
  .elementor-field-group textarea,
  .elementor-field-group select { font-size: 16px; }
}

/* Collegamenti di testo piccoli (le due voci legali nel piede, l'informativa
   dentro il consenso): l'area da toccare va portata a 24px, la misura minima
   perche' un dito la prenda al primo colpo. Il testo non cambia. */
.elementor-location-footer a[href*="-policy/"],
.elementor-field-type-acceptance .elementor-field-option a {
  display: inline-block;
  padding-block: 5px;
}

/* I due collegamenti legali in fondo al piede: stesso grigio del resto della
   riga, sottolineati solo al passaggio del mouse. */
.elementor-location-footer a[href*="-policy/"] { color: inherit; text-decoration: none; }
.elementor-location-footer a[href*="-policy/"]:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Nel piede ci sono un indirizzo di posta e uno di strada: stringhe senza
   punti naturali dove spezzarsi, che in una colonna stretta uscirebbero dalla
   pagina. Meglio spezzarle che far scorrere il sito in orizzontale. */
.site-footer .elementor-icon-list-text,
footer .elementor-icon-list-text { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Il menu sotto i 1024px: un pannello che entra da destra.

   Prima era una tendina stretta appesa sotto il tasto, e accanto al marchio
   c'era anche il pulsante «Parliamone»: tre cose in una riga da 375px, tutte
   schiacciate. Ora il pulsante sparisce - l'invito diventa l'ultima voce del
   menu - e il menu si apre come un pannello alto quanto lo schermo, con un
   velo scuro sulla pagina dietro.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* l'invito e' dentro il menu: qui il pulsante a parte non serve piu' */
  .elementor-location-header .elementor-widget-button { display: none; }

  /* Il tasto viene prima del pannello nel documento, quindi senza questo il
     pannello gli finisce sopra e la X per chiudere non si vede piu'. */
  /* Solo l'icona: niente fondo, niente riquadro. Accanto c'e' soltanto il
     marchio, quindi non serve una cornice che dichiari «sono un pulsante», e
     una seconda cornice a pochi pixel da quella della sezione sotto appesantiva
     l'intestazione. L'area da toccare resta pero' di 44px, che e' la misura
     minima perche' un dito la prenda al primo colpo. */
  .elementor-menu-toggle {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    background-color: transparent !important;
    border: 0;
    border-radius: 0;
  }
  .elementor-menu-toggle:hover,
  .elementor-menu-toggle.elementor-active {
    background-color: transparent !important;
  }
  /* senza riquadro attorno l'icona deve reggersi da sola, quindi cresce un po' */
  .elementor-menu-toggle svg,
  .elementor-menu-toggle i { font-size: 26px; width: 26px; height: 26px; }
  .elementor-nav-menu--dropdown.elementor-nav-menu__container { z-index: 1; }

  /* la doppia classe serve a battere la regola di Elementor, che su questo
     stesso elemento mette un margine di 10px in cima */
  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 390px);
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 94px 0 36px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -18px 0 46px rgba(16, 17, 18, 0.22);
    /* Elementor apre la tendina allargandone il «max-height» da zero: e' questo
       che la fa scendere dall'alto. Spegnendo quel limite e la sua transizione
       resta solo la nostra animazione, che fa entrare il pannello da destra. */
    height: auto !important;
    max-height: none !important;
    transition: none !important;
  }

  /* il velo sta sotto l'intestazione fissa (z-index 99) e sopra la pagina */
  body.dp-menu-aperto::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(16, 17, 18, 0.55);
  }

  /* la pagina dietro non deve scorrere mentre il pannello e' aperto */
  body.dp-menu-aperto { overflow: hidden; }

  /* Elementor mette un'animazione sua sull'apertura, con un selettore da
     quattro classi: per passargli davanti ne serve uno da cinque. Si vince di
     specificita' e non con !important, cosi' resta possibile spegnerla.

     Niente «both» di proposito: con quello il pannello resterebbe fermo sul
     primo fotogramma - cioe' fuori dallo schermo - in tutti i casi in cui
     l'animazione non parte. Senza, la posizione giusta e' quella di riposo e
     lo scorrimento e' solo un di piu'. */
  body.dp-menu-aperto .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    animation: dp-pannello 0.28s ease;
  }

  /* chi ha chiesto meno movimento non lo vede scorrere */
  @media (prefers-reduced-motion: reduce) {
    body.dp-menu-aperto .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
      animation: none;
    }
  }

  @keyframes dp-pannello {
    from { transform: translateX(100%); }
  }

  .elementor-nav-menu--dropdown .elementor-item {
    padding-block: 17px;
    font-size: 14px;
  }

  /* «Parliamone»: dentro il pannello e' un pulsante, non una voce qualunque */
  .elementor-nav-menu--dropdown .dp-voce-pulsante {
    margin: 26px 18px 0;
    border: 0 !important;
  }
  /* il colore delle voci lo scrive Elementor con un selettore legato all'id
     dell'elemento, che e' piu' specifico di qualunque cosa si scriva qui:
     questa e' una delle poche volte in cui !important e' la risposta giusta */
  .elementor-nav-menu--dropdown .dp-voce-pulsante .elementor-item {
    justify-content: center;
    background-color: #101112 !important;
    color: #FBFBFA !important;
  }
  .elementor-nav-menu--dropdown .dp-voce-pulsante .elementor-item:hover,
  .elementor-nav-menu--dropdown .dp-voce-pulsante .elementor-item.elementor-item-active {
    background-color: #F7D146 !important;
    color: #101112 !important;
  }
}

/* Su schermo grande l'invito resta il pulsante accanto al marchio: la voce nel
   menu sarebbe un doppione. */
@media (min-width: 1025px) {
  /* Elementor imposta display:flex sulle voci con un selettore piu' specifico:
     per nascondere questa serve passargli davanti. */
  .elementor-nav-menu--main li.dp-voce-pulsante { display: none !important; }
}

/* La firma non deve spezzarsi su due righe. */
.dp-firma .elementor-heading-title { white-space: nowrap; }

/* Le schede-riga dei temi e delle news diventano cliccabili per intero:
   il contenitore ha un link, qui gli tolgo solo la sottolineatura ereditata. */
.dp-scheda > a, .dp-scheda a { text-decoration: none; }

/* ---------------------------------------------------------------------------
   Pagine legali (privacy, cookie): non sono costruite con Elementor, sono
   testo e basta. Il tema padre le stampa nude, quindi qui si danno la misura
   di riga, l'aria e le gerarchie che hanno le altre pagine.
   --------------------------------------------------------------------------- */
.page .site-main {
  max-width: 760px;
  margin-inline: auto;
  padding: 72px 22px 96px;
}
.page .site-main .entry-title {
  font-size: 48px;
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: 0 0 28px;
}
.page .site-main .page-content > p,
.page .site-main .page-content > ul {
  font-size: 17px;
  line-height: 1.62;
  margin: 0 0 18px;
}
.page .site-main .page-content h2 {
  font-size: 26px;
  line-height: 1.16;
  letter-spacing: -.02em;
  margin: 44px 0 14px;
}
.page .site-main .page-content h3 {
  font-size: 18px;
  line-height: 1.3;
  margin: 28px 0 10px;
}
.page .site-main .page-content code {
  font-size: .88em;
  background: #F1F1EE;
  padding: 1px 5px;
}
.page .site-main .page-content a { color: inherit; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .page .site-main { padding: 44px 18px 64px; }
  .page .site-main .entry-title { font-size: 32px; }
  .page .site-main .page-content h2 { font-size: 22px; margin-top: 34px; }
}

/* ---------------------------------------------------------------------------
   Intestazione e piede provvisori del tema Hello Elementor.
   Restano in piedi finche' non si costruiscono con il Theme Builder di
   Elementor Pro: servono solo a non lasciare il sito senza navigazione.
   --------------------------------------------------------------------------- */
.site-header { border-bottom: 1px solid #DCDCD9; padding-block: 14px; }
.site-header img { max-width: 210px; height: auto; }
.site-header .site-description { color: #6A6C70; font-size: 13px; }
.site-footer { border-top: 1px solid #DCDCD9; }

/* L'occhiello col quadratino oro e' un contenitore: Elementor gli darebbe
   il 100% di larghezza, mandando a capo quello che gli sta di fianco.
   Elementor legge la larghezza da --width, quindi basta cambiarla. */
.dp-occhiello { --width: auto; }

/* Negli elenchi l'occhiello porta la frase editoriale, piu' lunga di un
   occhiello normale. Sul telefono sta su due righe, e senza queste due righe
   il contenitore andrebbe a capo lasciando il quadratino oro da solo sopra il
   testo. L'allineamento verticale resta quello di tutti gli altri occhielli
   del sito (al centro): cambiarlo qui scombinava il quadratino su schermo
   grande, dove la frase sta su una riga sola. */
.dp-occhiello-lungo { flex-wrap: nowrap; align-items: flex-start; }
.dp-occhiello-lungo > .elementor-widget-heading { min-width: 0; }
/* 1.5px e' la differenza fra il centro del quadratino appoggiato in cima alla
   riga e il centro ottico dell'inchiostro: misurata, non stimata. Vale sia a
   una riga che a due, quindi non serve distinguere i dispositivi. */
.dp-occhiello-lungo > .e-con { margin-top: 1.5px; }

/* Sotto i 360px - i telefoni piccoli e i vecchi SE - il marchio, il pulsante e
   il tasto del menu non ci stanno sulla stessa riga e l'intestazione sbordava
   di una dozzina di pixel. Qui si stringono le due cose che si possono
   stringere senza perdere leggibilita'. */
@media (max-width: 359px) {
  .elementor-location-header img { max-width: 112px; }
  .elementor-location-header .elementor-button { padding-inline: 16px; font-size: 11.5px; }
}

/* Consenso privacy dentro il modulo: il collegamento all'informativa va reso
   visibile a mano. L'oro della marca su fondo chiaro fa 1,4 contro 1, cioe'
   illeggibile: qui va l'oro scuro, che e' lo stesso di tutti i collegamenti
   del sito. */
.elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.elementor-field-type-acceptance label {
  font-size: 13.5px;
  line-height: 1.5;
  color: #6A6C70;
}
.elementor-field-type-acceptance a {
  color: #7E6105;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.elementor-field-type-acceptance a:hover { color: #101112; }
.elementor-field-type-acceptance input[type="checkbox"] {
  margin-top: 3px;
  accent-color: #101112;
  flex: none;
}

/* ---------------------------------------------------------------------------
   Larghezza dei blocchi di testo misurata in caratteri (ch), come nel mockup.
   Il controllo "larghezza" di Elementor si applica al widget, dove 1em vale
   16,5px: su un titolo da 48px la misura usciva meno della meta' del dovuto.
   Qui il limite sta sull'elemento di testo, quindi il ch segue il suo corpo.
   --------------------------------------------------------------------------- */
[class*="dp-ch-"] .elementor-heading-title,
[class*="dp-ch-"] > p,
[class*="dp-ch-"] .elementor-widget-container > p { max-width: var(--dp-ch); }
.dp-ch-14 { --dp-ch: 14ch } .dp-ch-15 { --dp-ch: 15ch } .dp-ch-16 { --dp-ch: 16ch }
.dp-ch-17 { --dp-ch: 17ch } .dp-ch-18 { --dp-ch: 18ch } .dp-ch-20 { --dp-ch: 20ch }
.dp-ch-22 { --dp-ch: 22ch } .dp-ch-30 { --dp-ch: 30ch } .dp-ch-34 { --dp-ch: 34ch }
.dp-ch-40 { --dp-ch: 40ch } .dp-ch-44 { --dp-ch: 44ch } .dp-ch-46 { --dp-ch: 46ch }
.dp-ch-48 { --dp-ch: 48ch } .dp-ch-50 { --dp-ch: 50ch } .dp-ch-52 { --dp-ch: 52ch }
.dp-ch-56 { --dp-ch: 56ch } .dp-ch-58 { --dp-ch: 58ch } .dp-ch-60 { --dp-ch: 60ch }

/* L'ultimo paragrafo di un blocco di testo non deve lasciare aria in fondo:
   dentro una colonna centrata verticalmente il contenuto sembrava sbilanciato. */
.elementor-widget-text-editor p:last-of-type { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Schede degli articoli (widget Griglia loop): riassunto tagliato a due righe
   e "Leggi" sempre in fondo, comunque sia lungo il titolo.
   --------------------------------------------------------------------------- */
/* La scheda e' alta quanto la sua casella (height:100%) perche' le schede
   della riga restino pari. Ma i contenitori di Elementor nascono con
   flex-wrap:wrap, e un contenitore in colonna con un'altezza definita, quando
   il contenuto non ci sta, non trabocca: manda il pezzo di troppo in una
   seconda colonna. Sul telefono il testo finiva cosi' accanto alla foto,
   fuori dallo schermo, e la pagina news scorreva in orizzontale. */
.dp-scheda-articolo { display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%; }
.dp-riassunto,
.dp-riassunto > .elementor-widget-container,
.dp-riassunto > p {
  /* il tag dinamico "riassunto" stampa il testo nudo, senza <p>:
     il taglio va messo sull'elemento che lo contiene davvero */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dp-in-fondo { margin-top: auto; }

/* Filetti fra le schede degli articoli. Le schede non hanno distanza fra loro,
   quindi il reticolo si fa con un bordo sopra/sinistra sulla griglia e un bordo
   destro/sotto su ogni scheda: viene chiuso comunque sia il numero di righe. */
.dp-griglia-articoli .elementor-loop-container {
  border-top: 1px solid var(--e-global-color-riga, #DCDCD9);
  border-left: 1px solid var(--e-global-color-riga, #DCDCD9);
}
.dp-griglia-articoli .e-loop-item {
  border-right: 1px solid var(--e-global-color-riga, #DCDCD9);
  border-bottom: 1px solid var(--e-global-color-riga, #DCDCD9);
}

/* Gli elenchi del sito non usano icone, ma Elementor riserva comunque 5px a
   sinistra del testo: sotto un titolo di colonna si vedeva come un gradino.
   Una lista che volesse le icone puo' chiamarsi "dp-con-icone". */
.elementor-widget-icon-list:not(.dp-con-icone) .elementor-icon-list-icon { display: none; }
.elementor-widget-icon-list:not(.dp-con-icone) .elementor-icon-list-text { padding-left: 0; }

/* Ritratto della fascia "Parliamone". E' verticale e deve arrivare esattamente
   all'altezza del modulo di contatto, che e' la colonna piu' alta: la colonna
   si stira, il ritratto la riempie ritagliandosi da solo. Sotto i 768px le
   colonne si impilano e l'immagine torna alla sua altezza naturale. */
@media (min-width: 768px) {
  /* il ritratto e' sfilato dal flusso: cosi' non e' lui a dettare l'altezza
     della riga, ma la subisce dal modulo, che e' la colonna piu' alta */
  .dp-colonna-ritratto { align-self: stretch; position: relative; }
  .dp-ritratto-contatto { position: absolute; inset: 0; margin: 0; }
  .dp-ritratto-contatto > .elementor-widget-container,
  .dp-ritratto-contatto figure,
  .dp-ritratto-contatto figure > a { height: 100%; }
  /* La fotografia e' scontornata su fondo trasparente: va contenuta per
     intero, non ritagliata, e appoggiata in basso come se stesse in piedi
     sulla fascia. Il vuoto che avanza sopra e' trasparente, non si vede. */
  .dp-ritratto-contatto img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: 50% 100%;
    display: block;
  }
}

/* Interviste: il player Vimeo sta dentro una scheda con il bordo del reticolo,
   quindi non deve aggiungere margini propri. */
.dp-scheda-video .elementor-widget-video,
.dp-scheda-video .elementor-widget-video .elementor-widget-container { margin: 0; }
.dp-scheda-video .elementor-wrapper { --video-aspect-ratio: 1.77777; }

/* La colonna del ritratto sfonda il margine inferiore della fascia: la figura
   arriva a filo del piede, come se uscisse da dietro. Con align-self stretch
   l'altezza e' quella della riga meno i margini, quindi un margine negativo la
   allunga invece di spostarla. 88px e' il padding della fascia.

   Vale solo sopra i 1024px: piu' sotto il modulo va a capo, il ritratto non e'
   piu' l'ultima cosa della fascia e sfondando finirebbe sopra ai campi. */
@media (min-width: 1025px) {
  .dp-colonna-ritratto { margin-bottom: -88px; }
}

/* Sul telefono le colonne si impilano: un ritratto verticale a tutta larghezza
   diventerebbe alto mezzo schermo e spingerebbe il modulo troppo in basso. */
@media (max-width: 767px) {
  .dp-ritratto-contatto img {
    /* 380 e non 340: la fotografia nuova e' piu' slanciata, e con il limite
       vecchio la figura veniva larga 180px invece dei 198 di prima. Cosi'
       resta della misura che era. */
    max-height: 380px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    object-fit: contain;
    display: block;
  }
}

/* Casella dell'archivio in fondo al reticolo delle interviste: e' l'unica su
   fondo scuro, e alla passata del mouse si schiarisce appena e sposta la
   freccia, per farsi riconoscere come collegamento. */
.dp-scheda-archivio { transition: background-color .18s ease; }
.dp-scheda-archivio:hover { background-color: #1C284A !important; }
.dp-freccia-archivio .elementor-heading-title { transition: transform .18s ease; display: inline-block; }
.dp-scheda-archivio:hover .dp-freccia-archivio .elementor-heading-title { transform: translateX(4px); }

/* Arrivo dai collegamenti con ancora (#dubai, #patrimonio, #debiti...).
   L'intestazione diventa appiccicata durante lo scorrimento ed e' alta 82px:
   senza questo margine il titolo della sezione finirebbe sotto al menu. */
#dubai, #patrimonio, #debiti, #temi, #contatto, #news { scroll-margin-top: 104px; }

/* "Di cosa mi occupo": la fotografia arriva all'altezza del testo accanto.
   Come per il ritratto dei contatti, l'immagine e' sfilata dal flusso: cosi'
   non e' lei a dettare l'altezza della riga, ma la prende dalla colonna di
   testo. Vale solo sopra i 1024px: da li' in giu' le colonne si impilano e
   la fotografia torna quadrata a tutta larghezza. */
/* Il ritratto verticale della storia si ritaglia quadrato: senza indicazioni
   il taglio e' centrato e la testa finisce a filo del bordo superiore. Al 18%
   resta l'aria sopra e gli occhi cadono sul terzo alto, come in un ritratto. */
.dp-foto-storia img { object-position: 50% 18%; }

@media (min-width: 1025px) {
  .dp-colonna-tema { position: relative; }
  /* il blocco di mezzo ha la fotografia a destra, come nel mockup */
  .dp-foto-a-destra { order: 2; }
  .dp-foto-tema { position: absolute; inset: 0; margin: 0; }
  .dp-foto-tema > .elementor-widget-container,
  .dp-foto-tema figure,
  .dp-foto-tema figure > a { height: 100%; }
  .dp-foto-tema img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Le schede-collegamento restano selezionabili: dentro un <a> il trascinamento
   del mouse sposterebbe il collegamento invece di selezionare il testo. */
a.e-con { -webkit-user-drag: none; }
a.e-con, a.e-con * { -webkit-user-select: text; user-select: text; }
a.e-con img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }

/* Il widget Articoli attacca la paginazione al fondo della griglia. */
.dp-griglia-articoli .elementor-pagination { margin-top: 44px; }

/* Muro stampa: i loghi hanno proporzioni molto diverse fra loro, da uno quasi
   quadrato a uno lungo dodici volte l'altezza. Un riquadro comune con
   object-fit contain li normalizza senza deformarne nessuno. */
/* Muro dei loghi delle testate.

   Uno stesso riquadro per tutti sembra equo e non lo e': un marchio lungo e
   basso tocca subito il limite di larghezza e resta schiacciato, uno tozzo
   riempie l'altezza e domina. Il Gazzettino, 12 a 1, veniva 180x15; ANSA,
   compatto, 180x37: due volte e mezzo di inchiostro in piu'.

   Quindi il riquadro non e' uguale per tutti: ogni testata ha un suo
   coefficiente, calcolato misurando i pixel pieni di ciascun logo in modo che
   tutti mettano in pagina la stessa quantita' di inchiostro. I numeri qui
   sotto non si scrivono a mano: li calcola e li stampa gia' pronti

       python3 stack/seed/pesa-loghi.py

   da rilanciare ogni volta che un logo si aggiunge, si toglie o si sostituisce. */
.dp-logo-testata img {
  --dp-k: 1;
  max-width: min(calc(180px * var(--dp-k)), 100%);
  max-height: calc(40px * var(--dp-k));
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* Il 100% qui sopra lega la larghezza massima a quella della casella, e cosi'
     facendo fa allargare il contenitore del widget fino a riempirla: il logo,
     piu' stretto, restava appoggiato a sinistra. I margini automatici lo
     rimettono in mezzo qualunque larghezza prenda il contenitore. */
  margin-inline: auto;
}
@media (max-width: 767px) {
  .dp-logo-testata img {
    max-width: min(calc(130px * var(--dp-k)), 100%);
    max-height: calc(30px * var(--dp-k));
  }
}

.dp-logo-ansa img           { --dp-k: 0.78; }
.dp-logo-forbes img         { --dp-k: 0.89; }
.dp-logo-ilsole24ore img    { --dp-k: 0.98; }
.dp-logo-la-stampa img      { --dp-k: 1;    }
.dp-logo-finanza-report img { --dp-k: 1.03; }
.dp-logo-il-messaggero img  { --dp-k: 1.03; }
.dp-logo-italpress img      { --dp-k: 1.22; }
.dp-logo-ilgazzettino img   { --dp-k: 1.26; }

/* Risultati di ricerca: gli estratti degli articoli importati sono lunghi e
   di lunghezza diversa, quindi le schede venivano tutte sfalsate. Stesso
   taglio delle schede news, un po' piu' generoso perche' qui sono piu' larghe. */
.search .elementor-post__excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Citazione sopra l'apertura fotografica della home.
   Lo scatto tiene il soggetto a destra e mezzo fotogramma vuoto a sinistra:
   il testo sta nel vuoto, allineato alla stessa colonna del resto della
   pagina. Sotto i 768px la fascia e' alta appena 143px e il testo la
   coprirebbe tutta, quindi li' scende sotto la fotografia su fondo scuro:
   stesso bianco su nero, solo non sovrapposto. */
.dp-apertura { position: relative; }

@media (min-width: 768px) {
  .dp-apertura > .dp-citazione {
    position: absolute;
    inset: 0;
    justify-content: center;
    pointer-events: none;
  }
  .dp-apertura > .dp-citazione > .e-con-inner { justify-content: center; }
  .dp-apertura > .dp-citazione .elementor-widget { pointer-events: auto; }
}

@media (max-width: 767px) {
  /* Sul telefono la citazione non sta piu' sopra la foto ma sotto, come fascia
     scura. Lo spazio fra i due figli del contenitore, che su schermo grande non
     si vede perche' la citazione e' sovrapposta, qui diventava una striscia
     bianca fra la foto e la fascia. Si azzera agendo sulla variabile di
     Elementor, che e' quella da cui il gap viene letto. */
  .dp-apertura { --row-gap: 0px; }

  .dp-apertura > .dp-citazione {
    background-color: var(--e-global-color-primary, #101112);
    padding-block: 30px 32px;
  }
}

/* Ritratto verticale della sezione storia in home. Da 1024px in giu' le
   colonne si impilano e un 2:3 a tutta larghezza diventerebbe alto piu' di
   uno schermo intero: qui si ferma e si ritaglia. */
@media (max-width: 1024px) {
  .dp-foto-storia img {
    max-height: 520px;
    width: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    display: block;
  }
}

/* Apertura alta con il titolo dentro la fotografia (variante B della storia):
   il testo si appoggia in basso invece di stare al centro.

   Qui serve una velatura, al contrario dell'apertura in home: quello scatto
   ha il fondo scuro dove va il testo, questo ha la cartellina verde chiara
   proprio sotto al titolo. Misurata la luminanza di quella fascia, il punto
   peggiore dava 1,3:1 di contrasto col bianco, cioe' testo invisibile. Con la
   velatura al 70% si risale sopra 7:1. Sfuma verso l'alto, cosi' la
   fotografia resta pulita dove non c'e' scritto niente. */
@media (min-width: 768px) {
  .dp-apertura-alta > .dp-citazione {
    align-items: flex-end;
    background-image: linear-gradient(
      to top,
      rgba(16, 17, 18, 0.84) 0%,
      rgba(16, 17, 18, 0.70) 45%,
      rgba(16, 17, 18, 0.18) 78%,
      rgba(16, 17, 18, 0) 100%
    );
  }
  .dp-apertura-alta > .dp-citazione > .e-con-inner {
    justify-content: flex-end;
    padding-bottom: 58px;
  }
}

/* Fotografia che esce fino al bordo della finestra (variante B): rompe la
   griglia e da' profondita'. Elementor mette la larghezza in --width, quindi
   si allarga quella e si recupera con un margine negativo uguale e contrario.
   Il solo margine negativo non basterebbe: su un elemento flex con larghezza
   dichiarata sposta il vicino, non allarga lui. Solo sopra i 1024px, sotto le
   colonne si impilano. */
@media (min-width: 1025px) {
  .dp-sborda-destra {
    --sbordo: calc((100vw - min(1300px, 100vw)) / 2);
    width: calc(var(--width) + var(--sbordo));
    max-width: none;
    margin-right: calc(var(--sbordo) * -1);
  }
}

/* Fotografia verticale dentro un riquadro che sarebbe orizzontale.
   Lo scatto delle mani sul nodo e' 1080x1920: nel riquadro alto quanto il
   testo (590x437) il taglio perdeva o il nodo o le mani. Alzando il riquadro
   a 620px ci stanno il collo, il nodo e tutte e due le mani, e il 30%
   verticale li centra. */
@media (min-width: 1025px) {
  .dp-colonna-verticale { min-height: 620px; }
}
.dp-foto-verticale img { object-position: 50% 30%; }
/* Da 1024px in giu' le colonne si impilano e la fotografia prenderebbe tutta
   la larghezza: ritagliata cosi' larga perderebbe di nuovo le mani. Qui resta
   verticale e centrata, senza nessun taglio. */
@media (max-width: 1024px) {
  .dp-foto-verticale img {
    max-width: 460px;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    margin-inline: auto;
    display: block;
  }
}