/* ============================================================
   Intra – Rozwijane kafelki sesji (frontend)
   Wartości kolorów/typografii nadpisuje Elementor (zakładka Styl).
   ============================================================ */

.intra-rk-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

/* ---- kafelek ---- */
.intra-rk-tile{
  position:relative;
  min-height:320px;
  overflow:hidden;
  cursor:pointer;
  background-color:#3c4159;
}

.intra-rk-front,
.intra-rk-back{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:26px 22px;
}

.intra-rk-front{
  background-color:#3A344885;
  transition:opacity .35s ease;
}
.intra-rk-front-inner{display:flex;flex-direction:column;align-items:center}

.intra-rk-label{
  font-size:15px;
  font-weight:600;
  margin-bottom:14px;
  color:#fff;
}
.intra-rk-title{
  font-size:18px;
  font-weight:600;
  line-height:1.35;
  margin:0;
  color:#fff;
}

/* warstwa po najechaniu */
.intra-rk-back{
  background-color:rgba(34,38,58,.92);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.intra-rk-desc{
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  margin-bottom:20px;
  color:#fff;
}

.intra-rk-tile:hover .intra-rk-front,
.intra-rk-tile.is-flipped .intra-rk-front{opacity:0}
.intra-rk-tile:hover .intra-rk-back,
.intra-rk-tile.is-flipped .intra-rk-back{opacity:1;visibility:visible}

/* wyłączony flip – po najechaniu nie pokazuje się druga warstwa */
.intra-rk-tile--no-flip .intra-rk-back{display:none}
.intra-rk-tile--no-flip:hover .intra-rk-front,
.intra-rk-tile--no-flip.is-flipped .intra-rk-front{opacity:1}

/* przycisk */
.intra-rk-btn{
  display:inline-block;
  border:0;
  cursor:pointer;
  background-color:#5aa78f;
  color:#fff;
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:10px 22px;
  border-radius:2px;
  transition:background-color .2s ease,color .2s ease;
}
.intra-rk-btn:hover{background-color:#4d927d}

/* przycisk widoczny od razu na froncie, pod tytułem */
.intra-rk-front-btn{margin-top:18px}

.intra-rk-source{display:none}

/* ---- panel rozwijany ---- */
.intra-rk-detail{
  grid-column:1 / -1;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .45s ease,opacity .35s ease,margin .35s ease;
}
.intra-rk-detail.open{
  max-height:4000px;
  opacity:1;
  margin:6px 0 10px;
}
.intra-rk-detail-inner{
  position:relative;
  background:#fff;
  border:1px solid #cfe3dc;
  border-radius:4px;
  padding:32px 40px 38px;
  font-family:inherit;           /* dziedzicz czcionkę motywu */
}
.intra-rk-detail-title{
  text-align:center;
  font-family:'Montserrat',sans-serif;
  font-weight:400;                 /* pisane normalnie */
  letter-spacing:normal;           /* litery bez spacji */
  text-transform:none;             /* nie drukowanymi (nie wersaliki) */
  color:#222222;                   /* kolor 222 */
  font-size:24px;
  line-height:1.3;
  margin:0 0 24px;
  padding:0 44px;                /* miejsce na przycisk „×”, bez nachodzenia */
  overflow-wrap:break-word;
  word-wrap:break-word;
}
.intra-rk-detail-body{
  color:#555;
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  line-height:1.6;
}
.intra-rk-detail-body h4{
  font-family:'Montserrat',sans-serif;
  font-size:15px;
  font-weight:700;
  color:#222222;
  margin:0 0 16px;
}
/* <ol> i <ul> – ten sam styl */
.intra-rk-detail-body ol,
.intra-rk-detail-body ul{
  margin:0;
}
.intra-rk-detail-body li{
  font-size:14px;
  line-height:1.6;
}
.intra-rk-detail-body li strong{
  display:block;
  margin-bottom:2px;
  font-weight:700;
  color:#222222;
}
.intra-rk-detail-body li span{color:#555}

.intra-rk-close{
  position:absolute;
  top:14px;
  right:16px;
  z-index:2;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:#f0f2f5 !important;
  color:#5a6072;
  padding:0 !important;
  font-size:0 !important;        /* ukryj znak „×”, rysujemy ikonę przez ::before/::after */
  line-height:0;
  cursor:pointer;
  transition:background .2s ease;
}
.intra-rk-close::before,
.intra-rk-close::after{
  content:"";
  position:absolute;
  width:16px;
  height:2px;
  background:currentColor;
  border-radius:2px;
}
.intra-rk-close::before{transform:rotate(45deg)}
.intra-rk-close::after{transform:rotate(-45deg)}
.intra-rk-close:hover{background:#e3e6ea}

@media (max-width:1024px){ .intra-rk-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){ .intra-rk-grid{grid-template-columns:1fr} }