/* Shortcode [uffici]. Stili isolati dal tema. */

body:has(.uffici-pagina) .bg-head {
  /*display: none !important;*/
}

section.module:has(.uffici-pagina) {
  padding: 0 !important;
  background: transparent !important;
}

section.module:has(.uffici-pagina) > .container,
section.module:has(.uffici-pagina) > .container-fluid {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.uffici-pagina {
  --ciano: #0096CF;
  --ciano-scuro: #007DAD;
  --testo: #1C262C;
  --testo-2: #4A565D;
  --azzurro: #EAF6FB;
  --bordo: #DCE6EB;
  --r: 16px;
  --gutter: 16px;
  --max: 1120px;
  background: #fff;
  color: var(--testo);
  font: 400 16px/1.6 Raleway, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.uffici-pagina,
.uffici-pagina *,
.uffici-pagina *::before,
.uffici-pagina *::after {
  box-sizing: border-box;
}

.uffici-pagina img { display: block; max-width: 100%; height: auto; border: 0; }
.uffici-pagina a { color: var(--ciano); text-decoration: none; }
.uffici-pagina a:hover { color: var(--ciano-scuro); text-decoration: none; }
.uffici-pagina h1,
.uffici-pagina h2 {
  font-family: Raleway, Helvetica, sans-serif;
  font-weight: 700;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--testo);
}
.uffici-pagina p { margin: 0; }
.uffici-pagina ul { margin: 0; padding: 0; }
.uffici-pagina .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.uffici-pagina .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ciano);
  color: #fff;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: none;
  white-space: normal;
  font: 600 15px/1 Raleway, Helvetica, sans-serif;
  cursor: pointer;
  transition: background-color .15s ease;
}
.uffici-pagina .btn:hover,
.uffici-pagina .btn:focus { background: var(--ciano-scuro); color: #fff; text-decoration: none; }
.uffici-pagina .btn:focus-visible,
.uffici-pagina a:focus-visible { outline: 3px solid rgba(0,150,207,.35); outline-offset: 2px; }
.uffici-pagina .btn-secondario { background: #fff; color: var(--testo); border: 1px solid var(--bordo); }
.uffici-pagina .btn-secondario:hover,
.uffici-pagina .btn-secondario:focus { background: var(--azzurro); color: var(--testo); }

.uffici-pagina .testata { padding: 40px 0 32px; }
.uffici-pagina .occhiello { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ciano); margin-bottom: 12px; }
.uffici-pagina .testata h1 { font-size: 36px; margin-bottom: 14px; }
.uffici-pagina .intro { color: var(--testo-2); font-size: 17px; max-width: 40em; margin-bottom: 14px; }
.uffici-pagina .citta { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 2; color: var(--testo-2); }
.uffici-pagina .citta span { white-space: nowrap; }

.uffici-pagina .sedi { padding: 0 0 64px; }
.uffici-pagina .griglia { display: grid; gap: 20px; }
.uffici-pagina .sede { display: flex; flex-direction: column; border: 1px solid var(--bordo); border-radius: var(--r); overflow: hidden; background: #fff; }
.uffici-pagina .sede-foto { aspect-ratio: 3 / 2; background: var(--azzurro); }
.uffici-pagina .sede-foto img { width: 100%; height: 100%; object-fit: cover; }
.uffici-pagina .sede-corpo { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 24px; }
.uffici-pagina .sede h2 { font-size: 22px; margin-bottom: 8px; }
.uffici-pagina .righe { list-style: none; margin: 0 0 20px; padding: 0; font-size: 15px; color: var(--testo-2); }
.uffici-pagina .righe li { padding: 3px 0; list-style: none; }
.uffici-pagina .righe a { color: var(--testo); text-decoration: none; border-bottom: 1px solid var(--bordo); }
.uffici-pagina .righe a:hover { color: var(--ciano); border-color: var(--ciano); }
.uffici-pagina .azioni { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (min-width: 700px) {
  .uffici-pagina .griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .uffici-pagina { --gutter: 0px; }
  .uffici-pagina .testata { padding: 64px 0 48px; }
  .uffici-pagina .testata h1 { font-size: 48px; }
  .uffici-pagina .griglia { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .uffici-pagina .sedi { padding: 0 0 96px; }
}