/* =========================================================
   ARN — Article Directory (refactored, simple + matte)
   - One translucent card per section (.articles-directory-block)
   - 4px radius, light shadows, subtle hovers
   - Responsive header flow down to ultra-narrow widths
   ========================================================= */

/* If this page sits on a photo background, keep the frame clear 
.main, .article, .content { background: transparent !important; }*/

/* ---------- Top jump navigation ---------- */
.articles-directory-topnav{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin:10px auto 16px; max-width:960px;
}
.articles-directory-topnav a{
  display:inline-block; padding:6px 10px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:4px; background:#fff;
  text-decoration:none;
  transition:background .2s ease;
}
.articles-directory-topnav a:hover{ background:#f2f6ff; }

/* Optional wrapper (keeps layout tidy without adding a panel) */
.transparent-content{
  max-width:960px; margin:0 auto; padding:4px; background:transparent;
}

/* ---------- Section block (card) ---------- */
.articles-directory-block{
  max-width:960px; margin:16px auto; padding:14px 16px;
  background:rgba(255,255,255,.86);           /* translucent white */
  border:1px solid rgba(0,0,0,.08);
  border-radius:4px;
  box-shadow:0 1px 6px rgba(0,0,0,.08);
  transition:background .25s ease, box-shadow .25s ease;
}
.articles-directory-block:hover{
  background:rgba(255,255,255,.90);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}

/* ---------- Section header row ---------- */
.articles-directory-secbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; gap:12px; margin:2px 0 8px;
}
.articles-directory-secbar h3{
  margin:0; font-size:22px; line-height:1.2;
  display:flex; align-items:center; gap:8px;
  flex:0 1 auto;
}
.articles-directory-meta{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;
}

/* Chips (category shortcuts) */
.articles-directory-pill{
  padding:4px 10px; border:1px solid rgba(0,0,0,.12);
  border-radius:4px; background:#f8faff;
  text-decoration:none;
  transition:background .2s ease;
}
.articles-directory-pill:hover{ background:#eef3ff; }
.articles-directory-viewall{ font-weight:600; text-decoration:none; }
.articles-directory-viewall::after{ content:" →"; }

/* Optional section blurb */
.articles-directory-blurb{
  margin:0 0 12px; color:#6b7280; font-size:13px; text-align:left;
}

/* ---------- Buttons grid (uses existing .btn styles) ---------- */
.articles-directory-buttons{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.articles-directory-buttons .btn{
  border-radius:4px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.articles-directory-buttons .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 6px rgba(0,0,0,.15);
}

/* Count badge, if you print totals */
.articles-directory-badge{
  display:inline-block; min-width:22px; padding:2px 7px;
  border-radius:4px; background:#003399; color:#fff;
  font-size:12px; font-weight:700;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:800px){
  .articles-directory-topnav{ gap:8px; }
}

/* Stack heading above pills on phones; single-column buttons */
@media (max-width:640px){
  .articles-directory-buttons{ grid-template-columns:1fr; }
  .articles-directory-topnav a{ font-size:14px; padding:6px 12px; }

  .articles-directory-secbar{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:6px;
  }
  .articles-directory-secbar h3{
    font-size:18px;
    margin-bottom:4px;
  }
  .articles-directory-meta{
    justify-content:flex-start;
  }
}

/* Ultra-narrow (watch-sized) — make pills full-width for tap targets */
@media (max-width:350px){
  .articles-directory-meta{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .articles-directory-meta a{
    display:block;
    width:100%;
    text-align:center;
  }
  .articles-directory-secbar h3{
    font-size:16px; line-height:1.3;
  }
}

/* Optional: single-article body formatting (if reused) */
.articlebody{ max-width:900px; margin:0 auto; font-size:17px; line-height:1.6; }
.articlebody img{ max-width:100%; height:auto; border-radius:4px; }
.articlebody iframe{ max-width:100%; aspect-ratio:16/9; width:100%; height:auto; }