/* ===== Reset + zmienne (spójne z resztą) ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:#f7f7f8;
  --surface:#ffffff;
  --text:#1f2328;
  --muted:#6b7280;
  --accent:#f58220;
  --line:#e6e7ea;
  --shadow:0 8px 24px rgba(16,24,40,.08);
  --radius:12px;
  --transition:.25s ease;
}

/* ===== SUBHERO (Opinie) – z fallbackiem obrazu ===== */
.subhero{
  position:relative;
  display:grid;
  align-items:center;
  min-height:70vh;
  background:var(--bg);
  background-image: url('/img/opinie.webp'); /* jeśli masz tylko webp, zmień na /img/opinie.webp */
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.subhero__overlay{ position:absolute; inset:0; pointer-events:none; }
.subhero__container{
  position:relative; z-index:1;
  width:min(92%, 820px);
  margin: 0 auto;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding: clamp(28px,6vh,56px) 20px;
  animation: fadeBox .6s ease forwards;
  opacity:0;
}
.subhero__container h1{
  font-size:clamp(28px,6vw,54px);
  font-weight:800; color:var(--accent); margin-bottom:8px;
}
.subhero__container p{
  font-size:clamp(16px,2.8vw,22px);
  color:var(--muted);
}

@keyframes fadeBox{
  from{opacity:0; transform:translateY(12px) scale(.98)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

@media (min-width:1025px){
  .subhero{ min-height:90vh; }
  .subhero__container{ margin-top: clamp(100px,32vh,300px); }
}
@media (max-width:1024.98px){
  .subhero{ min-height:90vh; background-attachment:scroll; display:grid; align-items:start; justify-items:center; padding-top:20vh; }
  .subhero__container{ width:min(94%,700px); margin-top:0; padding:clamp(20px,5vh,40px) 16px; }
}

/* ===== Sekcja OPINII – węższa, lżejsza ===== */
.reviews-live .container{
  width: min(92%, 1040px);          /* spójnie z innymi podstronami */
  margin-inline: auto;
  padding: clamp(12px,2.5vw,20px);
}
.section-title{
  font-size:clamp(22px,3vw,28px);
  margin:8px 0 14px;
  color:var(--text);
}
.stack{ display:grid; gap: clamp(12px,2.2vw,16px); }

/* Pasek z CTA */
.ratingbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding: 12px 16px;
}
.ratingbar .stars{ font-size:20px; line-height:1; color:var(--accent); letter-spacing:2px; }
.ratingbar__text{ color:var(--text); }
.ratingbar__actions{ margin-left:auto; display:flex; gap:10px; }

/* Karty opinii */
.reviews{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
}
.review{
  list-style:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 16px;
}
.review__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.review__author{ font-weight:700; color:var(--text); }
.review__stars{ color:var(--accent); }
.review__text{ color:var(--text); line-height:1.6; }

/* CTA na dole */
.reviews__cta{ display:flex; justify-content:center; margin-top:4px; }
.reviews__note{ color:var(--muted); font-size:12px; margin-top:-4px; }

/* Przyciski (spójne z globalem) */
.btn{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  border:1px solid var(--accent);
  transition:var(--transition);
  font-weight:600;
}
.btn:hover{ transform:translateY(-1px); opacity:.95; }
.btn--ghost{ background:transparent; color:var(--accent); }

/* Drobne mobilne doszlifowanie */
@media (max-width:560px){
  .ratingbar{ padding:10px 12px; }
  .ratingbar .stars{ font-size:18px; }
}