@charset "UTF-8";
/* ==========================================================================
   Blok Problemy, "Trzy błędy". Geometria z homepage/css/sections/problemy.css.

   Treść to bloki Gutenberga (patrz template.php), więc ten plik NIE nadaje
   krojów, rozmiarów, interlinii ani kolorów tekstu. To robią:
     - presety rozmiaru (fontSize: heading-2, heading-5, text),
     - presety palety (textColor / backgroundColor: brand, white),
     - klasy z assets/scss/_typography.scss (.text-loose) i z komponentów
       nowej marki (.hp-eyebrow, .hp-num).
   Tutaj zostaje tylko układ: siatka kart, odstępy, tła i dekoracje.

   Ikony kart i tarcza w belce są pseudo-elementami, kreska pod tytułem
   to .hp-rule-after. Nie ma ich jako bloków: to ozdoby bez treści.
   ========================================================================== */
.tb-problemy {
  position: relative;
  isolation: isolate;
  background: transparent;
}
.tb-problemy__decor {
  position: absolute;
  inset: -4% 0;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  pointer-events: none;
}
.tb-problemy__ring {
  position: absolute;
  border-radius: 50%;
}
.tb-problemy__ring--1 {
  top: -34vw;
  right: -18vw;
  width: 78vw;
  height: 78vw;
  background: linear-gradient(200deg, #fbeced 0%, #fdf4f5 55%, rgba(253, 246, 247, 0) 100%);
}
.tb-problemy__ring--2 {
  top: -30vw;
  right: -8vw;
  width: 62vw;
  height: 62vw;
  background: linear-gradient(200deg, #f9e3e5 0%, rgba(251, 240, 241, 0.65) 60%, rgba(253, 246, 247, 0) 100%);
}
.tb-problemy__ring--3 {
  top: -26vw;
  right: 4vw;
  width: 50vw;
  height: 50vw;
  border: 1px solid rgba(191, 1, 23, 0.07);
}
.tb-problemy__corner {
  position: absolute;
  left: -12vw;
  bottom: -14vw;
  width: 26vw;
  height: 26vw;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8536e 0%, #f4a8b4 45%, rgba(250, 226, 230, 0) 85%);
  opacity: 0.85;
}
.tb-problemy__mark {
  position: absolute;
  display: block;
  width: clamp(3rem, 5.5vw, 5.25rem);
  height: clamp(3rem, 5.5vw, 5.25rem);
  background-color: rgba(191, 1, 23, 0.13);
}
.tb-problemy__mark--dom {
  top: 5%;
  right: 13%;
  -webkit-mask: var(--hp-ico-dom) center/contain no-repeat;
  mask: var(--hp-ico-dom) center/contain no-repeat;
}
.tb-problemy__mark--umowa {
  top: 20%;
  right: 29%;
  -webkit-mask: var(--hp-ico-umowa) center/contain no-repeat;
  mask: var(--hp-ico-umowa) center/contain no-repeat;
}
.tb-problemy__mark--kalendarz {
  top: 28%;
  right: 6%;
  -webkit-mask: var(--hp-ico-kalendarz) center/contain no-repeat;
  mask: var(--hp-ico-kalendarz) center/contain no-repeat;
}
.tb-problemy__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.9vw, 1.8125rem);
}
.tb-problemy__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.2vw, 2.125rem);
  background: var(--hp-c-surface);
  border: 1px solid var(--hp-c-line-2);
  border-radius: var(--hp-radius-lg);
  box-shadow: 0 24px 48px -40px rgba(17, 18, 20, 0.35);
}
.tb-problemy__card > * {
  position: relative;
  z-index: 1;
}
.tb-problemy__card::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -15%;
  bottom: -12%;
  height: 82%;
  aspect-ratio: 1;
  background-color: rgba(191, 1, 23, 0.06);
  -webkit-mask: var(--tb-problemy-ico) center/contain no-repeat;
  mask: var(--tb-problemy-ico) center/contain no-repeat;
}
.tb-problemy__card--osoba {
  --tb-problemy-ico: var(--hp-ico-osoba);
}
.tb-problemy__card--umowa {
  --tb-problemy-ico: var(--hp-ico-umowa);
}
.tb-problemy__card--kalendarz {
  --tb-problemy-ico: var(--hp-ico-kalendarz);
}
.tb-problemy__card--klucz {
  --tb-problemy-ico: var(--hp-ico-klucz);
}
.tb-problemy__card--wykres {
  --tb-problemy-ico: var(--hp-ico-wykres);
}
.tb-problemy__card--flaga {
  --tb-problemy-ico: var(--hp-ico-flaga);
}
.tb-problemy__card-title {
  max-width: 22ch;
  min-height: 2.4em;
}
.tb-problemy__promise {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  padding: clamp(1.125rem, 1.8vw, 1.625rem) clamp(1.25rem, 2vw, 1.875rem);
  border-radius: var(--hp-radius-lg);
  box-shadow: 0 24px 48px -34px rgba(191, 1, 23, 0.85);
  text-align: center;
}
.tb-problemy__promise::before {
  content: "";
  flex: none;
  display: block;
  width: clamp(1.625rem, 2.2vw, 2rem);
  height: clamp(1.625rem, 2.2vw, 2rem);
  background-color: currentColor;
  -webkit-mask: var(--hp-ico-tarcza) center/contain no-repeat;
  mask: var(--hp-ico-tarcza) center/contain no-repeat;
}
.tb-problemy {
  /* ========================================================
     ODSTĘPY PIONOWE.

     Każda grupa w szablonie ma układ „flow", a WP dokłada dzieciom
     takiego układu margin-block: 24px 0 regułą o wadze (0,1,0).
     Najpierw zerujemy je wszystkie podwójnym selektorem (0,2,0),
     potem stawiamy własne odstępy z makiety, też podwójnie.
     ======================================================== */
}
.tb-problemy .is-layout-flow > * {
  margin-block: 0;
}
.tb-problemy .tb-problemy__title {
  max-width: 44rem;
  margin-top: clamp(0.5rem, 1.2vw, 1.125rem);
}
.tb-problemy .tb-problemy__cards {
  margin-top: clamp(2rem, 3vw, 3rem);
}
.tb-problemy .tb-problemy__card-title {
  margin-top: clamp(1.25rem, 2vw, 1.875rem);
}
.tb-problemy .tb-problemy__card-text {
  margin-top: clamp(1rem, 1.6vw, 1.375rem);
}
.tb-problemy .tb-problemy__card-punch {
  margin-top: clamp(0.75rem, 1.2vw, 1.125rem);
}
.tb-problemy .tb-problemy__promise {
  margin-top: clamp(1rem, 1.9vw, 1.8125rem);
}
@media (max-width: 1023px) {
  .tb-problemy .tb-problemy__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tb-problemy .tb-problemy__card:last-child {
    grid-column: span 2;
  }
}
@media (max-width: 900px) {
  .tb-problemy .tb-problemy__mark {
    display: none;
  }
}
@media (max-width: 720px) {
  .tb-problemy .tb-problemy__cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .tb-problemy .tb-problemy__card:last-child {
    grid-column: auto;
  }
  .tb-problemy .tb-problemy__promise {
    flex-direction: column;
  }
}