/* ==========================================================================
   Pagine editoriali — /puglia-da-scoprire/ e /alla-scoperta-delle-bandiere-blu-2023/
   Testata con foto, elenco dei post con barra laterale, articolo singolo.
   Valori dagli stili calcolati del sito vivo (spec + CSS del tema Augustine).
   Le regole per schermi stretti stanno in fondo al file.
   ========================================================================== */

/* ------------------------------------------------------------- testata */
/* Fascia con foto sotto l'header: titolo bianco centrato verticalmente.
   Stesso blocco (stessi nomi, stessi valori) di pagina-rooms.css: e' comune a
   tutte le pagine interne e al primo giro di pulizia va spostato in base.css.
   L'originale non dichiarava background-size, ma il ritaglio che produceva
   a 1440px corrisponde a cover ancorato in alto. */
.testata-pagina{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:520px;
  background-color:#fafafa;
  background-position:center 0;
  background-repeat:no-repeat;
  background-size:cover;
}
.testata-pagina--puglia{
  height:515px;
  background-image:url(/assets/img/2021-01-blog_standard2.webp);
}
.testata-pagina--bandiere-blu{
  height:520px;
  background-image:url(/assets/img/2020-11-h2-img12.webp);
}
.testata-pagina__titolo{
  margin:0;
  font-family:var(--display);
  font-size:72px;
  font-weight:400;
  line-height:79.992px;
  letter-spacing:-2.88px;
  text-align:center;
  color:var(--bianco);
}

/* ------------------------------------------------------------- impianto */
/* Il tema chiamava questo respiro #qodef-page-inner: cambia da pagina a pagina. */
.pagina-editoriale--elenco{padding:125px 0 30px}
.pagina-editoriale--articolo{padding:100px 0}

/* 710 + 70 di gronda + 320 = i 1100px del contenitore */
.pagina-editoriale__griglia{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  column-gap:70px;
  align-items:start;
  margin-bottom:70px;
}

/* --------------------------------------------------- riga data/categoria */
.meta-post{
  display:flex;
  align-items:center;
  height:32px;
  margin:0 0 12px;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:500;
  line-height:32px;
  letter-spacing:2.1px;
  text-transform:uppercase;
  color:var(--accento);
}
.meta-post > *{position:relative;padding-right:19px}
.meta-post > *:last-child{padding-right:0}
.meta-post > *:not(:last-child)::after{content:'/';position:absolute;top:0;right:7px}
.meta-post a{color:inherit;transition:color .2s ease-out}
.meta-post a:hover{color:var(--nero)}

/* --------------------------------------------- data sovrapposta alla foto */
/* Sul vivo: nessun fondo, solo il vetro smerigliato del backdrop-filter. */
.data-in-foto{
  position:absolute;
  margin:0;
  left:16px;
  bottom:16px;
  z-index:50;
  padding:11px 24px;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:500;
  line-height:32px;
  letter-spacing:2.1px;
  text-transform:uppercase;
  color:var(--bianco);
  background-color:transparent;
  -webkit-backdrop-filter:blur(13px);
  backdrop-filter:blur(13px);
}
/* Senza backdrop-filter il bianco resterebbe illeggibile sulla foto. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .data-in-foto{background-color:rgba(0,0,0,.3)}
}

/* --------------------------------------------------- collegamento «Leggi» */
.collegamento-testuale{
  position:relative;
  display:inline-block;
  font-family:var(--corpo);
  font-size:12px;
  font-weight:600;
  line-height:36px;
  letter-spacing:3.6px;
  text-transform:uppercase;
  color:var(--nero);
}
.collegamento-testuale::after{
  content:'';
  position:absolute;
  left:0;
  bottom:4px;
  width:96%;
  height:1px;
  background-color:currentColor;
  transform-origin:0 50%;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.collegamento-testuale:hover::after{transform-origin:100% 50%;transform:scaleX(0)}

/* ============================================ elenco post (Puglia da scoprire) */
.scheda-post{margin:0 0 80px}
.scheda-post:last-child{margin-bottom:0}
.scheda-post__media{position:relative;margin-bottom:32px}
/* vertical-align:top: senza, la figura inline-block si porta dietro lo spazio
   del discendente e la fascia della foto cresce di 8px. */
.scheda-post__figura{display:inline-block;vertical-align:top;width:640px;max-width:100%;margin:0}
.scheda-post__titolo{margin:0}
.scheda-post__titolo a{transition:color .2s ease-out}
.scheda-post__titolo a:hover{color:var(--accento)}
.scheda-post__estratto{
  margin:13px 0 0;
  font-size:16px;
  font-weight:300;
  line-height:29.92px;
  color:var(--testo);
}
/* 38px e' l'altezza che la riga aveva sul vivo (36 di riga + il discendente). */
.scheda-post__pie{display:inline-flex;align-items:center;min-height:38px;width:100%;margin:35px 0 0}

/* ------------------------------------------------------- barra laterale */
.barra-laterale{margin-bottom:60px}
.riquadro--ricerca{margin-bottom:62px}
.riquadro--popolari{margin-bottom:52px}
.riquadro--categorie{margin-bottom:62px}
.riquadro--immagine{margin-bottom:0}
.riquadro__titolo{
  margin:0 0 21px;
  font-family:var(--display);
  font-size:34px;
  font-weight:400;
  line-height:43.86px;
  letter-spacing:-0.68px;
  color:var(--nero);
}

.ricerca{position:relative}
.ricerca__campo{
  display:block;
  width:100%;
  margin:0;
  padding:11px 50px 11px 22px;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:400;
  line-height:38px;
  letter-spacing:0.7px;
  color:var(--nero);
  background-color:transparent;
  border:1px solid var(--linea);
  border-radius:0;
  outline:0;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .2s ease-out;
}
.ricerca__campo::placeholder{color:inherit;opacity:1}
.ricerca__campo:focus{border-color:var(--nero)}
.ricerca__bottone{
  position:absolute;
  top:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:100%;
  color:var(--nero);
  transition:color .2s ease-out;
}
.ricerca__bottone:hover{color:var(--accento)}
.ricerca__bottone svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor}

