/* Blog archives: category, tag, date, search and author.
   Self contained so it can load on its own, using the same tokens, spacing and
   card language as the Mag hub and the single post. */

.drm-arc{
  --a-primary: var(--drm-primary, #6c1410);
  --a-ink: var(--drm-text-strong, #1e1e1e);
  --a-text: var(--drm-text, #4d4d4d);
  --a-muted: var(--drm-text-muted, #7b7b7b);
  --a-card: #f9f8f6;
  --a-card-2: #f4f2ef;
  --a-image-bg: #efeeec;
  --a-container: var(--drm-container, 1500px);
  --a-r-lg: var(--drm-r-lg, 18px);
  --a-r-md: var(--drm-r-md, 16px);
  --a-gap: 10px;
  --a-ease: var(--drm-ease, cubic-bezier(.22,.61,.36,1));
  --a-dur: var(--drm-fast, .2s);

  direction: rtl;
  color: var(--a-ink);
  padding-block: 26px 38px;
  padding-inline: var(--drm-mobile-gutter, 15px);
}
.drm-arc *, .drm-arc *::before, .drm-arc *::after{ box-sizing:border-box; }
.drm-arc__wrap{ width:100%; max-width:var(--a-container); margin-inline:auto; }

/* --- breadcrumb --------------------------------------------------------- */
.drm-arc__crumbs{ font-size:12px; color:var(--a-muted); margin-block-end:14px; }
.drm-arc__crumbs ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:nowrap; gap:6px; align-items:center; overflow:hidden;
}
.drm-arc__crumbs li{ flex:0 0 auto; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.drm-arc__crumbs li:last-child{ flex:1 1 auto; min-inline-size:0; }
.drm-arc__crumbs li:last-child span{ display:block; overflow:hidden; white-space:nowrap; }
.drm-arc__crumbs li + li::before{ content:"/"; opacity:.5; flex:0 0 auto; }
.drm-arc__crumbs a{ color:var(--a-muted); text-decoration:none; }
.drm-arc__crumbs [aria-current]{ color:var(--a-ink); font-weight:700; }

/* --- header ------------------------------------------------------------- */
.drm-arc__head{ display:flex; align-items:center; gap:9px; margin-block-end:8px; }
.drm-arc__bar{ inline-size:4px; block-size:20px; border-radius:99px; background:var(--a-primary); flex:0 0 auto; }
.drm-arc__kicker{ font-size:12px; font-weight:700; color:var(--a-muted); }
.drm-arc__title{
  margin:0; color:var(--a-ink); line-height:1.5;
  font-size:clamp(19px, 2.4vw, 26px); font-weight:800; letter-spacing:-.01em;
}
.drm-arc__count{ font-size:12.5px; font-weight:600; color:var(--a-muted); margin-block-end:16px; }

/* --- collapsible description (same component as the category page) ------- */
.drm-arc__seo{ position:relative; margin-block-end:22px; --seo-bg:#fafafa; }
.drm-arc__seobox{
  position:relative; background:var(--seo-bg); color:var(--a-text);
  border-radius:var(--a-r-md); padding:18px 20px 64px; overflow:hidden;
  max-height:8000px; transition:max-height .45s ease;
}
.drm-arc__seobox.is-collapsed{ max-height:150px; }
.drm-arc__seobox.is-collapsed::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:80px;
  background:linear-gradient(to bottom, transparent, var(--seo-bg) 70%); pointer-events:none;
}
.drm-arc__seocontent{ font-size:13.5px; line-height:2.05; text-align:justify; }
.drm-arc__seocontent :is(p,ul,ol){ margin:0 0 10px; }
.drm-arc__seocontent :is(p,ul,ol):last-child{ margin-bottom:0; }
.drm-arc__seocontent :is(h2,h3){ font-size:15px; font-weight:800; margin:14px 0 8px; color:var(--a-ink); text-align:start; }
.drm-arc__seocontent :is(ul,ol){ padding-inline-start:20px; }
.drm-arc__seocontent li{ margin:0 0 6px; }
.drm-arc__seocontent a{ color:var(--a-primary); text-decoration:none; }
.drm-arc__seotoggle{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; z-index:2;
  background:var(--seo-bg); border:0; border-radius:999px; padding:8px 18px;
  box-shadow:0 -4px 10px 8px var(--seo-bg);
  font-family:inherit; font-size:12.5px; font-weight:500; color:var(--a-primary);
}
.drm-arc__seotoggle svg{ transition:transform .3s ease; }
.drm-arc__seotoggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
@media (min-width:980px){
  .drm-arc__seobox{ padding-bottom:18px; }
  .drm-arc__seotoggle{
    position:static; transform:none; margin-top:12px; padding:6px 2px;
    background:transparent; border-radius:0; box-shadow:none; font-size:13px; font-weight:800;
  }
}

/* --- grid + card -------------------------------------------------------- */
.drm-arc__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--a-gap); grid-template-columns:repeat(4, minmax(0,1fr));
}
.drm-acard{
  position:relative; block-size:100%;
  display:flex; flex-direction:column; gap:9px;
  padding:8px; border:0; border-radius:var(--a-r-lg); background:var(--a-card);
}
.drm-acard__media{
  margin:0; overflow:hidden; border-radius:var(--a-r-md);
  background:var(--a-image-bg); aspect-ratio:4/3; flex:0 0 auto; position:relative;
}
.drm-acard__img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.drm-acard__media > img{
  width:100% !important; height:100% !important; max-width:none;
  object-fit:cover; object-position:center; display:block;
}
.drm-acard__cat{
  position:absolute; z-index:3; inset-block-start:9px; inset-inline-start:9px;
  font-size:10.5px; font-weight:800; line-height:1; color:#fff; text-decoration:none;
  background:var(--a-primary); padding:6px 9px; border-radius:7px;
}
.drm-acard__cat:hover{ color:#fff; }
.drm-acard__body{ display:flex; flex-direction:column; gap:9px; flex:1 1 auto; padding:2px 3px 3px; min-inline-size:0; }
.drm-acard__title{
  margin:0; font-size:14px; font-weight:800; line-height:1.85; color:var(--a-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  max-block-size:calc(14px * 1.85 * 2);
}
.drm-acard__title a{ color:var(--a-ink); text-decoration:none; }
.drm-acard__title a:hover{ color:var(--a-ink); }
.drm-acard__title a::after{ content:""; position:absolute; inset:0; z-index:2; }
.drm-acard__title a:focus-visible{ outline:none; }
.drm-acard__title a:focus-visible::after{ outline:2px solid var(--a-primary); outline-offset:-3px; border-radius:var(--a-r-lg); }
.drm-acard__excerpt{
  margin:0; font-size:12.5px; line-height:1.95; color:var(--a-muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.drm-acard__meta{
  display:flex; align-items:center; gap:7px; margin-block-start:auto;
  font-size:11px; font-weight:600; color:var(--a-muted);
}
.drm-acard__author{
  color:var(--a-muted); text-decoration:none; position:relative; z-index:3;
  display:inline-flex; align-items:center; gap:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.drm-acard__author:hover{ color:var(--a-muted); }
.drm-acard__author::before{
  content:""; inline-size:5px; block-size:5px; border-radius:2px;
  background:var(--a-primary); flex:0 0 auto;
}
.drm-acard__sep{ opacity:.5; }
.drm-acard__date{ font-weight:500; white-space:nowrap; }
.drm-acard__comments{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.drm-acard__comments svg{ inline-size:13px; block-size:13px; fill:none; stroke:currentColor; stroke-width:1.8; }

/* --- pagination --------------------------------------------------------- */
.drm-arc__pager{ margin-block-start:22px; }
.drm-arc__pager ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.drm-arc__pager a, .drm-arc__pager span{
  min-inline-size:38px; block-size:38px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:12px; background:var(--a-card); color:var(--a-ink);
  font-size:13px; font-weight:700; line-height:1; text-decoration:none;
}
.drm-arc__pager a:hover{ background:var(--a-card-2); color:var(--a-primary); }
.drm-arc__pager .current{ background:var(--a-primary); color:#fff; }
.drm-arc__pager a:focus-visible{ outline:2px solid var(--a-primary); outline-offset:2px; }

.drm-arc__empty{
  margin:0; padding:26px 18px; border-radius:var(--a-r-lg);
  background:var(--a-card); color:var(--a-muted);
  font-size:13.5px; line-height:1.9; text-align:center;
}

/* --- author profile card ------------------------------------------------ */
.drm-arc__profile{
  display:flex; gap:16px; align-items:flex-start;
  padding:18px; margin-block-end:22px;
  border:0; border-radius:var(--a-r-lg); background:var(--a-card);
}
.drm-arc__avatar{
  flex:0 0 auto; inline-size:76px; block-size:76px; overflow:hidden;
  border-radius:50%; background:var(--a-image-bg); display:block;
}
.drm-arc__avatar img,
.drm-arc__avatar > img{
  width:100% !important; height:100% !important; max-width:none;
  object-fit:cover; display:block;
}
.drm-arc__pbody{ min-inline-size:0; display:flex; flex-direction:column; gap:7px; }
.drm-arc__pname{ margin:0; font-size:19px; font-weight:800; line-height:1.6; color:var(--a-ink); }
.drm-arc__prole{ font-size:12.5px; font-weight:700; color:var(--a-primary); }
.drm-arc__pbio{ margin:0; font-size:13px; line-height:2; color:var(--a-muted); max-width:70ch; }
.drm-arc__pcount{ font-size:11.5px; font-weight:600; color:var(--a-muted); }

/* --- responsive --------------------------------------------------------- */
@media (max-width:1240px){ .drm-arc__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px){ .drm-arc__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){
  .drm-arc{ --a-gap:9px; padding-block:16px 26px; }
  .drm-arc__title{ font-size:18px; }
  .drm-arc__grid{ grid-template-columns:1fr; }
  .drm-acard{ flex-direction:row-reverse; align-items:center; gap:10px; padding:7px; border-radius:var(--a-r-md); }
  .drm-acard__media{ flex:0 0 92px; inline-size:92px; border-radius:12px; }
  .drm-acard__cat{ display:none; }
  .drm-acard__excerpt{ display:none; }
  .drm-acard__body{ gap:7px; padding:1px 0; }
  .drm-acard__title{ font-size:13px; max-block-size:calc(13px * 1.85 * 2); }
  .drm-acard__meta{ margin-block-start:0; }
  .drm-arc__profile{ padding:14px; gap:12px; }
  .drm-arc__avatar{ inline-size:60px; block-size:60px; }
  .drm-arc__pname{ font-size:17px; }
  .drm-arc__pager a, .drm-arc__pager span{ min-inline-size:36px; block-size:36px; }
}

@media (prefers-reduced-motion: reduce){
  .drm-arc *, .drm-arc *::before, .drm-arc *::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}
@media (forced-colors: active){
  .drm-acard, .drm-arc__profile, .drm-arc__seobox{ border:1px solid CanvasText; }
}