/* ==========================================================================
   Tahoorestan — the blog family
   --------------------------------------------------------------------------
   Loaded only by /blog/, /blog/category/<slug>/ and the post pages, the same
   way content-pages.css is a layer for /about/ and /contact/ rather than a
   section of styles.css — which every page already pays 150KB for.

   No new vocabulary.  Colour, radius, shadow and the hover language are the
   tokens styles.css defines (--green / --gold / --pale / --r-* / --card-lift
   / --card-sh); the hero is .phero with a modifier, the closing band is
   .pcta, headings are .sec__h + .swash, chips are .pill, and an article's
   body is built entirely from the guide family's own components — .blk,
   .prose, .steps, .note, .tblw, .split, .kpis, .tl and .faq.  That is what
   makes a post look like the rest of the site rather than like a blog bolted
   onto it, and it is also why the motion layer covers the blog for free:
   fx.js already marks every one of those selectors.

   What is genuinely new here is only the chrome a magazine needs and no other
   page family has: the card, the grid, the filter bar, the sidebar, the
   article's two-column reading layout and its sticky contents.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   1. the hero
   ══════════════════════════════════════════════════════════════════════════ */

/* The index hero carries a search field and three figures, so it needs more
   room than the guide family's; the post hero splits into copy + artwork. */
.phero--blog{padding-block:46px 78px}


/* ══════════════════════════════════════════════════════════════════════════
   2. the featured post
   --------------------------------------------------------------------------
   A split card that rides up over the hero's lower edge, so the first screen
   ends on the article rather than on a band of green.  The gold rule the hero
   closes with runs behind it, which is what stops the overlap reading as an
   accident.
   ══════════════════════════════════════════════════════════════════════════ */

.bfeat{
  position:relative;z-index:2;
  width:min(var(--cw),100% - 48px);margin:-46px auto 0;
}
.bfeat__c{
  display:grid;grid-template-columns:minmax(0,1fr) 46%;align-items:stretch;
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 26px 60px rgba(30,55,10,.16);
  transition:transform .3s cubic-bezier(.33,.9,.32,1),box-shadow .3s;
}
.bfeat__c:hover{transform:translateY(-4px);box-shadow:0 34px 72px rgba(30,55,10,.2)}
.bfeat__b{padding:40px 44px;display:flex;flex-direction:column;justify-content:center}
.bfeat__flag{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  height:29px;padding:0 13px;border-radius:999px;
  background:linear-gradient(100deg,var(--gold),var(--gold-d));color:#4a3600;
  font-size:11.8px;font-weight:800;
}
.bfeat__flag .ic{width:14px;height:14px;stroke-width:2}
.bfeat__t{
  margin-top:15px;font-family:var(--font-head);font-size:27px;font-weight:800;
  color:var(--ink);line-height:1.65;
}
.bfeat__t a{transition:color .18s}
.bfeat__c:hover .bfeat__t a,.bfeat__t a:hover{color:var(--green-dd)}
.bfeat__x{margin-top:12px;max-width:52ch;font-size:15px;line-height:2.05;color:var(--body)}
.bfeat__f{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.bfeat__go{
  display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:6px 24px;
  border-radius:var(--r-md);background:var(--green);color:#fff;
  font-size:14.8px;font-weight:700;line-height:1.45;transition:background .2s,transform .2s,box-shadow .2s;
}
.bfeat__go .ic{width:17px;height:17px;transition:translate .2s}
.bfeat__go:hover{background:var(--green-d);transform:translateY(var(--btn-lift));box-shadow:var(--lit-sh)}
.bfeat__go:hover .ic{translate:-4px 0}
.bfeat__fig{position:relative;overflow:hidden;background:var(--pale);min-height:288px}
.bfeat__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.33,.9,.32,1);
}
.bfeat__c:hover .bfeat__img{transform:scale(1.035)}
/* A thin gold seam where the picture meets the copy: the same rule the hero
   closes with, so the split reads as one plate rather than two panels. */
