/* =========================================================
   ARTICLES — public section + reader modal + admin management
   Self-contained: relies on CSS variables already in style.css.
   ========================================================= */
.articles-section-wrap{ padding: 100px 0; }
.articles-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:24px; margin-top:20px;
}
.article-card{
  background: var(--white); border-radius:8px; overflow:hidden; cursor:pointer;
  box-shadow: 0 12px 30px rgba(14,42,71,.06);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  display:flex; flex-direction:column;
}
.article-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px rgba(14,42,71,.1); }
.article-card-cover{ width:100%; aspect-ratio: 16/9; object-fit:contain; background: var(--navy); }
.article-card-body{ padding:20px 22px; flex-grow:1; display:flex; flex-direction:column; }
.article-card-badge{
  align-self:flex-start; font-family: var(--font-body); font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color: var(--gold); margin-bottom:8px;
}
.article-card h3{ font-size:17px; margin:0 0 8px; }
.article-card-excerpt{ font-size:13.5px; color:#4a5f78; margin:0 0 14px; line-height:1.6; flex-grow:1; }
.article-card-link{ font-size:13px; color: var(--gold); font-weight:600; }
.articles-empty{ text-align:center; color:#4a5f78; padding: 30px 0; }

/* ---- Reader modal (written articles) ---- */
.article-modal{
  position:fixed; inset:0; z-index:220; background: rgba(8,27,48,.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.article-modal.open{ opacity:1; visibility:visible; }
.article-modal-panel{
  background: var(--ivory); border-radius:8px; max-width:640px; width:100%;
  max-height:88vh; overflow-y:auto; position:relative; padding:0 0 40px;
}
.article-modal-gallery{
  display:flex; gap:10px; overflow-x:auto; padding:20px 34px 0; margin-bottom:4px;
}
.article-modal-gallery img{
  height:200px; width:auto; max-width:85%; flex-shrink:0; object-fit:contain;
  background: var(--ivory); border:1px solid rgba(14,42,71,.1); border-radius:6px;
}
.article-modal-close{
  position:absolute; top:16px; right:18px; background: rgba(8,27,48,.5); color:#fff;
  width:34px; height:34px; border-radius:50%; border:0; font-size:22px; line-height:1; cursor:pointer;
  z-index:2;
}
[dir="rtl"] .article-modal-close{ right:auto; left:18px; }
.article-modal-inner{ padding:28px 34px 0; }
.article-modal-inner h2{ font-size:24px; margin-bottom:18px; }
.article-modal-body{ font-size:15px; line-height:1.85; color:#3c5470; white-space:pre-line; }

/* ---- Admin: articles management ---- */
.admin-articles-card{ margin-top:24px; }
.admin-article-mode-toggle{ display:flex; gap:10px; margin-bottom:16px; }
.admin-article-mode-toggle button{
  flex:1; padding:10px; border-radius:4px; border:1px solid rgba(14,42,71,.2);
  background: var(--white); color: var(--navy); font-family: var(--font-body); font-size:13px;
  font-weight:600; cursor:pointer;
}
.admin-article-mode-toggle button.active{ background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.admin-articles-list{ margin-top:20px; }
.admin-article-row{
  display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid rgba(14,42,71,.08);
}
.admin-article-row img{ width:56px; height:56px; object-fit:cover; border-radius:4px; flex-shrink:0; background: var(--navy); }
.admin-article-row-info{ flex-grow:1; }
.admin-article-row-info h4{ font-size:14px; margin:0 0 2px; color: var(--navy); font-family: var(--font-body); font-weight:600; }
.admin-article-row-info span{ font-size:11px; color:#8a97a8; }
.admin-article-row-actions{ display:flex; gap:12px; }
.admin-article-row-actions button{
  background:none; border:none; font-size:13px; cursor:pointer; color: var(--gold); font-family: var(--font-body);
}
.admin-article-row-actions button.admin-delete{ color:#b5432f; }

/* ---- Author byline on cards, filter bar, and reader modal ---- */
.articles-filter-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background: rgba(217,164,65,.1); border:1px solid rgba(217,164,65,.3);
  border-radius:6px; padding:12px 18px; margin: 20px 0 4px; font-size:13.5px; color: var(--navy);
}
.articles-filter-bar #articlesFilterClear{
  background:none; border:none; color: var(--gold); font-weight:600; font-size:13px; cursor:pointer;
  font-family: var(--font-body); white-space:nowrap;
}
.articles-filter-bar #articlesFilterClear:hover{ text-decoration: underline; }

.article-card-author{
  display:flex; align-items:center; gap:8px; margin: 4px 0 12px; cursor:pointer; width:fit-content;
}
.article-card-author img, .article-card-author-initial{
  width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.article-card-author-initial{
  background: var(--navy); color: var(--ivory); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; font-family: var(--font-body);
}
.article-card-author span{ font-size:12.5px; color: var(--navy); font-weight:600; }
.article-card-author:hover span{ color: var(--gold); text-decoration: underline; }

.article-modal-author{
  display:flex; align-items:center; gap:10px; margin: -6px 0 20px; cursor:pointer; width:fit-content;
}
.article-modal-author img{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.article-modal-author span{ font-size:13px; color:#4a5f78; font-weight:600; }
.article-modal-author:hover span{ color: var(--gold); text-decoration: underline; }

/* ---- Browse-by-author row ---- */
.articles-authors-row{
  display:flex; gap:10px; flex-wrap:wrap; margin: 22px 0 4px;
}
.articles-author-chip{
  display:flex; align-items:center; gap:8px; background: var(--white);
  border:1px solid rgba(14,42,71,.12); border-radius:24px; padding:6px 16px 6px 6px;
  cursor:pointer; font-family: var(--font-body); font-size:13px; font-weight:600; color: var(--navy);
  transition: border-color .2s, background .2s;
}
[dir="rtl"] .articles-author-chip{ padding:6px 6px 6px 16px; }
.articles-author-chip:hover{ border-color: var(--gold); }
.articles-author-chip.active{ background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.articles-author-chip img, .articles-author-chip-initial{
  width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.articles-author-chip-initial{
  background: var(--gold); color: var(--navy); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}

/* ---- Removable image preview thumbnails (article images) ---- */
.admin-image-preview-item{ position:relative; display:inline-block; }
.admin-image-preview-remove{
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  background: #b5432f; color:#fff; border:2px solid #fff; font-size:13px; line-height:1;
  cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
}
.admin-image-preview-remove:hover{ background:#8a2f20; }