/* NUNZIA — B3 V16 / breadcrumb mobile e titolo centrato nello spazio visivo.
   Riscrittura organica della scheda per evitare i limiti cumulativi delle V10-V13.
   L'area del quadro si ridimensiona entro lo spazio rimasto dopo header reale,
   titolo, metadati e miniature. Verticali e orizzontali: sempre contain, mai crop.
*/

/* La pagina deve poter crescere se la finestra è troppo bassa: mai nascondere il titolo. */
html:has(body.nunzia-b3-enabled) { height: auto; }
body.nunzia-b3-enabled { --b3-admin-offset: 0px; height: auto; }
body.nunzia-b3-enabled.admin-bar { --b3-admin-offset: 32px; }
@media (max-width:782px) {
  body.nunzia-b3-enabled.admin-bar { --b3-admin-offset: 46px; }
}
body.nunzia-b3-enabled .site-container { overflow: visible; }
body.nunzia-b3-enabled #page {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--b3-admin-offset));
  min-height: 0;
}
body.nunzia-b3-enabled #page-content,
body.nunzia-b3-enabled #main.site-main,
body.nunzia-b3-enabled .site-content,
body.nunzia-b3-enabled .content-inner,
body.nunzia-b3-enabled .content-wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
/* Nav mobile YOR può essere fixed: l'area effettivamente occupata
   viene riservata dentro #main (senza spostare le altre pagine). */
body.nunzia-b3-enabled #main.site-main {
  box-sizing: border-box;
  padding-top: var(--b3-nav-overlap, 0px);
}
body.nunzia-b3-enabled #masthead { flex: 0 0 auto; }
body.nunzia-b3-enabled .content-inner { padding: 0; }
body.nunzia-b3-enabled .content-wrapper { width: 100%; max-width: none; padding: 0; }

.nunzia-b3, .nunzia-b3 * { box-sizing: border-box; }
.nunzia-b3 {
  --b3-unit: min(0.069444444vw, 0.111111111dvh);
  width: min(calc(100% - 64px), 1440px);
  margin: 0 auto;
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  color: #636363;
  background: transparent;
  font: 15px/1.45 Arial, sans-serif;
}
.nunzia-b3 a { color: inherit; text-underline-offset: 3px; }
.nunzia-b3__breadcrumb-bar {
  padding: clamp(6px, calc(14.4 * var(--b3-unit)), 15px) 0;
  border-bottom: 1px solid currentColor;
}
.nunzia-b3__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(40px, calc(84 * var(--b3-unit)), 91px);
  padding: 5px 0;
  margin: 0;
  color: inherit;
  font: normal clamp(23px, calc(30 * var(--b3-unit)), 36px)/1.2 Georgia, serif;
  text-align: center;
}
.nunzia-b3__work {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  text-align: center;
}
.nunzia-b3__artwork-nav {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'previous painting next';
  align-items: center;
  justify-items: center;
}
.nunzia-b3__painting {
  grid-area: painting;
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: min(100%, calc(860 * var(--b3-unit)));
  max-height: 100%;
  object-fit: contain;
  align-self: center;
  justify-self: center;
}
.nunzia-b3__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: #636363;
  text-decoration: none;
  font: normal 37px/1 Georgia, serif;
  opacity: .75;
  transition: opacity .15s ease;
}
.nunzia-b3__arrow--previous { grid-area: previous; justify-self: start; }
.nunzia-b3__arrow--next { grid-area: next; justify-self: end; }
.nunzia-b3__arrow:hover { opacity: 1; }
.nunzia-b3__arrow:focus-visible, .nunzia-b3 a:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
.nunzia-b3__meta {
  display: flex;
  justify-content: center;
  gap: clamp(20px, calc(48 * var(--b3-unit)), 56px);
  margin: 0;
  padding: clamp(9px, calc(16 * var(--b3-unit)), 19px) 0 clamp(8px, calc(12 * var(--b3-unit)), 14px);
  font-size: clamp(12px, calc(14 * var(--b3-unit)), 17px);
}
.nunzia-b3__meta > div { max-width: 240px; }
.nunzia-b3__meta dt { font-size: clamp(10px, calc(11 * var(--b3-unit)), 13px); letter-spacing: .08em; text-transform: uppercase; }
.nunzia-b3__meta dd { margin: 3px 0 0; }
.nunzia-b3__strip {
  display: flex;
  justify-content: safe center;
  gap: clamp(8px, calc(14 * var(--b3-unit)), 18px);
  min-height: clamp(45px, calc(68 * var(--b3-unit)), 94px);
  flex: 0 0 auto;
  overflow-x: auto;
  padding: 0 5px clamp(6px, calc(10 * var(--b3-unit)), 12px);
}
.nunzia-b3__strip a {
  flex: none;
  display: grid;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
}
.nunzia-b3__strip [aria-current='page'] { border-color: currentColor; }
.nunzia-b3__strip img {
  display: block;
  width: auto;
  height: clamp(40px, calc(68 * var(--b3-unit)), 82px);
  max-width: none;
}

