/* Galeria szablonów demonstracyjnych — przykładowe projekty per branża. */

.szablony-sekcja .szablony-naglowek{max-width:56ch;margin-bottom:34px}
.szablony-naglowek .industry-note,.szablony-naglowek p{color:#50605d}

.szablony-grid{display:grid;gap:22px}

.szablon{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  text-decoration:none;color:var(--ink);
  transition:transform .16s ease,box-shadow .16s ease;
}
.szablon:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.szablon:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}

/* miniatura: pasek przeglądarki + świat kolorystyczny szablonu */
.szablon-podglad{position:relative;aspect-ratio:16/11;border-bottom:1px solid var(--ink);overflow:hidden}
.szablon-podglad::after{content:"PODGLĄD UKŁADU";position:absolute;right:10px;bottom:10px;padding:5px 7px;background:var(--paper,#fafaf8);border:1px solid var(--ink);font:600 9px/1 var(--sans);letter-spacing:.08em}
.szablon-pasek{
  display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;
  background:#EDE9E0;border-bottom:1px solid var(--ink);
}
.szablon-pasek i{width:7px;height:7px;border-radius:50%;background:#C3BCAF;display:block}
.szablon-plotno{position:absolute;inset:24px 0 0}
.szablon-plotno svg{width:100%;height:100%;display:block}

.szablon-tresc{padding:20px 20px 22px;display:flex;flex-direction:column;gap:7px;flex:1}
.szablon-branza{
  font:600 9.5px/1.25 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--teal);
}
.szablon h3{font:700 21px/1.15 var(--serif);letter-spacing:-.02em;margin:0}
.szablon p{font-size:14.5px;line-height:1.55;color:#50605d;margin:0}
.szablon-link{
  margin-top:auto;padding-top:12px;
  font:600 13.5px/1 var(--sans);color:var(--ink);
  display:inline-flex;align-items:center;gap:7px;
}
.szablon:hover .szablon-link{color:#0E6F67}

.szablony-nota{
  margin-top:26px;font-size:14.5px;color:#50605d;
  border-left:2px solid var(--teal);padding-left:14px;max-width:62ch;
}

/* pojedynczy szablon na stronie branżowej */
.szablon-solo{max-width:520px;margin-top:22px}

@media(min-width:700px){
  .szablony-grid{grid-template-columns:repeat(3,1fr);gap:24px}
}
@media(max-width:699px){
  .szablon{box-shadow:4px 4px 0 var(--ink)}
  .szablon:hover{transform:none;box-shadow:4px 4px 0 var(--ink)}
}
@media(prefers-reduced-motion:reduce){
  .szablon{transition:none}
  .szablon:hover{transform:none}
}