/**
 * Image Overrides
 *
 * Fixes CKEditor5 image resize: the compiled styles.css has img { width: 100% }
 * which overrides HTML width attributes (presentational hints) set by the editor.
 *
 * Fix strategy:
 * - Images WITHOUT a width attribute (normal content) → keep full-width behaviour
 * - Images WITH a width attribute (CKEditor5 drag-resized) → revert to UA stylesheet
 *   so the browser respects the HTML width attribute as a presentational hint
 *
 * Migration Notes:
 * - Migrated from: src/sass/partials/_elements.scss (img rule)
 * - Date: 2026-06-16
 * - Status: [x] Complete
 */

/* All images: responsive base, no explicit width (remove styles.css width:100%) */
img {
  height: auto;
  max-width: 100%;
}

/* Images without a width attribute: restore full-width (override styles.css width:100%) */
img:not([width]) {
  width: 100% !important;
}

/* Images with a width attribute (CKEditor5 resized): revert to UA stylesheet
   so the HTML width="300" presentational hint is respected by the browser */
img[width] {
  width: revert;
}

/* Ensure Drupal media div wrappers don't block layout flow inside table grid cells */
.field-name-field-paragraph-text table td div,
.field-name-field-paragraph-text table td img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
/* Instantly center all borderless layout tables */
.field-name-field-paragraph-text table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}

/* Force table cells to balance their logos right in the middle */
.field-name-field-paragraph-text table td {
  text-align: center;
  vertical-align: middle;
  padding: 10px 15px; /* Adds uniform spacing between the logos */
}

/* ============================================================
   Table alignment — applied via Style dropdown in CKEditor5
   ============================================================ */
.field-name-field-paragraph-text table.tbc-align-left {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.field-name-field-paragraph-text table.tbc-align-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}

.field-name-field-paragraph-text table.tbc-align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   drupal-media alignment — applied via balloon align buttons
   Drupal renders data-align="left/right/center" as .align-left
   etc. on the media wrapper div
   ============================================================ */
.field-name-field-paragraph-text .align-left {
  float: left;
  margin: 0 1.5rem 1rem 0;
  clear: left;
}

.field-name-field-paragraph-text .align-right {
  float: right;
  margin: 0 0 1rem 1.5rem;
  clear: right;
}

.field-name-field-paragraph-text .align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}