/* ============================================================
   VALOY — Catalogo sul muro (03/10)
   Stesso linguaggio della home: muro a rilievo dietro, lastre di vetro,
   Cormorant, bottoni scolpiti. Le regole di base stanno in home.css.
   ============================================================ */
body.con-muro { background: transparent; }
.con-muro main, .con-muro .phero, .con-muro .section-pad { background: transparent; }
.con-muro .phero { padding-top: clamp(9rem, 18vh, 12rem); text-align: center; }
.con-muro .phero h1 { font-size: clamp(3.2rem, 7vw, 6.4rem); line-height: 1; }

/* i filtri come parole, filo bordeaux sotto quello attivo */
.con-muro .filters { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.4rem 2.2rem;
  margin: 0 auto 3rem; font-family: var(--serif); }
.con-muro .flabel, .con-muro .count { font-family: var(--serif); font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.con-muro .fbtn { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; color: var(--ink-soft); background: none; border: 0;
  padding: 0.3rem 0; border-bottom: 1.5px solid transparent; border-radius: 0; letter-spacing: 0; text-transform: none;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease); }
.con-muro .fbtn:hover { color: var(--bordeaux); }
.con-muro .fbtn.active { color: var(--bordeaux); border-bottom-color: var(--bordeaux); background: none; }

/* la griglia: tre lastre per riga */
.scelti--catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; max-width: 76rem; }
.scelti--catalogo .scelto__etichetta { font-family: var(--serif); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--oro-deep); transform: translateZ(30px); }
.scelti--catalogo .scelto__nome { font-size: 1.8rem; }
.scelti--catalogo .scelto__riga { font-size: 1.08rem; }
.scelto__glifo { display: grid; place-items: center; width: 100%; height: 100%; font-size: 4rem; color: var(--bordeaux); background: var(--bg-alt); }
@media (max-width: 980px) { .scelti--catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .scelti--catalogo { grid-template-columns: 1fr; } }

/* filtri su una lastra di vetro: sul muro scoperto si leggevano male */
.con-muro .filters { width: fit-content; max-width: 100%; padding: 0.9rem 2.2rem;
  background: rgba(255, 253, 248, 0.6); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 999px; box-shadow: 0 20px 40px -30px rgba(74, 12, 27, 0.35); }
/* il titolo un po piu in basso, sotto il medaglione del primo pannello */
.con-muro .phero { padding-bottom: 1rem; }

/* lastre ferme nel catalogo (03/10): niente inclinazione, resta il vetro */
.scelti--fermi .scelto.vetro { transform: none !important; }

/* filtri come i bottoni: pillola con filo bordeaux e scritta oro; attivo pieno */
.con-muro .fbtn { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--oro-deep); padding: 0.55rem 1.4rem; border: 1.5px solid var(--bordeaux); border-radius: 999px;
  background: var(--bg-alt); box-shadow: none;
  transition: color .35s var(--ease), background .35s var(--ease), box-shadow .4s var(--ease); }
.con-muro .fbtn:hover { color: var(--bordeaux); box-shadow: none; }
.con-muro .fbtn.active { color: var(--oro-light); background: var(--bordeaux); border-color: var(--bordeaux); border-bottom-color: var(--bordeaux); }
.con-muro .filters { gap: 0.8rem 1rem; padding: 0.8rem 1.4rem; }

/* 03/10, correzione: il contorno va al blocco intero dei filtri (come i
   bottoni: filo bordeaux e alone oro), le parole solo oro, senza cornici;
   quella attiva ha il filo oro sotto */
.con-muro .filters { border: 1.5px solid var(--bordeaux); background: var(--bg-alt);
  box-shadow: none; gap: 0.4rem 2rem; padding: 0.9rem 2.4rem; }
.con-muro .fbtn, .con-muro .fbtn.active, .con-muro .fbtn:hover { border: 0; border-radius: 0; background: none; box-shadow: none;
  padding: 0.3rem 0; color: var(--oro-deep); border-bottom: 1.5px solid transparent; }
.con-muro .fbtn:hover { color: var(--oro); }
.con-muro .fbtn.active { border-bottom-color: var(--oro-deep); }
.con-muro .flabel, .con-muro .count { color: var(--oro-deep); }

/* la lastra di punta: due colonne e due righe, foto grande */
.scelti--catalogo.con-punta > .scelto:first-child { grid-column: span 2; grid-row: span 2; }
.scelti--catalogo.con-punta > .scelto:first-child .scelto__img { aspect-ratio: 4 / 3; flex: 1; }
.scelti--catalogo.con-punta > .scelto:first-child .scelto__nome { font-size: clamp(2.4rem, 3.4vw, 3.2rem); }
.scelti--catalogo.con-punta > .scelto:first-child .scelto__riga { font-size: 1.25rem; }
.scelti--catalogo.con-punta > .scelto:first-child .scelto__prezzo { font-size: 1.4rem; }
@media (max-width: 600px) { .scelti--catalogo.con-punta > .scelto:first-child { grid-column: auto; grid-row: auto; } }

