/* = SaMa Matcha • Preloader + Skeleton + Cards 4/5 (hard fix) ============ */
:root { --matcha-green:var(--c-forest); --skeleton:var(--c-mist); }

/* ---------- PRELOADER ---------- */
#matcha-preloader{
  position:fixed; inset:0; z-index:9999; background:var(--c-paper);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#matcha-preloader.loaded{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:none;
}

.matcha-spinner svg{
  width:80px; height:80px;
  stroke-dasharray:290; stroke-dashoffset:290;
  animation:dash 1.5s ease-in-out infinite;
}
@keyframes dash{ 0%{stroke-dashoffset:290} 50%{stroke-dashoffset:100} 100%{stroke-dashoffset:0} }
@media (max-width:480px){ .matcha-spinner svg{ width:64px; height:64px; } }

/* ---------- SKELETON ---------- */
.matcha-skeleton{
  position:relative; overflow:hidden; display:block; background:var(--skeleton);
}
.matcha-skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-150%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:shimmer 1.6s infinite; pointer-events:none;
}
@keyframes shimmer{ to { transform:translateX(150%); } }
.matcha-skeleton img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ======================================================================== */
/*                     KARTY „SPOSOBY NA MATCHĘ” (4/5)                      */
/* ======================================================================== */
/* 1) Proporcje kart – złap WSZYSTKIE typy wrapperów i bloków */
.cards-recipes .wp-block-column > .wp-block-image,
.cards-recipes .wp-block-column > figure,
.cards-recipes .wp-block-column > .wp-block-cover,
.cards-recipes .wp-block-column > .ct-image-container,
.cards-recipes .wp-block-column a:has(img),           /* link opakowujący <img> */
.cards-recipes .wp-block-image,
.cards-recipes figure,
.cards-recipes .wp-block-cover,
.cards-recipes .ct-image-container {
  display:block;
  width:100%;
  aspect-ratio:4/5;          /* klucz: stałe proporcje kart */
  overflow:hidden;
}

/* 2) Sam obraz – zawsze wypełnia (bez rozciągania geometrii) */
.cards-recipes .wp-block-image img,
.cards-recipes figure > img,
.cards-recipes .wp-block-cover img,
.cards-recipes .wp-block-cover__image-background,
.cards-recipes .ct-image-container img,
.cards-recipes a:has(img) > img {
  width:100%;
  height:100% !important;    /* nadpisz „height:auto” z bloków */
  object-fit:cover;
  display:block;
}

/* 3) Specjalnie: gdy w kartach pojawi się skeleton – też trzymaj 4/5 */
.cards-recipes .matcha-skeleton { aspect-ratio:4/5; }

/* 4) Typowe klasy Gutenberga, które potrafią mieszać w wymiarach */
.cards-recipes .wp-block-image.is-resized img { height:100% !important; object-fit:cover; }
.cards-recipes .wp-block-cover__inner-container { height:100%; }

/* PRM: overlay stays visible (no motion). Do NOT hide it with static
   opacity/visibility — iOS “Reduce Motion” matches this query and the
   overlay would never paint. Do NOT hide it with a forwards animation:
   sm-base.css crushes animation-duration on `*` to 0.01ms !important,
   and WebKit can stick on the first (visible) frame.
   Dismissal is unchanged: noscript, inline setTimeout(2000) → .loaded,
   and preloader.js → .loaded. */
@media (prefers-reduced-motion: reduce){
  #matcha-preloader{
    opacity:1;
    visibility:visible;
  }
  #matcha-preloader.loaded{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .matcha-spinner svg{ animation:none; }
  .matcha-skeleton::after{ animation:none; }
}