/*
 * Eptamed — 5 Pilastri (mosaico immagini di sfondo)
 * Porting di equilibriodonzia.html #modello (.mosaic/.mosaic-bottom/
 * .pillar-card/.pillar-overlay). Nessun JS: sezione statica.
 */

.ept-pillars-head { margin-bottom: 48px; }

.ept-pillars-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-primary-dark, #0E2E4B);
  margin: 0 0 16px;
}
.ept-pillars-eyebrow span {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent, #BC5A29);
  flex-shrink: 0;
}

.ept-pillars-h2 {
  font-family: var(--font-heading, 'Familjen Grotesk', sans-serif);
  font-size: clamp(1.875rem, 2.2vw + 1rem, 2.625rem);
  font-weight: 700;
  color: var(--c-almost-black, #1C2221);
  line-height: 1.15;
  margin: 0 0 20px;
  max-width: 22ch;
}

.ept-pillars-desc {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-dark-gray, #4E5655);
  max-width: 60ch;
  margin: 0;
}

/* ── Mosaico a 5 (layout bespoke) ── */

.ept-pillars-mosaic {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 260px 220px;
  gap: 16px;
  margin-bottom: 16px;
}
.ept-pillars-mosaic .ept-pillar-big { grid-row: 1 / 3; }

.ept-pillars-mosaic-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.ept-pillars-mosaic-bottom .ept-pillar-card { height: 220px; }
.ept-pillars-mosaic-bottom .ept-pillar-span2 { grid-column: span 2; }

/* ── Layout generico (conteggio pilastri diverso da 5) ── */

.ept-pillars-generic .ept-pillar-featured { height: 320px; margin-bottom: 16px; }
.ept-pillars-generic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.ept-pillars-generic-grid .ept-pillar-card { height: 240px; }

/* ── Card ── */

.ept-pillar-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--c-primary-dark, #0E2E4B);
}
.ept-pillar-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: transform 400ms cubic-bezier(.16, 1, .3, 1), opacity 400ms cubic-bezier(.16, 1, .3, 1);
}
.ept-pillar-card:hover img { transform: scale(1.04); opacity: 0.65; }

.ept-pillar-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 46, 75, 0.90) 0%, rgba(14, 46, 75, 0.3) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
}

.ept-pillar-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.9);
}

.ept-pillar-num {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 4px;
}

.ept-pillar-name {
  font-family: var(--font-heading, 'Familjen Grotesk', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}

.ept-pillar-desc {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.ept-pillar-big .ept-pillar-name { font-size: 1.625rem; }
.ept-pillar-big .ept-pillar-desc { max-width: 36ch; }
.ept-pillar-small .ept-pillar-name { font-size: 1.0625rem; }
.ept-pillar-small .ept-pillar-desc { font-size: 0.8125rem; }
.ept-pillar-featured .ept-pillar-name { font-size: 1.625rem; }
.ept-pillar-featured .ept-pillar-desc { max-width: 42ch; }

@media (max-width: 1024px) {
  .ept-pillars-mosaic { grid-template-columns: 1fr; grid-template-rows: auto; }
  .ept-pillars-mosaic .ept-pillar-big { grid-row: auto; }
  .ept-pillars-mosaic .ept-pillar-card { height: 280px; }
  .ept-pillars-mosaic-bottom { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .ept-pillars-mosaic-bottom { grid-template-columns: 1fr; }
  .ept-pillars-mosaic-bottom .ept-pillar-span2 { grid-column: span 1; }
}