/*
 * CWID Front-end styles (v2.6.1)
 *
 * Cele:
 * - Eliminacja CLS: aspect-ratio + rezerwacja miejsca + skeleton
 * - Nowoczesny wygląd z minimalną ingerencją w motyw (style scoped pod .cwid-block)
 * - Dostępność: focus-visible, czytelne kontrasty, przyciski jako <button>
 */

.cwid-block{
  --cwid-gap: 14px;
  --cwid-cols: 4;
  --cwid-radius: 0px;
  --cwid-img-ratio: 56.25; /* height/width * 100 */
  --cwid-aspect: 16 / 9;
  --cwid-cat-color: #00447c;
  --cwid-font-source-pc: 12px;
  --cwid-font-title-pc: 16px;
  --cwid-font-source-mobile: 10px;
  --cwid-font-title-mobile: 12px;

  /* Slider defaults */
  --cwid-nav-color: #ffffff;
  --cwid-pagination-color: rgba(255,255,255,.85);

  margin: 0;
}

/* Debug/empty state (only shown to admins by PHP) */
.cwid-block .cwid-empty{
  padding: 12px 14px;
  border: 1px dashed rgba(0,0,0,.25);
  border-radius: var(--cwid-radius);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.75);
  font-size: 13px;
}

/* Grid */
.cwid-block .cwid-grid{
  display: grid;
  gap: var(--cwid-gap);
  grid-template-columns: repeat(var(--cwid-cols), minmax(0, 1fr));
}

/* Responsywność bez per-blok inline CSS */
@media (max-width: 1024px){
  .cwid-block .cwid-grid[data-cols="3"],
  .cwid-block .cwid-grid[data-cols="4"]{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px){
  .cwid-block .cwid-grid{
    grid-template-columns: 1fr;
  }
}

/* Card */
.cwid-block .cwid-card{
  position: relative;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--cwid-radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.cwid-block .cwid-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Link wrapper (one link per card) */
.cwid-block .cwid-card__link{
  display: block;
  color: inherit;
  text-decoration: none;
}
.cwid-block .cwid-card__link:focus-visible{
  outline: 3px solid rgba(0,0,0,.35);
  outline-offset: 3px;
}

/* Media – rezerwuje miejsce (CLS) + skeleton */
.cwid-block .cwid-media{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: rgba(0,0,0,.06);
  aspect-ratio: var(--cwid-aspect);
}
@supports not (aspect-ratio: 1 / 1){
  .cwid-block .cwid-media{
    height: 0;
    padding-top: calc(var(--cwid-img-ratio) * 1%);
  }
  .cwid-block .cwid-media > .cwid-img,
  .cwid-block .cwid-media > .cwid-no-image{
    position: absolute;
    inset: 0;
  }
}

/* Skeleton shimmer */
.cwid-block .cwid-media::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: cwid-shimmer 1.1s linear infinite;
  opacity: .55;
}
.cwid-block .cwid-media[data-cwid-loaded="1"]::before{
  animation: none;
  opacity: 0;
}
@keyframes cwid-shimmer{
  100%{ transform: translateX(100%); }
}

.cwid-block .cwid-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s ease;
}
.cwid-block .cwid-media[data-cwid-loaded="1"] .cwid-img{
  opacity: 1;
}

.cwid-block .cwid-no-image{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,.45);
  font-size: 13px;
}
.cwid-block .cwid-no-image::after{
  content: "Brak obrazu";
}

/* Meta + title */
.cwid-block .cwid-meta{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px 0;
}

.cwid-block .cwid-source{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--cwid-radius);
  background: var(--cwid-cat-color);
  color: #fff;
  font-size: var(--cwid-font-source-pc);
  line-height: 1;
  font-weight: 700;
}

.cwid-block .cwid-date{
  font-size: 12px;
  line-height: 1.1;
  color: rgba(0,0,0,.65);
  white-space: nowrap;
}

.cwid-block .cwid-title{
  margin: 8px 12px 12px;
  font-size: var(--cwid-font-title-pc);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.01em;
}

@media (max-width: 768px){
  .cwid-block .cwid-source{ font-size: var(--cwid-font-source-mobile); }
  .cwid-block .cwid-title{ font-size: var(--cwid-font-title-mobile); }
}

/* Optional title clamp (per-blok ustawienia) */
@media (min-width: 769px){
  .cwid-block.cwid-title-clamp-pc .cwid-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--cwid-title-clamp-pc);
    line-clamp: var(--cwid-title-clamp-pc);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 768px){
  .cwid-block.cwid-title-clamp-mobile .cwid-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--cwid-title-clamp-mobile);
    line-clamp: var(--cwid-title-clamp-mobile);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Edit badge (only for logged-in editors) */
.cwid-block .cwid-edit{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--cwid-radius);
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.cwid-block .cwid-card:hover .cwid-edit,
.cwid-block .cwid-card:focus-within .cwid-edit{
  opacity: 1;
}
.cwid-block .cwid-edit:focus-visible{
  outline: 3px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Carousel (overlay) – bez CDN, bez Swiper */
/* -------------------------------------------------------------------------- */

.cwid-block .cwid-carousel{
  position: relative;
}

.cwid-block .cwid-carousel__viewport{
  overflow: hidden;
  border-radius: var(--cwid-radius);
  /* Keyboard focus */
  outline: none;
}
.cwid-block .cwid-carousel__viewport:focus-visible{
  outline: 3px solid rgba(0,0,0,.35);
  outline-offset: 3px;
}

.cwid-block .cwid-carousel__track{
  display: flex;
  width: 100%;
  transform: translate3d(0,0,0);
  transition: transform .45s ease;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  .cwid-block .cwid-carousel__track{ transition: none; }
  .cwid-block .cwid-media::before{ animation: none; }
}

.cwid-block .cwid-carousel__slide{
  flex: 0 0 100%;
}

/* Overlay card tweaks */
.cwid-block .cwid-card--overlay{
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.cwid-block .cwid-card--overlay .cwid-media{
  border-radius: var(--cwid-radius);
}

.cwid-block .cwid-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.05));
}
.cwid-block .cwid-card--overlay .cwid-source{
  background: var(--cwid-cat-color);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.cwid-block .cwid-card--overlay .cwid-title{
  margin: 0;
  padding: 0;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.cwid-block .cwid-card--overlay .cwid-date{
  color: rgba(255,255,255,.92);
}

/* Controls */
.cwid-block .cwid-carousel__btn{
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--cwid-radius);
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color: var(--cwid-nav-color, #fff);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cwid-block .cwid-carousel__btn:focus-visible{
  outline: 3px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}

.cwid-block .cwid-carousel__prev{
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  line-height: 1;
}
.cwid-block .cwid-carousel__next{
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  line-height: 1;
}

.cwid-block .cwid-carousel__toggle{
  right: 12px;
  top: 12px;
  transform: none;
  width: 38px;
  height: 38px;
  font-size: 14px;
}

/* Pagination dots */
.cwid-block .cwid-carousel__pagination{
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--cwid-radius);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}

.cwid-block .cwid-carousel__dot{
  width: 10px;
  height: 10px;
  border-radius: var(--cwid-radius);
  border: 0;
  background: var(--cwid-pagination-color, rgba(255,255,255,.85));
  opacity: .55;
  cursor: pointer;
}
.cwid-block .cwid-carousel__dot[aria-current="true"]{
  opacity: 1;
  transform: scale(1.05);
}

/* aria-live (screen reader only) */
.cwid-block .cwid-sr-status{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}