/* ===================================================================
   SBWiLK Offer Cards – CSS
   - Siatka kart
   - OWAL oraz wariant PROJEKT (jak shortcode realizacji)
   - Etykieta
   - Kropki/ikony: tryby animacji ORBIT / ARC
   =================================================================== */

/* ==== Layout bazowy ==== */
.sbwilk-oc { width: 100%; }
.sbwilk-oc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; /* nadpisywane z panelu */
}

/* ==== Kafelek ==== */
.sbwilk-oc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.sbwilk-oc-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ==== Media (kontener obrazu) ==== */
.sbwilk-oc-media {
  position: relative;
  width: 100%;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

/* bazowa gładkość obrazka (żeby każdy wariant mógł płynnie się skalować) */
.sbwilk-oc-media .sbwilk-oc-img{
  transition: transform .35s ease, filter .35s ease;
}

/* ---------- OWAL ---------- */
.sbwilk-oc-media.look-oval .sbwilk-oc-img-wrap {
  width: 85%;                   /* nadpisywane kontrolą */
  margin: 0 auto;
  transition: transform .35s ease;
  position: relative;
  z-index: 1;
}
.sbwilk-oc-media.has-shadow.look-oval .sbwilk-oc-img-wrap {
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.12));
}
.sbwilk-oc-media.look-oval .sbwilk-oc-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transform: scale(1);
  border-radius: 50%;           /* tylko dla OWALU */
}

/* Hover karty = powiększenie obrazka (OWAL) */
.sbwilk-oc-card:hover .sbwilk-oc-media.look-oval .sbwilk-oc-img{
  transform: scale(1.06);
}

/* ---------- PROJEKT (jak realizacje) ---------- */
.sbwilk-oc-media.look-project {
  --oc-accent: #0a7a54;
  --oc-bevel: 14px;
  --oc-bevel-hover: 20px;

  overflow: hidden;             /* maska */
  border-radius: 0;
  aspect-ratio: 16/9;           /* spójnie z shortcode */
  box-shadow: 0 6px 24px rgba(13, 38, 76, .06);

  /* przecięte rogi (animowane) */
  --b: var(--oc-bevel);
  clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)),
                     calc(100% - var(--b)) 100%, 0 100%, 0 var(--b));
  -webkit-clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)),
                             calc(100% - var(--b)) 100%, 0 100%, 0 var(--b));
  transition: clip-path .28s ease, -webkit-clip-path .28s ease; /* smooth bevel */
  will-change: clip-path;
}

/* płynna zmiana ścięcia na hover całej karty */
@media (hover:hover){
  .sbwilk-oc-card:hover .sbwilk-oc-media.look-project{
    --b: var(--oc-bevel-hover);
  }
}

/* cienki border podążający za clip-path */
.sbwilk-oc-media.look-project::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  clip-path: inherit;
  -webkit-clip-path: inherit;
  box-shadow: inset 0 0 0 1px #e2e8f0;
  transition: clip-path .28s ease, -webkit-clip-path .28s ease; /* smooth border */
  will-change: clip-path;
}

/* pasek akcentu u góry */
.sbwilk-oc-media.look-project::after{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--oc-accent), color-mix(in srgb, var(--oc-accent), #0b8f61 40%));
  opacity:.9;
}

/* obraz wewnątrz – pełne wypełnienie */
.sbwilk-oc-media.look-project .sbwilk-oc-img-wrap{
  width: 100%; height: 100%; margin: 0; filter: none;
}
.sbwilk-oc-media.look-project .sbwilk-oc-img{
  width: 100%; height: 100%; object-fit: cover; display:block;
  border-radius: 0 !important; transform: none;
}

/* Hover karty = powiększenie obrazka (PROJEKT)
   — uruchamia się razem ze zmianą ścięcia i kropkami */
.sbwilk-oc-card:hover .sbwilk-oc-media.look-project .sbwilk-oc-img{
  transform: scale(1.06);
  filter: grayscale(0) saturate(1);
}

/* ==== Kropki / ikony ==== */
.sbwilk-oc-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 160ms ease;
  will-change: transform;
  z-index: 2;
}
.sbwilk-oc-dot-img {
  display: none; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
}

/* ORBIT: pojawia się na hover (klasa .is-hover nadaje JS przy hoverze karty) */
.sbwilk-oc-media.mode-orbit .sbwilk-oc-dot { opacity: 0; }
.sbwilk-oc-media.mode-orbit.is-hover .sbwilk-oc-dot { opacity: 1; }

/* ARC: zawsze widoczne */
.sbwilk-oc-media.mode-arc .sbwilk-oc-dot { opacity: 1; }

/* ukrycie kropek gdy animacje wyłączone */
.sbwilk-oc-media[data-anim-enabled="false"] .sbwilk-oc-dot { display:none; }

/* ==== Etykieta ==== */
.sbwilk-oc-label-card {
  margin-top: -24px;
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 0 0 14px 14px!important;
  padding: 16px 20px;
  text-align: center;
  width: 100%;
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
  position: relative;
  z-index: 3;
}
.sbwilk-oc-label { font-weight: 700; line-height: 1.25; }
.sbwilk-oc-sublabel { margin-top: 6px; opacity: .8; line-height: 1.3; font-size: .95em; }

/* ==== Marquee ==== */
.sbwilk-oc-marquee { margin-top: 28px; overflow: hidden; border-radius: 12px; background: #F6F7F9; }
.sbwilk-oc-marquee__track { display: flex; gap: 48px; padding: 12px 16px; will-change: transform; animation: sbwilk-marquee linear infinite; }
.sbwilk-oc-marquee span { white-space: nowrap; font-weight: 600; }
@keyframes sbwilk-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-33.333%); } }

/* ==== Responsywność ==== */
@media (max-width: 1024px) { .sbwilk-oc-grid { gap: 18px; } }
@media (max-width: 768px)  { .sbwilk-oc-grid { gap: 14px; } }

/* ==== Preferencje ruchu ==== */
@media (prefers-reduced-motion: reduce) {
  .sbwilk-oc-img-wrap { transition: none !important; }
  .sbwilk-oc-media .sbwilk-oc-img { transition: none !important; }
  .sbwilk-oc-dot { transition: none !important; }
  .sbwilk-oc-marquee__track { animation: none !important; }
  .sbwilk-oc-media.look-project,
  .sbwilk-oc-media.look-project::before{
    transition: none !important;
  }
}