/* =================================================================
   زیست‌بومِ نازرو — لایهٔ افزودهٔ این سایت.
   Ecosystem-only additions, layered ON TOP of the shared design system
   (styles.css + styles-rtl.css, both taken verbatim from the sister site).
   Nothing here redefines a token; it only adds the few components this
   site needs and that the sister site has no equivalent for.
   ================================================================= */

/* ---------- brand lockup ----------
   The sister site's wordmark is a Latin <img>. Persian type cannot be set
   inside an <img>-referenced SVG (no access to the page font), so the mark
   is inline SVG and the wordmark is real text in Vazirmatn. */
.brand{ gap:10px; }
.brandmark{ width:30px; height:30px; flex:none; display:block; }
.brandword{
  font-family:var(--font-fa, "Vazirmatn", system-ui, sans-serif);
  font-weight:700; font-size:1.02rem; letter-spacing:.01em; color:var(--ink);
  white-space:nowrap;
}
@media (max-width:420px){ .brandword{ font-size:.92rem; } }

/* ---------- افزاره tiles ----------
   Extends .appgrid from the shared system: the sister site's tiles carry a
   two-letter Persian monogram, ours carry the افزاره's own glyph plus its
   Latin name underneath, so the catalogue reads as real inventory. */
.appgrid__ico--emoji{
  background:rgba(118,185,0,.10);
  border:1px solid rgba(118,185,0,.32);
  color:var(--ink);
  font-size:1.25rem; line-height:1;
  font-family:"Vazirmatn","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif;
}
.appgrid__en{
  font-size:.66rem; color:var(--ink-dim); line-height:1.2;
  direction:ltr; unicode-bidi:isolate;
  overflow-wrap:anywhere;
}
.appgrid__tile{ min-height:118px; justify-content:flex-start; }

/* A 400-item catalogue needs tighter columns than the sister site's
   18-tile mock-up, or every category page becomes a mile long. */
.appgrid{ grid-template-columns:repeat(6,1fr); gap:10px; }
@media (max-width:1100px){ .appgrid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:900px){  .appgrid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:680px){  .appgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:420px){  .appgrid{ grid-template-columns:repeat(2,1fr); gap:8px; } }

/* ---------- category chips rail ----------
   Reuses .chip-link from the shared system, but here they are real links
   (the sister site uses them as JS filters), so they need a hover colour. */
.blog__filter .chip-link{ text-decoration:none; }
.blog__filter .chip-link:hover{ border-color:var(--green); color:var(--ink); }

/* ---------- card used as a link ----------
   .card is a <div> on the sister site; on the category index it is an <a>,
   which would otherwise inherit the link colour for its heading. */
a.card{ color:inherit; }
a.card h3{ color:var(--ink); }

/* ---------- selection ----------
   The shared stylesheet disables text selection to deter copying of the
   sister site's proprietary imagery. This site is a public catalogue whose
   whole purpose is to be read and quoted, and it ships no such imagery,
   so selection is restored here. */
body{ -webkit-user-select:text; -moz-user-select:text; user-select:text; }

/* ---------- hero legibility ----------
   The shared .hero__globe is a flex row; in RTL its flex-start is the RIGHT
   edge, so the globe lands nearer the centre than it does on the LTR sister
   site and our (longer) Persian copy ends up sitting on top of the Earth.

   Rather than move the globe — it is the centrepiece and the shared RTL layer
   already places it deliberately — we put a directional scrim behind the text
   column. This is the same technique the shared system already uses for its
   journey stage (.journey__stage::before), applied to the hero. */
.hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(270deg,
    rgba(7,15,36,.94) 0%,
    rgba(7,15,36,.80) 26%,
    rgba(7,15,36,.34) 48%,
    rgba(7,15,36,0)   68%);
}
@media (max-width:860px){
  /* On phones the globe is behind everything, so fade from the bottom up
     instead — a side scrim would leave the lower copy unreadable. */
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(7,15,36,.30) 0%,
      rgba(7,15,36,.66) 38%,
      rgba(7,15,36,.86) 100%);
  }
}

/* ---------- hero on small screens ---------- */
@media (max-width:760px){
  .hero__inner{ padding-top:96px; }
  .hero h1{ font-size:clamp(2rem,8.4vw,2.6rem); }
}

/* ---------- safety net ----------
   No page on this site may scroll sideways. The shared stylesheet sets
   overflow-x:hidden on <body>; belt-and-braces it on the root too, because
   the hero's absolutely-positioned globe is wider than the viewport. */
html{ overflow-x:hidden; max-width:100%; }

/* ---------- inner-page hero headline ----------
   The shared .phero__inner h1 caps at 18ch, which is tuned for English. Persian
   category headings ("هوش مصنوعی — ۱۷ افزاره.") are longer and were breaking
   after the number, stranding the last word on its own line. */
.phero__inner h1{ max-width:24ch; }
@media (max-width:760px){ .phero__inner h1{ max-width:100%; } }