/**
 * @file
 * Styles for the public ClientEd browse page.
 *
 * Uses Bootstrap 4 classes where possible:
 * - Form layout: .form-row and .col (applied in PublicSearchForm.php)
 * - Badges: .badge .badge-secondary/.badge-primary (applied in templates)
 */

/* Article list */
.cliented-library__item {
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

/* Badge spacing (Bootstrap badges don't have margins by default) */
.cliented-article__tags .badge {
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Article body images - base styles */
.cliented-article__body img {
  position: relative;
  max-width: 100%;
  height: auto;
}

/* Froala image classes (from ClientEd API content) */
/* fr-dib = display block (centered by default) */
.cliented-article__body img.fr-dib {
  margin: 5px auto;
  display: block;
  float: none;
  vertical-align: top;
}

.cliented-article__body img.fr-dib.fr-fil {
  margin-left: 0;
  margin-right: auto;
}

.cliented-article__body img.fr-dib.fr-fir {
  margin-left: auto;
  margin-right: 0;
}

/* fr-dii = display inline-block */
.cliented-article__body img.fr-dii {
  display: inline-block;
  float: none;
  vertical-align: bottom;
  margin-left: 5px;
  margin-right: 5px;
  max-width: calc(100% - 10px);
}

/* fr-fil = float left */
.cliented-article__body img.fr-dii.fr-fil {
  float: left;
  margin: 5px 5px 5px 0;
  max-width: calc(100% - 5px);
}

/* fr-fir = float right */
.cliented-article__body img.fr-dii.fr-fir {
  float: right;
  margin: 5px 0 5px 5px;
  max-width: calc(100% - 5px);
}

/* Images without Froala classes - display as block */
.cliented-article__body img:not([class*="fr-"]) {
  display: block;
  margin-bottom: 1rem;
}