/* ─── VARIABLES ──────────────────────────────────────── */
:root {
  --cream:          #F9F8F0;
  --black:          #1A1A1A;
  --dark-brown:     #2C1A0E;
  --warm-sand:      #C4A882;
  --card-dark:      #1E1510;
  --white:          #FFFFFF;
  --grey-light:     #E8E7DF;
  --font-main:      'Tenor Sans', serif;
  --container-max:  1280px;
  --pad:            100px;
  --pad-md:         40px;
  --pad-sm:         24px;
}
/* ─── PROGETTO DETAIL LAYOUT ─────────────────────────── */
.progetto-detail {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 60px var(--pad) 80px;
}

/* ── LEFT: text content ── */
.progetto-detail__content {
  flex: 1;
  min-width: 0;
}

/* Meta row: Settore + Categoria */
.progetto-meta {
  display: flex;
  flex-direction: column;
  margin-bottom: 48px;
}
.progetto-meta__item {
  padding: 18px 0;
  border-bottom: 1px solid var(--grey-light);
}
.progetto-meta__item:first-child {
border-top: none;
padding-top: 0;
}
.progetto-meta__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(26,26,26,0.45);
  margin-bottom: 7px;
  font-family: var(--font-main);
}
.progetto-meta__value {
  font-size: 13px;
  color: var(--black);
  line-height: 1.5;
}

/* Sections */
.progetto-section { margin-bottom: 40px; }
.progetto-section__title {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 14px;
}
.progetto-section__text {
  font-size: 13px;
  line-height: 1.9;
  color: rgba(26,26,26,0.72);
  margin-bottom: 14px;
}

/* Risultati list */
.risultati-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.risultati-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(26,26,26,0.72);
}
.risultati-list li::before {
  content: '■';
  color: var(--warm-sand);
  font-size: 9px;
  flex-shrink: 0;
  margin-top: 5px;
}

/* ── RIGHT: media column ── */
.progetto-detail__media {
  width: 42%;
  flex-shrink: 0;
}

/* Main image */
.progetto-detail__main-img {
  width: 100%;
  margin-bottom: 8px;
  overflow: hidden;
}
.progetto-detail__main-img .img-placeholder {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #2a1a0e 0%, #4a2e1a 35%, #7a5030 65%, #a87040 100%);
  position: relative;
  overflow: hidden;
}
.progetto-detail__main-img .img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E") center/60px repeat;
}

/* Thumbnail strip */
.progetto-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.thumb-item {
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.thumb-item .thumb-bg {
  width: 100%;
  height: 100%;
  transition: transform 0.3s;
}
.thumb-item:hover .thumb-bg { transform: scale(1.06); }
.thumb-item.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--warm-sand);
}

/* Thumb placeholder backgrounds */
.thumb-bg--1 { background: linear-gradient(135deg, #1a0e06 0%, #3a2212 100%); }
.thumb-bg--2 { background: linear-gradient(135deg, #0d1a2e 0%, #1e3454 100%); }
.thumb-bg--3 { background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%); }
.thumb-bg--4 { background: linear-gradient(135deg, #1a0e1a 0%, #3a1a2e 100%); }
.thumb-bg--5 { background: var(--grey-light); }

/* ─── PROGETTI CORRELATI ─────────────────────────────── */
.progetti-correlati {
  padding: 0 var(--pad) 80px;
  border-top: none;
  position: relative;
}
.progetti-correlati__header {
  padding-top: 60px;
  border-top: none;
  position: relative;  
}
.progetti-correlati__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grey-light);
}
.progetti-correlati__header { margin-bottom: 40px; }
.progetti-correlati__title {
  font-family: var(--font-main);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 400;
  color: var(--black);
  margin-bottom: 10px;
}
.progetti-correlati__subtitle {
  font-size: 18px;
  color: rgba(26,26,26,0.6);
  line-height: 1.7;
  max-width: 100%;
}

/* Cards grid */
.collab-grid-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.collab-card {
  background: var(--white);
  border-radius: 4px;
  padding: 32px 28px;
  box-shadow: 0 2px 16px rgba(26,26,26,0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.25s;
  min-height: 300px;
  border: 1px solid transparent;
}
.collab-card:hover {
  box-shadow: 0 6px 28px rgba(26,26,26,0.11);
  border-color: var(--grey-light);
}
.collab-card__name {
  font-family: var(--font-main);
  font-size: 17px;
  color: var(--black);
  border-bottom: 1px solid var(--grey-light);
  padding-bottom: 10px;
}
.collab-card__text {
  font-size: 13px;
  color: rgba(26,26,26,0.65);
  line-height: 1.75;
  flex: 1;
}
.collab-card__tags { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.collab-card__tag {
  display: inline-block;
  background-color: #f4f4f4;
  font-family: var(--font-main);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black);
  padding: 5px 10px;
}
.cta-collab {
  font-size: 13px;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: flex-end;
  text-decoration: underline;
  color: var(--black);
  transition: opacity 0.2s;
  margin-top: auto;
}
.cta-collab:hover { opacity: 0.55; }

.progetto-detail__content .progetto-meta {
  border-bottom: none;
  padding-bottom: 0;
}


/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --pad: var(--pad-md); }
  .progetto-detail { gap: 40px; }
  .progetto-detail__media { width: 44%; }
  .progetto-detail__thumbs { grid-template-columns: repeat(4, 1fr); }
  .collab-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  :root { --pad: var(--pad-sm); }
  .progetto-detail { flex-direction: column-reverse; gap: 36px; padding: 40px var(--pad-sm) 60px; }
  .progetto-detail__media { width: 100%; }
  .progetto-detail__main-img .img-placeholder { height: 280px; }
  .progetto-detail__thumbs { grid-template-columns: repeat(5, 1fr); }
  .progetto-meta { gap: 0; }
  .collab-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .progetti-correlati { padding: 0 var(--pad-sm) 60px; }
  .progetti-correlati__subtitle {   font-size: 13px; }
}
@media (max-width: 480px) {
  .collab-grid-3 { grid-template-columns: 1fr; }
}