/* ==========================================================================
   PROGETTI GRID — Figma homepage 177:2448, y=2914–3613
   Kicker → mouse-slideable category tabs → 3-up card grid (one panel per
   tab, swapped on click) → "Scopri di più" view-all link.
   ========================================================================== */
.progetti {
  padding-bottom: var(--space-120);   /* gap to the next section: 3733-3613 = 120 exact */
}

.progetti__kicker { margin: 0 0 var(--space-40); }  /* measured: kicker bottom (2952) → subhead top (2989) = 37 */
.progetti__subhead { margin: 0 0 24px; }             /* measured: subhead bottom (3073) → tabs top (3095) */

/* --- Tabs -----------------------------------------------------------------
   Figma only draws the five tabs sitting flush across the 1280 container;
   there's no scroll affordance in the design because at 1440 they exactly
   fill it. Below that (and with longer real category names) they don't fit,
   so the track scrolls — mouse-drag added on top of native touch/trackpad
   scroll per the brief. */
.progetti-tabs { margin-bottom: 30px; }

.progetti-tabs__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.progetti-tabs__track::-webkit-scrollbar { display: none; }
.progetti-tabs__track.is-dragging { cursor: grabbing; user-select: none; }

.progetti-tab {
  flex: none;
  padding: 4px 20px;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-frame);
  font-weight: 600;
  font-size: 18px;
  line-height: 34px;
  white-space: nowrap;
  color: var(--c-text-muted);
  background: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.progetti-tab.is-active,
.progetti-tab:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* --- Card -------------------------------------------------------------- */
.project-card {
  display: block;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-frame);
  overflow: hidden;
  background: var(--c-surface);
  transition: border-color var(--dur) var(--ease);
}
.project-card:hover { border-color: var(--c-accent); }

.project-card__media { display: block; }
.project-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 413 / 287;   /* Figma card image, 177:2538/2539/2540 */
  object-fit: cover;
}

.project-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px;             /* measured: image→row gap is 24; row sits on one line */
}
.project-card__title { margin: 0; }
.project-card__arrow { flex: none; color: var(--c-accent); }

.progetti__viewall { margin-top: 53px; }   /* measured: grid bottom (3538) → link top (3591) */