/* ===== Section Builder – Frontend v2.0 ===== */

/* ── Section wrapper ── */
.sb-section     { width:100%; display:block; box-sizing:border-box; }
.sb-container   { box-sizing:border-box; }

/* ── Layout modes ── */
.sb-layout--boxed .sb-container,
.sb-layout--wide  .sb-container { margin-left:auto; margin-right:auto; }
.sb-layout--full-width            { width:100%; max-width:none !important; }
.sb-layout--full-width .sb-container { max-width:100% !important; padding:0 !important; margin:0 !important; }
.sb-layout--full-width .sb-row   { margin:0; }
.sb-layout--full-width .sb-col   { padding:0; }

/* ── Grid ── */
.sb-row   { display:flex; flex-wrap:wrap; }
.sb-col   { box-sizing:border-box; }
.sb-block { margin-bottom:16px; }

/* ── Overlay ── */
.sb-overlay { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:0; }
.sb-section > .sb-container { position:relative; z-index:1; }

/* ── Desktop widths ── */
.sb-col--1-4    { width:25%; }
.sb-col--2-4    { width:50%; }
.sb-col--3-4    { width:75%; }
.sb-col--4-4    { width:100%; }
.sb-col--hidden { display:none; }

/* ── Tablet (≤ 992px) ── */
@media (max-width:992px) {
  .sb-col--md-1-4    { width:25%; }
  .sb-col--md-2-4    { width:50%; }
  .sb-col--md-3-4    { width:75%; }
  .sb-col--md-4-4    { width:100%; }
  .sb-col--md-hidden { display:none; }
  .sb-col:not([class*="sb-col--md-"]) { width:100%; }
  .sb-hidden-tablet  { display:none !important; }
}

/* ── Mobile (≤ 576px) ── */
@media (max-width:576px) {
  .sb-col--sm-1-4    { width:25%; }
  .sb-col--sm-2-4    { width:50%; }
  .sb-col--sm-3-4    { width:75%; }
  .sb-col--sm-4-4    { width:100%; }
  .sb-col--sm-hidden { display:none; }
  .sb-col:not([class*="sb-col--sm-"]) { width:100%; }
  .sb-hidden-mobile  { display:none !important; }
}

/* ── Visibility desktop ── */
@media (min-width:993px) {
  .sb-hidden-desktop { display:none !important; }
}

/* ── Animations ── */
.sb-animate {
  animation-fill-mode: both;
  animation-duration: 600ms; /* overridden inline */
}
@keyframes sb-fadeIn    { from { opacity:0; }                          to { opacity:1; } }
@keyframes sb-slideUp   { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes sb-slideDown { from { opacity:0; transform:translateY(-40px); } to { opacity:1; transform:translateY(0); } }
@keyframes sb-slideLeft { from { opacity:0; transform:translateX(40px); }  to { opacity:1; transform:translateX(0); } }
@keyframes sb-slideRight{ from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
@keyframes sb-zoomIn    { from { opacity:0; transform:scale(.85); }    to { opacity:1; transform:scale(1); } }

.sb-anim-fadeIn    { animation-name:sb-fadeIn; }
.sb-anim-slideUp   { animation-name:sb-slideUp; }
.sb-anim-slideDown { animation-name:sb-slideDown; }
.sb-anim-slideLeft { animation-name:sb-slideLeft; }
.sb-anim-slideRight{ animation-name:sb-slideRight; }
.sb-anim-zoomIn    { animation-name:sb-zoomIn; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .sb-animate { animation:none !important; }
}