.bfeat__fig::after{
  content:"";position:absolute;inset-block:0;inset-inline-end:0;width:3px;
  background:linear-gradient(var(--gold),var(--green));pointer-events:none;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. meta rows — one definition, used by every card and both heroes
   ══════════════════════════════════════════════════════════════════════════ */

.bmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  font-size:12.4px;font-weight:600;color:var(--muted);
}
.bmeta li,.bmeta span{display:inline-flex;align-items:center;gap:6px}
.bmeta .ic{width:15px;height:15px;color:#b4b4b4;flex:none}
.bmeta--light{color:rgba(255,255,255,.76);font-size:13px}
.bmeta--light .ic{color:var(--gold)}

/* ══════════════════════════════════════════════════════════════════════════
   4. the two-column body and the filter bar
   ══════════════════════════════════════════════════════════════════════════ */

.bwrap{
  width:min(var(--cw),100% - 48px);margin:62px auto 0;
  display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:40px;align-items:start;
}
.bmain{min-width:0}

/* Sticky, and it stops under the condensed header — the same offset the
   guide family's nav uses, so two sticky columns never disagree. */
.bbar{
  position:sticky;top:calc(var(--hh-c) + 10px);z-index:12;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:11px 14px;margin-bottom:24px;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(40,60,20,.06);
}
.bbar__end{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
/* The controls that sit in this bar — the chip rail, the result count and the
   sort select — are in assets/css/listing.css, which the shop's own bar
   (.sbar) reuses.  Only the bar itself is blog-specific. */


/* ══════════════════════════════════════════════════════════════════════════
   5. the post card
   --------------------------------------------------------------------------
   Deliberately not .bcard: that one is measured against the design export on
   the homepage and its artwork carries the export's baked-in glyphs.  This is
   the same idea redrawn for a page that has room for it.
   ══════════════════════════════════════════════════════════════════════════ */

.bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.bpost{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.bpost:hover{transform:translateY(var(--card-lift));box-shadow:var(--card-sh);border-color:#fff}
.bpost[hidden]{display:none}
.bpost__fig{position:relative;display:block;overflow:hidden;background:var(--pale)}
.bpost__img{
  width:100%;aspect-ratio:660/380;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.33,.9,.32,1);
}
.bpost:hover .bpost__img{transform:scale(1.04)}
.bpost__cat{position:absolute;top:13px;inset-inline-start:13px;z-index:1}
.bpost__b{display:flex;flex-direction:column;flex:1;padding:18px 20px 17px}
.bpost__t{font-size:16.4px;font-weight:800;color:var(--ink);line-height:1.8}
.bpost__t a{transition:color .18s}
.bpost:hover .bpost__t a,.bpost__t a:hover{color:var(--green-dd)}
.bpost__x{margin-top:8px;font-size:13.6px;line-height:2;color:var(--body)}
.bpost__f{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:16px;
}
.bpost__go{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  height:34px;padding:0 13px;border-radius:999px;
  background:var(--pale);color:var(--green-dd);font-size:12.4px;font-weight:800;
  transition:background .2s,color .2s;
}
.bpost__go .ic{width:14px;height:14px;transition:translate .2s}
.bpost:hover .bpost__go{background:var(--green);color:#fff}
.bpost:hover .bpost__go .ic{translate:-3px 0}

/* Moved to assets/css/listing.css — the shop’s listing needs the same
   control and one copy is better than two.  Both families load that file
   before this one. */

/* ══════════════════════════════════════════════════════════════════════════
   6. the sidebar
   ══════════════════════════════════════════════════════════════════════════ */

.bside{display:grid;gap:18px;position:sticky;top:calc(var(--hh-c) + 18px)}
.sbox{
  padding:20px 20px 18px;border:1px solid var(--line);border-radius:var(--r-card);
  background:#fff;
}
.sbox__h{
  display:flex;align-items:center;gap:9px;
  font-size:15.4px;font-weight:800;color:var(--ink);line-height:1.7;
}
.sbox__h .ic{width:19px;height:19px;color:var(--green)}

/* category rows, with their counts */
.scats{margin-top:13px;display:grid;gap:2px}
.scats a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);
  font-size:13.6px;font-weight:700;color:#5d5d5d;transition:background .18s,color .18s;
}
.scats__i{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--pale);color:var(--green-dd);transition:.18s;
}
.scats__i .ic{width:17px;height:17px}
.scats__n{flex:1;min-width:0}
.scats b{
  flex:none;min-width:22px;height:21px;padding:0 6px;border-radius:999px;
  background:#f3f3f3;color:#9a9a9a;font-size:11.4px;font-weight:800;
  display:grid;place-items:center;transition:.18s;
}
.scats a:hover{background:#fafcf7;color:var(--ink2)}
.scats a:hover .scats__i{background:var(--green);color:#fff}
.scats a:hover b{background:var(--pale);color:var(--green-dd)}
.scats a.is-on{background:var(--pale);color:var(--green-dd)}
.scats a.is-on .scats__i{background:var(--green);color:#fff}

/* the most-read column: numbered, no artwork — it is a list, not a second grid */
.slist{margin-top:13px;display:grid;gap:3px}
.slist a{
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;
  padding:10px;border-radius:var(--r-sm);transition:background .18s;
}
.slist a:hover{background:#fafcf7}
.slist__n{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:#f6f8f3;color:#b7c9a6;font-size:14px;font-weight:900;
  font-family:var(--font-body);transition:.18s;
}
.slist a:hover .slist__n{background:var(--green);color:#fff}
.slist__t{display:block;font-size:13.4px;font-weight:700;color:#4a4a4a;line-height:1.85;transition:color .18s}
.slist a:hover .slist__t{color:var(--green-dd)}
.slist__m{display:block;margin-top:3px;font-size:11.6px;font-weight:600;color:var(--muted)}

/* the newsletter card — the one gold surface in the column */
.snews{
  position:relative;overflow:hidden;padding:22px 20px 20px;
  border:1px solid #f0e2b7;border-radius:var(--r-card);
  background:linear-gradient(165deg,#fffdf4,#fdf6e2);
}
.snews::before{
  content:"";position:absolute;inset-inline-end:-38px;top:-38px;
  width:132px;height:132px;border-radius:50%;background:rgba(241,183,9,.12);
}
.snews__i{
  position:relative;display:grid;place-items:center;width:44px;height:44px;
  border-radius:13px;background:var(--gold);color:#4a3600;
}
.snews__i .ic{width:23px;height:23px;stroke-width:1.8}
.snews__t{position:relative;margin-top:14px;font-size:16px;font-weight:800;color:var(--ink);line-height:1.7}
.snews__x{position:relative;margin-top:6px;font-size:13px;line-height:1.95;color:#7a6a3e}
.snews__f{position:relative;margin-top:14px}
.snews__row{display:flex;gap:8px}
.snews__in{
  flex:1;min-width:0;height:46px;padding-inline:14px;
  border:1px solid #ecdcae;border-radius:var(--r-sm);background:#fff;
  font-size:13.4px;color:var(--ink2);
}
.snews__in::placeholder{color:#b8ab84}
.snews__in:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(241,183,9,.22)}
.snews__b{
  flex:none;height:46px;padding:0 18px;white-space:nowrap;border-radius:var(--r-sm);
  background:var(--green);color:#fff;font-size:13.4px;font-weight:700;
  transition:background .2s;
}
.snews__b:hover{background:var(--green-d)}
.snews__msg{margin-top:9px;font-size:12.2px;font-weight:600;line-height:1.8;color:var(--green-dd)}
.snews__msg.is-bad{color:#cf5a51}
.snews__note{position:relative;margin-top:10px;font-size:11.4px;line-height:1.8;color:#a3936a}
.snews.is-bad .snews__in{border-color:#e0736b;box-shadow:0 0 0 3px rgba(224,115,107,.14)}

/* the shop card — the column's one route back to the catalogue */
.sshop{
  position:relative;overflow:hidden;padding:20px;border-radius:var(--r-card);
  background:var(--green) url(../images/pattern-green.png) center/300px auto repeat;
  color:#fff;
}
.sshop__t{font-family:var(--font-head);font-size:17px;font-weight:800;line-height:1.7}
.sshop__x{margin-top:7px;font-size:12.8px;line-height:1.95;color:rgba(255,255,255,.85)}
.sshop__b{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 18px;margin-top:15px;
  border-radius:var(--r-md);background:#fff;color:var(--green-dd);
  font-size:13.4px;font-weight:700;line-height:1.45;transition:transform .2s,box-shadow .2s;
}
.sshop__b .ic{width:15px;height:15px;transition:translate .2s}
.sshop__b:hover{transform:translateY(var(--btn-lift));box-shadow:0 12px 26px rgba(0,0,0,.16)}
.sshop__b:hover .ic{translate:-3px 0}
.sshop__img{
  position:absolute;inset-inline-end:-20px;bottom:-8px;width:96px;
  opacity:.8;pointer-events:none;
}

/* tags */
.stags{margin-top:13px}


/* ══════════════════════════════════════════════════════════════════════════
   7. the category band
   ══════════════════════════════════════════════════════════════════════════ */

.bcats{width:min(var(--cw),100% - 48px);margin:88px auto 0}
.bcats__g{margin-top:34px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.bcats__c{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-card);background:#fff;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.bcats__c:hover{transform:translateY(var(--card-lift));box-shadow:var(--card-sh);border-color:#fff}
.bcats__f{position:relative;display:block;overflow:hidden;background:var(--pale)}
.bcats__f img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .45s cubic-bezier(.33,.9,.32,1)}
.bcats__c:hover .bcats__f img{transform:scale(1.05)}
.bcats__i{
  position:absolute;bottom:-17px;inset-inline-start:15px;
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:#fff;color:var(--green-dd);box-shadow:0 6px 16px rgba(30,55,10,.16);
  transition:background .2s,color .2s;
}
.bcats__i .ic{width:20px;height:20px}
.bcats__c:hover .bcats__i{background:var(--green);color:#fff}
.bcats__b{padding:26px 16px 16px;display:flex;flex-direction:column;flex:1}
.bcats__t{display:block;font-size:15.2px;font-weight:800;color:var(--ink);line-height:1.7}
.bcats__x{display:block;margin-top:6px;font-size:12.6px;line-height:1.95;color:var(--body)}
.bcats__n{
  margin-top:auto;padding-top:13px;font-size:12px;font-weight:700;color:var(--green-dd);
  display:flex;align-items:center;gap:6px;
}
.bcats__n .ic{width:13px;height:13px;transition:translate .2s}
.bcats__c:hover .bcats__n .ic{translate:-3px 0}


/* ══════════════════════════════════════════════════════════════════════════
   8. the article hero
   ══════════════════════════════════════════════════════════════════════════ */

.phero--post{padding-block:38px 46px;overflow:visible}
.phero--post .phero__in{text-align:start}
.phero--post .crumbs--green .crumbs__l{justify-content:flex-start}
/* the last step is the article's own title, which can be a full sentence:
   it gets one line and an ellipsis rather than wrapping the row */
.phero--post .crumbs__l>li:last-child{
  max-width:min(46ch,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
}

.pohead{
  display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:center;
  margin-top:20px;
}
.pohead__t{
  margin-top:14px;font-family:var(--font-head);font-size:33px;font-weight:800;
  color:#fff;line-height:1.6;
}
.pohead__x{
  margin-top:13px;max-width:62ch;font-size:15.4px;line-height:2.1;
  color:rgba(255,255,255,.88);
}
.pohead__m{margin-top:20px}

/* the artwork, in the shields' own quatrefoil plate — the page family's
   medallion grown up to carry a picture instead of a 36px mark */
.pofig{position:relative;justify-self:center;width:100%;max-width:400px}
.pofig__p{
  position:relative;aspect-ratio:660/424;border-radius:var(--r-lg);overflow:hidden;
  background:#fff;box-shadow:0 26px 54px rgba(10,35,0,.28);
}
.pofig__p img{width:100%;height:100%;object-fit:cover;display:block}
/* the gold arc the rest of the site uses to underline a heading, here as a
   frame offset behind the plate */
.pofig::before{
  content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:var(--r-lg);
  border:2px solid rgba(241,183,9,.55);pointer-events:none;
}
.pofig__orn{
  position:absolute;inset-inline-end:-46px;top:-40px;width:104px;opacity:.3;
  filter:brightness(0) invert(1);pointer-events:none;
}


/* ══════════════════════════════════════════════════════════════════════════
   9. the article body
   ══════════════════════════════════════════════════════════════════════════ */

.art{
  width:min(var(--cw),100% - 48px);margin:46px auto 0;
  display:grid;grid-template-columns:284px minmax(0,1fr);gap:44px;align-items:start;
}
.art__side{position:sticky;top:calc(var(--hh-c) + 18px);display:grid;gap:16px}
.art__main{min-width:0;max-width:790px}

/* reading type: a shade larger than the guide family's, because an article is
   read end to end and a policy page is scanned */
.art__main .prose{max-width:none;font-size:15.4px;line-height:2.15}
.art__main .blk{margin-top:42px}
.art__main .blk:first-of-type{margin-top:26px}
.art__main .blk__h{font-size:22.5px}
.art__main .note{max-width:none}

/* ── «در یک نگاه» ── */
.akeys{
  position:relative;padding:22px 24px 20px;overflow:hidden;
  border:1px solid #e2ecd8;border-radius:var(--r-card);
  background:linear-gradient(165deg,#fbfdf8,#f3f8ee);
}
.akeys::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;
  background:linear-gradient(var(--green),var(--gold));
}
.akeys__h{
  display:flex;align-items:center;gap:9px;
  font-size:15.6px;font-weight:800;color:var(--ink);line-height:1.7;
}
.akeys__h .ic{width:19px;height:19px;color:var(--green)}
.akeys ul{margin-top:13px;display:grid;gap:9px}
.akeys li{
  position:relative;padding-inline-start:26px;
  font-size:14.2px;font-weight:500;line-height:2;color:var(--ink2);
}
.akeys li::before{
  content:"";position:absolute;inset-inline-start:0;top:9px;
  width:14px;height:14px;border-radius:50%;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.6 4.6L19 7.4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.6 4.6L19 7.4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── the contents, in the side column ── */
.atoc{padding:18px 18px 15px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.atoc__h{
  display:flex;align-items:center;gap:9px;padding-bottom:11px;
  border-bottom:1px solid #f1f1f1;
  font-size:14.4px;font-weight:800;color:var(--ink);line-height:1.7;
}
.atoc__h .ic{width:18px;height:18px;color:var(--green)}
.atoc__l{margin-top:9px;display:grid;gap:1px;max-height:52vh;overflow-y:auto}
.atoc__a{
  position:relative;display:block;padding:8px 12px 8px 10px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;line-height:1.85;color:#6d6d6d;
  transition:background .18s,color .18s;
}
.atoc__a::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;
  width:3px;height:0;border-radius:2px;background:var(--green);
  transition:height .22s;
}
.atoc__a:hover{background:#fafcf7;color:var(--ink2)}
.atoc__a.is-on{background:var(--pale);color:var(--green-dd);font-weight:800}
.atoc__a.is-on::before{height:60%}

/* ── share ── */
.ashare{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.ashare__h{font-size:13px;font-weight:700;color:var(--muted);line-height:1.7}
.ashare__l{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.ashare__b{
  position:relative;display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:#6d6d6d;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.ashare__b .ic{width:18px;height:18px}
.ashare__b img{width:19px;height:19px}
.ashare__b:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-2px)}
.ashare__b:hover img{filter:brightness(0) invert(1)}
.ashare__b.is-done{background:var(--green);border-color:var(--green);color:#fff}
/* the tooltip that confirms a copied link */
.ashare__tip{
  position:absolute;bottom:calc(100% + 8px);inset-inline-start:50%;translate:-50% 0;
  padding:5px 10px;border-radius:7px;background:var(--dark);color:#fff;
  font-size:11px;font-weight:700;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s,translate .2s;
}
.ashare__b.is-done .ashare__tip{opacity:1;translate:-50% -3px}

/* the same row, inline under the article, for the widths where the side
   column is gone.  `display` is flipped to flex at 1024 in the block below. */
.ashare--row{display:none;align-items:center;gap:14px;margin-top:32px}
.ashare--row .ashare__l{margin-top:0}

/* ── the products an article is about ── */
.aprod{padding:18px 18px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.aprod__h{
  display:flex;align-items:center;gap:9px;font-size:14.4px;font-weight:800;
  color:var(--ink);line-height:1.7;
}
.aprod__h .ic{width:18px;height:18px;color:var(--green)}
.aprod__l{margin-top:12px;display:grid;gap:4px}
.aprod__a{
  display:grid;grid-template-columns:48px minmax(0,1fr);gap:11px;align-items:center;
  padding:8px;border-radius:var(--r-sm);transition:background .18s;
}
.aprod__a:hover{background:#fafcf7}
.aprod__f{
  display:grid;place-items:center;width:48px;height:48px;border-radius:11px;
  background:var(--pale);overflow:hidden;
}
.aprod__f img{width:40px;height:40px;object-fit:contain;transition:transform .25s}
.aprod__a:hover .aprod__f img{transform:scale(1.08)}
.aprod__t{display:block;font-size:13.2px;font-weight:700;color:#4a4a4a;line-height:1.7;transition:color .18s}
.aprod__a:hover .aprod__t{color:var(--green-dd)}
.aprod__p{display:block;margin-top:2px;font-size:12px;font-weight:800;color:var(--green-dd)}
.aprod__p span{font-size:10.6px;font-weight:600;color:var(--muted)}

/* ── tags under the article ── */
.atags{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:36px;
  padding-top:24px;border-top:1px solid var(--line)}
.atags__h{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted);
}
.atags__h .ic{width:16px;height:16px}
.atags a.pill{transition:background .18s,color .18s,border-color .18s}
.atags a.pill:hover{background:var(--green);border-color:var(--green);color:#fff}

/* ── the desk box ── */
.author{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:start;
  margin-top:26px;padding:22px;border:1px solid var(--line);border-radius:var(--r-card);
  background:#fbfcfa;
}
.author__b{
  display:grid;place-items:center;width:64px;height:70px;
  background:var(--green);color:#fff;clip-path:url(#sh-quatre);
}
.author__b .ic{width:28px;height:28px}
.author__n{font-size:15.6px;font-weight:800;color:var(--ink);line-height:1.7}
.author__r{margin-top:2px;font-size:12.4px;font-weight:600;color:var(--green-dd)}
.author__x{margin-top:9px;font-size:13.6px;line-height:2;color:var(--body)}
.author__m{margin-top:11px}

/* ── the comment form: the review form's own shell ── */
.acom{margin-top:26px;padding:22px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.acom__h{
  display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;
  color:var(--ink);line-height:1.7;
}
.acom__h .ic{width:19px;height:19px;color:var(--green)}
.acom__x{margin-top:6px;font-size:13.2px;line-height:2;color:var(--body)}
.acom__f{margin-top:16px;display:grid;gap:11px}
.acom__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.acom__in,.acom__ta{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fcfcfc;font:500 13.8px/1.9 var(--font-body);color:var(--ink2);
}
.acom__ta{min-height:112px;resize:vertical}
.acom__in::placeholder,.acom__ta::placeholder{color:#a8a8a8;font-weight:400}
.acom__in:focus,.acom__ta:focus{
  outline:0;background:#fff;border-color:var(--ring);box-shadow:0 0 0 3px rgba(140,200,91,.2);
}
.acom__in.is-bad,.acom__ta.is-bad{border-color:#e0736b;box-shadow:0 0 0 3px rgba(224,115,107,.14)}
.acom__end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.acom__b{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:6px 24px;
  border-radius:var(--r-md);background:var(--green);color:#fff;
  font-size:14.2px;font-weight:700;line-height:1.45;transition:background .2s,transform .2s,box-shadow .2s;
}
.acom__b .ic{width:17px;height:17px}
.acom__b:hover{background:var(--green-d);transform:translateY(var(--btn-lift));box-shadow:var(--lit-sh)}
.acom__note{font-size:11.8px;line-height:1.85;color:var(--muted);max-width:44ch}
.acom__msg{margin-top:4px;font-size:12.8px;font-weight:700;line-height:1.9;color:var(--green-dd)}
.acom__msg.is-bad{color:#cf5a51}
.acom__msg[hidden]{display:none}


/* ══════════════════════════════════════════════════════════════════════════
   10. prev / next and the related row
   ══════════════════════════════════════════════════════════════════════════ */

.pnav{
  width:min(var(--cw),100% - 48px);margin:56px auto 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
}
.pnav__a{
  display:flex;flex-direction:column;gap:7px;padding:20px 22px;
  border:1px solid var(--line);border-radius:var(--r-card);background:#fff;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.pnav__a:hover{transform:translateY(var(--card-lift));box-shadow:var(--card-sh);border-color:#fff}
.pnav__k{
  display:inline-flex;align-items:center;gap:8px;font-size:12.2px;font-weight:700;color:var(--muted);
}
.pnav__k .ic{width:15px;height:15px;color:var(--green);transition:translate .2s}
.pnav__t{font-size:15px;font-weight:800;color:var(--ink);line-height:1.8}
.pnav__a:hover .pnav__t{color:var(--green-dd)}
/* «قبلی» points along the reading direction, «بعدی» against it */
.pnav__a--next{text-align:end}
.pnav__a--next .pnav__k{margin-inline-start:auto;flex-direction:row-reverse}
.pnav__a--prev:hover .pnav__k .ic{translate:3px 0}
.pnav__a--next:hover .pnav__k .ic{translate:-3px 0}
.pnav__a--ghost{visibility:hidden}

.brel{width:min(var(--cw),100% - 48px);margin:78px auto 0}
.brel__g{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}


/* ══════════════════════════════════════════════════════════════════════════
   11. responsive
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width:1240px){
  .bwrap{grid-template-columns:minmax(0,1fr) 278px;gap:30px}
  .art{grid-template-columns:250px minmax(0,1fr);gap:32px}
  .bcats__g{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pohead{grid-template-columns:minmax(0,1fr) 330px;gap:34px}
  .pohead__t{font-size:29px}
}

@media (max-width:1024px){
  /* the sidebar stops being a column: at this width it would be a 260px rail
     beside a 400px grid, and neither would have room */
  .bwrap{display:block}
  .bside{position:static;margin-top:44px;grid-template-columns:repeat(2,minmax(0,1fr));
    display:grid;gap:16px;align-items:start}
  .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brel__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brel__g>*:nth-child(3){display:none}
  .bcats__g{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* the article's contents move above the text and lie down */
  .art{display:block}
  .art__side{position:static;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
  .art__main{margin-top:30px;max-width:none}
  .atoc__l{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:2px 14px}
  .ashare{display:none}          /* the inline row under the article takes over */
  .ashare--row{display:flex}
  .aprod{grid-column:1/-1}
  .aprod__l{grid-template-columns:repeat(3,minmax(0,1fr))}

  .bfeat__c:hover,.bpost:hover,.bcats__c:hover,.pnav__a:hover{transform:none;box-shadow:none}
  .bpost:hover{border-color:var(--line)}
  .bfeat__c:hover{box-shadow:0 26px 60px rgba(30,55,10,.16)}
}

@media (max-width:820px){
  .phero--blog{padding-block:22px 64px}
  .bfeat{margin-top:-40px}
  .bfeat__c{grid-template-columns:minmax(0,1fr)}
  .bfeat__fig{order:-1;min-height:0;aspect-ratio:16/8}
  .bfeat__fig::after{display:none}
  .bfeat__b{padding:26px 22px 24px}
  .bfeat__t{font-size:22px}
  .bfeat__x{font-size:14px}
  .bwrap{margin-top:44px}
  .bgrid{grid-template-columns:minmax(0,1fr);gap:18px}
  .bside{grid-template-columns:minmax(0,1fr)}
  .brel__g{grid-template-columns:minmax(0,1fr)}
  .brel__g>*:nth-child(3){display:block}
  .bcats{margin-top:56px}
  .bcats__g{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* the article hero stacks; the plate keeps its own width rather than
     stretching to the full column, where a 660px illustration would dominate */
  .pohead{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:14px}
  .pohead__t{font-size:24px}
  .pohead__x{font-size:14px;line-height:1.95}
  .pofig{max-width:330px;justify-self:start}
  .pofig__orn{display:none}
  .art{margin-top:30px}
  .art__side{grid-template-columns:minmax(0,1fr)}
  .atoc__l{grid-template-columns:minmax(0,1fr)}
  .aprod__l{grid-template-columns:minmax(0,1fr)}
  .art__main .blk__h{font-size:20px}
  .art__main .prose{font-size:14.8px;line-height:2.05}
  .acom__row{grid-template-columns:minmax(0,1fr)}
  .pnav{grid-template-columns:minmax(0,1fr);margin-top:42px}
  .pnav__a--ghost{display:none}
  .pnav__a--next{text-align:start}
  .pnav__a--next .pnav__k{margin-inline-start:0;flex-direction:row}
}

@media (max-width:680px){
  /* the figures, the search field and the chip rail are in listing.css with
     the rules they override */
  /* the bar keeps its chips but gives up the sticky: a wrapped two-row bar
     pinned under the header eats a third of a phone screen */
  .bbar{position:static;padding:10px;gap:9px}
  .bbar__end{width:100%;margin-inline-start:0;justify-content:space-between}
  .bcats__g{grid-template-columns:minmax(0,1fr)}
  .author{grid-template-columns:minmax(0,1fr);gap:14px}
  .author__b{width:52px;height:57px}
  .akeys{padding:18px}
  .acom{padding:18px}
  .ashare--row{flex-wrap:wrap}
}

@media (max-width:520px){
  .bfeat{width:calc(100% - 28px)}
  .bwrap,.bcats,.brel,.art,.pnav{width:calc(100% - 28px)}
  .bpost__b{padding:15px 15px 14px}
  .bpost__t{font-size:15.2px}
  .pohead__t{font-size:21px}
  .pofig{max-width:none}
}

/* the motion layer must never leave a card of this family stranded: every
   selector below is one fx.js marks, and each resets only what it set */
@media (prefers-reduced-motion:reduce){
  .bfeat__c,.bpost,.bcats__c,.pnav__a,.bpost__img,.bfeat__img{transition:none}
}