/* Info Box block (Elementor Icon Box). Loaded only where the block is used; the box-sizing reset is in assets/frontend.css. */
/* ---- Info box (Elementor Icon Box) ---------------------------------------
 * Default = the original look: icon on top, no gap, image as-is, link text only.
 * Position classes come from prefix_class (ne-bm-ib--pos-{device-}{value}). */
.ne-bm-info-box { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
a.ne-bm-info-box { cursor: pointer; }
.ne-bm-info-box .ne-bm-info-box__media { line-height: 0; flex-shrink: 0; } /* no text strut under the icon */
.ne-bm-info-box .ne-bm-info-box__icon { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; color: inherit; transition: background-color .3s, border-color .3s, transform .3s; }
.ne-bm-info-box .ne-bm-info-box__icon > * { transition: transform .3s; }
.ne-bm-info-box .ne-bm-info-box__media img { display: block; max-width: 100%; height: auto; }
.ne-bm-info-box .ne-bm-info-box__svg { display: block; max-width: 100%; height: auto; }
.ne-bm-info-box .ne-bm-info-box__svg * { transition: stroke .3s, fill .3s; }
.ne-bm-info-box .ne-bm-info-box__content { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; } /* flex column like the box itself was: link stretches, margins do not collapse */
.ne-bm-info-box .ne-bm-info-box__title { transition: color .3s; }
:where(.ne-bm-info-box .ne-bm-info-box__title) { margin: 0 0 8px; } /* default: Title Margin overrides it */
.ne-bm-info-box .ne-bm-info-box__title a { color: inherit; text-decoration: none; }
/* .ne-block + block class: one class more than Post Content's ".ne-post-content p", so a box inside post content keeps its own text margin. */
.ne-block.ne-bm-info-box .ne-bm-info-box__text { margin: 0; }
.ne-bm-info-box .ne-bm-info-box__link { display: inline-block; text-decoration: none; }
:where(.ne-bm-info-box .ne-bm-info-box__link) { margin-top: 16px; }

/* Views + shapes */
:where(.ne-bm-ib--view-stacked .ne-bm-info-box__icon) { padding: 16px; background-color: #69727d; }
:where(.ne-bm-ib--view-framed .ne-bm-info-box__icon) { padding: 16px; border: 3px solid #69727d; }
:where(.ne-bm-ib--shape-circle .ne-bm-info-box__icon) { border-radius: 50%; }
:where(.ne-bm-ib--shape-rounded .ne-bm-info-box__icon) { border-radius: 12px; }
:where(.ne-bm-ib--shape-square .ne-bm-info-box__icon) { border-radius: 0; }

/* Icon position: top (column) / left (row) / right (row-reverse); responsive. */
.ne-bm-ib--pos-top { flex-direction: column; }
.ne-bm-ib--pos-left { flex-direction: row; align-items: var(--ne-bm-ib-valign, flex-start); }
.ne-bm-ib--pos-right { flex-direction: row-reverse; align-items: var(--ne-bm-ib-valign, flex-start); }
@media (max-width: 1024px) {
	.ne-bm-ib--pos-tablet-top { flex-direction: column; align-items: stretch; }
	.ne-bm-ib--pos-tablet-left { flex-direction: row; align-items: var(--ne-bm-ib-valign, flex-start); }
	.ne-bm-ib--pos-tablet-right { flex-direction: row-reverse; align-items: var(--ne-bm-ib-valign, flex-start); }
}
@media (max-width: 767px) {
	.ne-bm-ib--pos-mobile-top { flex-direction: column; align-items: stretch; }
	.ne-bm-ib--pos-mobile-left { flex-direction: row; align-items: var(--ne-bm-ib-valign, flex-start); }
	.ne-bm-ib--pos-mobile-right { flex-direction: row-reverse; align-items: var(--ne-bm-ib-valign, flex-start); }
}

/* Hover animations (Elementor's elementor-animation-*) */
.ne-bm-ib-anim-grow:hover .ne-bm-info-box__icon { transform: scale(1.1); }
.ne-bm-ib-anim-shrink:hover .ne-bm-info-box__icon { transform: scale(.9); }
.ne-bm-ib-anim-float:hover .ne-bm-info-box__icon { transform: translateY(-8px); }
.ne-bm-ib-anim-sink:hover .ne-bm-info-box__icon { transform: translateY(8px); }
.ne-bm-ib-anim-rotate:hover .ne-bm-info-box__icon { transform: rotate(15deg); }
@media (prefers-reduced-motion: reduce) {
	.ne-bm-info-box .ne-bm-info-box__icon, .ne-bm-info-box .ne-bm-info-box__icon > * { transition: none; }
}

/* Icon-picker icons: 48px until Style > Size is set (zero-specificity wrapper so the control wins). */
:where(.ne-bm-info-box) .ne-icon { width: 48px; }

/* "After page load": a soft panel in the image's reserved box until assets/js/lazy-frame.js sets its src. */
.ne-bm-info-box img.ne-bm-lazy-frame { background-color: #f0f0f1; }
