/* ═════════ Wariant B · Kolory jeziora ═════════ */
:root[data-variant="b"] {
  --deep: #0e3b4a; --deep-2: #155063; --sun: #f4c542; --sun-ink: #0e3b4a;
  --paper: #f2f6f7; --paper-2: #e3eef1; --card: #ffffff;
  --ink: #0c2b35; --ink-2: #3c5862; --ink-3: #6f8790;
  --line: rgba(12, 43, 53, 0.1);
  --lake: #0f6c80; --lake-2: #1b8aa3; --copper: #d18b00;
  --glass: rgba(255, 255, 255, 0.75);
  --shadow: 0 1px 2px rgba(12, 43, 53, 0.05), 0 10px 30px -12px rgba(12, 43, 53, 0.18);
  --radius: 24px; --radius-sm: 16px;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --cat-woda: #1b8aa3; --cat-gory: #4f8a3c; --cat-kultura: #d18b00; --cat-aktywnie: #c2477a;
}
@media (prefers-color-scheme: dark) {
  :root[data-variant="b"]:not([data-theme="light"]) {
    --deep: #072530; --deep-2: #0d3a48;
    --paper: #081c23; --paper-2: #0b2630; --card: #10303b;
    --ink: #eaf4f6; --ink-2: #b4cdd4; --ink-3: #7f9ca5; --line: rgba(234, 244, 246, 0.1);
    --lake: #5cc3d8; --copper: #f4c542; --glass: rgba(16, 48, 59, 0.72);
    --cat-woda: #5cc3d8; --cat-gory: #8fcf73; --cat-kultura: #f4c542; --cat-aktywnie: #ef7fae;
  }
}

[data-variant="b"] .display, [data-variant="b"] .h2 { font-weight: 800; letter-spacing: -0.04em; }
[data-variant="b"] .h2 { letter-spacing: -0.035em; }
[data-variant="b"] .eyebrow { color: var(--lake); }
[data-variant="b"] .review blockquote, [data-variant="b"] .rule__v, [data-variant="b"] .phone, [data-variant="b"] .facts strong, [data-variant="b"] .score__big, [data-variant="b"] .hero__quote blockquote { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; }
[data-variant="b"] .btn--primary { background: var(--deep); color: #fff; }
.btn--sun { background: var(--sun); color: var(--sun-ink); }
.btn--ghost-light { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); }
@media (hover: hover) and (pointer: fine) {
  .btn--sun:hover { background: #ffd55c; }
  .btn--ghost-light:hover { box-shadow: inset 0 0 0 1.5px #fff; }
  [data-variant="b"] .btn--primary:hover { background: var(--lake); }
}

/* full-colour sections */
[data-variant="b"] .facts { display: none; }
[data-variant="b"] .reviews, [data-variant="b"] .contact { background: var(--deep); color: #fff; }
[data-variant="b"] .reviews .h2, [data-variant="b"] .contact .h2, [data-variant="b"] .reviews .eyebrow, [data-variant="b"] .contact .eyebrow { color: #fff; }
[data-variant="b"] .reviews .eyebrow, [data-variant="b"] .contact .eyebrow { color: var(--sun); }
[data-variant="b"] .reviews .bars dt, [data-variant="b"] .contact address, [data-variant="b"] .contact__note, [data-variant="b"] .score__meta span { color: #b9d3db; }
[data-variant="b"] .reviews .bars dd, [data-variant="b"] .score__meta strong { color: #fff; }
[data-variant="b"] .bars div::after { background-color: rgba(255, 255, 255, 0.14); background-image: linear-gradient(var(--sun), var(--sun)); }
[data-variant="b"] .score__big { background: var(--sun); color: var(--sun-ink) !important; }
[data-variant="b"] .reviews .card { background: var(--deep-2); color: #fff; box-shadow: none; }
[data-variant="b"] .review blockquote { color: #fff; }
[data-variant="b"] .review figcaption { color: var(--sun); }
[data-variant="b"] .contact .phone { color: var(--sun); }
[data-variant="b"] .contact .btn--primary { background: var(--sun); color: var(--sun-ink); }
[data-variant="b"] .contact .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); }
[data-variant="b"] .contact .ask { color: var(--ink); }
[data-variant="b"] .rooms { background: var(--paper-2); }
[data-variant="b"] .gallery { background: var(--paper-2); }
[data-variant="b"] .tag { color: var(--deep); background: var(--sun); }

/* nav over the deep hero */
[data-variant="b"] .nav:not([data-scrolled]) .brand, [data-variant="b"] .nav:not([data-scrolled]) .nav__links a { color: #fff; }
[data-variant="b"] .nav:not([data-scrolled]) .brand__mark { fill: #fff; }
[data-variant="b"] .nav:not([data-scrolled]) .btn--primary { background: var(--sun); color: var(--sun-ink); }
@media (hover: hover) and (pointer: fine) { [data-variant="b"] .nav:not([data-scrolled]) .nav__links a:hover { background: rgba(255, 255, 255, 0.16); } }

/* hero */
.hero-b { position: relative; background: var(--deep); color: #fff; padding: calc(124px + env(safe-area-inset-top)) 0 clamp(110px, 12vw, 160px); overflow: hidden; isolation: isolate; }
.hero-b::before { content: ""; position: absolute; inset: auto -20% -40% auto; width: 70vw; height: 70vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(27, 138, 163, 0.45), transparent); z-index: -1; }
.hero-b__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-b .eyebrow { color: var(--sun); }
.hero-b .display { color: #fff; font-size: clamp(2.9rem, 6.6vw, 5.6rem); line-height: 0.98; }
.hero-b .hl { color: var(--sun); }
.hero-b .lede { color: #b9d3db; margin-top: 22px; max-width: 40ch; }
.hero-b .hero__cta { margin-top: 30px; }
.hero-b__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 28px 0 0; }
.hero-b__chips li { padding: 8px 14px; border-radius: 999px; background: var(--deep-2); font-size: 0.88rem; color: #d7e7ec; }
.hero-b__chips b { color: #fff; }

.hero-b__photos { position: relative; aspect-ratio: 1 / 0.92; }
.hero-b__photos figure { position: absolute; margin: 0; overflow: hidden; border-radius: 28px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); }
.hero-b__photos img { width: 100%; height: 100%; object-fit: cover; }
.hero-b__main { inset: 0 0 18% 8%; transform: rotate(2.5deg); }
.hero-b__main img { object-position: 68% 50%; }
.hero-b__small { left: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; transform: rotate(-4deg); border: 6px solid #fff; border-radius: 22px !important; }
.hero-b__badge { position: absolute; right: 2%; bottom: 4%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 116px; height: 116px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); font-size: 0.78rem; font-weight: 600; transform: rotate(8deg); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.45); }
.hero-b__badge b { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.hero-b__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(40px, 6vw, 90px); }
.hero-b__wave path { fill: var(--paper); }
@media (max-width: 900px) {
  .hero-b__grid { grid-template-columns: minmax(0, 1fr); }
  .hero-b__photos { max-width: 520px; width: 100%; margin: 12px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-b__main, .hero-b__small, .hero-b__badge { transform: none; } }