/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.section.body
   Classification : Layout Section | JSON-driven | Genesis Safe
   Version        : 2.0.0 | DOM-Return-Guaranteed • Stack-integrated
   File           : /tools/modules/ui.section.body/ui.section.body.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ──────────────────────────────────────────────────────────────── */

@layer ui.section.body {
  .ui-section-body[data-module="ui.section.body"] {
    box-sizing: border-box;
    width: 100%;
    background: var(--ui-sec-body-bg, var(--site-bg));
    color: var(--ui-sec-body-fg, var(--site-fg));
    padding-block: var(--ui-sec-body-padY, 48px);
    padding-inline: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .ui-section-body[data-module="ui.section.body"].reveal {
    opacity: 1;
  }

  /* DEFAULT: no width constraint */
  .ui-section-body__inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--ui-sec-body-padX, 24px);
  }

  /* Opt-in reading/content width */
  .ui-section-body[data-width="content"] .ui-section-body__inner {
    max-width: var(--ui-body-max, 1200px);
    margin-inline: auto;
  }

  /* Full-bleed section: no inner padding, no content box (for media/gallery pages) */
  .ui-section-body[data-width="bleed"] .ui-section-body__inner {
    padding-inline: 0;
    margin-inline: 0;
    max-width: none;
  }



  /* ─── Responsive Tweaks ───────────────────────────────────────── */
  @media (max-width: 768px) {
    .ui-section-body[data-module="ui.section.body"] {
      padding-block: calc(var(--ui-sec-body-padY, 48px) * 0.75);
    }
    .ui-section-body__inner {
      padding-inline: calc(var(--ui-sec-body-padX, 24px) * 0.75);
    }
  }
}