/* ===========================================================
   Francesco De Prezzo — minimal artist site
   Font: Helvetica regular · tight leading · thin borders
   =========================================================== */

:root {
  --ink: #2b2b2b;        /* body text */
  --line: #111;          /* thin rules */
  --bg: #ffffff;
  --muted: #2b2b2b;
  --fs: 13px;            /* base size, like reference */
  --lh: 1.25;            /* tight interline */
  --pad: 12px;           /* outer page padding */
  --maxblock: 1075px;    /* max width of a content block / image (reference margin) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { text-decoration: none; }

/* ---------- top bar ---------- */
.topbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: start;
  padding: var(--pad) var(--pad) 6px var(--pad);
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.topbar .name { text-transform: uppercase; letter-spacing: .2px; }
.topbar .nav-right { text-align: right; }
.topbar a { text-transform: uppercase; }

/* ---------- column headers (Film Project / SUBSTITUTION / Latest) ---------- */
.colheads {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 18px var(--pad) 0 var(--pad);
}

/* ---------- main content ---------- */
.main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 6px var(--pad) 80px var(--pad);
  align-items: start;
}
/* content blocks live in the first column area but can grow to --maxblock */
.content-col {
  grid-column: 1 / 4;        /* left ~ three quarters, like reference */
  max-width: var(--maxblock);
  width: 100%;
}

.block { margin: 0 0 18px 0; }
.block.text p { margin: 0 0 12px 0; white-space: pre-wrap; }
.block.text p:last-child { margin-bottom: 0; }

.block.image figure { margin: 0; }
.block.image img {
  display: block;
  width: 100%;
  max-width: var(--maxblock);
  height: auto;
  aspect-ratio: 4 / 3;       /* landscape, cropped on upload */
  object-fit: cover;
  background: #ddd;
}
.block.image figcaption {
  margin-top: 6px;
  color: var(--ink);
}

.spacer { height: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .topbar, .colheads, .main { grid-template-columns: 1fr; gap: 8px; }
  .topbar .nav-right { text-align: left; }
  .content-col { grid-column: 1 / -1; }
}

/* ===========================================================
   ADMIN
   =========================================================== */
.admin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: var(--pad);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.admin-bar .grow { flex: 1; }

button, .btn {
  font-family: inherit;
  font-size: var(--fs);
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  padding: 5px 10px;
  cursor: pointer;
  line-height: 1.1;
}
button:hover, .btn:hover { background: #f1f1f1; }
button.primary { background: #111; color: #fff; }
button.primary:hover { background: #333; }
button.small { padding: 2px 7px; }
button.danger { border-color: #b00; color: #b00; }

/* editable text fields: auto-expanding, keep their position */
.edit {
  font-family: inherit;
  font-size: var(--fs);
  line-height: var(--lh);
  color: var(--ink);
  width: 100%;
  max-width: var(--maxblock);
  border: 1px solid #ccc;
  background: #fafafa;
  padding: 6px 8px;
  resize: none;            /* we auto-grow via JS */
  overflow: hidden;
  display: block;
}
.edit:focus { outline: none; border-color: #111; background: #fff; }
.edit.inline {
  display: inline-block;
  width: auto;
  min-width: 80px;
  border: 1px solid transparent;
  background: transparent;
  padding: 1px 3px;
}
.edit.inline:focus { border-color: #111; background: #fff; }

/* admin block wrapper */
.admin-block {
  position: relative;
  border: 1px dashed #ddd;
  padding: 10px 10px 10px 10px;
  margin: 0 0 10px 0;
  max-width: var(--maxblock);
}
.admin-block .block-tools {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.admin-block .block-tools .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #888;
  margin-right: auto;
}

.dropzone {
  border: 1px solid #ccc;
  background: #fafafa;
  padding: 14px;
  text-align: center;
  color: #888;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 560px;
}
.dropzone.dragover { background: #eee; border-color: #111; color: #111; }
.admin-block img.preview {
  display: block;
  width: 100%;
  max-width: 560px;          /* preview compatta (sufficiente per verticali) */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #ddd;
}

.add-row { display: flex; gap: 8px; margin: 14px 0; max-width: var(--maxblock); }
.add-row button { font-size: 14px; }

/* password gate */
.gate {
  max-width: 320px;
  margin: 18vh auto 0 auto;
  padding: 0 var(--pad);
  text-align: center;
}
.gate input {
  font-family: inherit;
  font-size: var(--fs);
  padding: 7px 9px;
  border: 1px solid var(--line);
  width: 100%;
  margin: 10px 0;
}
.gate .err { color: #b00; min-height: 16px; }

.toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  padding: 8px 14px;
  font-size: var(--fs);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  z-index: 50;
}
.toast.show { opacity: 1; }

.hidden { display: none !important; }