/* Italpark — pagina "Colori disponibili": hero + flip-card (fedele alla produzione Woo
 * con tocchi in piu: fronte antracite che fa risaltare il vaso, retro verde brand,
 * filetto oro, spotlight, hover). */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

.itlp-col-wrap{max-width:1200px;margin:0 auto;padding:6px 0 52px;}
.itlp-col-hero{text-align:center;margin:0 auto 42px;max-width:800px;}
.itlp-col-eyebrow{display:inline-block;color:#9a7b3f;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.24em;margin-bottom:6px;}
.itlp-col-title{font-family:'Cormorant',Georgia,serif;font-size:48px;font-weight:600;color:#2D4F1D;margin:0 0 14px;line-height:1.03;}
.itlp-col-lead{font-family:'Poppins',sans-serif;font-size:15px;line-height:1.75;color:#5a5346;margin:0 auto;}
.itlp-col-divider{width:120px;height:3px;margin:24px auto 0;background:linear-gradient(90deg,#2D4F1D,#9a7b3f);border-radius:3px;}

.itlp-col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:30px;}
.itlp-col-card{perspective:1700px;height:450px;cursor:pointer;}
.itlp-col-inner{position:relative;width:100%;height:100%;transition:transform .85s cubic-bezier(.4,0,.2,1),box-shadow .4s;transform-style:preserve-3d;border-radius:56px;box-shadow:0 16px 38px rgba(30,45,20,.16);}
.itlp-col-card:hover .itlp-col-inner,.itlp-col-card.flip .itlp-col-inner{transform:rotateY(180deg);}
.itlp-col-card:hover{box-shadow:0 0 0;}
.itlp-col-front,.itlp-col-back{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:56px;overflow:hidden;display:flex;flex-direction:column;align-items:center;}

/* FRONTE — antracite con spotlight, vaso intero, titolo sotto (come produzione) */
.itlp-col-front{background:radial-gradient(circle at 50% 40%,#484644 0%,#333130 58%,#262422 100%);justify-content:center;padding:16px 4px 14px;}
.itlp-col-front-stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:0;}
.itlp-col-front-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;transform:scale(1.42);transform-origin:center 48%;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45));transition:transform 1s ease;}
.itlp-col-card:hover .itlp-col-front-stage img{transform:scale(1.5) translateY(-4px);}
.itlp-col-front-name{margin-top:14px;color:#fff;font-family:'Montserrat',sans-serif;font-weight:400;font-size:23px;letter-spacing:.015em;text-align:center;line-height:1.2;}
.itlp-col-flip-hint{position:absolute;top:18px;right:18px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:50%;font-size:16px;transition:transform .4s,background .3s;}
.itlp-col-card:hover .itlp-col-flip-hint{transform:rotate(180deg);background:rgba(154,123,63,.9);border-color:transparent;}

/* RETRO — verde brand, titolo + descrizione centrati, filetto oro */
.itlp-col-back{transform:rotateY(180deg);background:linear-gradient(160deg,#2D4F1E 0%,#1e3614 100%);justify-content:flex-start;padding:46px 30px;text-align:center;}
.itlp-col-back-name{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:600;color:#fff;margin:0;letter-spacing:.01em;}
.itlp-col-back-name::after{content:'';display:block;width:50px;height:2px;background:#c6a35a;margin:12px auto 0;}
.itlp-col-back-desc{font-family:'Poppins',sans-serif;font-size:14px;line-height:1.66;color:#e9e3d5;margin:18px 0 0;overflow:auto;}
.itlp-col-back-desc::-webkit-scrollbar{width:4px;}.itlp-col-back-desc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:2px;}

@media(max-width:600px){
  .itlp-col-title{font-size:35px;}
  .itlp-col-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .itlp-col-card{height:320px;}
  .itlp-col-inner,.itlp-col-front,.itlp-col-back{border-radius:34px;}
  .itlp-col-front{padding:20px 12px 18px;}
  .itlp-col-front-name{font-size:16px;margin-top:12px;}
  .itlp-col-back{padding:26px 16px;}
  .itlp-col-back-name{font-size:17px;}
  .itlp-col-back-desc{font-size:11.5px;margin-top:12px;}
  .itlp-col-flip-hint{width:28px;height:28px;font-size:13px;top:12px;right:12px;}
}