.post-minimo .meta-post{margin-bottom:0}
.post-minimo__titolo{
  margin:0;
  font-family:var(--display);
  font-size:27px;
  font-weight:400;
  line-height:37.8px;
  letter-spacing:0;
  color:var(--nero);
}
.post-minimo__titolo a{transition:color .2s ease-out}
.post-minimo__titolo a:hover{color:var(--accento)}

/* flow-root: il margine sotto l'ultima voce resta dentro la lista, come
   accadeva sul vivo per via del clearfix dei widget. */
.elenco-categorie{display:flow-root}
.elenco-categorie li{margin:0 0 7px;line-height:30.92px}
.elenco-categorie a{
  font-family:var(--corpo);
  font-size:14px;
  font-weight:500;
  letter-spacing:2.1px;
  text-transform:uppercase;
  color:var(--accento);
  transition:color .2s ease-out;
}
.elenco-categorie a:hover{color:#aeaeae}

.riquadro__immagine{width:300px;max-width:100%}

/* ================================================== articolo (post singolo) */
.articolo{margin:0 0 80px}
.articolo__media{position:relative;margin-bottom:27px}
.articolo__copertina{display:inline-block;vertical-align:top;width:640px;max-width:100%;margin:0}
.articolo .meta-post{margin-bottom:10px}
.articolo__titolo{margin:0}

/* Il corpo del post veniva da Elementor: Roboto 400 su grigio chiaro.
   Roboto e' fra i font serviti in locale (font-face.css), quindi il testo
   esce come sull'originale. */
.articolo__corpo{
  font-family:'Roboto',var(--corpo);
  font-size:16px;
  font-weight:400;
  color:var(--testo-tenue);
}
.articolo__corpo p{margin:10px 0;line-height:29.92px}
.articolo__corpo h3{
  margin:10px 0;
  font-family:inherit;
  font-size:16px;
  font-weight:400;
  line-height:29.92px;
  letter-spacing:normal;
  color:inherit;
}
.articolo__corpo strong{font-weight:700}
.articolo__corpo em{font-style:italic}
.articolo__corpo a{color:var(--nero);transition:color .2s ease-out}
.articolo__corpo a:hover{color:var(--accento)}
.articolo__corpo ul{margin:0 0 24px;padding-left:40px;list-style:disc}
.articolo__corpo li{line-height:29.92px}
.articolo__figura{margin:10px 0}
.articolo__figura img{width:640px;max-width:100%}
.articolo__figura figcaption{
  margin-top:8px;
  font-size:14px;
  font-weight:300;
  line-height:24px;
  color:var(--grigio);
}
.articolo__pie{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  margin-top:36px;
}

.condivisione{display:inline-flex;align-items:center}
.condivisione__icona{display:block;width:13px;height:14px;margin-right:11px;fill:none;stroke:var(--nero)}
.condivisione__elenco{display:inline-flex;align-items:center}
.condivisione__elenco li{margin-right:17px;line-height:24px}
.condivisione__elenco li:last-child{margin-right:0}
.condivisione__elenco a{
  font-family:var(--corpo);
  font-size:14px;
  font-weight:500;
  color:var(--nero);
  transition:color .2s ease-out;
}
.condivisione__elenco .condivisione--facebook a:hover{color:#3b5998}

/* ---------------------------------------------------- modulo dei commenti */
/* 124px = i 58+3+63 che il tema metteva fra il post e il modulo, meno
   l'80 di margine che l'articolo si porta gia' dietro. */
.modulo-commenti{margin-top:124px}
.modulo-commenti__titolo{
  margin:0;
  font-family:var(--display);
  font-size:46px;
  font-weight:400;
  line-height:59.8px;
  letter-spacing:-1.38px;
  color:var(--nero);
}
.modulo-commenti__form p{margin:10px 0 0}
.modulo-commenti__form p.modulo-commenti__nota{margin:7px 0 19px}
.modulo-commenti__coppia{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
.modulo-commenti input[type=text],
.modulo-commenti input[type=email],
.modulo-commenti input[type=url],
.modulo-commenti textarea{
  display:block;
  width:100%;
  margin:0 0 20px;
  padding:4px 0;
  font-family:var(--display);
  font-size:27px;
  font-weight:400;
  line-height:38px;
  letter-spacing:0.7px;
  color:var(--nero);
  background-color:transparent;
  border:0;
  border-bottom:1px solid var(--linea);
  border-radius:0;
  outline:0;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .2s ease-out;
}
.modulo-commenti textarea{height:47px;resize:vertical;overflow:auto}
.modulo-commenti input::placeholder,
.modulo-commenti textarea::placeholder{color:inherit;opacity:1}
.modulo-commenti input:focus,
.modulo-commenti textarea:focus{border-color:var(--nero)}
.modulo-commenti__form p.modulo-commenti__consenso{
  display:flex;
  align-items:flex-start;
  margin:24px 0 70px;
  font-size:16px;
  font-weight:300;
  line-height:29.92px;
}
.modulo-commenti__consenso input[type=checkbox]{flex-shrink:0;margin:9px 6px 0 0}
.modulo-commenti__consenso label{margin:0}
.modulo-commenti__form p.modulo-commenti__invio{margin:55px 0 0}
/* Il bottone del tema era piu' basso del .bottone di base: 66px contro 76. */
.modulo-commenti__invio .bottone{padding-top:16px;padding-bottom:16px}

/* ==========================================================================
   Schermi stretti
   ========================================================================== */
@media (max-width:1024px){
  .testata-pagina,
  .testata-pagina--puglia,
  .testata-pagina--bandiere-blu{height:400px}
  .testata-pagina__titolo{font-size:65px;line-height:72.22px;letter-spacing:-2.6px}

  .pagina-editoriale--elenco{padding:100px 0}
  .pagina-editoriale--articolo{padding:100px 0}
  .pagina-editoriale__griglia{grid-template-columns:minmax(0,1fr) 280px;column-gap:45px}

  .scheda-post__figura,
  .articolo__copertina,
  .articolo__figura img{width:100%}
}

@media (max-width:768px){
  .testata-pagina__titolo{font-size:50px;line-height:55.55px;letter-spacing:-2px}

  .pagina-editoriale--elenco{padding:60px 0}
  .pagina-editoriale--articolo{padding:60px 0}
  .pagina-editoriale__griglia{grid-template-columns:minmax(0,1fr);row-gap:60px;margin-bottom:0}

  .barra-laterale{margin-bottom:0}
  .scheda-post{margin-bottom:60px}
  .scheda-post__media{margin-bottom:24px}
  .articolo{margin-bottom:60px}
  .articolo__media{margin-bottom:22px}

  .data-in-foto{left:10px;bottom:10px;padding:8px 16px;font-size:12px;letter-spacing:1.8px}
  .meta-post{font-size:11px;letter-spacing:1.65px}

  .articolo__corpo ul{padding-left:22px}

  .modulo-commenti{margin-top:80px}
  .modulo-commenti__titolo{font-size:34px;line-height:44.2px;letter-spacing:-1.02px}
  .modulo-commenti__coppia{grid-template-columns:1fr;column-gap:0}
  .modulo-commenti input[type=text],
  .modulo-commenti input[type=email],
  .modulo-commenti input[type=url],
  .modulo-commenti textarea{font-size:20px;line-height:32px}
  .modulo-commenti textarea{height:41px}
}