/* ==========================================================================
   Section Layout — Nestable section container

   nth-child selectors use "of S" filter to skip builder scaffolding
   elements (.brx-nestable-children-placeholder, .brx-nestable-children)
   so the two-column layout works identically in builder and frontend.
   ========================================================================== */

/* ---------- Builder scaffolding: hide from flex layout ---------------- */
.section-layout > .brx-nestable-children-placeholder,
.section-layout > .brx-nestable-children {
  display: none;
}

.section-layout {
  /* Tunable via CSS custom properties or Bricks controls */
  --sl-max-width: 1440px;
  --sl-gap: 2.5em;
  --sl-sidebar-width: 360px;
  --sl-sticky-top: 150px;

  /* Constrained centered container */
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-gap);
  align-items: flex-start;
  width: 95%;
  max-width: var(--sl-max-width);
  margin-inline: auto;
  padding-block: 6rem;
}

/* ---------- Content + Sidebar (default: flex-direction row) ---------- */

/* Child 1: main content — fills remaining space */
.section-layout > :nth-child(1 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) {
  flex: 1 1 0%;
  min-width: 0;
}

/* Child 2: sidebar — fixed width, sticky */
.section-layout > :nth-child(2 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) {
  flex: 0 0 var(--sl-sidebar-width);
  position: sticky;
  top: var(--sl-sticky-top);
  align-self: flex-start;
  min-width: 0;
}

/* Overflow children (3+): full-width row below both columns */
.section-layout > :nth-child(n+3 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) {
  flex: 0 0 100%;
  order: 3;
}

/* ---------- Sticky-left variant ---------- */
.section-layout--sticky-left > :nth-child(1 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) { order: 2; }
.section-layout--sticky-left > :nth-child(2 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) { order: 1; }

/* ---------- Even split variant (50/50) ------------------------------- */
.section-layout--even > :nth-child(1 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)),
.section-layout--even > :nth-child(2 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) {
  flex: 1 1 0%;
}

/* Even split: neither column is a sidebar — reset sticky */
.section-layout--even > :nth-child(2 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) {
  position: relative;
  top: auto;
  align-self: auto;
}

/* ---------- No-sticky variant ---------------------------------------- */
.section-layout--no-sticky > :nth-child(2 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) {
  position: relative;
  top: auto;
}

/* ---------- Narrow-left variant (Header + Content) -------------------
   Child 1 = narrow header column (sticky), Child 2 = wide content area.
   Natural markup order matches visual order — no CSS reordering needed.
   --------------------------------------------------------------------- */
.section-layout--narrow-left {
  --sl-sidebar-width: 25%;
}

/* Child 1: narrow header column (sticky) */
.section-layout--narrow-left > :nth-child(1 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) {
  flex: 0 0 var(--sl-sidebar-width);
  position: sticky;
  top: var(--sl-sticky-top);
  align-self: flex-start;
}

/* Child 2: wide content area */
.section-layout--narrow-left > :nth-child(2 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) {
  flex: 1 1 0%;
  position: static;
  top: auto;
}

/* ---------- Stack mode (flex-direction: column via inline style) ------
   Must match specificity of nth-child rules above so position/flex
   resets actually win.  Using the same nth-child filter guarantees it.

   Uses position:relative (not static) so child elements that set their
   own position:relative remain valid offsetParents.  This still undoes
   the sidebar's position:sticky from the row-mode rules.
   --------------------------------------------------------------------- */
.section-layout--stack > :nth-child(1 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)),
.section-layout--stack > :nth-child(2 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)),
.section-layout--stack > :nth-child(n+3 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) {
  flex: none;
  position: relative;
  top: auto;
  order: unset;
  align-self: auto;
}

/* ---------- Stack center alignment ----------------------------------- */
.section-layout--center {
  align-items: center;
  text-align: center;
}

/* ---------- Background: full-bleed when set -------------------------  */
.section-layout--has-bg {
  width: 100%;
  max-width: none;
  padding-inline: max(2.5%, calc((100% - var(--sl-max-width)) / 2));
}

/* ---------- Dark background (Iron) text overrides -------------------- */
.section-layout--bg-dark {
  color: var(--lazio-cream, #FFF7ED);
}

.section-layout--bg-dark .header-block__heading {
  color: var(--lazio-cream, #FFF7ED);
}

.section-layout--bg-dark .header-block__body {
  color: rgba(255, 247, 237, 0.75);
}

.section-layout--bg-dark .lazio-card__title {
  color: var(--lazio-cream, #FFF7ED);
}

.section-layout--bg-dark .lazio-card__body {
  color: rgba(255, 247, 237, 0.75);
}

.section-layout--bg-dark .timeline-eyebrow {
  color: var(--lazio-cream, #FFF7ED);
}

.section-layout--bg-dark .timeline-title {
  color: var(--lazio-cream, #FFF7ED);
}

.section-layout--bg-dark .timeline-description {
  color: rgba(255, 247, 237, 0.75);
}

.section-layout--bg-dark .timeline-line {
  background-color: rgba(255, 247, 237, 0.2);
}

/* Dark mode — all sections get dark treatment */
[data-brx-theme="dark"] .section-layout {
  color: #FAFAF9;
}

/* ---------- Mobile: stack regardless of layout mode ------------------ */
@media (max-width: 768px) {
  .section-layout {
    flex-direction: column;
  }

  .section-layout > :nth-child(1 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)),
  .section-layout > :nth-child(2 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) {
    flex-basis: auto;
    order: unset;
    position: static;
  }

  .section-layout--mobile-sidebar-first > :nth-child(2 of :not(.brx-nestable-children-placeholder, .brx-nestable-children)) {
    order: -1;
  }
}