/* ============================================================
   Podstrony oferty – Polskie OKNA
   Ładowane PO style.css, tylko na podstronach (body.subpage).
   Nie dotyka strony głównej.
   ============================================================ */

/* Header zawsze lity (na podstronie nie ma pełnoekranowego hero) */
body.subpage .header {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 28px rgba(29, 31, 36, 0.08);
}

/* ---------- Hero podstrony ---------- */
.page-hero {
  position: relative;
  padding: 140px 0 84px;
  background:
    radial-gradient(60% 60% at 88% 12%, var(--gold-soft) 0%, transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, #ffffff 100%);
  overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(29, 31, 36, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 31, 36, 0.025) 1px, transparent 1px);
  background-size: 70px 70px;
  -webkit-mask-image: radial-gradient(80% 70% at 25% 40%, #000 35%, transparent 100%);
          mask-image: radial-gradient(80% 70% at 25% 40%, #000 35%, transparent 100%);
}
.ph-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 54px; align-items: center;
}

.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--muted); transition: color 0.25s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: var(--ink-2); }

.ph-title { font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 600; color: var(--ink); line-height: 1.1; margin-bottom: 20px; }
.ph-lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--body); max-width: 540px; margin-bottom: 30px; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.ph-visual { position: relative; }
.ph-frame {
  position: relative; border-radius: 200px 200px 24px 24px; overflow: hidden;
  box-shadow: var(--shadow); border: 6px solid #fff; aspect-ratio: 4 / 5;
}
.ph-frame img { width: 100%; height: 100%; object-fit: cover; }
.ph-frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(184, 132, 31, 0.25); border-radius: inherit; }

/* ---------- Treść (opis oferty) ---------- */
.offer-detail { padding: 84px 0; }
.offer-detail .container { max-width: 1000px; }
.od-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 54px; align-items: start; }

.od-prose p { font-size: 1.07rem; color: var(--body); line-height: 1.8; margin-bottom: 20px; }
.od-prose p:last-child { margin-bottom: 0; }

.od-aside {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 26px; position: sticky; top: 96px;
}
.od-aside h3 { font-size: 1.05rem; margin-bottom: 16px; color: var(--ink); }
.od-brands { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.od-brand { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }
.od-aside .btn { width: 100%; }
.od-aside-note { font-size: 13px; color: var(--muted); margin-top: 14px; text-align: center; }

/* ---------- Inne kategorie ---------- */
.related { padding: 0 0 90px; }
.related .container { max-width: 1000px; }
.related h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; margin-bottom: 26px; text-align: center; }
.related-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.related-grid a {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); background: #fff;
  transition: border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.related-grid a:hover { color: var(--gold); border-color: var(--gold-light); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ---------- CTA pas ---------- */
.od-cta { background: var(--ink); color: #fff; padding: 66px 0; text-align: center; }
.od-cta h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 600; margin-bottom: 14px; }
.od-cta p { color: rgba(255, 255, 255, 0.72); max-width: 560px; margin: 0 auto 28px; font-size: 1.05rem; }

/* ---------- Responsywność ---------- */
@media (max-width: 900px) {
  .ph-inner { grid-template-columns: 1fr; gap: 38px; }
  .ph-visual { order: -1; max-width: 460px; }
  .ph-frame { aspect-ratio: 4 / 3; border-radius: 24px; }
  .od-grid { grid-template-columns: 1fr; gap: 34px; }
  .od-aside { position: static; }
}
@media (max-width: 560px) {
  .page-hero { padding: 116px 0 60px; }
  .offer-detail { padding: 60px 0; }
}