/* Blog article tables — published posts (.blog-content) and CKEditor preview (body table) */
.blog-content figure.table,
.blog-content .table-responsive {
  margin: 2rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.blog-content figure.table table,
.blog-content .table-responsive table {
  margin: 0;
}

.blog-content table,
body.cke_editable table,
.cke_editable table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #2c3e50;
  background: #fff;
  border: 1px solid #e9ecef;
}

.blog-content caption,
body.cke_editable caption,
.cke_editable caption {
  caption-side: bottom;
  padding: 0.5rem 0 0;
  font-size: 0.85rem;
  color: #6c757d;
  text-align: left;
}

.blog-content th,
.blog-content td,
body.cke_editable th,
body.cke_editable td,
.cke_editable th,
.cke_editable td {
  border: 1px solid #e9ecef;
  padding: 0.65rem 0.85rem;
  vertical-align: top;
  text-align: left;
}

.blog-content th,
body.cke_editable th,
.cke_editable th {
  background: #f8f9fc;
  color: #2c3e50;
  font-weight: 700;
}

.blog-content thead th,
body.cke_editable thead th,
.cke_editable thead th {
  border-bottom: 2px solid #dfe3e8;
}

.blog-content tbody tr:nth-child(even) td,
body.cke_editable tbody tr:nth-child(even) td,
.cke_editable tbody tr:nth-child(even) td {
  background: #fcfcfd;
}

.blog-content tbody tr:hover td,
body.cke_editable tbody tr:hover td,
.cke_editable tbody tr:hover td {
  background: #f3f6f9;
}

/* Override CKEditor legacy border="1" output */
.blog-content table[border],
.blog-content table[border] th,
.blog-content table[border] td,
body.cke_editable table[border],
body.cke_editable table[border] th,
body.cke_editable table[border] td,
.cke_editable table[border],
.cke_editable table[border] th,
.cke_editable table[border] td {
  border: 1px solid #e9ecef;
}

@media (max-width: 767.98px) {
  .blog-content figure.table,
  .blog-content .table-responsive {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
  }

  .blog-content table,
  body.cke_editable table,
  .cke_editable table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .blog-content thead,
  .blog-content tbody,
  .blog-content tr,
  body.cke_editable thead,
  body.cke_editable tbody,
  body.cke_editable tr,
  .cke_editable thead,
  .cke_editable tbody,
  .cke_editable tr {
    display: table;
    width: 100%;
  }

  .blog-content th,
  .blog-content td,
  body.cke_editable th,
  body.cke_editable td,
  .cke_editable th,
  .cke_editable td {
    min-width: 8rem;
  }
}