/* hn2-product-recipes.css — "מתכונים עם המוצר הזה" on product pages.
   Reuses the .hn2p-rel / .hn2p-rc card design from p3-product.css; only the
   differences for recipe photos live here. */

/* warm cream = the design system's recipe-area colour, so the section reads
   as different from "מוצרים נבחרים" right below it */
.hn2p-rel.hn2pr{background:#FCFAF4;}

@media (min-width:1025px){
  .hn2pr .hn2pr__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* food photos, not packshots: wider frame, cropped to fill */
.hn2pr .hn2p-rc__media{aspect-ratio:4 / 3;overflow:hidden;}
.hn2pr .hn2p-rc__media img{width:100%;height:100%;object-fit:cover;display:block;}

/* collapsed: only the first four; JS reveals the rest */
.hn2pr .hn2pr__grid.is-collapsed .hn2pr-extra{display:none;}

@keyframes hn2prIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hn2pr .hn2pr-extra.is-in{animation:hn2prIn .5s cubic-bezier(.23,1,.32,1) var(--d,0ms) both;}

.hn2pr .hn2pr-more{margin:22px 0 0;display:flex;flex-direction:column;align-items:center;gap:10px;}
.hn2pr .hn2pr-toggle,
.hn2pr .hn2pr-toggle:hover,
.hn2pr .hn2pr-toggle:focus{
  display:inline-flex;align-items:center;gap:10px;margin:0;cursor:pointer;
  font:inherit;font-size:15px;font-weight:700;line-height:1.2;
  color:#22346A;background:#fff;border:1.5px solid #22346A;border-radius:10px;
  padding:11px 20px;box-shadow:none;min-height:0;
  transition:background .2s,color .2s,transform .12s;
}
.hn2pr .hn2pr-toggle:hover{background:#22346A;color:#fff;}
.hn2pr .hn2pr-toggle[hidden]{display:none;}
.hn2pr .hn2pr-toggle:active{transform:scale(.97);}
.hn2pr .hn2pr-toggle:focus-visible{outline:2px solid #D71F36;outline-offset:3px;}
.hn2pr .hn2pr-toggle__i{
  width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s cubic-bezier(.23,1,.32,1);
}
.hn2pr .hn2pr-toggle[aria-expanded="true"] .hn2pr-toggle__i{transform:translateY(2px) rotate(-135deg);}
.hn2pr .hn2pr-all{font-size:14px;color:#D71F36;font-weight:700;text-decoration:none;}
.hn2pr .hn2pr-all:hover,
.hn2pr .hn2pr-all:focus-visible{text-decoration:underline;}

@media (prefers-reduced-motion: reduce){
  .hn2pr .hn2pr-extra.is-in{animation:none;}
  .hn2pr .hn2pr-toggle,.hn2pr .hn2pr-toggle__i{transition:none;}
}