/* Tablet: alloca le frecce nella riga sotto l'opera senza schiacciare il titolo.
   La fotografia usa l'altezza realmente disponibile, non un max-height in vh
   indipendente dall'header di WordPress. */
@media (min-width:741px) and (max-width:1200px) {
  .nunzia-b3 { --b3-unit: min(0.069444444vw, 0.111111111dvh); }
  .nunzia-b3__title { min-height: clamp(42px, calc(78 * var(--b3-unit)), 76px); }
  .nunzia-b3__artwork-nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) clamp(24px, calc(33 * var(--b3-unit)), 32px);
    grid-template-areas: 'painting painting' 'previous next';
    row-gap: 3px;
    width: min(100%, 900px);
    justify-self: center;
  }
  .nunzia-b3__painting { max-width: min(100%, 900px); }
  .nunzia-b3__arrow { width: 40px; height: 28px; font-size: 27px; opacity: .65; }
  .nunzia-b3__meta { padding-block: 8px 12px; }
}

/* Cellulare: composizione compatta e leggibile, senza pulsanti a pallina. */
@media (max-width:740px) {
  .nunzia-b3 { width: calc(100% - 32px); --b3-unit: 1px; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  /* La sezione e la hairline devono restare visibili anche nella scheda mobile.
     Riga propria: niente sovrapposizioni con il titolo e niente strip collassata. */
  .nunzia-b3__breadcrumb-bar {
    display: block;
    padding: 5px 0 5px;
    font-size: 12px;
    line-height: 1.3;
  }
  .nunzia-b3__breadcrumb { display: block; min-height: 16px; }
  .nunzia-b3__title {
    min-height: 40px;
    padding: 0;
    font-size: 23px;
    position: relative;
    z-index: 1;
    /* Offset misurato dal template: il quadro contenuto può avere letterboxing. */
    transform: translateY(var(--b3-title-shift, 0px));
  }
  .nunzia-b3__artwork-nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 22px;
    grid-template-areas: 'painting painting' 'previous next';
    width: 100%;
    max-width: 100%;
    row-gap: 2px;
    justify-self: center;
  }
  .nunzia-b3__painting { width: 100%; height: 100%; max-width: min(100%, 680px); }
  .nunzia-b3__arrow { width: 40px; height: 22px; font-size: 25px; opacity: .65; }
  .nunzia-b3__meta {
    flex-direction: column;
    align-items: center;
    gap: clamp(2px, .6dvh, 5px);
    padding: 2px 0 5px;
    font-size: 13px;
    line-height: 1.3;
  }
  .nunzia-b3__meta dt { font-size: 11px; line-height: 1.2; }
  .nunzia-b3__meta dd { margin-top: 1px; line-height: 1.25; }
  .nunzia-b3__strip {
    min-height: clamp(38px, 6.8dvh, 52px);
    flex: 0 0 auto;
    padding: 0 3px 3px;
    gap: 10px;
    align-items: center;
  }
  .nunzia-b3__strip img { height: clamp(32px, 5.7dvh, 46px); }
}

/* In finestre estremamente basse il contenuto resta accessibile: nessun
   overflow nascosto sulle opere, sul titolo o sui collegamenti. */
@media (max-height:460px) {
  body.nunzia-b3-enabled #page { height: auto; min-height: calc(100dvh - var(--b3-admin-offset)); }
  .nunzia-b3 { min-height: 400px; }
}

/* Sui desktop larghi la misura reale corregge l'ultima piccola asimmetria;
   tablet e desktop di riferimento restano esattamente come nella V15. */
@media (min-width:1600px) {
  .nunzia-b3__title { transform: translateY(var(--b3-title-shift, 0px)); }
}