/*
 * Lenntech content layout blocks (23 Sep 2026)
 *
 * Inserted by the CMS editor's "Layout" menu (TinyMCE 7), the replacement for the old
 * TinyMCE 4 "Bootstrap" plugin. Loaded by every public page (CMS plugin CSShead) and by the
 * editor (content_css), so a block looks the same in both.
 *
 * Deliberately NOT Bootstrap 3 grid classes (col-xs-*, col-md-*): the public site still runs
 * Bootstrap 3.0.3 and every new col-* in content is content to migrate later. These classes
 * work with or without Bootstrap.
 *
 *   <div class="lt-cols lt-cols-2"> <div class="lt-col">...</div> <div class="lt-col">...</div> </div>
 *   variants: lt-cols-2, lt-cols-3, lt-cols-4, lt-cols-4-8, lt-cols-8-4, lt-cols-1-2 (1/3 + 2/3)
 *
 * Phone (< 768px): every block stacks to one column in reading order, so what belongs
 * together stays together. Tablet (768-991px): 4 columns become 2 per row.
 */

.lt-cols {
	display: grid;
	gap: 24px;
	margin: 0 0 24px;
	align-items: start;
}
.lt-cols > .lt-col {
	min-width: 0;
}
.lt-cols > .lt-col > :first-child {
	margin-top: 0;
}
.lt-cols > .lt-col > :last-child {
	margin-bottom: 0;
}
.lt-cols img {
	max-width: 100%;
	height: auto;
}

.lt-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lt-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lt-cols-4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lt-cols-4-8 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.lt-cols-8-4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.lt-cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

@media (max-width: 991px) {
	.lt-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.lt-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Highlighted block */
.lt-callout {
	border-left: 4px solid #3498db;
	background: #ecf0f1;
	padding: 12px 16px;
	margin: 0 0 24px;
}
.lt-callout > :last-child { margin-bottom: 0; }

/* Image with caption */
.lt-figure { margin: 0 0 24px; }
.lt-figure img { display: block; max-width: 100%; height: auto; }
.lt-figure figcaption { font-size: 0.9em; color: #666; margin-top: 6px; }

/* Buttons: the site's own .btn .btn-primary/-info/-success/-warning/-default (lenntech.css).
   Full width without Bootstrap 3's btn-block: */
.lt-btn-block { display: block; width: 100%; text-align: center; }
.lt-btn-row { margin: 0 0 24px; }
.lt-btn-row .btn { margin: 0 8px 8px 0; }

/* Editor only (TinyMCE iframe body): make the block edges visible while editing, and show
   .btn-default, which the editor's Bootstrap 5 does not have. Never matches on the public site. */
.mce-content-body .lt-cols > .lt-col { outline: 1px dashed #b8c4cc; outline-offset: 4px; }
.mce-content-body .btn-default { color: #333; background-color: #fff; border: 1px solid #ccc; }