/* Front CSS for Articles plugin */
/* Variables */
:root{
  --main:#ff4500;
  --accent:#ffa500;
  --text:#333333;
  --card-bg:#fefefe;
}

/* Basic reset */
.article-archive { padding:20px; box-sizing:border-box; }

/* Gallery grid */
.articles-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:15px;
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
}

/* Card */
.article-card{
  background:var(--card-bg);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 3px 8px rgba(0,0,0,0.08);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;
  flex-direction:column;
}
.article-card:hover{
  transform:scale(1.03) translateY(-4px);
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
}

/* Image wrapper keeps original ratio with object-fit: cover fallback */
.article-card .media{
  width:100%;
  display:block;
}
.article-card img{
  width:100%;
  height:auto;
  display:block;
}

/* Card body */
.article-card .body{ padding:12px; flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.article-card h3{ margin:0 0 8px 0; color:var(--text); font-size:18px; }
.article-card .cta{ margin-top:8px; text-align:right; }
.article-card .cta a{ text-decoration:none; background:var(--main); color:#fff; padding:8px 12px; border-radius:8px; display:inline-block; }

/* Detail page */
.article-single-hero{
  width:100%;
  position:relative;
}
.article-single-hero img{ width:100%; height:auto; display:block; }
.article-single-hero .hero-overlay{
  position:absolute; left:20px; right:20px; bottom:20px; background:rgba(0,0,0,0.35); color:#fff; padding:14px; border-radius:8px;
}
.article-single-content{ padding:20px; line-height:1.6; color:var(--text); background:#fff; }

/* Info card */
.info-card{ border:1px solid rgba(0,0,0,0.06); padding:12px; border-radius:10px; margin:12px 0; }

/* Responsive tweaks */
@media (max-width:768px){
  .articles-grid{ grid-template-columns: repeat(2, 1fr); padding-left:16px; padding-right:16px; }
  .article-single-hero .hero-overlay{ left:12px; right:12px; bottom:12px; }
}
@media (max-width:480px){
  .articles-grid{ grid-template-columns: 1fr; gap:12px; padding-left:12px; padding-right:12px; }
}