/*
 * Una grafica volutamente muta.
 *
 * Nessun colore proprio e nessun carattere proprio: prende quelli del tema.
 * Fa le cose che il tema non puo' sapere: mette i riquadri in griglia, tiene
 * le fotografie tutte della stessa forma, incolonna le coppie nome-valore, e
 * regge il modulo di ricerca e quello dei contatti.
 *
 * I colori sono espressi come trasparenze del nero e del colore del testo,
 * cosi' funzionano su fondo chiaro e su fondo scuro senza sapere quale sia.
 */

.onkeep-vetrina,
.onkeep-scheda {
  --onkeep-riga: rgba(128, 128, 128, 0.28);
  --onkeep-tenue: rgba(128, 128, 128, 0.12);
}

/*
 * Vetrina inserita nella home scura di Akin.
 * La pagina /immobili/ rimane volutamente chiara: queste regole sono limitate
 * a body.home e non cambiano lo shortcode usato nelle altre pagine.
 */
body.home .onkeep-vetrina {
  --onkeep-riga: rgba(255, 255, 255, 0.2);
  --onkeep-tenue: rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
}

body.home .onkeep-ricerca,
body.home .onkeep-riquadro {
  background: #1b1919;
  border-color: rgba(255, 255, 255, 0.2);
}

body.home .onkeep-ricerca label span,
body.home .onkeep-conto,
body.home .onkeep-dove,
body.home .onkeep-numeri {
  color: #c9c9c9;
  opacity: 1;
}

body.home .onkeep-ricerca select,
body.home .onkeep-ordine select {
  color: #f5f5f5;
  background-color: #1b1919;
  border-color: rgba(255, 255, 255, 0.28);
}

body.home .onkeep-ricerca select option,
body.home .onkeep-ordine select option {
  color: #111;
  background: #fff;
}

body.home .onkeep-cerca {
  background: #fff;
  color: #111;
}

body.home .onkeep-cerca span {
  color: #111;
}

body.home .onkeep-testo h3,
body.home .onkeep-prezzo {
  color: #fff;
}

body.home .onkeep-riquadro:hover {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

/* Il colore forte del tema lo scrive il copione su tutta la pagina. Non si
   dichiara qui un valore di ripiego: dichiararlo sul blocco coprirebbe quello
   trovato, che e' esattamente il difetto che aveva il prezzo. Chi lo usa
   scrive il ripiego nella propria riga. */

/*
 * Gli immobili si prendono la pagina.
 *
 * Quasi tutti i temi tengono il contenuto in una colonna stretta, che va bene
 * per un articolo da leggere e non per una vetrina: sei fotografie in una
 * colonna da 650 pixel diventano due file di francobolli con mezzo schermo
 * bianco ai lati. Segnalato da Mauro guardando la sua pagina.
 *
 * Qui la vetrina esce dalla colonna del tema e si allarga fino a 1240,
 * restando centrata. Dove il tema e' gia' largo non cambia niente, perche' il
 * limite resta lo stesso.
 */
/*
 * Il nome della classe e' ripetuto apposta.
 *
 * I temi a blocchi stringono i figli del contenuto con una regola che ha lo
 * stesso peso della nostra e viene scritta dopo: senza questo raddoppio la
 * vetrina restava larga 645 pixel e per giunta spostata a destra. Ripetere la
 * classe alza il peso quel tanto che basta, senza usare !important.
 */
.onkeep-vetrina.onkeep-vetrina,
.onkeep-scheda.onkeep-scheda {
  box-sizing: border-box;
  max-width: none;
  width: min(1140px, calc(100vw - 40px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.onkeep-vetrina *,
.onkeep-scheda * {
  box-sizing: border-box;
}

/* La ricerca */

.onkeep-ricerca {
  border: 1px solid var(--onkeep-riga, rgba(128, 128, 128, 0.28));
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
}

.onkeep-ricerca-campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

.onkeep-ricerca label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

.onkeep-ricerca label span {
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.onkeep-ricerca select,
.onkeep-ricerca input[type="number"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--onkeep-riga, rgba(128, 128, 128, 0.28));
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
}

.onkeep-cerca {
  padding: 11px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--onkeep-titolo, currentColor);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
}

.onkeep-cerca span,
.onkeep-invia span {
  color: Canvas;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.onkeep-conto {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 0.9rem;
  opacity: 0.75;
}

.onkeep-ordine {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.onkeep-ordine select {
  border: 0;
  border-bottom: 1px solid var(--onkeep-riga, rgba(128, 128, 128, 0.28));
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  padding: 2px 0;
}

/* L'elenco */

.onkeep-elenco {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.onkeep-riquadro {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--onkeep-riga, rgba(128, 128, 128, 0.28));
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.onkeep-riquadro:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.onkeep-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--onkeep-tenue, rgba(128, 128, 128, 0.12));
}

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

.onkeep-senza-foto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0.5;
}

.onkeep-bollo {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
}

.onkeep-classe {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
}

.onkeep-testo {
  padding: 14px 16px 18px;
}

.onkeep-testo h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--onkeep-titolo, inherit);
}

.onkeep-dove,
.onkeep-numeri {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.7;
}

.onkeep-prezzo {
  margin: 8px 0 4px;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--onkeep-titolo, inherit);
}

