/*!
 * ============================================================================
 * THEME INFO & METADATA
 * ============================================================================
 *
 * THEME NAME:      Immaginario Criminale
 * DESCRIPTION:     Tema personalizzato di Omeka-S basato sul tema Foundation.
 * L'Atlante del Crimine usa Bootstrap 5. Sonp presenti override stilistici per tipografia,
 * layout a griglia (Masonry) e componenti interattivi (TimelineJS).
 *
 * DEVELOPER:       Federica Scalzi - Brixel
 * WEBSITE:         https://www.brixel.it
 * CONTACT:         federica@brixel.it | federica.scalzi@gmail.com
 *
 * VERSION:         1.0.0
 * LAST UPDATED:    Gennaio 2026
 *
 * NAMING PREFIX:   --adc-* (Atlante del crimine)
 *
 * ============================================================================
 * TABLE OF CONTENTS
 * ============================================================================
 *
 * 01. VARIABLES & CONFIG
 * Setup delle variabili CSS (:root), palette colori,
 * impostazioni tipografiche e raggi/ombre.
 *
 * 02. FONTS
 * Definizioni @font-face (Albert Sans, etc.).
 *
 * 03. RESET & BASE
 * Stili globali per HTML, Body, Headings, Link e tag generici.
 *
 * 04. BOOTSTRAP OVERRIDES
 * Personalizzazione di pulsanti, card, form, badge e utilità Bootstrap.
 *
 * 05. LAYOUT & STRUCTURE
 * Gestione delle aree macro: Header, Navigazione principale, Footer, Container.
 *
 * 06. COMPONENTS
 * Plugin e widget specifici: Slick Slider, TimelineJS, GridJS, Modali.
 *
 * 07. PAGE SPECIFIC
 * Stili dedicati a pagine uniche: Homepage (Hero, Gallery),
 * Search/Faceted Browse, Dossier/Esemplari.
 *
 * 08. UTILITIES & HELPERS
 * Classi di aiuto per Overlay, Animazioni, Helpers di testo e spaziature.
 *
 * 09. RESPONSIVE / MEDIA QUERIES
 * Adattamenti per Tablet, Mobile e gestione del Menu Mobile Fullscreen.
 *
 * 10. PRINT STYLES
 * Regole specifiche per la stampa (nascondere nav, layout pulito).
 *
 * ============================================================================
 */


 /*!
  * ============================================================================
  * THEME INFO & METADATA
  * ============================================================================
  * THEME NAME:      ADC Museum / Archive Theme
  * DESCRIPTION:     Tema personalizzato con palette museale e override Bootstrap.
  * VERSION:         1.0.1 (Syntax Fix)
  * ============================================================================
  */

 /* ==========================================================================
    01. VARIABLES & CONFIG
    ========================================================================== */
 :root {
   /* Palette calda/museale */
   --adc-bg: #e4e3dd;         /* carta morbida */
   --adc-surface: #f1eee8;    /* blocchi */
   --adc-text: #1f1f1f;       /* grafite */
   --adc-muted: #2d2d2d;      /* testo secondario */
   --adc-accent: #920b0b;     /* rosso bicocca */
   --adc-accent-ink: #3c2a18; /* ombra/hover */
   --adc-border: #767676;
   --adc-light: #fff;

   /* Tipografia */
   --adc-serif: "Georgia", "Times New Roman", serif;
   --adc-sans:  "Albert Sans", sans-serif, Roboto, Arial, sans-serif;

   /* Raggi e ombre */
   --adc-radius: 2rem;
   /* --adc-shadow: 0 4px 16px rgba(0,0,0,.06); */
   --adc-shadow: none;

   --bs-btn-border-radius: var(--adc-radius);
   --bs-border-color: #767676;

   /* CORREZIONE: rimosso !important dalla definizione della variabile per evitare errori di parsing */
   --bs-body-font-size: 18px;

   --bs-badge-border-radius: 0;

   /* --bs-border-color: #cdcdcd; */
 }

 /* ==========================================================================
    02. FONTS
    ========================================================================== */
 /* albert-sans-100 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: normal;
   font-weight: 100;
   src: url('../fonts/albert-sans-v4-latin-100.woff2') format('woff2');
 }
 /* albert-sans-100italic - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: italic;
   font-weight: 100;
   src: url('../fonts/albert-sans-v4-latin-100italic.woff2') format('woff2');
 }
 /* albert-sans-200 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: normal;
   font-weight: 200;
   src: url('../fonts/albert-sans-v4-latin-200.woff2') format('woff2');
 }
 /* albert-sans-200italic - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: italic;
   font-weight: 200;
   src: url('../fonts/albert-sans-v4-latin-200italic.woff2') format('woff2');
 }
 /* albert-sans-300 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: normal;
   font-weight: 300;
   src: url('../fonts/albert-sans-v4-latin-300.woff2') format('woff2');
 }
 /* albert-sans-300italic - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: italic;
   font-weight: 300;
   src: url('../fonts/albert-sans-v4-latin-300italic.woff2') format('woff2');
 }
 /* albert-sans-regular - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/albert-sans-v4-latin-regular.woff2') format('woff2');
 }
 /* albert-sans-italic - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: italic;
   font-weight: 400;
   src: url('../fonts/albert-sans-v4-latin-italic.woff2') format('woff2');
 }
 /* albert-sans-500 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: normal;
   font-weight: 500;
   src: url('../fonts/albert-sans-v4-latin-500.woff2') format('woff2');
 }
 /* albert-sans-500italic - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: italic;
   font-weight: 500;
   src: url('../fonts/albert-sans-v4-latin-500italic.woff2') format('woff2');
 }
 /* albert-sans-600 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: normal;
   font-weight: 600;
   src: url('../fonts/albert-sans-v4-latin-600.woff2') format('woff2');
 }
 /* albert-sans-600italic - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: italic;
   font-weight: 600;
   src: url('../fonts/albert-sans-v4-latin-600italic.woff2') format('woff2');
 }
 /* albert-sans-700 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: normal;
   font-weight: 700;
   src: url('../fonts/albert-sans-v4-latin-700.woff2') format('woff2');
 }
 /* albert-sans-700italic - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: italic;
   font-weight: 700;
   src: url('../fonts/albert-sans-v4-latin-700italic.woff2') format('woff2');
 }
 /* albert-sans-800 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: normal;
   font-weight: 800;
   src: url('../fonts/albert-sans-v4-latin-800.woff2') format('woff2');
 }
 /* albert-sans-800italic - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: italic;
   font-weight: 800;
   src: url('../fonts/albert-sans-v4-latin-800italic.woff2') format('woff2');
 }
 /* albert-sans-900 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: normal;
   font-weight: 900;
   src: url('../fonts/albert-sans-v4-latin-900.woff2') format('woff2');
 }
 /* albert-sans-900italic - latin */
 @font-face {
   font-display: swap;
   font-family: 'Albert Sans';
   font-style: italic;
   font-weight: 900;
   src: url('../fonts/albert-sans-v4-latin-900italic.woff2') format('woff2');
 }

 /* ==========================================================================
    03. RESET & BASE
    ========================================================================== */
 html, body {
   background: var(--adc-bg);
   color: var(--adc-text);
 }

 body {
   font-size: 18px !important;
   font-size: var(--bs-body-font-size) !important;
   font-family: "Albert Sans", sans-serif;
   font-weight: 400;
 }

 body, p, dl, dt, dd, .card, .btn, .breadcrumb, .nav, .figure-caption {
   font-family: var(--adc-sans);
 }

 /* Initial Heading Setup */
 h1,h2,h3,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 {
   font-family: var(--adc-sans);
   letter-spacing: .1px;
 }

 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
 }

 /* * CORREZIONE: C'era una virgola in più dopo h6 che rompeva lo stile.
  * Rimosso la virgola finale.
  */
 h1, h2, h3, h4, h5, h6 {
   font-family: "Albert Sans", sans-serif;
   font-weight: 600;
   font-style: normal;
   letter-spacing: 0.02em;
   margin-bottom: 2rem;
   color: #000000;
 }

 .h3, h3 {
   font-size: 1.4rem;
 }

 .display-6 {
   font-weight: 500;
 }

 /* Inputs & Forms Base */
 input, textarea, button, .button, .resource-list.preview + a, select {
   font-family: "Albert Sans", sans-serif;
 }

 select {
   background-color: #fff;
   border-color: #000;
   border-width: 1px;
 }

 input[type="checkbox"] {
   accent-color: #000;
 }

 /* Links (Duplicate retained as requested) */
 main a { color: var(--adc-accent); }

 main a:link {
   color:#000;
 }

 main a:visited {
   color:#000;
 }
 main a:active,
 main a:hover {
   color:#920b0b
 }

 a:visited {
   color:#000;
 }

 a:link {
	color: #000;
}

 a:hover { color: var(--adc-accent-ink); }

 /* Spacing and Containers */
 section + section { margin-top: 2rem; }
 .container { max-width: 1280px; }
 /* .row{width: 100%;} */

 /* Divider */
 hr { border-color: var(--adc-border); opacity: 1; }

 /* Image defaults */
 /* img {
   max-width: none;
   height: auto;
 } */

 /* Accessibilità minima */
 :focus-visible {
  outline: 3px solid var(--adc-accent);
  outline-offset: 2px;
  box-shadow: var(--bs-btn-focus-box-shadow);
 }

 .btn:focus-visible  {
  border-color: var(--adc-accent);
  outline: 3px solid var(--adc-accent);
  outline-offset: 2px;
 }

 /* Skip to main content link */
 #skipnav:focus {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 9999;
   padding: 1rem;
   background-color: var(--adc-bg);
   color: #fff;
   text-decoration: none;
   font-weight: bold;
   border: 2px solid var(--adc-accent);
 }

  .input:focus-visible {
   border-color: red !important;
 }

 .bg-image-link:focus-visible,
 .button-link:focus-visible,
 a:focus-visible {
   outline: 3px solid var(--adc-accent) !important;
   outline-offset: 2px !important;
 }

 /* FIX: Evita che il menu nasconda i bordi di focus laterali e verticali */
 header nav ul li a:focus-visible {
   position: relative;
   z-index: 10;
   outline-offset: -3px !important; /* Nel menu ripieghiamo su offset interno per evitare il taglio del container overflow:hidden */
 }

 /* Sr-only */
 .sr-only {
   position: absolute !important;
   width: 1px; height: 1px;
   padding: 0; margin: -1px;
   overflow: hidden; clip: rect(0 0 0 0);
   white-space: nowrap; border: 0;
 }

 /* ==========================================================================
    04. BOOTSTRAP OVERRIDES & COMPONENTS
    ========================================================================== */
 .border-bottom {
   border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
 }

 /* Buttons */
 .btn {
   --bs-btn-padding-x: 2rem;
   --bs-btn-padding-y: 0.25rem;
   --bs-btn-border-radius: var(--adc-radius);
   font-size: 1.1rem !important; /* Garantisce leggibilità su schermi con base rem ridotta */
 }

 .btn-sm {
   font-size: 1rem !important; /* Garantisce almeno 14px su base rem ridotta */
 }

 .btn-outline-primary {
   --bs-btn-color: #2d2d2d;
   --bs-btn-border-color: #2d2d2d;
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #2d2d2d;
   --bs-btn-hover-border-color: #2d2d2d;
   --bs-btn-focus-shadow-rgb: 13,110,253;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #2d2d2d;
   --bs-btn-active-border-color: #2d2d2d;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #2d2d2d;
   --bs-btn-disabled-bg: transparent;
   --bs-btn-disabled-border-color: #2d2d2d;
   --bs-gradient: none;
 }

 a.btn.btn-dark:visited {
   color: #fff;
 }

 a.btn:link {
   color: var(--bs-btn-color);
   text-transform: uppercase;
   font-weight: 500;
   font-size: 0.9rem;
 }

 a.btn.btn-outline-dark:link:hover {
   color: var(--adc-light);
 }

 /* Pulsanti (accento bronzo) */
 .btn-primary {
   --bs-btn-bg: var(--adc-accent);
   --bs-btn-border-color: var(--adc-accent);
   --bs-btn-hover-bg: color-mix(in srgb, var(--adc-accent) 86%, black);
   --bs-btn-hover-border-color: color-mix(in srgb, var(--adc-accent) 86%, black);
   --bs-btn-active-bg: color-mix(in srgb, var(--adc-accent) 78%, black);
   --bs-btn-active-border-color: color-mix(in srgb, var(--adc-accent) 78%, black);
   --bs-btn-color: #fff;
 }

 .btn-outline-secondary {
   --bs-btn-color: var(--adc-text);
   --bs-btn-border-color: var(--adc-border);
   --bs-btn-hover-bg: var(--adc-surface);
   --bs-btn-hover-color: var(--adc-text);
   --bs-btn-hover-border-color: var(--adc-text);
 }

 .button-link {
   /* text-decoration: none;
   background-color: #007bff;
   color: #fff;
   padding: 0.5rem 1rem;
   border-radius: 6px;
   transition: background 0.2s; */
 }

 /* Cards */
 .card {
   border-radius: 0;
   /* box-shadow: var(--adc-shadow); */
 }
 .card .card-img-top { object-fit: cover; height: 200px; }
 .card:hover { transform: translateY(-2px); transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 6px 22px rgba(0,0,0,.08); }

 .bg-body-tertiary { background-color: var(--adc-surface) !important; }
 .rounded-3 { border-radius: var(--adc-radius) !important; }

 /* Breadcrumb */
 .breadcrumb {
   --bs-breadcrumb-divider: "›";
   color: var(--adc-muted);
 }
 .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
   color: var(--adc-muted);
 }
 .breadcrumb a { text-decoration: none; }
 .breadcrumb a:hover { text-decoration: underline; }

 /* Badge */
 .badge {
   border-radius: var(--bs-badge-border-radius);
 }

 /* Figure */
 .figure-caption {
   color: var(--adc-muted);
   font-size: .9rem;
 }

 /* Forms general */
 .input-group {
   width: inherit;
 }
 .form-select-sm {
   border-radius: 0;
 }

 /* ==========================================================================
    05. LAYOUT & STRUCTURE (Header, Nav, Footer)
    ========================================================================== */
  /* Fix per evitare che lo slider o l'header coprano la barra di amministrazione */
  #user-bar {
    position: relative;
    z-index: 99;
  }

 /* Header & Navigation */
 header {
   background-color: transparent;
 }

 @media screen {
   header {
     background-color: transparent;
   }
 }

 header nav > ul li:last-child {
   border: 1px solid #000;
   border-radius: 25px;
   padding: 0 20px;
   text-align: center;
 }

 .home header nav > ul li:last-child {
   border: 1px solid #fff;
 }

 header nav > ul li a {
   text-align: center;
 }
 header nav > ul > li > a {
   margin: inherit;
 }

 header nav::before {
   border: 1px solid #000;
   border-radius: 2px;
   right: 30px;
   top: 0;
 }
 
 header nav {
    margin-right: 0;
}

