/* ===== Reset + zmienne (jak w reszcie) ===== */
*{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) – jasny styl ===== */
.subhero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 70vh;
  background: url("img/opinie.jpg") center/cover no-repeat;
  background-attachment: fixed;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.subhero__overlay {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.subhero__container {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: min(92%, 820px);
  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);
}

/* Desktop positioning */
@media (min-width: 1025px) {
  .subhero { min-height: 90vh; }
  .subhero__container { margin-top: clamp(100px,32vh,300px); }
}

/* Mobile positioning – box trochę powyżej środka */
@media (max-width: 1024.98px) {
  .subhero {
    min-height: 90vh;
    background-attachment: scroll;
    display: grid;
    align-items: start;        /* start zamiast center */
    justify-items: center;
    padding-top: 20vh;         /* odsunięcie od góry ~20% ekranu */
  }
  .subhero__container {
    width: min(94%, 700px);
    margin-top: 0;
    padding: clamp(20px, 5vh, 40px) 16px;
  }
}



@keyframes fadeBox {
  from {opacity:0;transform:translateY(12px) scale(.98);}
  to {opacity:1;transform:translateY(0) scale(1);}
}
/* ===== Live reviews embed ===== */
.reviews-live .container{max-width:1100px;margin:0 auto;padding:clamp(16px,3vw,28px)}
.embed-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(12px,2.5vw,22px);
  overflow:hidden;
}
.ti-widget{width:100%}