/* ============================================================
   Digital MQR — Solutions (Agent B)
   Adds the per-solution single-post frame (.sol-hero2, .prodgrid)
   and the canonical solution card (.sol-cardx) exactly as in the
   approved mockup (solution-*.html / solutions.html). Loaded AFTER
   brand.css so the card matches the mockup 1:1 across Home, the
   Solutions hub and Related. Does not modify Agent A's files.
   ============================================================ */

/* ---- canonical solution card (cover image + circular avatar) ---- */
.sol-cardx{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
.sol-cardx:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
/* gradient cov doubles as graceful fallback if a cover image is missing */
.sol-cardx .cov{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#50208F,#363996 55%,#7090E0)}
.sol-cardx .cov::before{content:none}
.sol-cardx .cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s}
.sol-cardx:hover .cov img{transform:scale(1.06)}
.sol-cardx .cov .bigicon{position:absolute;inset:0;z-index:0;display:grid;place-items:center;color:rgba(255,255,255,.9)}
.sol-cardx .cov .bigicon svg{width:60px;height:60px}
.sol-cardx .ava{position:absolute;bottom:0;inset-inline-start:20px;transform:translateY(50%);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#50208F,#7090E0);border:3px solid #fff;box-shadow:0 6px 16px rgba(80,32,143,.3);z-index:2;animation:none}
.sol-cardx .ava svg{width:28px;height:28px;color:#fff}
.sol-cardx .bd{padding:38px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.sol-cardx h3{font-size:1.05rem}
.sol-cardx p{font-size:.85rem;color:var(--slate);flex:1}
.sol-cardx .badge2{align-self:flex-start;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);background:var(--soft);border:1px solid var(--line);padding:3px 10px;border-radius:999px}
.sol-cardx .read{color:var(--violet);font-weight:600;font-size:.85rem}
[dir="rtl"] .sol-cardx .ava{animation:none}

/* ---- single-solution hero (cover photo) ---- */
.sol-hero2{position:relative;overflow:hidden;color:#fff;min-height:460px;display:flex;align-items:flex-end}
.sol-hero2 .ph{position:absolute;inset:0}
.sol-hero2 .ph img{width:100%;height:100%;object-fit:cover}
.sol-hero2 .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,31,.35),rgba(15,10,31,.5) 50%,rgba(28,18,48,.93))}
.sol-hero2 .ph.grad{background:linear-gradient(135deg,#1a1040,#2d1b69 55%,#363996)}
.sol-hero2 .container{position:relative;z-index:2;padding:120px 24px 44px}
.sol-hero2 .crumb{font-size:.84rem;color:rgba(255,255,255,.82);margin-bottom:12px}
.sol-hero2 .crumb a:hover{color:#fff;text-decoration:underline}
.sol-hero2 h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3.2rem);max-width:18ch;margin:8px 0 12px}
.sol-hero2 .chips{display:flex;gap:8px;flex-wrap:wrap}
.sol-hero2 .chips .chip{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35)}
.sol-hero2 .seg-badge{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;padding:5px 12px;border-radius:999px;margin-bottom:8px}

/* ---- product gallery grid (lightbox via main.js data-gallery) ---- */
.prodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}
.prodgrid a{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--soft);cursor:pointer}
.prodgrid img{width:100%;height:100%;object-fit:cover;transition:.4s}
.prodgrid a:hover img{transform:scale(1.07)}
@media(max-width:760px){.prodgrid{grid-template-columns:repeat(2,1fr)}}

/* the solution body lead paragraph (in case brand.css base is overridden) */
.sol-body .lead-x{font-size:1.18rem;line-height:1.8;color:var(--ink);margin-bottom:8px}