/* =====================================================================
   Product Card component (Figma 1139:20729)
   ---------------------------------------------------------------------
   Reusable feature/product card used to showcase a single Stur capability.
   17 variations live in /storybook/product-cards.html.

   Structure:
     <article class="pcard pcard--<slug>">
       <div class="pcard-visual" aria-hidden="true"></div>   ← image area
       <h3 class="pcard-title">Title</h3>
       <p class="pcard-desc">Description.</p>
       <a class="pcard-cta" href="#">CTA<svg class="pcard-arrow"></svg></a>
     </article>

   The visual area is a 574×573 (16:16 aspect) #f6f8fa rounded box. Per
   variation, drop a PNG into /assets/cards/<slug>.png and the
   .pcard--<slug> .pcard-visual rule below will use it as the bg image.
   ===================================================================== */

.pcard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 25px;
  width: 100%;
  max-width: 574px;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

/* ── Visual area ───────────────────────────────────────────────────── */
.pcard-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 574 / 573;
  background-color: #f6f8fa;
  border-radius: 40px;
  overflow: hidden;
  flex-shrink: 0;
}
/* Reference: Figma 1133:19748 / 1216:12563 (mockup inside a 574x573
   frame). 106px gutter on the left + 106px on the right leaves a
   362px (≈63% of frame width) centered area for the mockup. 82px
   gutter on the top positions the device screen header below a band
   of gray; the device body extends past the bottom and is clipped
   by the parent's overflow:hidden.

   We use a positioned ::before so `top: 14.31%` (82/573) is a true
   offset from the top edge — `background-position` percentages are
   computed as percent × (container − image), which gives the wrong
   answer for images taller than the container. */
.pcard-visual::before {
  content: "";
  position: absolute;
  top: 14.31%;            /* 82 / 573 */
  left: 18.47%;           /* 106 / 574 */
  right: 18.47%;
  aspect-ratio: var(--pcard-img-ratio, 915 / 1900);
  background-image: var(--pcard-img);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ── Body (title + desc + cta) ─────────────────────────────────────── */
.pcard-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pcard-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pcard-title {
  font-size: var(--fs-h1);
  line-height: 36px;
  letter-spacing: -0.56px;
  font-weight: 600;
  color: #000000;
  margin: 0;
}
.pcard-desc {
  font-size: var(--fs-h4);
  line-height: 27px;
  font-weight: 500;
  color: #30313d;
  margin: 0;
}

/* ── CTA — gradient text + arrow ───────────────────────────────────── */
.pcard-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.16px;
  text-decoration: none;
  cursor: pointer;
  /* Brand gradient applied to the text itself */
  background-image: linear-gradient(
    rgb(252, 167, 89) 3.12%,
    rgb(232, 45, 86) 17.47%,
    rgb(162, 45, 180) 77.07%,
    rgb(100, 61, 206) 105.24%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: opacity .2s ease;
}
.pcard-cta:hover { opacity: 0.85; }
.pcard-cta-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  /* The arrow itself uses the gradient via a mask of the chevron-right
     SVG so its color matches the text. */
  background: linear-gradient(
    rgb(252, 167, 89) 3.12%,
    rgb(232, 45, 86) 17.47%,
    rgb(162, 45, 180) 77.07%,
    rgb(100, 61, 206) 105.24%
  );
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 3 11 8 6 13'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 3 11 8 6 13'/></svg>") no-repeat center / contain;
}

/* ── Per-variation image bindings ──────────────────────────────────────
   Drop a PNG into /assets/cards/<slug>.png to populate the visual.
   Variations & their target visuals:
     connect-clients     – purple "Customers" panel + contact list
     protect-time        – calendar with timeslots, payment-required
     date-time-booking   – calendar grid + duration picker
     sell-online         – pink-sweater shopper + payment / language flags
     social-automation   – chat overlay (Instagram/WhatsApp)
     storefront          – website screenshot (TUCKERNUCK-style)
     product-catalog     – purple "Products" panel with item rows
     invoice             – invoice screenshot + Pay / Visa
     reviews             – purple "Reviews" panel + review cards
     order-dashboard     – purple "Orders" panel + order rows
     delivery-fee        – purple "Shipping" panel + delivery rows
     staff-management    – purple "Staff Management" panel + staff list
     custom-domain       – purple "Domain" panel + customise domain UI
     digital-products    – ebook / file delivery mockup
     calendar-mgmt       – month-view calendar
     whatsapp-noti       – ready-store WhatsApp message preview
     agentic-store       – branded storefront mockup
============================================================================ */
/* Per-card image. Each card sets its own --pcard-img and (when the
   asset is not the default ~915×1900 phone aspect) --pcard-img-ratio
   so the ::before pseudo on .pcard-visual sizes the image correctly.
   Default ratio (915/1900) is set on .pcard-visual::before above.

   Storefront and agentic-store are the only two exceptions: their
   mockups in Figma are wider than the 574 frame and intentionally
   overflow, so they override the inset positioning. */
