/* =========================================================
   القرية — Alqariah  |  products.css  (products.html only)
   Products grid + flip cards.
   Loaded after base.css.
   ========================================================= */

/* =========================================================
   Products
   ========================================================= */
.products{max-width:1260px;margin:0 auto;padding:120px 24px 90px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px}
.product-card{perspective:1500px;height:430px;opacity:0;transform:translateY(34px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.product-card.in-view{opacity:1;transform:none}
.pc-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.product-card.is-flipped .pc-inner{transform:rotateY(180deg)}
/* the hidden face is invisible but still catches the mouse — it sits on top
   of the visible one and steals hovers/clicks from the flip button */
.product-card:not(.is-flipped) .pc-back{pointer-events:none}
.product-card.is-flipped .pc-front{pointer-events:none}

.pc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
/* the card height is fixed so both faces match (the back holds six nutrition
   rows), so the front usually has spare room. centre the whole stack instead
   of stretching it top-to-bottom — "safe" falls back to top alignment when a
   long name overflows, so nothing gets clipped off the top edge */
.pc-front{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);
  align-items:center;text-align:center;isolation:isolate;
  justify-content:safe center;gap:2px}
.pc-front::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:7px;z-index:1;
  background:var(--wave,var(--green))}
/* wavy colored footer on the underside of the card */
.pc-front::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:46px;z-index:-1;
  background:var(--wave,var(--green));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 15 C20 5 40 5 60 15 C80 25 100 25 120 15 L120 30 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center bottom/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 15 C20 5 40 5 60 15 C80 25 100 25 120 15 L120 30 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center bottom/100% 100%}
/* subtle pop on hover (mouse only — sticks after a tap on touch screens).
   no scale() here: fractional scaling re-rasterizes the text and blurs it */
@media(hover:hover){
  .product-card:hover .pc-front{transform:translateY(-6px);box-shadow:var(--shadow)}
}
.pc-img{width:100%;aspect-ratio:1;border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden;
  display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 50% 35%,var(--sky),#fff)}
.pc-img img{width:84%;height:84%;object-fit:contain}
.pc-img__ph{color:var(--muted);font-weight:700;opacity:.6;font-size:.9rem}
.pc-img.is-empty .pc-img__ph{display:block}
.pc-img:not(.is-empty) .pc-img__ph{display:none}
.pc-name{font-size:1.3rem;font-weight:800;color:var(--navy)}
.pc-tag{color:var(--muted);font-size:.92rem;margin:2px 0 0}
.pc-flip-btn{margin-top:14px;display:inline-flex;align-items:center;gap:.5em;
  background:var(--sky);color:var(--blue);font-weight:800;padding:.7em 1.3em;border-radius:999px;transition:.25s}
@media(hover:hover){
  .pc-flip-btn:hover{background:var(--blue);color:#fff}
}

.pc-back{transform:rotateY(180deg);color:#fff;
  background:linear-gradient(155deg,var(--blue),var(--teal))}
.pc-back::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:7px;background:var(--orange)}
.pc-back__title{font-size:.8rem;font-weight:800;color:#d6f0b6;letter-spacing:.05em}
.pc-back__name{font-size:1.25rem;margin:2px 0 14px}
.pc-nutri{display:flex;flex-direction:column;margin-bottom:auto}
.pc-nutri li{display:flex;justify-content:space-between;padding:.5em 0;font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.18)}
.pc-nutri b{font-weight:800}
.pc-flip-btn--back{background:rgba(255,255,255,.18);color:#fff;align-self:center}
@media(hover:hover){
  .pc-flip-btn--back:hover{background:#fff;color:var(--blue)}
}

/* phones: two cards per row, everything scaled down so both faces fit */
@media(max-width:640px){
  /* tighter vertical rhythm on phones — the top padding still has to clear the
     fixed nav (~78px tall), the rest is just breathing room */
  .products{padding:92px 14px 46px}
  .products .head{margin-bottom:26px}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .product-card{height:380px}
  .pc-face{padding:14px}
  .pc-front{gap:6px}
  .pc-img{max-height:160px;margin-bottom:10px}
  .pc-name{font-size:1.02rem}
  .pc-tag{font-size:.78rem}
  .pc-flip-btn{font-size:.78rem;padding:.55em .8em;gap:.35em;max-width:100%;margin-bottom:12px}
  .pc-flip-btn svg{width:13px;height:13px}
  .pc-back__title{font-size:.68rem}
  .pc-back__name{font-size:1rem;margin:2px 0 8px}
  .pc-nutri li{font-size:.76rem;padding:.42em 0}
}