/* ============================================================
   DATV-Express Website — components.css
   Cards, spec tables, gallery, CTA, article, archive, stub, admin
   ============================================================ */

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 1.5rem; transition: box-shadow var(--transition); }
.card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.09); }
.card h3 { color: var(--datv-blue); }
.card-link { display: inline-block; margin-top: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--datv-accent); }

/* ---------- Spec / data tables ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.spec-card { background: var(--datv-light); border-radius: var(--radius); padding: 1.25rem; }
.spec-card h3 { font-size: 1rem; color: var(--datv-blue); margin-bottom: 0.75rem; }
table.spec-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 1rem; }
table.spec-table th { background: var(--datv-blue); color: #fff; text-align: left; padding: 0.5rem 0.75rem; font-weight: 600; }
table.spec-table td { padding: 0.45rem 0.75rem; border-bottom: 1px solid #e2e8f0; }
table.spec-table tr:nth-child(even) td { background: #f8fafc; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid #e2e8f0; }
.gallery figcaption { padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--datv-muted); background: var(--datv-light); }

/* ---------- Call to action ---------- */
.cta { background: var(--datv-blue); color: #fff; padding: 2.5rem 2rem; border-radius: var(--radius); text-align: center; margin-top: 2rem; }
.cta h2 { color: #fff; border: none; padding: 0; }
.cta p  { opacity: 0.9; }

/* ---------- Articles ---------- */
.article { max-width: 780px; line-height: 1.8; }
.article figure { margin: 1.5rem 0; }
.article figcaption { font-size: 0.85rem; color: var(--datv-muted); margin-top: 0.4rem; }

/* ---------- Archive list ---------- */
.archive-list { list-style: none; padding: 0; }
.archive-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid #e2e8f0; }
.archive-list li:last-child { border-bottom: none; }
.badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 100px; font-size: 0.75rem; font-weight: 600; background: var(--datv-blue); color: #fff; }

/* ---------- Stub / coming-soon ---------- */
.stub { text-align: center; padding: 4rem 1rem; color: var(--datv-muted); }
.stub h2 { color: var(--datv-muted); border: none; padding: 0; }
.pill { display: inline-block; padding: 0.3rem 0.9rem; border-radius: 100px; background: #ebf8ff; color: #2c5282; font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem; }

/* ---------- Admin table ---------- */
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th { background: var(--datv-blue); color: #fff; padding: 0.6rem 1rem; text-align: left; }
.admin-table td { padding: 0.55rem 1rem; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.admin-table tr:hover td { background: #f8fafc; }

/* ---------- Responsive components ---------- */
@media (max-width: 768px) {
    .card-grid, .spec-grid, .gallery { grid-template-columns: 1fr; }
    .cta { padding: 1.75rem 1rem; }
}