@media screen and (min-width: 800px) {
  header nav {
    margin-right: 0 !important;
  }
}

 /* Logo */
 .page.home .site-title {
   color: #fff;
 }
 .site-title img {
   max-width: 50px;
 }
 .home .site-title img {
   filter: brightness(0) invert(1);
   -webkit-filter: brightness(0) invert(1);
   max-width: 80px;
 }

 /* Home Header specific */
 .home main {
   margin-top: -94px;
 }
 .home header {
   z-index: 9;
 }
 .home header nav > ul > li > a {
   color: #fff !important;
 }

 /* Footer */
 footer {
   max-width: inherit;
 }

 #footer-loghi {
   background-color: #2a65af;
   padding: 2rem;
 }

 #footer-loghi img {
   max-height: 90px;
   max-width: fit-content;
 }

 .footer-logo {
   max-width: 200px;
   height: auto;
 }

 /* Back to Top Button */
 #back-to-top {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 9999; /* Assicura che stia sopra tutto */
   width: 50px;
   height: 50px;
   background-color: #333;
   color: #fff;
   border: 2px solid #fff;
   border-radius: 50%;
   font-size: 24px;
   cursor: pointer;
   box-shadow: 0 2px 5px rgba(0,0,0,0.3);
   transition: background-color 0.3s, transform 0.3s;
 }

 #back-to-top:hover,
 #back-to-top:focus {
   background-color: #000;
   outline: 3px solid var(--adc-accent);
   transform: scale(1.1);
 }

 @media (max-width: 600px) {
   #back-to-top {
     bottom: 15px;
     right: 15px;
     width: 45px;
     height: 45px;
   }
 }

 /* ==========================================================================
    06. COMPONENTS (Sliders, Timeline, GridJS)
    ========================================================================== */

 /* --- SLICK SLIDER & ARROWS --- */
 .slick-slide:not(.slick-active) {
   visibility: hidden;
 }

 .esemplari-slide {
   padding: 1rem;
   outline: none;
   background: #fff;
   margin-right: 1rem;
 }
 .esemplari-slide img {
   width: 100%;
   height: auto;
   display: block;
   border-radius:0;
 }
 .esemplari-caption {
   margin-top:6px;
   font-weight: 600;
 }
 .esemplari-placeholder { width:100%; height:100px; background:#eee; display:flex; align-items:center; justify-content:center; color:#666; }

 .slick-prev:focus, .slick-next:focus { box-shadow: 0 0 0 3px rgba(0,123,255,0.25); outline:none; }
 .esemplari-slide:focus-within { box-shadow: 0 0 0 3px rgba(0,123,255,0.15); border-radius:4px; }

 /* Default arrows hidden or custom */
 .slick-prev::before,
 .slick-next::before {
   display: none !important; /* Nasconde la "v" o il pallino di default di Slick */
   content: '' !important;
 }

 #ambiente .slick-prev::before,
 #ambiente .slick-next::before {
   display: block !important;
   content: '→' !important;
 }

 /* Custom Arrow Styles */
 .slick-prev,
 .slick-next {
   width: 40px;
   height: 40px;
   z-index: 100;
   background: transparent;
   border: none;
   opacity: 1;
 }

 .slick-prev { left: -30px; }
 .slick-next { right: -30px; }

 @media (max-width: 768px) {
   .slick-prev { left: 0px; background: rgba(255,255,255,0.5); }
   .slick-next { right: 0px; background: rgba(255,255,255,0.5); }
 }

 .slick-prev i,
 .slick-next i {
   font-size: 30px;
   color: #000000;
   line-height: 1;
   transition: color 0.2s ease;
 }

 .slick-prev:hover i,
 .slick-next:hover i {
   color: #555555;
 }

 /* White variants for Home */
 body.home .slick-prev i,
 body.home .slick-next i,
 body.front .slick-prev i,
 body.front .slick-next i {
   color: #ffffff !important;
   text-shadow: 0 1px 3px rgba(0,0,0,0.5);
 }

 body.home .slick-prev:hover i,
 body.home .slick-next:hover i {
   color: #cccccc !important;
 }

 /* --- TIMELINE JS --- */
 .tl-storyslider .tl-slider-background {
   background-color: transparent !important;
 }

 .tl-timeline h1, .tl-timeline h2, .tl-timeline h3, .tl-timeline h4, .tl-timeline h5, .tl-timeline h6 {
   font-family: "Albert Sans", sans-serif !important;
   text-transform: inherit !important;
   font-weight: 600 !important;
 }

 .page.mappa-crimini .tl-timeline .tl-headline-date, .tl-timeline h3.tl-headline-date {
   font-family: "Albert Sans", sans-serif !important;
   font-size: 0.7rem;
   color: #000;
   letter-spacing: 1px;
 }

 .tl-timeline .tl-text-headline-container h2.tl-headline {
   font-family: "Albert Sans", sans-serif !important;
   text-transform: inherit !important;
   font-weight: 600 !important;
   font-size: 1.7rem !important;
   line-height: 1.15 !important;
 }

 .tl-timeline p {
   font-family: "Albert Sans", sans-serif !important;
   color: var(--adc-text) !important;
 }

 .tl-timeline .tl-timenav-slider h2.tl-headline {
   font-family: "Albert Sans", sans-serif !important;
 }

 .tl-timeline .tl-headline-date, .tl-timeline h3.tl-headline-date {
   font-family: "Albert Sans", sans-serif !important;
 }

 .tl-timeline .tl-slidenav-next, .tl-timeline .tl-slidenav-previous, .tl-timeline .tl-message, .tl-timeline .tl-timegroup-message {
   font-family: "Albert Sans", sans-serif !important;
 }
 .tl-timeline .tl-timenav-slider .tl-timeaxis {
   font-family: "Albert Sans", sans-serif !important;
 }

 /* Contrasto ed alta visibilità per le date degli anni (1830, 1840...) */
 .tl-timeline .tl-timeaxis-tick-text {
   color: #000 !important;
   font-weight: 700 !important;
   opacity: 1 !important;
 }

 .tl-timeline {
   background-color: transparent;
   color: #000;
 }

 .tl-slidenav-previous .tl-slidenav-title, .tl-slidenav-next .tl-slidenav-title {
   filter: alpha(opacity=70);
   -khtml-opacity: 0.7;
   -moz-opacity: 0.7;
   opacity: 0.7;
 }

 .tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-icon, .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-icon, .tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-title, .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-title, .tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-description, .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-description {
   text-shadow: none;
   color: #000;
 }

 .tl-timemarker:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout::after, .tl-timemarker:focus .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout::after {
   background: none;
   filter: none;
 }

 .tl-timemarker:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout::after, .tl-timemarker:focus .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout::after {
   background: -moz-linear-gradient(top, rgba(115, 115, 115, 0) 0%, #737373 80%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(115, 115, 115, 0)), color-stop(80%, #737373));
   background: -webkit-linear-gradient(top, rgba(115, 115, 115, 0) 0%, #737373 80%);
   background: -o-linear-gradient(top, rgba(115, 115, 115, 0) 0%, #737373 80%);
   background: -ms-linear-gradient(top, rgba(115, 115, 115, 0) 0%, #737373 80%);
   background: none;
   filter: none;
   font-weight: 500 !important;
 }

 .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout::after {
   background: none !important;
 }

 .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline, .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p {
   color: #000 !important;
   font-weight: 600;
 }

 .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content {
   background-color: transparent;
   border-left: 2px solid;
 }

 .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout::after, .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p.tl-headline-fadeout::after {
   background: none;
 }

 .tl-timemarker .tl-timemarker-content-container {
   box-shadow: none;
   border-radius: 0;
   background-color: var(--adc-bg);
   border: none;
    width: 200px;
/*   width: auto;
   min-width: 200px;
   max-width: 200px;*/
   -webkit-transition: width 0.6s ease-out;
   transition: width 0.6s ease-out;
 }

 .tl-timemarker:hover .tl-timemarker-content-container,
 .tl-timemarker:focus .tl-timemarker-content-container {
   background-color: #fff;
   border-color: transparent;
  width: 600px !important;
  /* width: auto;
   max-width: 450px;*/
 }

 .tl-timenav {
   background-color: transparent;
   border-top: none;
 }

 .tl-timemarker .tl-timemarker-line-left::after, .tl-timemarker .tl-timemarker-line-right::after {
   left: -4px;
   bottom: -10px;
   height: 12px;
   width: 12px;
   background-color: #000;
 }

 .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
   background-color: transparent;
   z-index: 9;
   border: none;
   box-shadow: none;
 }

 /* --- GRID JS / TAXONOMY ARCHIVE --- */
 .gridjs-td {
   padding-left: 0;
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 .gridjs-thead {
   display: none;
 }
 .gridjs-tbody .gridjs-tr {
   border-bottom: 1px solid #000;
 }
 .gridjs-table {
   width: 100%;
 }

 .gridjs-tbody {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
 }
 .gridjs-tbody .gridjs-tr {
   border-bottom: none;
   background: #fff;
   flex: 1 0 21%;
 }
 .gridjs-td {
   padding: 1rem;
 }

 .taxonomy-linked-values-grid .resource-name {
   font-weight: 600;
   font-size: 1.1rem;
 }

 /* ==========================================================================
    07. PAGE SPECIFIC (Home, Faceted Browse, Dossier, etc.)
    ========================================================================== */

 /* --- HOME HERO SLIDER --- */
 .home-hero {
   position: relative;
   min-height: 55vh;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   overflow: hidden;
   text-align: center;
 }

 .home-hero .bg-slider {
   position: absolute;
   inset: 0; /* top:0; right:0; bottom:0; left:0; */
   z-index: 1;
   pointer-events: none;
 }

 .home-hero .bg-slide {
   width: 100%;
   height: 100%;
   background-position: top;
   background-size: cover;
   background-repeat: no-repeat;
   min-height: 55vh;
 }

 /* overlay sopra le slide ma sotto il contenuto */
 /* .home-hero .overlay {
   position: absolute;
   inset: 0;
   background: rgba(0,0,0,0.35);
   z-index: 2;
   pointer-events: none;
 } */

 /* contenuto (titolo, form) sopra tutto */
 .home-hero .hero-title,
 .home-hero .hero-subtitle,
 .home-hero .search-form,
 .home-hero .hero-search {
   position: relative;
   z-index: 3;
   text-align: center;
   color: var(--adc-bg);
 }

 /* form cliccabile */
 .home-hero .search-form,
 .home-hero .hero-search {
   pointer-events: auto;
   width: 100%;
   max-width: 900px;
 }

 /* slick controls (dots/arrows) sopra le slide ma non sopra il contenuto */
 .home-hero .slick-dots { z-index: 2; bottom: 12px; }
 .home-hero .slick-arrow { z-index: 2; }

 /* maggiore altezza su desktop */
 @media (min-width: 992px) {
   .home-hero { min-height: 70vh; }
   .home-hero .bg-slide { min-height: 70vh; }
 }

 /* --- HOME MASONRY (Modus Operandi) --- */
 .modop-grid {
   width: 100%;
   padding: 0;
   margin: 0;
   display: block;
 }

 .modop-grid .grid-sizer,
 .modop-grid .grid-item {
   width: 25%;
   float: left;
   margin: 0;
   padding: 10px;
   box-sizing: border-box;
   border: none;
 }

 .modop-grid .grid-item figure {
   min-height: 100px; /* Riserva spazio minimo */
   background-color: #f8f9fa; /* Grigio chiaro mentre carica */
   display: block;
   width: 100%;
   overflow: hidden;
 }

 .modop-grid .grid-item img {
   display: block;
   width: 100%;
   height: auto;
   object-fit:cover;
 }

 /* Responsive Masonry */
 @media (max-width: 1199px) {
   .modop-grid .grid-sizer,
   .modop-grid .grid-item {
     width: 33.333%;
   }
 }
 @media (max-width: 991px) {
   .modop-grid .grid-sizer,
   .modop-grid .grid-item {
     width: 50%;
   }
 }
 @media (max-width: 575px) {
   .modop-grid .grid-sizer,
   .modop-grid .grid-item {
     width: 100%;
   }
 }

 /* --- GALLERY ZOOM HOME --- */
 /* https://codepen.io/iGadget/pen/jOEQKNN - https://freefrontend.com/css-gallery/page/4/ */
 /* $time: 0.3s; */

 .gallery-home {
   display: grid;
   grid-template-rows: repeat(5, 18vh);
   grid-template-columns: repeat(2, 45vw);
   transition: all $time ease(gravity);
   padding: 0.25em;
   cursor: zoom-in;
   /* grid-gap: .25em;*/
 }

 .gallery-home img {
   max-width: none;
   object-fit: cover;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   transition: all 0.3s/2 ease(downhill);
   position: relative;
   box-shadow: 0 0 0 #0000;
   opacity: 0.67;
   filter: sepia(80%) hue-rotate(180deg);
 }

 .gallery-home img:hover {
   opacity: 1;
   filter: sepia(0%) hue-rotate(0deg);
 }

 .gallery-home figure:hover img {
   opacity: 1;
   filter: sepia(0%) hue-rotate(0deg);
   z-index: 1;
   box-shadow: 1em 1em 1em #0004;
   transition: all 0.3s ease(downhill);
   border-radius: 0;
   width: 300%;
   height: 300%;
   left: -100%;
   top: -100%;
 }

 @media (min-width: 40em) {
   .gallery-home {
     grid-template-rows: repeat(2, 20vh);
   }
   .gallery-home figure:hover img {
     width: 250%;
     height: 500%;
     left: -75%;
     top: -200%;
   }
 }

 @media (min-width: 10em) and (orientation: landscape) {
   .gallery-home {
     grid-template-columns: repeat(5, 18vw);
     grid-template-rows: repeat(2, 45vh);
   }
   .gallery-home figure:hover img {
     width: 250%;
     height: 200%;
   }
 }

 @media (min-width: 60em) {
   .gallery-home {
     grid-template-columns: repeat(10, 10vw);
     /* grid-template-columns: repeat(10, 8vw); */
     grid-template-rows: 25vh;
   }
   .gallery-home figure:hover img {
     width: 350%;
     height: 150%;
     left: -75%;
     top: -25%;
   }
   .gallery-home figure:hover img {
     left: 175%;
   }
 }

 @media (min-width: 40em) and (orientation: portrait) {
   .gallery-home figure:hover img {
     width: 300%;
     height: 300%;
     left: -100%;
     top: -100%;
   }
 }

 @media (min-width: 60em) and (orientation: landscape) {
   .gallery-home figure:hover img {
     /* width: 300%; */
     width: auto;
     height: 300%;
     left: -75%;
     top: -100%;
   }
   /* .gallery-home figure:hover img {
     left: 100%;
   } */
 }

 /* --- FACETED BROWSE & SEARCH --- */
 .faceted-browse-page .facets-container input[type="text"] {
   width: 100% !important;
 }
 .faceted-browse-page .facet {
   padding-bottom: 20px;
   padding-right: 2rem;
 }
 .faceted-browse-page .facet legend {
   font-size: 0.8rem;
   text-transform: uppercase;
   font-weight: 800;
   letter-spacing: 1px;
   font-family: "Albert Sans", sans-serif;
   border-bottom: 1px solid;
   padding-right: 2rem;
 }

 .faceted-browse-page #section-sidebar button.close-button {
   background-color: #000;
   color: #fff;
   top: 1rem;
   right: 1rem;
   position: fixed;
   padding: 0 10px;
 }

  .faceted-browse-page #section-sidebar-modal-toggle {
    padding: 0.4rem 4rem;
    border-radius: 30px;
    background-color: transparent;
    border: 1px solid;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    margin-bottom: 1rem;
  }

 /* Sorting form */
 form.sorting {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   gap: 10px;
   margin-bottom: 20px;
 }
 form.sorting select, .facets-container select,
 form.sorting button {
   height: 40px;
   padding: 0 15px;
   background-color: #fff;
   font-size: 14px;
   box-sizing: border-box;
   border-radius: 0;
   border: none;
 }
 form.sorting button {
   background-color: #000;
   color: #fff;
   cursor: pointer;
   font-weight: bold;
   text-transform: uppercase;
   padding: 0rem 4rem;
   border-radius: 30px;
   border: none;
 }
 form.sorting button:hover {
   opacity: 0.8;
 }

 .facet legend {
   font-size: 1.1rem;
 }

 /* Resource List Generic */
 ul.resource-list .resource:first-child {
   border-top: none;
   padding-top: 1rem;
 }
 ul.resource-list .resource {
   background: #fff;
   padding: 1rem;
   border-bottom: none;
   margin-bottom: 20px !important;
   margin-top: 0 !important;
 }

 .resource-title {
   line-height: 1.2;
   font-size: 1.2rem;
   letter-spacing: 0;
 }
 .faceted-browse-page .item.resource .resource-content {
   min-width: 100%;
 }
 .resource-link img {
   width: 100%;
   height: auto;
   display: block;
   margin-bottom: 10px;
 }

 /* Search Box Overlay */
 #search-submit {
   background-color: #e4e3dd;
   border-radius: 0;
   padding: 9px;
   margin-left: -4px;
 }

 #search-box .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1;
 }
 #search-box h1,
 #search-box p,
 #search-box form {
   position: relative;
   z-index: 2; /* sopra l’overlay */
 }

 /* --- DOSSIER / ESEMPLARI COLLECTION --- */
 .resource-list.grid.esemplari-collection .resource {
   /*display: inline-block;*/
   /*width: 100%;*/
   margin: 0 0 18px;
   background: #fff;
   padding: 2rem;
   /* border: 2px solid #000; */
 }
 .resource-list.grid.esemplari-collection .resource-thumbnail {
   margin: 0;
 }
 .grid .item { width: 30%; }

 /* Filtro Tipo */
 .filtro-tipo {
   display:flex;
   flex-wrap:wrap;
   gap:.5rem;
   margin:0 0 1rem;
 }
  .filtro-tipo button {
    border:1px solid #ccc;
    background:#fff;
    padding:.2rem .5rem;
    border-radius:999px;
    cursor:pointer;
    font-size: 0.94rem;
  }
 .filtro-tipo button.active {
   font-weight: 600;
   border-color:#000;
 }
 .esemplari-collection .item.resource.hidden {
   display:none !important;
 }

 /* --- CONTENT INFO CARDS / PARTICIPANT --- */
 .row-info {
   padding: 1.5rem 0;
   border-bottom: 1px solid #cdcdcd;
 }
 .row-info a:link {
   text-decoration:underline;
 }

 .row-info .col-content .img-thumbnail {
	border-radius: 0;
	border: none;
}

 .prop-schema-participant .col-content > div:nth-child(2n),
 .prop-dcterms-subject .col-content > div:nth-child(2n),
 .prop-bibo-authorList .col-content > div:nth-child(2n) {
   margin-bottom: 8px;
 }


 .prop-dcterms-bibliographicCitation .col-content > div {
  	padding-bottom: 10px !important;
  }


  .prop-oad-hasEntity .col-content > div {
  margin-bottom: 20px;
  }

  /*.prop-oad-hasEntity .col-content > div > a:first-child {
  	width: 100%;
  }*/


  .prop-oad-hasEntity .col-content img {
  	padding: 0.35rem;
  	background-color: var(--bs-body-bg);
    border: none;
    border-radius: 0;
}

 /* Page Mappa Crimini Specific */
 .page.mappa-crimini .container {
   max-width: 100vw;
 }

 .item-cover-img {
   max-height: 60vh;
   width: auto;
 }

 /* Relation Box (Sidebar/Content) */
  .realtion-box {
    font-size: 1.05rem;
    line-height: 1.5;
  }
  .relation-category-label {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    line-height: 1.4;
  }
 .donna {
   text-align: center;
 }
 .realtion-box .relation {
   border-bottom: 1px solid #cdcdcd !important;
 }
 .realtion-box .relation a {
   display: inline-block;
 }
 .realtion-box .relation:last-child {
   border-bottom: none !important;
   padding-bottom: 0 !important;
   margin-bottom: 0 !important;
 }
 .realtion-box .collapse::after {
   content: " ";
 }

 /* PDF Preview */
 .pdf-preview {
   width: 100%;
   max-width: 500px;
   min-height: 150px;
 }
 .pdf-preview-container {
   width: 200px;
   height: auto;
   margin-bottom: 10px;
 }

 /* --- Home Page Semantics --- */
 .home-hero-title {
   letter-spacing: 0.2rem;
   font-weight: 600;
   color: var(--adc-bg);
 }

 .btn-pill-small {
   font-size: 0.9rem;
 }

 .dossier-main-figure {
   min-height: 350px;
 }

 .thumb-list-preview {
   max-width: 120px;
   height: auto;
 }

 .serial-killer-thumb {
   max-height: 180px;
 }

 .appr-card-img {
   max-height: 310px;
   width: 100%;
   object-fit: cover;
 }

 .alert-error {
   color: #d93025;
   font-weight: 600;
 }

 .hr-dashed {
   border: 0;
   border-top: 1px dashed #ccc;
   margin: 1em 0;
 }

 .ambientazione-figure {
   max-width: 300px;
   padding-right: 2rem;
 }

 /* --- Functional Components --- */
 .map-display {
   height: 700px;
 }

 .property-item-thumb {
   max-width: 100px;
   height: auto;
 }

 .pdf-preview-list {
   width: 100%;
   height: 200px;
 }

 .debug-log-box {
   border: 1px dashed #bbb;
   padding: 10px;
   margin: 10px 0;
   font-family: monospace;
   font-size: 0.85rem;
 }

 .debug-log-list {
   margin: 8px 0 0 18px;
 }

 .debug-log-item {
   margin-bottom: 6px;
 }

 .debug-text-muted {
   color: #666;
 }

 .img-full-width {
   width: 100%;
   height: auto;
   display: block;
 }

 /* --- General Utilities --- */
 .ratio-1-1 { aspect-ratio: 1 / 1; }

 .obj-top { object-position: top; }


 /* ==========================================================================
    08. UTILITIES & HELPERS
    ========================================================================== */
 .small { font-size: 0.7rem; }
 .text-body-secondary { color: var(--adc-muted) !important; }

 .text-muted {
   color: rgb(81, 86, 92) !important;
}

 /* Display / Width Helpers */
 .w-50 { width: 50%; }
 .w-30 { width: 30%; }
 .flex-1 { flex: 1 1 0%; }
 .w-100 { width: 100%; }

 /* Overlay helpers */
 .overlay {
   background: rgba(0, 0, 0, 0.5); /* overlay semitrasparente */
 }
 .background-cover {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   z-index: 0;
 }
 .overlay-text {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 1rem;
   background: rgba(0,0,0,0.5);
   color: #fff;
 }
 .overlay-text h2,
 .overlay-text h3 {
   margin: 0;
   font-size: 1.2rem;
   color: #fff;
 }
 .overlay-text .subtitle {
   font-size: 0.9rem;
   color: #eee;
   margin-top: 0.25rem;
 }

 /* Animation / Hover Helpers */
 .hover-scale {
   transition: transform 0.3s ease;
 }
 .button-link:hover .hover-scale {
   transform: scale(1.05);
 }
 .img-overlay-container img {
   transition: transform 0.5s ease;
 }
 .img-overlay-container:hover img {
   transform: scale(1.05);
 }
 .overlay-text-h {
   transition: transform 0.5s ease;
 }
 .img-overlay-container:hover .overlay-text-h {
   transform: scale(1.3);
 }
 .img-overlay-container .overlay {
   background: rgba(0, 0, 0, 0.4);
   transition: background 0.5s ease;
 }
 .img-overlay-container:hover .overlay {
   background: rgba(0, 0, 0, 0.6);
 }

 /* Abbassa l'opacità per farli sembrare "spenti" */
