/* ============================================
   A.B. STORE SRL — Collezioni
   ============================================ */

.collections-intro {
  text-align: center;
  max-width: 660px;
  margin: 0 auto clamp(40px, 6vw, 72px);
}
.collections-intro .section-body { margin: 0 auto; }

/* --- Filtri --- */
.collections-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.filter-btn {
  padding: 9px 22px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  background: transparent;
  transition: var(--t-fast);
  cursor: pointer;
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-white);
}

/* --- Griglia --- */
.collections__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.collection-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  overflow: hidden;
  transition: box-shadow var(--t);
}
.collection-card:hover { box-shadow: 0 14px 44px rgba(0,0,0,0.09); }

.collection-card__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  transition: transform 0.75s var(--ease);
}
.collection-card:hover .collection-card__img { transform: scale(1.045); }

/* Placeholder per ogni materiale */
.collection-card__img--marmo {
  background: url('../immagini/categorie/marmi.jpg') center/cover no-repeat;
}
.collection-card__img--cemento {
  background:
    radial-gradient(ellipse at 65% 45%, rgba(175,170,165,0.55) 0%, transparent 52%),
    linear-gradient(145deg, #BCBBB6 0%, #AAAA9E 42%, #B6B5AF 70%, #A4A39C 100%);
}
.collection-card__img--gres {
  background:
    radial-gradient(ellipse at 35% 65%, rgba(215,193,160,0.6) 0%, transparent 52%),
    linear-gradient(122deg, #C8B898 0%, #B8A880 42%, #D0C0A0 62%, #C0B090 100%);
}
.collection-card__img--travertino {
  background:
    radial-gradient(ellipse at 60% 28%, rgba(238,220,185,0.7) 0%, transparent 52%),
    linear-gradient(135deg, #D8C8A0 0%, #C8B888 42%, #DDD0A8 70%, #CEC09E 100%);
}
.collection-card__img--ardesia {
  background: linear-gradient(135deg, #4A4844 0%, #383634 40%, #3E3C38 62%, #2E2C28 100%);
}
.collection-card__img--pietra {
  background:
    radial-gradient(ellipse at 45% 55%, rgba(155,150,145,0.5) 0%, transparent 50%),
    linear-gradient(145deg, #9A9590 0%, #8A8580 40%, #959090 62%, #85807C 100%);
}

.collection-card__body {
  padding: 22px 26px 26px;
  border-top: 1px solid var(--color-border);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.collection-card__name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 400;
  margin-bottom: 10px;
}
.collection-card__desc {
  font-size: 0.84rem;
  color: var(--color-muted);
  line-height: 1.78;
  flex: 1;
  margin-bottom: 18px;
}
.collection-card__tag {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* --- Link "Scopri" e card cliccabile --- */
.collection-card {
  position: relative; /* necessario per l'estensione del click */
}

.collection-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: gap var(--t-fast), color var(--t-fast);
}
.collection-card__link:hover {
  gap: 10px;
  color: var(--color-accent);
}

/* Estende l'area cliccabile a tutta la card */
.collection-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Stato hidden per il filtro */
.collection-card[hidden] { display: none; }

/* --- Gruppi --- */
.collections__group {
  margin-bottom: clamp(56px, 9vw, 88px);
}
.collections__group-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--color-text);
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

/* --- Placeholder immagini nuove categorie --- */
.collection-card__img--legno {
  background: url('../immagini/categorie/legni.jpg') center/cover no-repeat;
}
.collection-card__img--effetti-pietra {
  background: url('../immagini/categorie/effetto-pietra.jpg') center/cover no-repeat;
}
.collection-card__img--muretti {
  background: url('../immagini/categorie/muretti.jpg') center/cover no-repeat;
}
.collection-card__img--effetti-cemento {
  background: url('../immagini/categorie/cementi.jpg') center/cover no-repeat;
}
.collection-card__img--decori {
  background: url('../immagini/categorie/decori.jpg') center/cover no-repeat;
}
.collection-card__img--mosaici {
  background: url('../immagini/categorie/mosaici.jpg') center/cover no-repeat;
}
.collection-card__img--greche {
  background:
    radial-gradient(ellipse at 25% 35%, rgba(240,232,220,0.7) 0%, transparent 48%),
    linear-gradient(135deg, #E8E2D8 0%, #D5CFC3 40%, #EAE4DC 68%, #DDDACF 100%);
}
.collection-card__img--spessorati {
  background: url('../immagini/categorie/spessorati.jpg') center/cover no-repeat;
}
.collection-card__img--muretto {
  background:
    radial-gradient(ellipse at 42% 58%, rgba(188,178,162,0.55) 0%, transparent 50%),
    linear-gradient(145deg, #BAB0A4 0%, #A8A096 40%, #BCBAB0 65%, #ACA89E 100%);
}
.collection-card__img--calpestabile {
  background: url('../immagini/categorie/calpestabile.jpg') center/cover no-repeat;
}
.collection-card__img--lucidi {
  background: url('../immagini/categorie/lucidi.jpg') center/cover no-repeat;
}

@media (max-width: 960px) {
  .collections__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .collections__grid { grid-template-columns: 1fr; }
  .collection-card__img { aspect-ratio: 4/3; }
}

/* ============================================
   Catalogo piastrelle dinamico
   ============================================ */

.catalog__category {
  display: block;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.catalog__cat-title {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* --- Tile card --- */
.tile-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  position: relative;
  transition: box-shadow var(--t), border-color var(--t-fast);
  overflow: hidden;
}
.tile-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  border-color: var(--color-text);
}

.tile-card__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #EDEAE6 0%, #D8D3CC 100%);
  flex-shrink: 0;
}
.tile-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s var(--ease);
}
.tile-card:hover .tile-card__img-wrap img {
  transform: scale(1.05);
}

.tile-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tile-card__brand {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 5px;
}

.tile-card__nome {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--color-text);
}

.tile-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 6px;
}

.tile-card__dim {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  padding: 3px 9px;
  white-space: nowrap;
}

.tile-card__price {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--color-text);
  white-space: nowrap;
}

.tile-card__unit {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  color: var(--color-muted);
}

.tile-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: gap var(--t-fast), color var(--t-fast);
  align-self: flex-start;
}
.tile-card__link:hover { gap: 9px; color: var(--color-accent); }

/* Estende area cliccabile a tutta la card */
.tile-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* --- Responsive catalogo --- */
@media (max-width: 1100px) {
  .catalog__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .catalog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .catalog__grid { grid-template-columns: 1fr; }
}