.onkeep-nessuno {
  opacity: 0.75;
  padding: 20px 0;
}

.onkeep-pagine {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 32px;
}

.onkeep-pagine a,
.onkeep-pagine .qui {
  min-width: 36px;
  text-align: center;
  padding: 7px 10px;
  border: 1px solid var(--onkeep-riga, rgba(128, 128, 128, 0.28));
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  font-size: 0.9rem;
}

.onkeep-pagine .qui {
  background: var(--onkeep-tenue, rgba(128, 128, 128, 0.12));
  font-weight: 700;
}

/* La scheda */

/* Il video: la cornice tiene la proporzione, come le fotografie. */
.onkeep-video {
  margin: 0 0 26px;
}

.onkeep-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
  border-radius: 6px;
}

.onkeep-video iframe + iframe,
.onkeep-video iframe + .onkeep-fuori,
.onkeep-video .onkeep-fuori + .onkeep-fuori {
  margin-top: 12px;
}

.onkeep-fuori {
  margin: 0;
}

/* Il pulsante che porta fuori: stessa pillola degli altri. */
.onkeep-portale {
  display: inline-block;
  padding: 11px 24px;
  border-radius: 999px;
  background: var(--onkeep-titolo, currentColor);
  text-decoration: none;
}

.onkeep-portale span {
  color: Canvas;
  font-size: 0.9rem;
  font-weight: 500;
}

.onkeep-galleria {
  margin-top: 26px;
  margin-bottom: 26px;
}

/*
 * La fotografia della galleria: grande, dentro la colonna del contenuto.
 *
 * La fascia larga e bassa e' quella in cima alla pagina, che mette il tema.
 * Qui dentro le fotografie sono il contenuto e vanno viste: una grande, e
 * sotto le miniature piccole per saltare alle altre.
 */
.onkeep-grande {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--onkeep-tenue, rgba(128, 128, 128, 0.12));
}

.onkeep-grande img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.onkeep-quante {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 3px;
}

/*
 * Le miniature restano piccole.
 *
 * Segnalato da Mauro: ingrandite si mangiavano la fotografia grande e
 * scendevano su due righe. Sono un indice, non una seconda galleria: si
 * guarda la grande, e con queste si salta a quella che interessa.
 */
.onkeep-strisce {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.onkeep-strisce img,
.onkeep-altre {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  cursor: zoom-in;
  border: 0;
}

.onkeep-altre {
  background: var(--onkeep-tenue, rgba(128, 128, 128, 0.12));
  color: inherit;
  font: inherit;
  font-weight: 700;
}

/*
 * La fascia del titolo.
 *
 * Il fondo attraversa lo schermo con l'ombra, che qui non serve a fare ombra
 * ma a dipingere: l'elemento resta largo quanto il contenuto e non allarga la
 * pagina, quindi niente barra di scorrimento orizzontale.
 */
.onkeep-fascia {
  --onkeep-fondo: rgba(128, 128, 128, 0.11);
  background: var(--onkeep-fondo);
  box-shadow: 0 0 0 100vmax var(--onkeep-fondo);
  clip-path: inset(0 -100vmax);
  padding: 40px 0 34px;
  margin-bottom: 0;
}

.onkeep-fascia-dentro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}

/* Il ritorno all'elenco: piccolo, sopra il titolo, con la freccia. */
.onkeep-torna {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.85rem;
  opacity: 0.7;
  text-decoration: none;
}

.onkeep-torna::before {
  content: '‹ ';
}

.onkeep-torna:hover {
  opacity: 1;
}

