/* ============================================================
     ZAHYA — News single-post page
     Loads after css/style.css — only page-specific rules and
     overrides live here; shared tokens/base/nav/footer/modal/
     cart-drawer styles come from style.css.
     ============================================================ */

  .btn-sm{ padding:.68rem 1.4rem; font-size:.72rem; }

  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }

  /* ---------------- Utility bar ---------------- */
  .utility-bar{ background:var(--band); color:var(--text-soft); font-size:.76rem; letter-spacing:.06em; }
  
  /* ---------------- Breadcrumb ---------------- */
  .breadcrumb{ background:var(--surface); border-bottom:1px solid var(--line-soft); font-size:.78rem; color:var(--text-soft); }
  .breadcrumb .wrap{ display:flex; align-items:center; flex-wrap:wrap; padding-block:1.1rem; }
  .breadcrumb a:hover{ color:var(--maroon); }
  .breadcrumb .sep{ opacity:.5; margin-inline:.5rem; }
  .breadcrumb .current{ color:var(--text); font-weight:600; }

  /* ---------------- Category hero ---------------- */
  .category-hero{ padding-block:clamp(2.6rem,5vw,4rem) clamp(1.6rem,3vw,2rem); background:var(--ground); }
  .category-hero h1{ font-size:clamp(2.3rem,4.2vw,3.3rem); }
  .category-hero p{ color:var(--text-soft); max-width:62ch; margin-top:.9rem; font-size:1.02rem; }
  .category-count{ font-size:.78rem; color:var(--text-soft); margin-top:1.3rem; letter-spacing:.08em; text-transform:uppercase; }

  /* ---------------- Category list ---------------- */
  .category-list{ padding-block:.5rem clamp(4.5rem,8vw,7rem); background:var(--ground); }
  .cat-row{ display:grid; grid-template-columns:260px 1fr; gap:clamp(1.6rem,3.4vw,2.8rem); padding-block:2.3rem; border-bottom:1px solid var(--line); align-items:start; }
  .cat-row:first-child{ padding-top:1.2rem; }
  .cat-row-visual{ aspect-ratio:1/1; border-radius:var(--radius); position:relative; overflow:hidden; display:block; }
  .cat-row-visual .visual-icon svg{ width:36%; height:36%; }
  .cat-row-visual .cat-row-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:var(--radius); transition:transform .5s var(--ease); }
  a.cat-row-visual:hover .cat-row-thumb{ transform:scale(1.045); }
  .cat-row-title-link{ transition:color .25s var(--ease); }
  .cat-row-title-link:hover{ color:var(--maroon); }
  .cat-row-body{ display:flex; flex-direction:column; gap:.8rem; }
  .cat-row-top{ display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
  .cat-row h3{ font-size:1.4rem; }
  .cat-row-rating{ display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text-soft); flex:none; }
  .cat-row-stars{ display:flex; gap:.12rem; color:var(--gold); }
  .cat-row-stars svg{ width:13px; height:13px; }
  .cat-row-brief{ color:var(--text-soft); font-size:.96rem; max-width:62ch; }
  .cat-row-specs{ display:flex; flex-wrap:wrap; gap:.5rem 1.8rem; margin:0; }
  .cat-row-specs .spec-pair{ display:flex; align-items:baseline; gap:.35rem; font-size:.84rem; }
  .cat-row-specs dt{ margin:0; color:var(--text-soft); text-transform:uppercase; letter-spacing:.05em; font-size:.66rem; }
  .cat-row-specs dd{ margin:0; font-weight:600; color:var(--text); }
  .cat-row-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.5rem; flex-wrap:wrap; }
  .cat-row-price{ font-family:var(--font-display); font-size:1.35rem; color:var(--accent-pop); }
  .cat-row-tag{ display:inline-block; background:var(--surface-alt); color:var(--text-soft); font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.28rem .6rem; border-radius:999px; margin-top:.2rem; }

  /* ---------------- News grid ---------------- */
  .news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.2rem); }
  .news-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
  .news-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(12,7,2,.10); border-color:var(--line); }
  .news-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-alt); }
  .news-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
  .news-card:hover .news-thumb img{ transform:scale(1.05); }
  .news-cat{ position:absolute; top:.7rem; inset-inline-start:.7rem; background:rgba(12,7,2,.62); color:#f7ede0; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .6rem; border-radius:999px; backdrop-filter:blur(2px); }
  .news-body{ display:flex; flex-direction:column; gap:.7rem; padding:1.4rem 1.4rem 1.6rem; flex:1; }
  .news-date{ font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft); display:inline-flex; align-items:center; gap:.5rem; }
  .news-date::before{ content:""; width:1.4em; height:1px; background:var(--gold); }
  .news-card h3{ font-size:1.2rem; line-height:1.32; }
  .news-card h3 a{ transition:color .25s var(--ease); }
  .news-card h3 a:hover{ color:var(--maroon); }
  .news-brief{ color:var(--text-soft); font-size:.92rem; flex:1; }
  .news-card .btn{ align-self:flex-start; margin-top:.5rem; }

  /* ---------------- Single post hero ---------------- */
  .post-hero{ position:relative; min-height:clamp(360px,56vh,600px); display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
  .post-hero-bg{ position:absolute; left:0; right:0; top:-20%; width:100%; height:140%; object-fit:cover; will-change:transform; top:24px;}
  .post-hero-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(12,7,2,.86) 0%, rgba(12,7,2,.52) 42%, rgba(12,7,2,.20) 78%, rgba(12,7,2,.28) 100%); }
  .post-hero-inner{ position:relative; z-index:2; padding-block:clamp(2.2rem,5vw,3.6rem); color:#fdf6ee; }
  .post-cat{ display:inline-block; background:var(--maroon); color:#fff7f2; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.36rem .85rem; border-radius:999px; margin-bottom:1.1rem; }
  .post-hero h1{ color:#fff; font-size:clamp(2rem,4.8vw,3.5rem); line-height:1.08; max-width:20ch; text-shadow:0 2px 24px rgba(12,7,2,.35); }
  .post-date{ margin-top:1.1rem; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(253,246,238,.88); display:inline-flex; align-items:center; gap:.65rem; }
  .post-date::before{ content:""; width:1.9em; height:1px; background:var(--gold); }
  [dir="rtl"] .post-hero h1{ text-align:right; }

  /* ---------------- Single post body ---------------- */
  .post-body{ background:var(--ground); padding-block:clamp(2.6rem,6vw,4.4rem) clamp(3.5rem,8vw,6.5rem); }
  .post-wrap{ max-width:720px; margin:0 auto; padding-inline:var(--pad); }
  .post-wrap .lead{ font-size:1.2rem; line-height:1.75; color:var(--text); margin-bottom:1.6rem; }
  .post-wrap p{ color:var(--text-soft); font-size:1.02rem; line-height:1.85; margin-bottom:1.35rem; }
  .post-wrap h2{ font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,1.75rem); color:var(--text); margin:2.5rem 0 1rem; color:#5a2811;}
  .post-wrap h3{ font-family:var(--font-display); font-size:1.2rem; color:var(--text); margin:1.9rem 0 .7rem; }
  .post-quote{ margin:2.2rem 0; padding:.3rem 0 .3rem 1.5rem; border-inline-start:3px solid var(--maroon); font-family:var(--font-display); font-style:italic; font-size:clamp(1.25rem,2.4vw,1.5rem); line-height:1.5; color:var(--text); }
  [dir="rtl"] .post-quote{ padding:.3rem 1.5rem .3rem 0; }
  .post-quote{border-inline-start:3px solid #b8a572; color:#5a2811;}
  .post-back{ margin-top:2.5rem; }

  /* ---------------- Responsive ---------------- */
  @media (max-width:820px){
    .cat-row{ grid-template-columns:1fr; }
    .cat-row-visual{ aspect-ratio:16/10; max-width:340px; }
    .news-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:560px){
    .footer-top{ grid-template-columns:1fr; }
    .cat-row-foot{ flex-direction:column; align-items:flex-start; }
    .cat-row-foot .btn{ width:100%; }
    .news-grid{ grid-template-columns:1fr; }
  }