<?php /* =========================================
File: assets/style.css (minimo, ispirato a layout pulito)
========================================= */ ?>
/* style.css */
:root { --bg:#fafafa; --fg:#1b1b1b; --muted:#666; --card:#ffffff; --border:#e5e5e5; --primary:#7a1c1c; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--fg); background:var(--bg); }
.container { width:min(1000px, 92%); margin:0 auto; }
.flex { display:flex; }
.space-between { justify-content:space-between; }
.center-v { align-items:center; }

.site-header { background:#fff; border-bottom:1px solid var(--border); }
.branding .title { margin:16px 0 4px; font-size:28px; color:var(--primary); }
.branding .subtitle { margin:0 0 16px; color:var(--muted); font-size:14px; }
.lang-switch a { margin-left:10px; display:inline-block; }

.main-nav { background: #f3f3f3; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.main-nav .container { display:flex; gap:16px; }
.main-nav a { display:inline-block; padding:12px 10px; color:#333; text-decoration:none; border-bottom:3px solid transparent; }
.main-nav a.active, .main-nav a:hover { border-color: var(--primary); color: var(--primary); }

.site-footer { margin-top:40px; padding:20px 0; border-top:1px solid var(--border); background:#fff; color:var(--muted); font-size:14px; }

.home-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin:20px 0; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.card h3 { margin-top:0; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
@media (max-width: 900px){ .grid-2 { grid-template-columns: 1fr; } }

.alert { padding:10px 12px; border-radius:8px; margin:10px 0; }
.alert.success { background:#e9f8ee; border:1px solid #b8e6c6; }
.alert.error { background:#fdecec; border:1px solid #f5b5b5; }

.form .field { margin-bottom:12px; }
.form label { display:block; font-weight:600; margin-bottom:6px; }
.form input[type="text"],
.form input[type="date"],
.form textarea { width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; font:inherit; }
.form .hp { position:absolute; left:-9999px; }
.btn { background:var(--primary); color:#fff; border:none; border-radius:999px; padding:10px 16px; cursor:pointer; }

/* Cronologia a tutta larghezza */
.cronologia .section { width: 100%; }
.cronologia .card { width: 100%; }

/* Elenco eventi: due colonne flessibili (data + descrizione) */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.timeline .date {
  flex: 0 0 140px;         /* colonna data fissa */
  color: var(--muted);
  white-space: nowrap;
}
.timeline .desc {
  flex: 1 1 auto;          /* descrizione prende tutto lo spazio restante */
  min-width: 0;            /* evita overflow */
  word-wrap: break-word;   /* va a capo se necessario */
}

/* Su schermi piccoli, metti data sopra e testo sotto */
@media (max-width: 640px) {
  .timeline li { flex-direction: column; gap: 4px; }
  .timeline .date { flex: none; }
}


.file-list { list-style:none; padding:0; margin:0; }
.file-list li { margin:6px 0; }
.file-list a { text-decoration:none; color:#333; padding:6px 8px; display:inline-block; border-radius:8px; }
.file-list a.active, .file-list a:hover { background:#eee; }

.story-body pre { white-space:pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }

.photos .thumbs { display:grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap:10px; height:70vh; overflow:auto; padding-right:6px; }
.photos .thumb { display:block; border:1px solid var(--border); border-radius:8px; background:#fff; padding:4px; }
.photos .thumb.active { outline:2px solid var(--primary); }
.photos .thumb img { width:100%; height:auto; display:block; border-radius:6px; }
.photos .viewer .full { width:100%; height:auto; border-radius:12px; }
.photos .caption { color:var(--muted); font-size:14px; margin-top:8px; }

/* --- Aggiunte Albero --- */
.search.form { display:flex; gap:10px; align-items:center; }
.search.form .field { flex:1; margin:0; }
.result-list { list-style:none; padding:0; margin:0; }
.result-list li { padding:6px 0; border-bottom:1px dashed var(--border); }
.person .facts, .person .rel { display:grid; grid-template-columns: 160px 1fr; gap:6px 12px; }
.person dl { margin:0; }
.person dt { color:var(--muted); font-weight:600; }
.person dd { margin:0; }

/* HERO home */
.hero {
  position:relative; height: 340px;
  background: #ddd center/cover no-repeat;
  background-image: var(--hero, none);
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
}
.hero::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.50));
}
.hero-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px; color:#fff; z-index:1; }
.hero-title { margin:0 0 6px; font-size:28px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,0.35); }
.hero-sub { margin:0 0 14px; font-size:15px; opacity:0.95; max-width:900px; }
.hero-cta { display:flex; gap:10px; }
.btn { background:var(--primary); color:#fff; border:none; border-radius:999px; padding:10px 16px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.7); }

/* Cards Home */
.intro.card { margin:18px 0; }
.home-sections { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin:6px 0 28px; }
.home-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; text-decoration:none; color:inherit; transition: transform .15s ease, box-shadow .15s ease; }
.home-card:hover { transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.08); }
.home-card .icon { font-size:26px; }
.home-card h3 { margin:8px 0 6px; color:#222; }
.home-card p { margin:0; color:#666; font-size:14px; }

@media (max-width: 900px){ .hero{ height: 260px; } }

/* Cronologia: la card elenco deve occupare tutta la riga */
.cronologia .card.fullwidth {
  width: 100%;
  grid-column: 1 / -1; /* se è dentro una grid, prendi tutte le colonne */
}

/* Elenco eventi a tutta larghezza con flex */
.cronologia .timeline { list-style: none; margin: 0; padding: 0; }
.cronologia .timeline > li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}

/* reset eventuali stili vecchi */
.cronologia .timeline .date,
.cronologia .timeline .desc { display: block; }

/* colonna data fissa; descrizione prende tutto lo spazio restante */
.cronologia .timeline .date {
  flex: 0 0 140px;
  color: var(--muted);
  white-space: nowrap;
}
.cronologia .timeline .desc {
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
}

/* Su schermi piccoli, data sopra e testo sotto */
@media (max-width: 640px) {
  .cronologia .timeline > li { flex-direction: column; gap: 4px; }
  .cronologia .timeline .date { flex: none; }
}