/* la fascia dei materiali: titolo e lastre piccole, quattro per riga */
.fascia-materiali { margin-top: clamp(4rem, 9vh, 7rem); text-align: center; }
.fascia-materiali__titolo { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.6rem); margin-bottom: 2rem; }
.scelti--piccoli { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; max-width: 66rem; }
.scelti--piccoli .scelto.vetro { padding: 0.9rem 0.9rem 1.1rem; }
.scelti--piccoli .scelto__img { aspect-ratio: 1; }
.scelti--piccoli .scelto__nome { font-size: 1.3rem; }
.scelti--piccoli .scelto__riga { display: none; }
.scelti--piccoli .scelto__azione { font-size: 0.72rem; padding: 0.6rem 0.6rem; }
@media (max-width: 980px) { .scelti--piccoli { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* la punta orizzontale: tutta la riga, foto a sinistra e testo a destra (era alta uno schermo e mezzo) */
.scelti--catalogo.con-punta > .scelto:first-child { grid-column: 1 / -1; grid-row: auto;
  display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto auto auto 1fr; column-gap: 2.6rem; align-content: center; padding: 1.4rem; }
.scelti--catalogo.con-punta > .scelto:first-child .scelto__img { grid-column: 1; grid-row: 1 / span 6; aspect-ratio: 16 / 10; margin: 0; flex: none; }
.scelti--catalogo.con-punta > .scelto:first-child > span:not(.scelto__img):not(.riflesso) { grid-column: 2; align-self: start; }
.scelti--catalogo.con-punta > .scelto:first-child .scelto__etichetta { margin-top: 1.4rem; }
.scelti--catalogo.con-punta > .scelto:first-child .scelto__azione { opacity: 1; translate: 0 0; align-self: start; justify-self: start; padding-inline: 2rem; }
@media (max-width: 760px) { .scelti--catalogo.con-punta > .scelto:first-child { display: flex; } }

/* il filo che scivola: uno solo, si sposta e si allarga sulla parola scelta */
.con-muro .filters { position: relative; }
.con-muro .fbtn.active { border-bottom-color: transparent; }
.filters__filo { position: absolute; left: 0; height: 1.5px; background: var(--oro-deep); pointer-events: none;
  transition: transform 0.6s cubic-bezier(.65, 0, .35, 1), width 0.6s cubic-bezier(.65, 0, .35, 1); }
@media (prefers-reduced-motion: reduce) { .filters__filo { transition: none; } }

/* TELEFONO (03/10): la barra dei filtri su una riga sola che scorre di lato,
   invece di un ovale su tre righe; "Filtra" e il conteggio si nascondono */
@media (max-width: 700px) {
  .con-muro .filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    width: 100%; border-radius: 999px; padding: 0.7rem 1rem; gap: 0.4rem 1.4rem;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1.6rem), transparent 100%);
    mask: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1.6rem), transparent 100%); }
  .con-muro .filters::-webkit-scrollbar { display: none; }
  .con-muro .fbtn { flex: 0 0 auto; white-space: nowrap; font-size: 0.95rem; }
  .con-muro .filters > :not(.fbtn) { display: none; }
}

/* TELEFONO (03/10): il catalogo su due colonne come gli e-commerce (prima
   una scheda per schermata, dodici schermate). La prima resta larga. */
@media (max-width: 700px) {
  .scelti--catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.7rem !important; }
  .scelti--catalogo .scelto.vetro { padding: 0.65rem 0.65rem 0.9rem; gap: 0.2rem; }
  .scelti--catalogo .scelto__img { aspect-ratio: 4 / 5; margin-bottom: 0.5rem; }
  .scelti--catalogo .scelto__nome { font-size: 1.12rem !important; }
  .scelti--catalogo .scelto__riga { font-size: 0.84rem !important; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .scelti--catalogo .scelto__prezzo { font-size: 0.98rem !important; }
  .scelti--catalogo .scelto__etichetta { font-size: 0.6rem !important; letter-spacing: 0.14em; }
  .scelti--catalogo .scelto__azione { font-size: 0.66rem; letter-spacing: 0.08em; padding: 0.6rem 0.3rem; white-space: nowrap; }
  .scelti--catalogo.con-punta > .scelto:first-child { grid-column: 1 / -1; display: flex; padding: 0.9rem; }
  .scelti--catalogo.con-punta > .scelto:first-child .scelto__img { aspect-ratio: 4 / 3; }
  .scelti--catalogo.con-punta > .scelto:first-child .scelto__nome { font-size: 1.7rem !important; }
  .scelti--catalogo.con-punta > .scelto:first-child .scelto__riga { font-size: 1rem !important; -webkit-line-clamp: 3; }
  .fascia-materiali { margin-top: 3rem; }
  .fascia-materiali__titolo { font-size: 1.9rem; margin-bottom: 1.2rem; }
  .scelti--piccoli { gap: 0.7rem; }
}