/* M-Pellet — pagina gamma (prodotti.html).

   Si appoggia a prodotto.css (.p-sec, .p-grid, .p-card, .p-price, .p-steps...) ed experience.css (token, .btn, .facts).

   Qui solo ciò che è proprio della panoramica: hero editoriale con la "linea" dei modelli, FIAMMA in evidenza,

   schede grandi dei tre fuochi a legna con prezzo, fascia foto, riga "Il segno" delle schede. */



/* ---------- 1. HERO ---------- */

.g-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,64px);padding:clamp(110px,14vw,170px) var(--gutter) clamp(40px,5vw,64px);overflow:hidden;

  background:radial-gradient(60% 55% at 70% 100%,#2a1a10 0%,transparent 70%)}

.g-hero__txt{display:grid;gap:22px}

.g-hero__t{max-width:16ch}

.g-hero__intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px clamp(24px,5vw,80px);align-items:end}

.g-hero__intro .lead{max-width:46ch}

.g-salti{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}

.g-salti a{display:grid;grid-template-columns:52px 1fr auto;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-weight:700;transition:color .3s}

.g-salti a::after{content:"↓";font:500 14px var(--mono);color:var(--yellow)}

.g-salti a:hover{color:var(--yellow)}

.g-salti b{font:700 13px var(--mono);color:var(--yellow);letter-spacing:.08em}

@media (max-width:900px){.g-hero__intro{grid-template-columns:1fr}}



/* linea dei modelli: indice visivo. Riquadri 4:5 tutti uguali, appoggiati sulla stessa linea (non in scala tra loro):

   render con trasparenza nativa (tela 4:5, base al 94%), foto sul bianco originale in pannello, tassello provvisorio senza immagine */

.g-linea{margin:0 calc(var(--gutter) * -1);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}

.g-linea::-webkit-scrollbar{display:none}

.g-linea ul{list-style:none;margin:0;padding:0 var(--gutter);display:grid;grid-auto-flow:column;grid-auto-columns:clamp(92px,13vw,120px);gap:clamp(8px,1.2vw,18px);min-width:max-content;width:100%;align-items:end}

.g-linea a{display:grid;gap:12px;justify-items:center;padding-bottom:6px}

.g-linea__img{position:relative;display:block;width:100%;aspect-ratio:4/5;transition:transform .5s var(--ease)}

.g-linea img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(0,0,0,.55))}