.gia-visto {
    opacity: 0.7;
    transition: opacity 0.3s ease;
    position: relative;
}

/* Quando l'utente ci passa sopra, tornano normali */
.gia-visto:hover {
    opacity: 1;
}

/* Targhetta opzionale */
.gia-visto::after {
    content: 'Visto';
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #343a40;
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 10;
    pointer-events: none;
}

 /* --- COMMENTED UTILITIES (LEGACY) --- */
 /* (Preservato blocco commentato originale) */
 /*
 .d-none { display: none !important; }
 .d-block { display: block !important; }
 .d-inline { display: inline !important; }
 .d-inline-block { display: inline-block !important; }
 .d-flex { display: flex !important; }
 .d-inline-flex { display: inline-flex !important; }

 .text-left { text-align: left !important; }
 .text-center { text-align: center !important; }
 .text-right { text-align: right !important; }
 .text-justify { text-align: justify !important; }

 .text-bold { font-weight: 700 !important; }
 .text-normal { font-weight: 400 !important; }
 .text-italic { font-style: italic !important; }
 .text-uppercase { text-transform: uppercase !important; }
 .text-lowercase { text-transform: lowercase !important; }
 .text-capitalize { text-transform: capitalize !important; }
 .text-small { font-size: 0.7rem !important; }

 .lett-spac-01{ letter-spacing: .1rem; }

  .m-0 { margin: 0 !important; }
 .mt-1 { margin-top: 0.25rem !important; }
 .mb-1 { margin-bottom: 0.25rem !important; }
 .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
 .mt-2 { margin-top: 0.5rem !important; }
 .mb-2 { margin-bottom: 0.5rem !important; }
 .mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
 .mt-3 { margin-top: 1rem !important; }
 .mb-3 { margin-bottom: 1rem !important; }
 .mx-3 { margin-left: 1rem !important; margin-right:1rem !important; }

 .p-0 { padding: 0 !important; }
 .pt-1 { padding-top: 0.25rem !important; }
 .pb-1 { padding-bottom: 0.25rem !important; }
 .px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
 .pt-2 { padding-top: 0.5rem !important; }
 .pb-2 { padding-bottom: 0.5rem !important; }
 .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
 .pt-3 { padding-top: 1rem !important; }
 .pb-3 { padding-bottom: 1rem !important; }
 .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }

 .flex { display: flex; }
 .inline-flex { display: inline-flex; }
 .flex-row { flex-direction: row; }
 .flex-row-reverse { flex-direction: row-reverse; }
 .flex-col { flex-direction: column; }
 .flex-col-reverse { flex-direction: column-reverse; }
 .flex-wrap { flex-wrap: wrap; }
 .flex-nowrap { flex-wrap: nowrap; }
 .flex-wrap-reverse { flex-wrap: wrap-reverse; }

 .justify-start { justify-content: flex-start; }
 .justify-center { justify-content: center; }
 .justify-end { justify-content: flex-end; }
 .justify-between { justify-content: space-between; }
 .justify-around { justify-content: space-around; }
 .justify-evenly { justify-content: space-evenly; }

 .items-start { align-items: flex-start; }
 .items-center { align-items: center; }
 .items-end { align-items: flex-end; }
 .items-baseline { align-items: baseline; }
 .items-stretch { align-items: stretch; }

 .content-start { align-content: flex-start; }
 .content-center { align-content: center; }
 .content-end { align-content: flex-end; }
 .content-between { align-content: space-between; }
 .content-around { align-content: space-around; }
 .content-stretch { align-content: stretch; }

 .self-auto { align-self: auto; }
 .self-start { align-self: flex-start; }
 .self-center { align-self: center; }
 .self-end { align-self: flex-end; }
 .self-stretch { align-self: stretch; }

 .gap-0 { gap: 0; }
 .gap-5 { gap: 5px; }
 .gap-10 { gap: 10px; }
 .gap-15 { gap: 15px; }
 .gap-20 { gap: 20px; }
 .gap-30 { gap: 30px; }

 .flex-1 { flex: 1 1 0%; }
 .flex-auto { flex: 1 1 auto; }
 .flex-initial { flex: 0 1 auto; }
 .flex-none { flex: none; }

 .order-first { order: -9999; }
 .order-last { order: 9999; }
 .order-none { order: 0; }

 .flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .flex-between {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .w-100 { width: 100%; }
  .flex-1 { flex: 1 1 0%; }
 .gap-10 { gap: 10px; }
 .gap-20 { gap: 20px; }

 .flex-col {
   display: flex;
   flex-direction: column;
 }

 .border { border: 1px solid #ccc; }
 .border-2 { border: 2px solid #ccc; }
 .border-3 { border: 3px solid #ccc; }
 .border-0 { border: none; }
 .border-primary { border-color: #007bff; }
 .border-secondary { border-color: #6c757d; }
 .border-success { border-color: #28a745; }
 .border-danger { border-color: #dc3545; }
 .border-warning { border-color: #ffc107; }
 .border-info { border-color: #17a2b8; }

 .rounded { border-radius: 4px; }
 .rounded-sm { border-radius: 2px; }
 .rounded-md { border-radius: 8px; }
 .rounded-lg { border-radius: 12px; }
 .rounded-full { border-radius: 9999px; }

 .border-top { border-top: 1px solid #767676 !important;; }
 .border-bottom { border-bottom: 1px solid #ccc; }
 .border-left { border-left: 1px solid #ccc; }
 .border-right { border-right: 1px solid #ccc; }
 .border-top-0 { border-top: 0; }
 .border-bottom-0 { border-bottom: 0; }
 .border-left-0 { border-left: 0; }
 .border-right-0 { border-right: 0; }

 .p-bd {
   padding: 10px;
   border: 1px solid #ccc;
 }
 .m-bd {
   margin: 10px;
   border: 1px solid #ccc;
 }
 .relative { position: relative; }
 .overflow-hidden { overflow: hidden; }
 .h-50vh {
   height: 50vh;
   position: relative;
 }
 .text-primary { color: #0d6efd !important; }
 .text-secondary { color: #6c757d !important; }
 .text-success { color: #198754 !important; }
 .text-danger { color: #dc3545 !important; }
 .text-warning { color: #ffc107 !important; }
 .text-info { color: #0dcaf0 !important; }
 .text-light { color: #f8f9fa !important; }
 .text-dark { color: #212529 !important; }
 */

 /* ==========================================================================
    09. RESPONSIVE / MEDIA QUERIES
    ========================================================================== */

 /* Large Screens */
 @media (min-width: 1400px) {
   .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
     max-width: 1320px;
   }
 }

 /* Header Padding on Desktop */
 @media screen and (min-width: 800px) {
   header > * {
     padding: 0;
   }
 }

 /* Tablet / Mobile Grande */
 /* @media (max-width: 1024px) {
     .resource-list.grid {
         column-count: 3;
     }
 } */

 @media (max-width: 768px) {
   .w-50{
     width: 100%;
   }
   .w-30 {
     width: 48%;
   }
   .overlay-text {
     bottom: 0.5rem;
     left: 0.5rem;
     padding: 0.25rem 0.5rem;
   }
   .grid .item {
     width: 48%;
   }
   .progetto-box.block-group-grid {
     display: block;
   }
 }

 /* Mobile piccolo / smartphone */
 @media (max-width: 480px) {
   .w-30 {
     width: 100%;
   }
   .resource-list.grid {
     column-count: 1;
   }
   .grid .item { width: 98%; }
   .home .site-title img {
     max-width: 50px;
   }
   #main-content header {
     margin-bottom: 0;
   }
 }

 /* --- MENU MOBILE FIXED FULLSCREEN (Nero/Bianco) --- */
 @media screen and (max-width: 800px) {

   /* 1. Stile del Tasto Menu (Hamburger) quando CHIUSO */
   header nav::before {
     font-family: "Font Awesome 5 Free";
     content: "\f0c9"; /* Icona Hamburger */
     font-weight: 900;
     /* Posizione */
     position: absolute;
     top: 15px; /* Regola se necessario */
     right: 20px;
     /* Aspetto bottone */
     display: flex;
     align-items: center;
     justify-content: center;
     width: 45px;
     height: 45px;
     border: 1px solid #333;
     border-radius: 0;
     background-color: #fff;
     color: #000;
     font-size: 22px;
     z-index: 10000; /* Deve stare SOPRA al menu nero che apriremo */
     cursor: pointer;
   }

   header nav.open::before {
     top: 12px;
     right: 12px;
   }

   header nav.closed::before {
     top: 0;
     right: 0;
   }

   /* 2. Il Menu quando è APERTO (Overlay Nero) */
   header nav.open {
     /* FIXED è il trucco: si sgancia dall'header e copre lo schermo intero */
     position: fixed !important;
     top: 0;
     left: 0;
     width: 100vw; /* 100% della larghezza viewport */
     height: 100vh; /* 100% dell'altezza viewport */
     background-color: #000000; /* Sfondo NERO ASSOLUTO */
     margin: 0 !important;
     padding-top: 80px; /* Spazio in alto per non finire sotto la X */
     box-sizing: border-box;
     z-index: 9999; /* Altissimo, copre tutto il sito */
     overflow-y: auto; /* Se il menu è lungo, scorre */
   }

   /* 3. Il Tasto quando è APERTO (Diventa una X) */
   header nav.open::before {
     content: "\f00d";
     background-color: transparent;
     color: #ffffff;
     border-color: #ffffff;
     top: 12px;
   }

   /* 4. Lista dei Link */
   header nav.open ul.navigation {
     display: flex;
     flex-direction: column;
     width: 100%;
     padding: 0;
     margin: 0;
   }

   /* 5. Stile dei Link (Bianco su Nero) */
   header nav.open ul.navigation li {
     width: 100%;
     border-bottom: 1px solid #333; /* Riga grigia scura separatrice */
     border-radius: 0;
   }

   header nav.open ul.navigation li a {
     display: block;
     padding: 20px 30px;
     font-size: 20px; /* Testo grande leggibile */
     color: #ffffff !important; /* BIANCO FORZATO */
     text-decoration: none;
     font-weight: bold;
     text-transform: uppercase; /* Facoltativo: rende più moderno */
     letter-spacing: 1px;
   }

   /* 6. Effetto Hover (Tocco) */
   header nav.open ul.navigation li a:hover,
   header nav.open ul.navigation li a:active {
     background-color: #333333; /* Grigio scuro al tocco */
     color: #ffffff !important;
     padding-left: 40px; /* Movimento leggero */
     transition: all 0.3s ease;
   }
 }

 /* ==========================================================================
    10. PRINT STYLES
    ========================================================================== */
 @media print {
   /* 1. Nascondi gli elementi di navigazione del sito */
   header,
   footer,
   nav,
   .sidebar,
   .breadcrumbs,
   .pagination,
   .search-form,
   .skip-to-content,
   .skip-link,
   a[href="#content"],
   a[href="#main"],
   #approfondimento-ref,
   #user-bar,
   #print-btn { /* Importante: nascondi il pulsante stesso nella stampa! */
     display: none !important;
   }

   /* 2. Resetta i margini e la larghezza per usare tutto il foglio */
   body, #content, .container {
     width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     background: white !important;
     color: black !important;
     box-shadow: none !important;
   }

   #main-content {
     display: block !important; /* Disabilita Flexbox o Grid */
     width: 100% !important;
     float: none !important;
     margin: 0 !important;
     padding: 0 !important;
     max-width: none !important;
   }

   /* 1. Reset specifico per le colonne (cattura col-7, col-md-4, ecc.) */
   [class*="col-"] {
     width: 100% !important;
     max-width: 100% !important; /* CRUCIALE: Rimuove il blocco larghezza */
     flex: 0 0 100% !important;  /* Resetta il calcolo dello spazio flessibile */
     min-width: 100% !important;
   }

   aside {
     width: 100% !important;
     max-width: none !important;
     float: none !important;
     display: block !important;
     position: static !important; /* Se fosse 'sticky' o 'fixed', lo sblocca */
     clear: both !important;      /* Forza l'a capo */
     margin-top: 40px !important; /* Dà spazio tra testo e aside */
     border-top: 1px solid #ccc;  /* Opzionale: una linea per separare */
     padding-top: 20px !important;
     page-break-inside: avoid;    /* Cerca di non spezzare l'aside a metà pagina */
   }

   /* 3. Migliora la tipografia per la lettura su carta/PDF */
   body {
     font-size: 12pt;
     line-height: 1.5;
   }

   a {
     text-decoration: none;
     color: black;
   }

   /* Opzionale: evita che le immagini vengano tagliate tra due pagine */
   img, blockquote, pre {
     page-break-inside: avoid;
   }

   /* MASONRY ESEMPLARI */
   .resource-list.search-results-list.grid.esemplari-collection,
   .resource-list.search-result-list.grid.esemplari-collection {
     display: block !important;
     column-count: 3 !important;
     column-gap: 5px !important;
     width: 100% !important;
     height: auto !important;
     overflow: visible !important;
   }

   .esemplari-collection .resource {
     position: static !important;
     transform: none !important;
     display: inline-block !important;
     width: 100% !important;
     margin-bottom: 15px !important;
     break-inside: avoid !important;
     page-break-inside: avoid !important;
     box-shadow: none !important;
     border: 1px solid #ddd !important;
     background: white !important;
     color: black !important;
   }

   .esemplari-collection .resource-title {
     font-size: 12px;
   }

   .filtro-tipo {
     display: none;
   }
 }

 /* --- TARGET SIZE (WCAG 2.2) --- */
 @media screen and (max-width: 768px) {
   /* Aumenta l'area cliccabile per i link nel footer e navigazione su mobile */
   footer ul.list-unstyled li a,
   nav ul li a {
     display: inline-block;
     padding: 0.5rem 0;
     min-height: 44px; /* Supera il target minimo di 24px per facilitare il touch */
    }
 }

