/**
 * Circle Template — Modulo Projects — CSS
 */

.projects-hero { position:relative; min-height:60vh; display:flex; align-items:flex-end; overflow:hidden; padding-top:80px; }
    .projects-hero__bg { position:absolute; inset:0; background:var(--color-bg); }
    .projects-hero__overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(12,11,9,.1) 0%,rgba(12,11,9,.95) 100%); }
    .projects-hero__content { position:relative; z-index:2; padding-bottom:var(--space-12); }

    .projects-featured-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: auto auto;
      gap: var(--space-4);
      margin-bottom: var(--space-4);
    }
    .projects-featured-grid .card-project:nth-child(1) { grid-column: span 7; }
    .projects-featured-grid .card-project:nth-child(2) { grid-column: span 5; }
    .projects-featured-grid .card-project:nth-child(3) { grid-column: span 4; }
    .projects-featured-grid .card-project:nth-child(4) { grid-column: span 4; }
    .projects-featured-grid .card-project:nth-child(5) { grid-column: span 4; }

    .projects-featured-grid .card-project:nth-child(1) .card-project__image,
    .projects-featured-grid .card-project:nth-child(2) .card-project__image { aspect-ratio: 16/10; }

    .collab-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:var(--space-3); }

    .collab-card { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); text-decoration:none; transition:border-color var(--transition-fast); }
    .collab-card:hover { border-color:var(--color-border-light); }
    .collab-card__thumb { width:56px; height:56px; border-radius:var(--radius-sm); background:var(--color-surface-2); flex-shrink:0; overflow:hidden; }
    .collab-card__info {}
    .collab-card__name { font-family:var(--font-display); font-size:var(--text-lg); font-weight:400; letter-spacing:-0.01em; color:var(--color-text); margin-bottom:2px; }
    .collab-card__role { font-size:var(--text-xs); color:var(--color-text-hint); }

    @media(max-width:900px){
      .projects-featured-grid { grid-template-columns:1fr 1fr; }
      .projects-featured-grid .card-project:nth-child(1) { grid-column:span 2; }
      .projects-featured-grid .card-project:nth-child(2) { grid-column:span 2; }
      .projects-featured-grid .card-project:nth-child(3),
      .projects-featured-grid .card-project:nth-child(4),
      .projects-featured-grid .card-project:nth-child(5) { grid-column:span 1; }
    }
    @media(max-width:600px){
      .projects-featured-grid { grid-template-columns:1fr; }
      .projects-featured-grid .card-project { grid-column:span 1 !important; }
    }
    .demo-img { width:100%;height:100%;background:var(--color-surface-2);display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--color-text-hint);letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-body); }

/* ----- Collab card ----- */
.collab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--space-3);
}
.collab-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}
a.collab-card:hover { border-color: var(--color-border-light); }
.collab-card__thumb {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  flex-shrink: 0; overflow: hidden;
}
.collab-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: 2px;
}
.collab-card__role {
  font-size: var(--text-xs);
  color: var(--color-text-hint);
}

/* ----- Projects hero ----- */
.projects-hero {
  position: relative; min-height: 60vh;
  display: flex; align-items: flex-end;
  overflow: hidden; padding-top: 80px;
}
.projects-hero__bg  { position: absolute; inset: 0; background: var(--color-bg); }
.projects-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,11,9,.1) 0%, rgba(12,11,9,.95) 100%); }
.projects-hero__content { position: relative; z-index: 2; padding-bottom: var(--space-12); }

@media (max-width: 900px) {
  .projects-featured-grid { grid-template-columns: 1fr !important; }
}

/* ----- Single progetto — layout 2 colonne ----- */
.single-progetto__layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-16);
  align-items: start;
}

@media (max-width: 900px) {
  .single-progetto__layout {
    grid-template-columns: 1fr;
  }
}