.g-linea__img--pan{background:#fff;padding:5px}

.g-linea__img--pan img{filter:none}

.g-linea__img--tipo{display:flex;align-items:flex-end;padding:9px;background:linear-gradient(160deg,#18181a 0%,#0f0f10 70%);border:1px solid var(--line);transition:transform .5s var(--ease),border-color .3s}

.g-linea__img--tipo i{display:flex;gap:6px;align-items:baseline;font:500 9px/1.3 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#8a8a86}

.g-linea__img--tipo i::before{content:"";flex:none;width:6px;height:6px;background:var(--yellow)}

.g-linea__n{font:600 11px var(--mono);letter-spacing:.14em;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;width:100%;text-align:center;transition:color .3s,border-color .3s}

.g-linea a:hover .g-linea__img,.g-linea a:focus-visible .g-linea__img{transform:translateY(-8px)}

.g-linea a:hover .g-linea__img--tipo,.g-linea a:focus-visible .g-linea__img--tipo{border-color:rgba(242,210,10,.45)}

.g-linea a:hover .g-linea__n,.g-linea a:focus-visible .g-linea__n{color:var(--ink);border-color:var(--yellow)}

@media (min-width:1101px){.g-linea{overflow:visible;margin:0}.g-linea ul{min-width:0;padding:0;grid-auto-columns:minmax(0,1fr)}}



/* ---------- 2. FAMIGLIE ---------- */

.g-fam{grid-template-columns:minmax(0,1fr)}

.g-fam__head{align-items:end}

.g-fam__head>*{min-width:0}

.g-fam__lead{max-width:44ch;color:#cfcfcb;font-size:clamp(16px,1.2vw,18px)}

.g-fam{scroll-margin-top:60px}

.g-fam [id^="p-"]{scroll-margin-top:90px}



/* FIAMMA in evidenza */

.g-top{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(24px,4vw,56px);border:1px solid var(--line);

  background:radial-gradient(70% 70% at 25% 60%,#2a1a10 0%,transparent 70%),linear-gradient(120deg,#151516,#0f0f10)}

.g-top__media{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,2vw,28px);min-height:min(68vh,600px)}

.g-top__main{max-height:min(66vh,580px);width:auto;max-width:58%;position:relative;z-index:1;filter:drop-shadow(0 40px 50px rgba(0,0,0,.6))}

/* foto reale quadrata (1080 px), non piu' una sagoma: cornice semplice, base allineata a quella del render (94% della tela) */

.g-top__alt{position:relative;z-index:1;margin:0 0 calc(min(66vh,580px) * .06);flex:none;width:min(34%,260px,40vh);aspect-ratio:1/1;overflow:hidden;background:var(--steel);box-shadow:0 30px 50px -30px rgba(0,0,0,.8)}

.g-top__alt img{display:block;width:100%;height:100%;object-fit:cover}

.g-top__alt figcaption{position:absolute;left:8px;bottom:8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:rgba(12,12,13,.78);padding:5px 8px}

.g-top__ghost{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-size:clamp(80px,13vw,220px);color:transparent;-webkit-text-stroke:1px rgba(244,244,242,.08);white-space:nowrap;pointer-events:none;z-index:0}

.g-top__txt{display:grid;gap:18px;max-width:560px}

.g-top__name{font-size:clamp(52px,6.4vw,110px)}

.g-top__claim{font-size:clamp(22px,2vw,30px);font-weight:800;font-stretch:112%;letter-spacing:-.015em;line-height:1.1}

.g-top__desc{color:#d6d6d2;max-width:56ch}

.g-badge{justify-self:start;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--yellow);color:var(--yellow-ink);padding:8px 12px}

@media (max-width:900px){

  .g-top{grid-template-columns:1fr}

  .g-top__media{min-height:0}

  .g-top__main{max-height:52vh}

  .g-top__alt{width:min(36%,30vh);margin-bottom:calc(52vh * .06)}

  .g-top__ghost{display:none}

}



/* schede della gamma: l'immagine riempie il riquadro senza imporre la propria larghezza alla griglia */

.gamma .p-card{grid-template-columns:minmax(0,1fr)}

.gamma .p-card__img{position:relative}

.gamma .p-card__img>img{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:none;max-height:none} /* solo immagini dirette: i componenti .p-visual hanno le loro regole */

.g-top>*{min-width:0}
/* pannelli (ETNA, POMPEI, FORGIA) nelle schede grandi: blocco e immagine al 100% sono nel componente (prodotto.css, sez. 13);
   qui solo un margine bianco più ampio, senza margine in basso (l'immagine poggia sul fondo del pannello) */
.gamma .p-card__img>.p-visual--pannello.p-visual--card{padding:clamp(12px,1.6vw,22px) clamp(12px,1.6vw,22px) 0}

/* schede compatte: sempre tre per riga su desktop (niente celle vuote), a riga orizzontale sui tablet, impilate su mobile */

.g-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:1000px){

  .g-grid{grid-template-columns:1fr}

  .g-grid .p-card{grid-template-rows:auto;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}

}

@media (max-width:640px){

  .g-grid .p-card,.g-big{grid-template-columns:minmax(0,1fr)}

  .gamma .p-card__img,.g-big .p-card__img{aspect-ratio:4/3}

}



/* "Il segno": l'elemento distintivo del modello */

.g-segno{display:grid;gap:4px;font:600 13px/1.4 var(--mono);color:var(--ink);padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.g-segno span{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}

.g-desc{color:#cfcfcb;font-size:15px;line-height:1.55}

.g-grid .p-card__txt{gap:12px}

.g-grid .p-card__price,.g-tre .p-card__price{margin-top:2px}



/* tre fuochi a legna con pagina completa: schede più grandi */

.g-tre{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}

.g-tre>li{background:#111112;display:flex;min-width:0}

.g-big{padding:clamp(24px,2.6vw,36px)}

.g-big .p-card__img{aspect-ratio:1/1}

.g-big .p-card__name{font-size:clamp(36px,3.6vw,56px)}

.g-big__claim{font-size:clamp(19px,1.5vw,23px);font-weight:800;font-stretch:112%;line-height:1.15;letter-spacing:-.01em}

.g-big .p-card__txt{gap:12px}

@media (max-width:1000px){.g-tre{grid-template-columns:1fr}.g-tre .g-big{grid-template-rows:auto;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}}

@media (max-width:640px){.g-tre .g-big{grid-template-columns:minmax(0,1fr)}.g-big .p-card__img{aspect-ratio:4/3}}



/* fascia foto reali */

/* foto 1080 px: mai oltre 1x (1,3x su HiDPI, compreso lo zoom all'hover del 4%) */

.g-foto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);width:100%;max-width:calc(2 * 1038px + 20px);justify-self:center}

@media (min-resolution:1.4dppx){.g-foto{max-width:calc(2 * 675px + 20px)}}

.g-foto figure{position:relative;margin:0;overflow:hidden;aspect-ratio:16/10;background:var(--steel)}

.g-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}

.g-foto figure:hover img{transform:scale(1.04)}

.g-foto figcaption{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:rgba(12,12,13,.78);padding:7px 10px}

@media (max-width:640px){.g-foto{grid-template-columns:1fr;max-width:675px}}



/* ---------- 3. PELLET ---------- */

.g-pellet__box{display:grid;gap:26px}

.g-pellet .p-plus{grid-template-columns:1fr;font-size:17px}

.g-pellet .link-arrow{color:var(--void)}

@media (max-width:560px){.g-pellet .p-cta .link-arrow{flex:1 1 100%}}

/* ---------- PREZZI CAMPAGNA 2026/27 (regole 28/10/2026): componente .p-prezzo di prodotto.css ---------- */
.g-hero__lead{display:grid;gap:16px}
.g-campagna{display:block;margin:0;max-width:52ch;font:500 13px/1.5 var(--mono);color:#cfcfcb;border-left:2px solid var(--yellow);padding:2px 0 2px 12px}
.g-campagna b{display:block;margin-bottom:4px;color:var(--ink);letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.g-campagna .p-prezzo__badge{font-size:12px;padding:0 6px;margin-right:2px}
.g-top .p-prezzo{padding:18px 0 4px;border-top:1px solid var(--line)}
.g-top .p-cta .link-arrow{margin-left:4px}
.g-big .p-prezzo{margin-top:4px}
.g-big .p-prezzo .p-prezzo__importo{font-size:clamp(24px,2.2vw,30px)}
@media (max-width:560px){.g-top .p-cta .link-arrow{margin-left:0;max-width:100%;white-space:normal}}