/* ═════════════════════════════════════════════════════════════════
   TRAGUARDI — /portfolio/, rebuilt 2026-08-21.

   Nicolas: *"Traguardi is the ugliest page of all."* It was, and it was not
   the card grid's fault — that part was already right. It was everything
   around it: a `.hero` from the marketing era, then three `<section
   class="stage">` blocks at three different widths, prose in two columns
   under a full-bleed screenshot, six facts printed as `<h3>`+`<p>` with a
   `.prezzo` span doing the work of a metric, and a `.cta-final` at the end
   whose eyebrow said DOVE STANNO I SERVER while the section behaved like a
   generic call to action. The copy and the template had drifted apart.

   It is bands now, like every page after the front door. What is left here
   is only the client card — the one object this page owns.
   ═════════════════════════════════════════════════════════════════ */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(0.6rem, 1.4vw, 0.95rem);
}

/* THE WHOLE CARD IS THE LINK — rule 2, and it always was here. */
.portfolio-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgb(var(--note-rgb) / 0.26);
  border-radius: 0.95rem;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  box-shadow: 0 14px 32px -20px rgba(0,0,0,0.9);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.portfolio-card:hover,
.portfolio-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgb(var(--note-rgb) / 0.8);
  box-shadow: 0 24px 46px -22px rgba(0,0,0,0.95),
              0 14px 40px -20px rgb(var(--note-rgb) / 0.45);
  outline: none;
}
.portfolio-card:active { transform: translateY(-1px); }

.portfolio-card-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--border-soft);
}
.portfolio-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.9);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s;
}
.portfolio-card:hover .portfolio-card-media img { transform: scale(1.03); filter: none; }

.portfolio-card-body {
  padding: 1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
/* The address is the point of this page: every entry has a public one. */
.portfolio-card-addr {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--note);
}
.portfolio-card-title {
  font-size: 1.1rem; font-weight: 700; line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
}
.portfolio-card-desc {
  margin: 0;
  font-size: 0.93rem; font-weight: 300; line-height: 1.6;
  color: var(--text-secondary);
}

/* ── The four band notes ────────────────────────────────────
   Cooler than /web-apps/ on purpose: this page is STUDIO, and its subject is
   measurement, not product. It ends on the pink because the last band is the
   one that asks. */
.band--traguardi { --note: #6f9fd0; --note-rgb: 111 159 208; }   /* the page */
.band--respira   { --note: #5cb0a6; --note-rgb:  92 176 166; }   /* air, water */
.band--clienti   { --note: #8b91de; --note-rgb: 139 145 222; }   /* somebody else's work */
.band--server    { --note: #cf7f9c; --note-rgb: 207 127 156; }   /* the ask */