/* Projects (Progetti) page tweaks — built on top of home.css + style.css
   Goal: keep Isotope/Packery layout, but modernize look and align to MC theme.
*/

/* HERO photo */
.mc-hero--projectsPhoto{
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('../images/Velja43SFONDO.jpg') center/cover no-repeat;
  color:#fff;
}

.mc-hero--projectsPhoto .mc-hero__logo{
  filter: brightness(0) invert(1);
  opacity: .96;
}

.mc-hero__kicker{
  margin-top: 14px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 13px;
  opacity: .92;
}

.mc-hero--projectsPhoto .mc-scrollhint{ color: rgba(255,255,255,.78) !important; }

/* Filters as pills */
#progetti .mc-h2--caps{ margin-bottom: 34px; }

.mc-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 16px auto 30px;
  padding:0;
  list-style:none;
  justify-content:center;
}

.mc-filters li{ margin:0; }

.mc-filters a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(0,0,0,.78);
  border: 1px solid rgba(var(--mc-accent-rgb), 0.24);
  background: rgba(255,255,255,.88);
}

.mc-filters a:hover{ box-shadow: 0 0 0 3px rgba(var(--mc-accent-rgb), 0.12); }

.mc-filters a.current{
  background: #fff;
  border-color: rgba(var(--mc-accent-rgb), 0.95);
  color: var(--mc-accent);
  box-shadow: 0 0 0 3px rgba(var(--mc-accent-rgb), 0.14);
}

/* Works grid: softer cards, modern overlay, keep packery sizing */
.mc-works-grid{ margin-top: 18px; }

/* Uniform 2-cards-per-row layout (as requested) */
.mc-works-grid.mc-works-grid--uniform .grid-sizer,
.mc-works-grid.mc-works-grid--uniform .work-item,
.mc-works-grid.mc-works-grid--uniform .work-item.wide,
.mc-works-grid.mc-works-grid--uniform .work-item.wide-tall,
.mc-works-grid.mc-works-grid--uniform .work-item.tall{
  width: 50% !important;
}

.mc-works-grid.mc-works-grid--uniform .work-item{
  box-sizing: border-box;
  padding: 14px; /* creates breathing space between cards */
}

@media (max-width: 820px){
  .mc-works-grid.mc-works-grid--uniform .grid-sizer,
  .mc-works-grid.mc-works-grid--uniform .work-item,
  .mc-works-grid.mc-works-grid--uniform .work-item.wide,
  .mc-works-grid.mc-works-grid--uniform .work-item.wide-tall,
  .mc-works-grid.mc-works-grid--uniform .work-item.tall{
    width: 100% !important;
  }

  .mc-works-grid.mc-works-grid--uniform .work-item{ padding: 12px 6px; }
}

.mc-works-grid .work-item{ position: relative; }

/* Card: rounded, shadow; keep in normal flow so spacing works */
.mc-works-grid .work-item a{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  border-radius: 18px;
  overflow:hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.mc-works-grid .work-item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  z-index: 0;
}

/* Base overlay gradient (always present for readability) */
.mc-works-grid .work-item a:after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.22) 42%,
    rgba(0,0,0,.00) 72%
  );
  transition: opacity .25s ease, filter .25s ease;
  opacity: .86;
}

.mc-works-grid .work-item:hover a:after{
  opacity: 1;
  filter: saturate(1.05);
}

/* Caption at bottom (no slide-from-bottom) */
.mc-works-grid .work-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index: 2;
  top:auto;
  opacity:1;
  padding: 14px 14px 12px;
  text-align:left;
  transform: none !important;
}

.mc-works-grid .work-title{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 6px;
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}

.mc-works-grid .work-descr{
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .90;
  color: rgba(255,255,255,.92);
}

/* Make the grid breathe on small screens */
@media (max-width: 900px){
  .mc-works-grid .work-item a{ border-radius: 16px; }
}

@media (max-width: 520px){
  .mc-filters{ gap: 8px; }
  .mc-filters a{ padding: 8px 12px; }
}