/* ==========================================================================
   C.A.O.S. — Società Cooperativa Sociale ONLUS
   Foglio di stile unico. Mobile-first. Direzione "Rete".
   ========================================================================== */

/* --- font self-hosted ------------------------------------------------- */
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/fonts/bricolage-grotesque-500.woff2") format("woff2");
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/fonts/bricolage-grotesque-600.woff2") format("woff2");
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/fonts/bricolage-grotesque-700.woff2") format("woff2");
}
@font-face{
  font-family:"Work Sans";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/work-sans-400.woff2") format("woff2");
}
@font-face{
  font-family:"Work Sans";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/fonts/work-sans-500.woff2") format("woff2");
}
@font-face{
  font-family:"Work Sans";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/fonts/work-sans-600.woff2") format("woff2");
}

/* --- design tokens ------------------------------------------------------ */
:root{
  --ink:        #1B1A2E;
  --brand-900:  #3730A6;
  --brand-700:  #4F46D6;
  --brand-100:  #EDEBFA;
  --accent-800: #B8441F;
  --accent-100: #FBE9E1;
  --paper:      #FFFFFF;
  --paper-alt:  #F4F3FA;
  --border:     #D9D7EC;
  --muted:      #5B5A72;

  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-text: "Work Sans", -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  1.2rem;
  --step-2:  1.5rem;
  --step-3:  1.9rem;
  --step-4:  2.375rem;
  --step-5:  3rem;

  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;
  --sp-6: 3.5rem;
  --sp-7: 4.5rem;
  --sp-8: 5.5rem;

  --content-max: 72rem;
  --focus: 3px solid var(--accent-800);
}

@media (min-width: 60rem){
  :root{
    --step-1: 1.333rem;
    --step-2: 1.777rem;
    --step-3: 2.369rem;
    --step-4: 3.157rem;
    --step-5: 4.209rem;
  }
}

/* --- reset ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{ margin: 0; }
img,svg,video{ display:block; max-width:100%; height:auto; }
ul[class],ol[class]{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0 0 var(--sp-3); }

/* --- base -------------------------------------------------------------- */
body{
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h1{ font-size: var(--step-5); }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); }
p{ max-width: 68ch; }
a{ color: var(--accent-800); text-decoration-thickness: 1.5px; }
a:hover{ color: #8f3417; }
small,.muted{ color: var(--muted); font-size: var(--step--1); }

:focus-visible{ outline: var(--focus); outline-offset: 3px; }

.wrap{ max-width: var(--content-max); margin: 0 auto; padding-left: var(--sp-3); padding-right: var(--sp-3); }
@media (min-width: 40rem){ .wrap{ padding-left: var(--sp-5); padding-right: var(--sp-5); } }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--ink); color:#fff; padding: var(--sp-2) var(--sp-3);
  z-index: 100; font-weight:600;
}
.skip-link:focus{ left: var(--sp-2); top: var(--sp-2); }

/* --- header / nav -------------------------------------------------- */
.site-header{
  border-bottom: 2px solid var(--ink);
  position: sticky; top: 0; background: var(--paper); z-index: 50;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: var(--sp-2); padding-bottom: var(--sp-2);
}
.logo{ display:flex; align-items:center; gap: var(--sp-2); text-decoration:none; color: var(--ink); }
.logo-mark{ height:32px; width:auto; flex-shrink:0; }
.logo-word{ font-family: var(--font-display); font-weight:700; font-size: var(--step-1); letter-spacing:-0.02em; }
.logo-sub{ display:block; font-size:0.65rem; color: var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:1px; }