.pcard--connect-clients   .pcard-visual { --pcard-img: url("/assets/cards/connect-clients.png"); }
.pcard--sell-online       .pcard-visual { --pcard-img: url("/assets/cards/sell-online.png");       --pcard-img-ratio: 856/900; }
.pcard--social-automation .pcard-visual { --pcard-img: url("/assets/cards/social-automation.png"); --pcard-img-ratio: 1248/1935; }
.pcard--product-catalog   .pcard-visual { --pcard-img: url("/assets/cards/product-catalog.png"); }
/* Invoice mockup uses tighter side gutters (77px vs 106px) and a
   slightly deeper top inset (85px vs 82px) per Figma 1133:19859. */
.pcard--invoice .pcard-visual {
  --pcard-img: url("/assets/cards/invoice.png");
  --pcard-img-ratio: 934/1148;
}
.pcard--invoice .pcard-visual::before {
  top: 14.84%;            /* 85 / 573 */
  left: 13.41%;           /* 77 / 574 */
  right: 13.41%;
}
.pcard--reviews           .pcard-visual { --pcard-img: url("/assets/cards/reviews.png"); }
.pcard--order-dashboard   .pcard-visual { --pcard-img: url("/assets/cards/order-dashboard.png"); }
.pcard--delivery-fee      .pcard-visual { --pcard-img: url("/assets/cards/delivery-fee.png"); }
.pcard--staff-management  .pcard-visual { --pcard-img: url("/assets/cards/staff-management.png"); }
.pcard--custom-domain     .pcard-visual { --pcard-img: url("/assets/cards/custom-domain.png"); }
.pcard--digital-products  .pcard-visual { --pcard-img: url("/assets/cards/digital-product.png"); --pcard-img-ratio: 1173/2511; }
/* Per Figma 1220:26629 the digital-products mockup sits 65px from
   the top (vs the default 82px) — slightly higher in the frame. */
.pcard--digital-products .pcard-visual::before { top: 11.34%; }
.pcard--calendar-mgmt     .pcard-visual { --pcard-img: url("/assets/cards/calendar-mgmt.png");     --pcard-img-ratio: 917/1900; }
.pcard--whatsapp-noti     .pcard-visual { --pcard-img: url("/assets/cards/whatsapp-automation.png"); --pcard-img-ratio: 1084/2373; }

/* Protect-your-time / Date & Time booking use the same Book Appointment
   calendar widget (Figma 1138:20482). Per Figma the card has 40px side
   gutters and a ~52px top inset; the widget fills the remaining area.
   Image ratio 1369×1103 (≈1.241) is wider than tall, so the widget is
   centered vertically inside the 40px-gutter inner box. */
.pcard--protect-time .pcard-visual,
.pcard--date-time-booking .pcard-visual {
  --pcard-img-ratio: 1369/1103;
}
.pcard--protect-time .pcard-visual { --pcard-img: url("/assets/cards/protect-time.png"); }
.pcard--date-time-booking .pcard-visual { --pcard-img: url("/assets/cards/date-time-booking.png"); }
.pcard--protect-time .pcard-visual::before,
.pcard--date-time-booking .pcard-visual::before {
  top: 50%;
  left: 6.97%;            /* 40 / 574 */
  right: 6.97%;
  transform: translateY(-50%);
}

/* Storefront mockup per Figma 1133:19762: image is 779×714 inside a
   574×573 frame at (x=70, y=68), so it overflows the right edge by
   275px (47.91%). The storefront UI starts at 12.20% from the left
   and 11.87% from the top. */
.pcard--storefront .pcard-visual {
  --pcard-img: url("/assets/cards/storefront.png");
  --pcard-img-ratio: 779/714;
}
.pcard--storefront .pcard-visual::before {
  top: 11.87%;            /* 68 / 573 */
  left: 12.20%;           /* 70 / 574 */
  right: -47.91%;         /* -275 / 574, overflows the right edge */
}

/* Agentic-store mockup per Figma 1143:21497: image is 596×377 in a
   574×573 frame, anchored to the right edge with a 71px gutter, and
   overflows the left edge by 93px. Vertically centered with 98px
   inset top and bottom. */
.pcard--agentic-store .pcard-visual {
  --pcard-img: url("/assets/cards/agentic-store.png");
  --pcard-img-ratio: 1148/726;
}
.pcard--agentic-store .pcard-visual::before {
  top: 17.10%;            /* 98 / 573 */
  left: -16.20%;          /* -93 / 574, overflows the left edge */
  right: 12.37%;          /* 71 / 574 */
}

/* ── Mobile breakpoint ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  .pcard { gap: 20px; max-width: 100%; }
  .pcard-visual { border-radius: 28px; }
  .pcard-title { font-size: 22px; line-height: 28px; letter-spacing: -0.4px; }
  .pcard-desc  { font-size: 16px; line-height: 24px; }
  .pcard-cta   { font-size: 15px; line-height: 22px; }
}