/* --- OVERRIDES & CUSTOM CLASSES (REPLACING INLINE STYLES) --- */

/* 1. Regola base ereditata da Foundation (style.css) - per memoria:
@media screen {
  ul.resource-list .resource img {
    height: auto;
    width: 60px;
    float: right;
    margin-left: 15px;
  }
}
*/

/* 2. OVERRIDE PER LE GRIGLIE (faceted-browse e ricerca):
   Le immagini in queste viste devono stare sempre in verticale sopra il testo, a tutta larghezza, su ogni device. */
@media screen {
  ul.resource-list.grid-facet .resource img,
  ul.resource-list.search-result-list .resource img {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 0 15px 0 !important;
    display: block !important;
  }
  
  ul.resource-list.grid-facet .resource img ~ *,
  ul.resource-list.search-result-list .resource img ~ * {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
}

/* 3. OVERRIDE DESKTOP PER LE GRIGLIE (sopra gli 800px):
   Sovrascrive la regola desktop di style.css che forzava l'immagine a 120px e float: right. */
@media screen and (min-width: 800px) {
  ul.resource-list.grid-facet .resource img,
  ul.resource-list.search-result-list .resource img {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 0 15px 0 !important;
    display: block !important;
  }
  
  ul.resource-list.grid-facet .resource img ~ *,
  ul.resource-list.search-result-list .resource img ~ * {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
}

/* Dimensionamento thumbnail nelle proprietà (sostituisce style="max-width:100px;") */
.property-item-thumb {
    max-width: 100px !important;
    height: auto !important;
}

/* Proporzione quadrata per figure (sostituisce style="aspect-ratio: 1/1;") */
.ratio-1-1 {
    aspect-ratio: 1/1 !important;
}

/* Posizionamento oggetto in alto (sostituisce style="object-position: top;") */
.obj-top {
    object-position: top !important;
}

/* --- FIX SPECIFICO PER BLOCCO MODULO MAPPING (mapping-block.phtml) SU MOBILE E TABLET --- */
@media (max-width: 992px) {
  /* 1. Incolonna la Timeline sopra e la Mappa sotto a tutta larghezza (100%) */
  .mapping-block.timeline {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 2. Imposta la larghezza al 100% per entrambi gli elementi (niente più 50%/50% affiancato) */
  .mapping-block.timeline .tl-timeline,
  .mapping-block.timeline .mapping-map {
    width: 100% !important;
    min-height: 350px !important;
    position: relative !important;
  }

  /* 3. Elimina la sovrapposizione position:absolute delle scritte/date */
  .mapping-block.timenav-full-width-above .tl-timenav,
  .mapping-block.timenav-full-width-below .tl-timenav {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
  }

  /* 4. Ridimensiona il font dei titoli per non sbordare su smartphone */
  .mapping-block.timeline .tl-text-headline-container h2.tl-headline {
    font-size: 1.2rem !important;
  }

  /* 5. Sfondo del marker attivo a bianco */
  .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
    background-color: #fff !important;
  }
}