/* Katalog – tylko dodatki, bazę bierze z assets/css/style.css */

.catalog-page .section{
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
}

.catalog-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 26px;
  position: relative;
  overflow: hidden;
}

.catalog-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
  linear-gradient(120deg, rgba(2,128,142,.14), transparent 30%),
  linear-gradient(240deg, rgba(53,186,201,.12), transparent 35%),
  linear-gradient(180deg, rgba(168,201,208,.12), transparent 40%);
  pointer-events:none;
  mask: linear-gradient(#000, transparent 85%);
}

.catalog-title{
  margin: 14px 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
}

.catalog-lead{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 70ch;
}

.catalog-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 14px;
}

.catalog-meta{
  margin-top: 18px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  color: rgba(234,242,255,.65);
  font-size: 13px;
}

.catalog-meta span{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.16);
  padding: 8px 10px;
  border-radius: 999px;
}

/* przycisk "Strona główna" w headerze – na mobile zostaje */
.catalog-back{
  margin-left: auto;
}

@media (max-width: 980px){
  .catalog-back{ display:none; } /* bo i tak jest burger */
}

/* ===== KATALOG: HEAD / LOGO / DOTS ===== */

.catalog-head{
  margin-bottom: 10px;
}

.catalog-label{
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .2px;
}

/* reuse z index */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.dots{
  display:flex;
  gap:6px;
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
}

.dot.r{ background: var(--red); }
.dot.g{ background: var(--green); }
.dot.b{ background: var(--blue); }
