/* STRAMA PANELS — Material First / local reversible proposal layer */
:root{
  --mf-label-bg:rgba(10,32,39,.92);
  --mf-paper:rgba(250,248,242,.96);
}

/* Real product surfaces, not decorative stock patterns */
.home-hero--photo .hero-media--overlay{position:static}
.home-hero--photo .hero-material-card{
  display:block;
  left:auto;
  right:0;
  bottom:70px;
  width:292px;
  padding:19px 20px 18px;
  background:var(--mf-paper);
  border:1px solid rgba(255,255,255,.76);
  box-shadow:0 22px 65px rgba(5,18,22,.22);
  backdrop-filter:blur(16px);
}
.home-hero--photo .hero-material-card>span{
  color:var(--mp-blue-dark);
  margin-bottom:5px;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.15em;
}
.home-hero--photo .hero-material-card strong{
  margin-bottom:13px;
  color:var(--mp-ink);
  font-family:var(--display);
  font-size:20px;
  font-weight:540;
  letter-spacing:-.035em;
}
.hero-material-swatches{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  margin:0 0 13px;
}
.hero-material-swatches i{
  display:block;
  height:51px;
  background-position:center;
  background-size:cover;
  border:1px solid rgba(23,27,26,.11);
}
.hero-material-swatches i:nth-child(1){background-image:url("../img/material-first/grandson-oak.ebf6815399eb.webp")}
.hero-material-swatches i:nth-child(2){background-image:url("../img/material-first/grey-concrete.bd984167bde1.webp")}
.hero-material-swatches i:nth-child(3){background-image:url("../img/material-first/charred-wood.076dde2e0d3a.webp")}
.hero-material-swatches i:nth-child(4){background-image:url("../img/material-first/twill-cream.0db22cd16453.webp")}
.home-hero--photo .hero-material-card a{
  color:var(--mp-blue-dark);
  font-size:10px;
  font-weight:680;
  letter-spacing:.015em;
}

/* One authentic material cue per existing product block */
.page-home .feature[data-material-system] .feature-media{
  --mf-texture:url("../img/material-first/grandson-oak.ebf6815399eb.webp");
  --mf-label:"GRANDSON OAK / R";
  position:relative;
  isolation:isolate;
}
.page-home .feature[data-material-system="02"] .feature-media{
  --mf-texture:url("../img/material-first/aged-copper.7471462b845d.webp");
  --mf-label:"AGED COPPER / R";
}
.page-home .feature[data-material-system="03"] .feature-media{
  --mf-texture:url("../img/material-first/riven-slate.283b09d5d642.webp");
  --mf-label:"RIVEN SLATE";
}
.page-home .feature[data-material-system] .feature-media:after{
  content:"";
  position:absolute;
  z-index:2;
  right:25px;
  bottom:24px;
  width:108px;
  height:108px;
  background-image:var(--mf-texture);
  background-position:center;
  background-size:cover;
  border:5px solid rgba(251,250,247,.97);
  box-shadow:0 14px 38px rgba(6,20,24,.22);
  pointer-events:none;
}
.page-home .feature[data-material-system] .feature-media:before{
  content:var(--mf-label);
  position:absolute;
  z-index:3;
  right:133px;
  bottom:30px;
  padding:9px 12px 8px;
  color:#fff;
  background:var(--mf-label-bg);
  font-size:8px;
  font-weight:700;
  line-height:1;
  letter-spacing:.13em;
  white-space:nowrap;
  pointer-events:none;
}
.page-home .feature[data-material-system] .feature-copy:after{
  content:"MATERIAŁ / SYSTEM";
  display:block;
  width:max-content;
  margin-top:35px;
  padding-top:11px;
  border-top:1px solid var(--mp-line);
  color:#858b87;
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}

/* Quiet material index in the offer intro */
.page-home .stream-content>.w-block-section_heading:first-child .shell{
  position:relative;
}
.page-home .stream-content>.w-block-section_heading:first-child .shell:after{
  content:"";
  position:absolute;
  top:7px;
  right:0;
  width:214px;
  height:48px;
  background:
    linear-gradient(90deg,transparent 24%,rgba(251,250,247,.08) 24% 25%,transparent 25% 49%,rgba(251,250,247,.08) 49% 50%,transparent 50% 74%,rgba(251,250,247,.08) 74% 75%,transparent 75%),
    url("../img/material-first/black-3d.4a6102d2b467.webp") center/cover;
  border:1px solid rgba(23,27,26,.12);
  box-shadow:inset 0 0 0 5px var(--mp-canvas);
}

/* Technical library and sample CTA share the same tactile signature */
.page-home .h-cta-panel{
  border-left:7px solid transparent;
  border-image:url("../img/material-first/charred-wood.076dde2e0d3a.webp") 20 stretch;
}
.prefooter{
  position:relative;
  isolation:isolate;
  background-image:
    linear-gradient(90deg,var(--mp-navy) 0%,var(--mp-navy) 62%,rgba(16,43,52,.91) 78%,rgba(16,43,52,.74) 100%),
    url("../img/material-first/black-3d.4a6102d2b467.webp");
  background-position:center,right center;
  background-size:auto,48% auto;
}
.prefooter:after{
  content:"21 DEKORÓW · PRÓBKI MATERIAŁOWE";
  position:absolute;
  z-index:-1;
  right:32px;
  bottom:18px;
  color:rgba(255,255,255,.27);
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}

@media(max-width:1080px){
  .home-hero--photo .hero-material-card{right:24px;width:268px}
  .page-home .stream-content>.w-block-section_heading:first-child .shell:after{width:150px}
}
@media(max-width:900px){
  .home-hero--photo .hero-material-card{display:none}
  .page-home .stream-content>.w-block-section_heading:first-child .shell:after{display:none}
}
@media(max-width:720px){
  .page-home .feature[data-material-system] .feature-copy:after{
    margin-top:22px;
  }
  .page-home .feature[data-material-system] .feature-media:after{
    right:15px;
    bottom:14px;
    width:76px;
    height:76px;
    border-width:4px;
  }
  .page-home .feature[data-material-system] .feature-media:before{
    right:91px;
    bottom:18px;
    padding:8px 9px 7px;
    font-size:7px;
  }
  .page-home .h-cta-panel{border-left-width:4px}
  .prefooter{
    background-image:linear-gradient(rgba(16,43,52,.93),rgba(16,43,52,.93)),
      url("../img/material-first/black-3d.4a6102d2b467.webp");
    background-size:auto,cover;
  }
  .prefooter:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .home-hero--photo .hero-material-card{transition:none}
}