/* =========================================================================
   DISC: strojenie strony ofertowej. Wspólne klocki: podstrona-plyty.css
   i oferta-plyty.css. Tu: czterokolorowe koło w hero i karty stylów.

   Cztery kolory z palety strony głównej, każdy z tuszem, który trzyma AA:
     D Działający   cegła  #8c2f0a, tusz krem   (ok. 8,6 : 1)
     I Kontaktowy   słońce #ffc20a, tusz kawa   (ok. 10 : 1)
     S Relacyjny    oliwka #476216, tusz krem   (ok. 6 : 1)
     C Analityczny  błękit #9fb7c4, tusz kawa   (ok. 8 : 1)
   Na jasnym tle (strzałki w rdzeniu) słońce i błękit schodzą o ton niżej.
   ========================================================================= */

.page-disc {
  --disc-d: var(--cegla);
  --disc-i: var(--sun);
  --disc-s: var(--olive);
  --disc-c: #9fb7c4;

  --disc-d-ink: var(--krem);
  --disc-i-ink: var(--coffee);
  --disc-s-ink: var(--krem);
  --disc-c-ink: var(--coffee);

  /* kreska na kremie: słońce i błękit za jasne, więc ciemniejsza para */
  --disc-i-deep: #a87a00;
  --disc-c-deep: #4d6b7c;
}

/* --- HERO: koło stylów na nocy ----------------------------------------- */

.page-disc .disc-wheel {
  max-width: 480px;
  margin-inline: auto;
}

/* Koło ~20% większe niż domyślny .offer-visual (420px → 500px), ale wciąż
   w obrębie hero na 1440 i bez poziomego scrolla na 390 (min(100%, …)
   w media query poniżej i tak przycina do szerokości kontenera). */
.page-disc .offer-visual {
  max-width: 500px;
}

@media (max-width: 980px) {
  .page-disc .offer-visual {
    width: min(100%, 456px);
  }
}

.page-disc .disc-wheel-halo {
  display: none;
}

/* Hero podstrony DISC: bez dekoracyjnego okręgu w prawym górnym rogu
   (`.hero::before` z propozycja-chrome.css) — koło DISC samo niesie kształt. */
.page-disc .hero::before {
  content: none;
}

.page-disc .disc-wheel-quad-d { --quad: var(--disc-d); --quad-ink: var(--disc-d-ink); }
.page-disc .disc-wheel-quad-i { --quad: var(--disc-i); --quad-ink: var(--disc-i-ink); }
.page-disc .disc-wheel-quad-s { --quad: var(--disc-s); --quad-ink: var(--disc-s-ink); }
.page-disc .disc-wheel-quad-c { --quad: var(--disc-c); --quad-ink: var(--disc-c-ink); }

.page-disc .disc-wheel-arc {
  fill: var(--quad);
  stroke: var(--quad);
  stroke-width: 4;
  stroke-linejoin: round;
  transition: stroke-width 260ms var(--ease);
}

.page-disc .disc-wheel-track {
  fill: none;
  stroke: none;
}

.page-disc .disc-wheel-label {
  fill: var(--quad-ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-anchor: middle;
}

@media (hover: hover) and (pointer: fine) {
  .page-disc .disc-wheel-quad:hover .disc-wheel-arc {
    stroke-width: 9;
  }
}

.page-disc .disc-wheel-core-disc {
  fill: var(--krem);
}

.page-disc .disc-wheel-core-ring {
  display: none;
}

.page-disc .disc-wheel-arrow path {
  fill: none;
  stroke: var(--arrow);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-disc .disc-wheel-arrow-d { --arrow: var(--disc-d); }
.page-disc .disc-wheel-arrow-i { --arrow: var(--disc-i-deep); }
.page-disc .disc-wheel-arrow-s { --arrow: var(--disc-s); }
.page-disc .disc-wheel-arrow-c { --arrow: var(--disc-c-deep); }

/* --- CZTERY STYLE: karty 2 × 2 na beżu, kolor stylu jako znak ---------- */

.page-disc .style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pl-rule);
}

.page-disc .style-grid li {
  padding: 34px 40px 36px 0;
  border-bottom: 1px solid var(--pl-rule);
}

.page-disc .style-grid li:nth-child(even) {
  padding: 34px 0 36px 40px;
  border-left: 1px solid var(--pl-rule);
}

.page-disc .style-d { --cue: var(--disc-d); --cue-ink: var(--disc-d-ink); }
.page-disc .style-i { --cue: var(--disc-i); --cue-ink: var(--disc-i-ink); }
.page-disc .style-c { --cue: var(--disc-c); --cue-ink: var(--disc-c-ink); }
.page-disc .style-s { --cue: var(--disc-s); --cue-ink: var(--disc-s-ink); }

.page-disc .style-kicker {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 0 20px;
  border-radius: 50%;
  background: var(--cue);
  color: var(--cue-ink);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
}

.page-disc .style-grid h3 {
  margin: 0 0 12px;
  color: var(--pl-ink);
  font-size: clamp(1.3rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
}

.page-disc .style-grid p:not(.style-kicker) {
  max-width: 32rem;
  margin: 0;
  color: var(--pl-ink-2);
}

@media (max-width: 680px) {
  .page-disc .style-grid {
    grid-template-columns: 1fr;
  }

  .page-disc .style-grid li,
  .page-disc .style-grid li:nth-child(even) {
    padding: 28px 0 30px;
    border-left: 0;
  }

  .page-disc .style-kicker {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    font-size: 1.3rem;
  }

  .page-disc .disc-wheel-label {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-disc .disc-wheel-arc {
    transition: none;
  }
}