/* ═══════════════════════════════════════════════════════════════════
   2-layout.css — Layout & Estrutura
   Apenas estrutura: display, posição, dimensões, offsets.
   SEM cores, SEM tipografia, SEM sombras.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Gallery offset ─────────────────────────────────────────────── */
body:not(.inner_page) .gallery,
.inner_page .gallery {
  margin-left: var(--gallery-offset-xl);
  padding-right: var(--gallery-offset-xl);
}

@media (max-width: 1439.98px) {
  body:not(.inner_page) .gallery,
  .inner_page .gallery {
    margin-left: var(--gallery-offset-lg);
    padding-right: var(--gallery-offset-lg);
  }
}

@media (max-width: 1023.98px) {
  body:not(.inner_page) .gallery,
  .inner_page .gallery {
    margin-left: 0;
    padding-right: 0;
  }
}

/* ── img_wraper stacking ────────────────────────────────────────── */
.service_sec   .img_wraper,
.protfolio_sec .img_wraper,
.blog_sec      .img_wraper,
.contact_sec   .img_wraper {
  z-index: var(--z-base);
  margin-left: -5%;
}

.service_sec   .row,
.protfolio_sec .row,
.blog_sec      .row,
.contact_sec   .row {
  position: relative;
  z-index: 1;
}

/* ── Páginas de preços: sidebar sticky + cards horizontais ─────── */
.service_page.inner_page.inner_content .img_wraper {
  z-index: var(--z-base);
}

.service_page.inner_page.inner_content .service_content {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  align-items: stretch;
  position: relative;
  left: 0;
  padding-left: 0;
  margin-top: 0;
}

.service_page.inner_page.inner_content .service_content .service_head_div {
  height: 100vh;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  flex-shrink: 0;
  z-index: var(--z-sticky);
  position: relative;
}

.service_page.inner_page.inner_content .service_content .heading {
  height: 100%;
  width: 100%;
  padding: var(--space-9) var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  white-space: normal !important;
  border-radius: var(--radius-xl);
}

/* Force wrapping for all text elements in the sidebar to prevent width explosion */
.service_page.inner_page.inner_content .service_content .heading h1,
.service_page.inner_page.inner_content .service_content .heading p,
.service_page.inner_page.inner_content .service_content .heading em {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  display: block !important;
  max-width: 100% !important;
}

.service_page.inner_page.inner_content .service_content .contents_div {
  flex: 1;
  min-width: 0;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: normal !important;
}

/* ── Faixa de pricing cards ─────────────────────────────────────── */
.pricing_container {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: var(--space-6);
  padding: var(--space-6) 0;
}

/* ── Timeline (dc-timeline.html) ─────────────────────────────────── */
.service_page.inner_page.inner_content .timeline_content {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  align-items: stretch;
  position: relative;
  margin-top: 0;
}

.service_page.inner_page.inner_content .timeline_content .heading {
  position: relative;
  height: 100vh;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  flex-shrink: 0;
  padding: var(--space-9) var(--space-7);
  padding-right: 1.875rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: var(--z-sticky);
}

.service_page.inner_page.inner_content .timeline_content .contents_div {
  flex: 1;
  min-width: 0;
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex;
  align-items: center;
}

/* ── FAQ horizontal ──────────────────────────────────────────────── */
.faq-horizontal-row {
  display: flex;
  flex-direction: row;
  gap: var(--space-8);
  flex-wrap: nowrap;
}

.faq-content-side { min-width: 400px; flex-shrink: 0; }
.faq-col-items    { display: flex; gap: var(--space-7); flex-shrink: 0; }
.faq-item-min     { min-width: 350px; }

/* ── Horizontal Info Rows (for migrated info pages) ────────────── */
.info_horizontal_row {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 0;
  padding: var(--space-4);
}

.info_horizontal_section {
  flex-shrink: 0;
  width: calc(100vw - var(--sidebar-width) - 4rem); 
  max-width: calc(100vw - var(--sidebar-width) - 4rem) !important;
  height: calc(100vh - 12rem);
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important; 
  white-space: normal !important;
}

/* Safe centering: centers when small, allows scrolling without clipping when large */
.info_horizontal_section > div {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* ── Mobile: colapsar todos os layouts horizontais ───────────────── */
@media (max-width: 1023.98px) {
  .info_horizontal_row {
    flex-direction: column;
    width: 100%;
  }
  .info_horizontal_section {
    width: 100% !important; 
    max-width: 100% !important;
    height: auto !important; /* free up the fixed height on mobile */
    min-height: auto !important; 
    padding: 4rem 0 !important; 
  }
  .service_page.inner_page.inner_content .service_content {
    flex-direction: column;
  }

  .service_page.inner_page.inner_content .service_content .heading {
    position: relative;
    height: auto;
    width: 100%;
    min-width: 0;
    padding: var(--space-7) var(--space-5);
    border-radius: var(--radius-md);
  }

  .service_page.inner_page.inner_content .service_content .contents_div {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: visible;
  }

  .service_page.inner_page.inner_content .timeline_content {
    flex-direction: column;
  }

  .service_page.inner_page.inner_content .timeline_content .heading {
    position: relative;
    height: auto;
    width: 100%;
    min-width: 0;
    padding: var(--space-7) var(--space-5);
  }

  .service_page.inner_page.inner_content .timeline_content .contents_div {
    padding: var(--space-6) var(--space-4);
  }

  .pricing_container {
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
}