.onkeep-titolo {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.onkeep-cifre {
  text-align: right;
}

.onkeep-prezzo-grande {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  color: var(--onkeep-titolo, inherit);
}

.onkeep-dove-grande {
  margin: 10px 0 0;
  opacity: 0.7;
}

@media (max-width: 700px) {
  .onkeep-fascia {
    padding: 26px 0 22px;
    margin-bottom: 0;
  }

  .onkeep-fascia-dentro {
    align-items: flex-start;
  }

  .onkeep-cifre {
    text-align: left;
  }
}

.onkeep-riferimento {
  font-size: 0.82rem;
  opacity: 0.6;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.onkeep-corpo {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 40px;
  margin-top: 26px;
  align-items: start;
}

@media (max-width: 860px) {
  .onkeep-corpo {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.onkeep-titoletto {
  font-size: 1.1rem;
  margin: 28px 0 12px;
}

.onkeep-fatti {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0 32px;
  border-top: 1px solid var(--onkeep-riga, rgba(128, 128, 128, 0.28));
}

.onkeep-fatti > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--onkeep-riga, rgba(128, 128, 128, 0.28));
}

.onkeep-fatti dt {
  opacity: 0.65;
  font-size: 0.92rem;
}

.onkeep-fatti dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* La mappa: cornice larga e bassa, come le altre. */
.onkeep-mappa {
  margin-top: 28px;
}

.onkeep-mappa iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
  border-radius: 6px;
  background: var(--onkeep-tenue, rgba(128, 128, 128, 0.12));
}

@media (max-width: 700px) {
  .onkeep-mappa iframe {
    aspect-ratio: 4 / 3;
  }
}

.onkeep-mappa-nota {
  margin: 8px 0 0;
  font-size: 0.85rem;
  opacity: 0.65;
}

/* Passare un immobile a qualcuno: tre modi, in fondo alla scheda. */
.onkeep-passa {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--onkeep-riga, rgba(128, 128, 128, 0.28));
}

.onkeep-passa-che {
  font-size: 0.9rem;
  opacity: 0.65;
  margin-right: 4px;
}

.onkeep-passa-come {
  font: inherit;
  font-size: 0.88rem;
  padding: 7px 16px;
  border: 1px solid var(--onkeep-riga, rgba(128, 128, 128, 0.28));
  border-radius: 999px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.onkeep-passa-come:hover {
  border-color: var(--onkeep-titolo, currentColor);
}

/* La richiesta di informazioni */

.onkeep-riquadro-contatto {
  border: 1px solid var(--onkeep-riga, rgba(128, 128, 128, 0.28));
  border-radius: 6px;
  padding: 20px;
  position: sticky;
  top: 24px;
}

.onkeep-riquadro-contatto .onkeep-titoletto {
  margin-top: 0;
}

.onkeep-chiama {
  display: block;
  text-align: center;
  padding: 12px 24px;
  margin-bottom: 16px;
  border: 1px solid var(--onkeep-titolo, currentColor);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}

.onkeep-su-cosa {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0 0 14px;
}

.onkeep-riquadro-contatto label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

.onkeep-riquadro-contatto label > span {
  opacity: 0.7;
}

.onkeep-riquadro-contatto input[type='text'],
.onkeep-riquadro-contatto input[type='tel'],
.onkeep-riquadro-contatto input[type='email'],
.onkeep-riquadro-contatto textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--onkeep-riga, rgba(128, 128, 128, 0.28));
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
}

.onkeep-consenso {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 8px !important;
  font-size: 0.78rem;
  opacity: 0.85;
  line-height: 1.45;
}

.onkeep-invia {
  width: 100%;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--onkeep-titolo, currentColor);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.onkeep-nascosta {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.onkeep-fatta,
.onkeep-errore {
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 0.9rem;
  margin: 0 0 12px;
}

.onkeep-fatta {
  background: rgba(31, 138, 92, 0.12);
}

.onkeep-errore {
  background: rgba(176, 48, 48, 0.12);
}

/* Le fotografie a schermo intero */

.onkeep-velo {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
}

.onkeep-velo[hidden] {
  display: none;
}

.onkeep-velo figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.onkeep-velo img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
}

.onkeep-velo figcaption {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
}

.onkeep-velo button {
  position: absolute;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 12px 18px;
  opacity: 0.75;
}

.onkeep-velo button:hover {
  opacity: 1;
}

.onkeep-chiudi {
  top: 8px;
  right: 12px;
  font-size: 2rem !important;
}

.onkeep-prima {
  left: 4px;
}

.onkeep-dopo {
  right: 4px;
}