/* =====================================================
   PROBLEM TABS – BASE + COLOR SYSTEM
===================================================== */

.pt-problem-tabs{
  /* default: dark text on light bg */
  --pt-bg: #ffffff;
  --pt-text-main: #1f2a36;
  --pt-text-head: #0d2344;
  --pt-text-muted: #2b3f58;
  --pt-border: rgba(31,42,54,.2);
  --pt-accent: #2b3f58;

  background: var(--pt-bg);
  padding:80px 0;
}

/* jasna treść na ciemnym tle */
.pt-problem-tabs.is-light{
  --pt-text-main: #ffffff;
  --pt-text-head: #ffffff;
  --pt-text-muted: rgba(255,255,255,.85);
  --pt-border: rgba(255,255,255,.25);
  --pt-accent: #ffffff;
}

/* =====================================================
   HEADER
===================================================== */

.pt-problem-tabs__title{
  font-family: "Oddlini", serif;
  font-size: 38px;
  line-height: 1.2;
  margin: 0;
  color: var(--pt-text-head);
  text-align:center;
}

.pt-problem-tabs__lead{
  font-family: "Garamond", serif;
  font-size: 24px;
  line-height: 1.6;
  margin: 24px 0;
  color: var(--pt-text-muted);
  text-align:center;
}

/* =====================================================
   TABS NAV
===================================================== */

.pt-problem-tabs__nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin: 36px 0 36px;
}

@media (min-width: 901px){
  .pt-problem-tabs__nav{
    border-bottom:1px solid var(--pt-accent);
  }
}

.pt-problem-tab{
  background:#ffffff;
  border:1px solid var(--pt-border);
  border-radius:6px 6px 0 0;
  padding:18px;
  font-family:"Oddlini", serif;
  font-size:18px;
  color:var(--pt-text-main);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.pt-problem-tabs.is-light .pt-problem-tab{
  background:transparent;
}

.pt-problem-tab:hover{
  background:rgba(0,0,0,.04);
}

.pt-problem-tab.is-active{
  background:var(--pt-accent);
  color:#ffffff;
  border-color:var(--pt-accent);
}

/* =====================================================
   TAB PANEL
===================================================== */

.pt-problem-tab-panel{
  display:none;
  gap:60px;
  align-items:flex-start;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
}

.pt-problem-tab-panel.is-active{
  display:flex;
  opacity:1;
  transform:translateY(0);
}

/* =====================================================
   IMAGE
===================================================== */

.pt-problem-tab__image{
  flex:0 0 42%;
}

.pt-problem-tab__image img{
  width:100%;
  height:auto;
  border-radius:14px;
  display:block;
}

/* =====================================================
   TEXT
===================================================== */

.pt-problem-tab__text{
  flex:1;
  font-family:"Garamond", serif;
  font-size:23px;
  line-height:1.6;
  color:var(--pt-text-main);
}

.pt-problem-tab__title{
  font-family: "Garamond", serif;
  font-size: 36px;
  line-height: 1.2;
  color:var(--pt-text-main);
  margin:0 0 14px 0;
}

.pt-problem-tab__description{
  font-size:23px;
  line-height:1.6;
  color:var(--pt-text-main);
  margin:0 0 22px;
  font-weight:bold;
}

.pt-problem-tab__content p{
  margin:0 0 16px;
}

/* =====================================================
   CTA – SUBTLE EDITORIAL LINK (FIXED MOBILE)
===================================================== */

.pt-problem-tab__cta{
  display: block;
  gap:8px;
  margin-top:36px;
  font-family:"Oddlini", serif;
  font-size:18px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--pt-text-muted);
  text-decoration:none;
  position:relative;
  transition:color .25s ease;
}

/* underline */
.pt-problem-tab__cta::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:1px;
  background:currentColor;
  opacity:.35;
  transition:opacity .25s ease;
}
.pt-problem-tab__arrow{
  display:inline-block;
  transition:transform .25s ease;
}
.pt-problem-tab__cta span{
  transition:transform .25s ease;
}

.pt-problem-tab__cta:hover{
  color:var(--pt-text-head);
}

.pt-problem-tab__cta:hover::after{
  opacity:1;
}

.pt-problem-tab__cta:hover span{
  transform:translateX(4px);
}

/* =====================================================
   RESPONSIVE – MOBILE & TABLET
===================================================== */

@media (max-width: 900px){

  .pt-problem-tabs{
    padding:30px 0;
  }

  .pt-problem-tabs__title{
    font-size:27px;
    text-align:left;
  }

  .pt-problem-tabs__lead{
    font-size:21px;
    text-align:left;
  }

  .pt-problem-tabs__nav{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .pt-problem-tab{
    width:100%;
    text-align:left;
    padding:16px 18px;
    font-size:15px;
    border-radius:10px;
    background:#fafafa;
  }

  .pt-problem-tab::before{
    font-family: 'icomoon' !important;
    content: "\ea0b";
    margin-right:10px;
    color:var(--pt-text-main);
  }

  .pt-problem-tab.is-active::before{
    color:#ffffff;
  }

  .pt-problem-tab-panel.is-active{
    flex-direction:column;
    gap:36px;
    padding-top:20px;
  }

  .pt-problem-tab__title{
    font-size:32px;
  }

  .pt-problem-tab__text{
    font-size:20px;
  }

  /* CTA – MOBILE FIX */
  .pt-problem-tab__cta{
    display: block;
    text-align:left;
    margin-top:28px;
  }
}