/* =========================
   BASE / RESET
========================= */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:#f5f7fa;color:#333;font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin-top:0;font-weight:700}

/* =========================
   TABS (Popularne/Nowe/Bez depozytu)
========================= */
.cr-tabs{display:flex;gap:12px;margin:10px 0 16px}
.cr-tab{border:1px solid #e5e5f0;background:#fff;padding:8px 16px;border-radius:999px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block}
.cr-tab.is-active{background:#6b2ce6;color:#fff;border-color:#6b2ce6}

/* =========================
   HERO (single kasyno)
========================= */
.site-main.casino .entry-title{display:none!important}
.site-main.casino .cr-hero{
  display:flex;align-items:center;gap:24px;
  max-width:1000px;margin:2rem auto;padding:20px;
  background:#fff;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:hidden;
}
.site-main.casino .cr-hero img{width:200px;max-width:200px;height:180px;object-fit:cover;border-radius:8px}
.site-main.casino .cr-hero > *:first-child{flex:0 0 300px}
.site-main.casino .cr-hero > *:not(:first-child){flex:1 1 auto;min-width:320px}
.site-main.casino .cr-hero .cr-hero-title{font-weight:700;font-size:clamp(26px,3vw,38px);margin:0 0 .25rem;color:#333}
.site-main.casino .cr-hero .cr-bonus-tag{color:#7117ea;font-weight:700;margin:.35rem 0 .25rem}
.site-main.casino .cr-hero .cr-rated{margin:.5rem 0 0;font-size:1rem}

/* rating bar */
.site-main.casino .cr-ratingbar,.site-main.casino .rating-bar{
  background:#eee;border-radius:4px;overflow:hidden;height:6px;margin:.5rem 0;padding:0;border:none;box-shadow:none
}
.site-main.casino .cr-ratingbar>span,.site-main.casino .rating-bar>span{
  display:block;height:100%;width:var(--w,auto);
  background:linear-gradient(90deg,#ff4b4b,#ffb84d,#71c7ec,#34c759);
  border-radius:inherit;transition:width .35s ease
}
.site-main.casino .cr-ratingbar>span[style*="width"],.site-main.casino .rating-bar>span[style*="width"]{width:unset}

/* CTA (global) */
.site-main.casino .button.button-primary,
.site-main.casino .button-primary{
  text-decoration:none;display:inline-block;background:#7117ea;color:#fff;padding:.8rem 1.5rem;border-radius:25px;
  font-weight:700;margin-top:1rem;border:none;text-align:center
}
.site-main.casino .button.button-primary:hover,.site-main.casino .button-primary:hover{background:#5a0fc9}

/* =========================
   LAYOUT 2 KOLUMNY (single)
========================= */
.site-main.casino .cr-two-cols{display:flex;flex-wrap:wrap;gap:2rem;max-width:1100px;margin:0 auto 4rem;padding:0 1rem}
.site-main.casino .cr-left{flex:3;min-width:280px}
.site-main.casino .cr-right{flex:2;min-width:260px;margin-top:40px}
.site-main.casino .cr-right .cr-box{
  background:#fff;border-radius:8px;padding:1.5rem;height:fit-content;border:none;box-shadow:none!important
}
.site-main.casino .cr-right .cr-box h3{font-size:1.6rem;font-weight:700;margin:.2rem 0 1rem}

/* oceny (lista) */
.site-main.casino .cr-scores ul{list-style:none;margin:0;padding:0}
.site-main.casino .cr-scores li{display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px solid #eee}
.site-main.casino .cr-scores li:last-child{border-bottom:none}

/* chips (płatności/języki) */
.site-main.casino .cr-right .cr-box .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.site-main.casino .cr-right .cr-box .chips span{
  background:#f0f3f8;padding:.4rem .8rem;border-radius:20px;font-size:.85rem;display:inline-flex;align-items:center;gap:.35rem
}

/* =========================
   GALERIA (single)
========================= */
.site-main.casino .cr-left h2,
.site-main.casino .cr-left h3{
  font-size:23px; float:none!important;width:auto!important;display:block!important;margin-top:40px!important;margin-bottom:.5rem!important
}
.site-main.casino .cr-gallery{
  display:block!important;clear:both!important;white-space:nowrap!important;
  overflow-x:auto;margin-top:.2rem;padding-bottom:4px;scrollbar-width:none
}
.site-main.casino .cr-gallery::-webkit-scrollbar{display:none;height:0}
.site-main.casino .cr-gallery > *, .site-main.casino .cr-gallery img{
  display:inline-block!important;vertical-align:middle;margin-right:10px!important;height:110px!important;width:auto!important;
  object-fit:cover;border-radius:6px;box-shadow:none
}

/* =========================
   KOMENTARZE (single)
========================= */
.site-main.casino #comments{margin-top:2rem}
.site-main.casino #comments .cr-comment{
  background:#fff;padding:1rem;margin-bottom:1rem;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1)
}
.site-main.casino #comments .cr-comment__meta{font-size:.9rem;color:#777;margin-bottom:.5rem}
.site-main.casino h2.title-comments{font-size:0!important;line-height:0!important;margin-bottom:.75rem!important}
.site-main.casino h2.title-comments::before{
  content:"Opinie graczy"!important;font-size:1rem;line-height:1.2;font-weight:700;color:#333;display:block
}

/* =========================
   GRID / CARDS (listing z shortcodu)
========================= */
.cr-grid{display:grid;gap:16px}
.cr-grid.cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.cr-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cr-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cr-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}

.cr-card{
  background:#fff;border:0;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.10);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease
}
.cr-card:hover{transform:translateY(-4px);box-shadow:0 10px 18px rgba(0,0,0,.16)}

/* TOP image (desktop domyślnie cover) */
.cr-card > a:first-child,.cr-card__logo{
  display:block;width:100%;height:250px;object-fit:cover;object-position:center;background:#f7f8fa;border-bottom:1px solid #f0f0f0;border-radius:12px 12px 0 0;float:none!important;margin:0!important
}

.cr-card h3.cr-card__title{
  display:block;position:static!important;clear:both;margin:5px 0 0;font-size:1.06rem;font-weight:700
}
.cr-card__subtitle{margin:0 0 -10px;color:#777;font-size:.92rem}

/* ocena + pasek */
.cr-rated{margin:0 16px 6px;font-weight:700;color:#111}
.cr-ratingbar{margin:0 16px 14px;height:6px;border-radius:3px;overflow:hidden;background:#e6ebf2}
.cr-ratingbar>span{display:block;height:100%;background:linear-gradient(90deg,#34c759,#5ac8fa)}

/* CTA w karcie */
.cr-card__cta{display:flex;flex-direction:column;gap:10px;margin:0 16px 16px}
.cr-card__cta .button-primary{display:block;text-align:center;background:#7117ea;color:#fff;border:none;padding:.65rem 1rem;border-radius:10px;font-weight:500}
.cr-card__cta .button-primary:hover{background:#5a12b8}
.cr-card__cta .button:not(.button-primary){
  font-size:12px;text-align:center;background:transparent;border:none;padding:0;margin:0;color:#ff2e57;font-weight:700
}
.cr-card__cta .button:not(.button-primary):hover{text-decoration:underline;color:#e61a41}

/* =========================
   RESPONSYWNOŚĆ
========================= */
@media (max-width:900px){
  .site-main.casino .cr-two-cols{flex-direction:column}
  .site-main.casino .cr-hero{margin:1.5rem 1rem}
}

@media (max-width:700px){
  .site-main.casino .cr-hero{flex-direction:column;align-items:flex-start}
  .site-main.casino .cr-hero img{width:100%;max-width:100%;height:200px}
  .site-main.casino .cr-hero > *:not(:first-child){width:100%;min-width:0}
}

/* MOBILE: 2 kafelki w rzędzie + kompakt CTA */
@media (max-width:520px){
  .cr-grid.cols-4,.cr-grid.cols-3,.cr-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .cr-card{padding:12px;border-radius:12px}
  .cr-card h3.cr-card__title{margin:10px 0 2px;font-size:15px}
  .cr-card__subtitle{
    display: none ;
    margin:0;font-size:12px}
  .cr-rated{margin:0 8px 6px;font-size:13px}
  .cr-ratingbar{margin:0 8px 10px}
  .cr-card, .cr-card__cta, .cr-card__cta .button{min-width:0;box-sizing:border-box;margin:0}
  .cr-card__cta{gap:8px;width:100%}
  .cr-card__cta .button{
    display:block!important;width:100%!important;padding:10px 8px!important;border-radius:20px!important;
    font-size:13px!important;line-height:1.15!important;white-space:normal!important;text-align:center!important
  }
  .cr-card__cta .button.button-primary{font-weight:700!important;box-shadow:0 6px 16px rgba(107,44,230,.22)!important}
  .cr-card__cta a.button + a.button{background:transparent!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
}

/* bardzo wąskie: 1 kolumna */
@media (max-width:340px){
  .cr-grid.cols-4,.cr-grid.cols-3,.cr-grid.cols-2{grid-template-columns:1fr!important}
}

/* =========================
   FIX: mobilna wysokość obrazka w kafelku (listing)
   – większa ramka + brak przycięcia obrazka
========================= */
/* globalne przebicie domyślnej wysokości dla listy (gdyby coś ją trzymało) */
.cr-grid .cr-card > a:first-child{height:250px !important}
.cr-grid .cr-card__logo{height:100% !important}

@media (max-width:520px){
  /* 1) Wyższa ramka linka z obrazem */
  .cr-grid .cr-card > a:first-child{
    flex:0 !important;
    height:320px !important;
  }
  /* 2) Obrazek dopasowany bez ucinania (contain). 
        Jeśli wolisz wypełnienie z przycięciem – zamień contain -> cover. */
  .cr-grid .cr-card > a:first-child img.cr-card__logo,
  .cr-grid .cr-card__logo{
    height:100% !important;
    width:100% !important;
    object-fit:contain !important; /* zmień na cover, jeśli tak wolisz */
    background:#fff;
    display:block !important;
  }
}

/* === MOBILE: wymuś JEDNĄ kolumnę na liście === */
@media (max-width: 520px){
  .cr-grid,
  .cr-grid.cols-2,
  .cr-grid.cols-3,
  .cr-grid.cols-4{
    grid-template-columns: 1fr !important;
    gap: 14px !important;   /* możesz zmienić np. na 12px */
  }

  /* Karta na pełną szerokość kolumny */
  .cr-card{
    width: 100% !important;
    max-width: 100% !important;
  }
}