/* ============================================================
   lavori.css — pagina Lavori
   ============================================================ */

/* ── INTESTAZIONE PAGINA ── */
.page-header {
  padding: 52px var(--padding-x) 44px;
  border-bottom: 1.5px solid var(--black);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
}

.page-header__title {
  font-family: var(--font-hero);
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  color: var(--black);
}

.page-header__sub {
  font-size: 0.95rem;
  color: var(--gray);
  line-height: 1.75;
  max-width: 380px;
}

/* ── FILTRI ── */
.filtri {
  padding: 18px var(--padding-x);
  border-bottom: 1.5px solid var(--black);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.filtri__label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-right: 8px;
}

.filtro {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  color: var(--gray);
  cursor: pointer;
  transition: all var(--transition);
  background: var(--white);
}

.filtro:hover {
  border-color: var(--black);
  color: var(--black);
}

.filtro.active {
  border-color: var(--red);
  color: var(--red);
}

.filtro.all {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.filtro.all:hover {
  background: var(--red);
  border-color: var(--red);
}

/* ── GRIGLIA PROGETTI ── */
.griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-left: 1.5px solid var(--black);
  border-right: 1.5px solid var(--black);
  border-bottom: 1.5px solid var(--black);
}

/* Card normale */
.card {
  background: var(--white);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
}

.card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--black-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.card:hover .card__img img {
  transform: scale(1.04);
}

/* Overlay su hover */
.card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(244, 64, 64, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}

.card__overlay-text {
  font-family: var(--font-cta);
  font-size: 0.9rem;
  color: var(--white);
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.25s ease;
  letter-spacing: 0.03em;
}

.card:hover .card__overlay {
  background: rgba(244, 64, 64, 0.88);
}

.card:hover .card__overlay-text {
  opacity: 1;
  transform: translateY(0);
}

.card__body {
  padding: 14px 16px 18px;
}

.card__cat {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 4px;
}

.card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.card__year {
  font-size: 0.62rem;
  color: var(--gray-light);
  letter-spacing: 0.1em;
  margin-top: 4px;
  display: block;
}

/* Card grande — occupa 2 colonne */
.card--large {
  grid-column: span 2;
}

.card--large .card__img {
  aspect-ratio: 16 / 7;
}

/* Placeholder immagine */
.card__img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--black-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(242,242,240,0.15);
  font-family: var(--font-body);
}

/* ── LOAD MORE ── */
.load-more {
  padding: 36px var(--padding-x);
  display: flex;
  justify-content: center;
  border-bottom: 1.5px solid var(--black);
}

/* ── CTA BOTTOM ── */
.bottom-cta {
  padding: 64px var(--padding-x);
  border-bottom: 1.5px solid var(--black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.bottom-cta__text {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--black);
}

.bottom-cta__text span { color: var(--red); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .page-header { grid-template-columns: 1fr; gap: 16px; }
  .griglia { grid-template-columns: repeat(2, 1fr); }
  .card--large { grid-column: span 2; }
}

@media (max-width: 768px) {
  .page-header { padding: 40px var(--padding-x-mobile) 36px; }
  .page-header__title { font-size: clamp(3.5rem, 16vw, 5rem); }
  .filtri { padding: 14px var(--padding-x-mobile); }
  .griglia { grid-template-columns: 1fr; }
  .card--large { grid-column: span 1; }
  .card--large .card__img { aspect-ratio: 4 / 3; }
  .load-more { padding: 28px var(--padding-x-mobile); }
  .bottom-cta {
    padding: 48px var(--padding-x-mobile);
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── GRIGLIA SFALSATA ── */
/* Pattern: grande | piccolo | piccolo | grande (a destra) | piccolo | piccolo */
.griglia--sfalsata {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
}

/* Card 1 — grande a sinistra: 8/12 colonne */
.griglia--sfalsata .card:nth-child(1) {
  grid-column: span 8;
}
.griglia--sfalsata .card:nth-child(1) .card__img { aspect-ratio: 16 / 9; }

/* Card 2 — piccola a destra: 4/12 */
.griglia--sfalsata .card:nth-child(2) {
  grid-column: span 4;
}
.griglia--sfalsata .card:nth-child(2) .card__img { aspect-ratio: 3 / 4; }

/* Card 3 — piccola: 4/12 */
.griglia--sfalsata .card:nth-child(3) {
  grid-column: span 4;
}

/* Card 4 — piccola: 4/12 */
.griglia--sfalsata .card:nth-child(4) {
  grid-column: span 4;
}

/* Card 5 — grande a destra: 8/12 */
.griglia--sfalsata .card:nth-child(5) {
  grid-column: span 8;
}
.griglia--sfalsata .card:nth-child(5) .card__img { aspect-ratio: 16 / 9; }

/* Card 6+ — full width diviso in 3 */
.griglia--sfalsata .card:nth-child(6),
.griglia--sfalsata .card:nth-child(7),
.griglia--sfalsata .card:nth-child(8) {
  grid-column: span 4;
}

@media (max-width: 1024px) {
  .griglia--sfalsata { grid-template-columns: repeat(2, 1fr); }
  .griglia--sfalsata .card { grid-column: span 1 !important; }
  .griglia--sfalsata .card:nth-child(1),
  .griglia--sfalsata .card:nth-child(5) { grid-column: span 2 !important; }
  .griglia--sfalsata .card:nth-child(1) .card__img,
  .griglia--sfalsata .card:nth-child(5) .card__img { aspect-ratio: 16 / 7; }
  .griglia--sfalsata .card:nth-child(2) .card__img { aspect-ratio: 4 / 3; }
}

@media (max-width: 768px) {
  .griglia--sfalsata { grid-template-columns: 1fr; }
  .griglia--sfalsata .card { grid-column: span 1 !important; }
  .griglia--sfalsata .card__img { aspect-ratio: 4 / 3 !important; }
}