.nav-toggle{
  display:inline-flex; align-items:center; gap: var(--sp-1);
  background:none; border: 2px solid var(--ink); padding: 0.5em 0.8em;
  font-family: var(--font-text); font-weight:600; font-size: var(--step--1);
  cursor:pointer; color: var(--ink);
}
.nav-toggle[aria-expanded="true"]{ background: var(--ink); color:#fff; }

.site-nav{ display:none; }
.site-nav.is-open{ display:block; }
.site-nav ul{ display:flex; flex-direction:column; }
.site-nav a{
  display:block; padding: var(--sp-2) 0; color: var(--ink); text-decoration:none;
  font-weight:600; text-transform:uppercase; font-size: var(--step--1); letter-spacing:0.04em;
  border-bottom:1px solid var(--border);
}
.site-nav a[aria-current="page"]{ color: var(--accent-800); }

@media (min-width: 56rem){
  .nav-toggle{ display:none; }
  .site-nav{ display:block; }
  .site-nav ul{ flex-direction:row; gap: var(--sp-4); }
  .site-nav a{ padding: var(--sp-1) 0; border-bottom:2px solid transparent; }
  .site-nav a:hover,.site-nav a[aria-current="page"]{ border-bottom-color: var(--accent-800); }
}

/* --- hero ------------------------------------------------------------ */
.hero{ background: var(--ink); color:#fff; overflow:hidden; }
.hero .wrap{
  padding-top: var(--sp-6); padding-bottom: var(--sp-6);
  display:grid; gap: var(--sp-5); align-items:center;
}
.eyebrow{
  display:inline-block; background: var(--accent-800); color:#fff;
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em;
  padding: 0.35em 0.8em; margin-bottom: var(--sp-3);
}
.hero h1{
  color:#fff; letter-spacing:-0.03em;
  font-size: clamp(2.5rem, 5vw + 1.2rem, 4.6rem);
}
.hero p{ color:#C9C7E8; font-size: var(--step-1); max-width:36ch; }

/* cornice fotografica con blocco colore sfalsato e taglio d'angolo */
.hero-photo-frame{ position:relative; isolation:isolate; }
.hero-photo-frame::before{
  content:""; position:absolute; z-index:0;
  top:16px; left:16px; right:-16px; bottom:-16px;
  background: var(--accent-800);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 84% 100%, 0 100%);
}
.hero-photo-img{
  display:block; position:relative; z-index:1; aspect-ratio:4/3; overflow:hidden;
  clip-path: polygon(0 0, 100% 0, 100% 84%, 84% 100%, 0 100%);
}
.hero-photo-img img{ width:100%; height:100%; object-fit:cover; }

@media (min-width: 56rem){
  .hero .wrap{ grid-template-columns: 1fr 1.15fr; padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
}

/* --- page header (pagine interne) -------------------------------------- */
.page-header{ background: var(--brand-100); border-bottom: 2px solid var(--ink); }
.page-header .wrap{ padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.page-header p{ color: var(--muted); font-size: var(--step-1); max-width:60ch; }
.page-header-inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); flex-wrap:wrap; }
.community-badge{ height:150px; width:auto; max-width:320px; object-fit:contain; border:2px solid var(--ink); background:#fff; padding:8px; flex-shrink:0; }

.page-header-dark{ background: var(--ink); }
.page-header-dark h1{ color:#fff; }
.page-header-dark p{ color:#C9C7E8; }
.page-header-dark .breadcrumb,
.page-header-dark .breadcrumb a{ color:#C9C7E8; }
.page-header-dark .breadcrumb a:hover{ color: var(--accent-100); }
.page-header-dark .breadcrumb li[aria-current="page"]{ color:#fff; }

.breadcrumb{ font-size: var(--step--1); color: var(--muted); margin-bottom: var(--sp-2); }
.breadcrumb a{ color: var(--muted); }
.breadcrumb a:hover{ color: var(--accent-800); }

/* --- buttons ---------------------------------------------------------- */
.btn{
  display:inline-block; padding: 0.85em 1.5em; font-weight:600; font-size: var(--step--1);
  text-decoration:none; letter-spacing:0.02em; text-transform:uppercase; border:2px solid transparent;
}
.btn-primary{ background: var(--accent-800); color:#fff; }
.btn-primary:hover{ background:#8f3417; color:#fff; }
.btn-outline{ border-color: currentColor; color: inherit; }
.btn-outline:hover{ background: rgba(0,0,0,.06); }
.hero .btn-outline{ border-color:#fff; color:#fff; }
.hero .btn-outline:hover{ background: rgba(255,255,255,.12); }

/* --- sections --------------------------------------------------------- */
section{ padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.section-alt{ background: var(--paper-alt); }
.section-tinted{ background: var(--brand-100); }
.section-head{ margin-bottom: var(--sp-4); }
.section-head p{ color: var(--muted); }

.section-dark{ background: var(--ink); color:#fff; }
.section-dark h2{ color:#fff; }
.section-dark .section-head p{ color:#C9C7E8; }
.section-dark p{ color:#C9C7E8; }

/* --- cards -------------------------------------------------------------- */
.grid{ display:grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 36rem){ .grid-2{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 56rem){ .grid-3{ grid-template-columns: repeat(3,1fr); } }

.card{ border: 2px solid var(--ink); background: var(--paper); color: var(--ink); display:flex; flex-direction:column; }
.card-photo{ aspect-ratio: 16/10; overflow:hidden; border-bottom: 2px solid var(--ink); background: var(--paper-alt); }
.card-photo img{ width:100%; height:100%; object-fit:cover; }
.card-photo-logo{ background:#fff; }
.card-photo-logo img{ object-fit:contain; padding: var(--sp-4); }
.card-body{ padding: var(--sp-3); flex:1; display:flex; flex-direction:column; }
.card h3{ font-size: var(--step-1); margin-bottom: var(--sp-1); }
.card p{ color: var(--muted); margin-bottom: var(--sp-2); }
.card .btn{ margin-top:auto; align-self:flex-start; }

.tag{
  display:inline-block; background: var(--ink); color:#fff; font-size:0.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em; padding: 0.25em 0.7em; margin-bottom: var(--sp-2);
}
.tag-accent{ background: var(--accent-800); }

/* --- liste dati (contatti, accreditamenti) ------------------------------ */
.deflist{ display:grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width:36rem){ .deflist{ grid-template-columns: 12rem 1fr; } }
.deflist dt{ font-weight:600; color: var(--muted); }
.deflist dd{ margin:0; }

/* --- documenti / galleria: filtri --------------------------------------- */
.filters{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.filters select,.filters input{
  font-family: var(--font-text); font-weight:600; font-size: var(--step--1); padding: 0.6em 2.2em 0.6em 0.8em;
  border: 2px solid var(--ink); background:#fff; color: var(--ink);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B1A2E' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 0.7em center; background-size: 11px;
}
.filters select:focus{ outline: var(--focus); outline-offset: 2px; }
.filters label{ display:flex; flex-direction:column; gap:0.3em; font-size: var(--step--1); font-weight:600; }

.doc-list{ display:flex; flex-direction:column; gap: var(--sp-2); min-height: 50vh; }
.doc-item{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap: var(--sp-2);
  border: 1px solid var(--border); border-left: 4px solid var(--brand-900); padding: var(--sp-2) var(--sp-3);
  background:#fff;
}
.doc-item a{ font-weight:600; text-decoration:none; }
.doc-item a:hover{ text-decoration:underline; }
.doc-meta{ font-size: var(--step--1); color: var(--muted); }
.doc-empty{ color: var(--muted); padding: var(--sp-4) 0; }

.doc-tag{
  display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; padding: 0.2em 0.6em; color:#fff; margin-bottom:0.35em;
}
.doc-tag.cat-autorizzazioni{ background: var(--brand-900); }
.doc-tag.cat-accreditamenti{ background: var(--accent-800); }
.doc-tag.cat-carte-dei-servizi{ background: var(--ink); }
.doc-item.cat-autorizzazioni{ border-left-color: var(--brand-900); }
.doc-item.cat-accreditamenti{ border-left-color: var(--accent-800); }
.doc-item.cat-carte-dei-servizi{ border-left-color: var(--ink); }

.gallery-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-2); min-height: 50vh; }
@media (min-width:36rem){ .gallery-grid{ grid-template-columns: repeat(3,1fr); } }
@media (min-width:56rem){ .gallery-grid{ grid-template-columns: repeat(4,1fr); } }
.gallery-item{ position:relative; aspect-ratio: 4/3; overflow:hidden; border: 2px solid var(--ink); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; }
.gallery-item[hidden]{ display:none; }
.gallery-item .cat-label{
  position:absolute; left:0; bottom:0; max-width:100%;
  background: rgba(27,26,46,.8); color:#fff; font-size:0.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em; padding:0.35em 0.6em;
}

/* --- video facciata (embed a click) ------------------------------------- */
.video-facade{
  position:relative; aspect-ratio:16/9; background: var(--ink); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden;
}
.video-facade img{ width:100%; height:100%; object-fit:cover; opacity:0.7; }
.video-facade .play{
  position:absolute; width:72px; height:72px; border-radius:50%; background: var(--accent-800);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.video-facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* --- footer -------------------------------------------------------------- */
.site-footer{ background: var(--ink); color:#C9C7E8; padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.site-footer a{ color:#fff; }
.footer-grid{ display:grid; gap: var(--sp-4); grid-template-columns:1fr; margin-bottom: var(--sp-4); }
@media (min-width:44rem){ .footer-grid{ grid-template-columns: repeat(3,1fr); } }
.footer-heading{ color:#fff; font-size: var(--step--1); text-transform:uppercase; letter-spacing:0.06em; margin-bottom: var(--sp-2); }
.footer-brand{ display:flex; align-items:center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.footer-brand .footer-heading{ margin-bottom:0; }
.footer-logo{ height:30px; width:auto; flex-shrink:0; }
.footer-grid p,.footer-grid li{ font-size: var(--step--1); }
.footer-bottom{ border-top:1px solid #37365a; padding-top: var(--sp-3); font-size:0.75rem; color:#918FB0; }

/* --- utility -------------------------------------------------------------- */
.visually-hidden{
  position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}
.mt-0{ margin-top:0; }