/*
 * Innovation Floor — WPBakery Page Builder bridge.
 *
 * Loaded after site.css and wordpress.css.
 *
 * The guiding rule here is to leave WPBakery's own layout system alone. Earlier
 * versions zeroed the gutters on .vc_column_container and .vc_column-inner so
 * single-column sections would sit flush — but those are the very elements the
 * builder writes column padding, column background colour and the "Columns gap"
 * setting onto, so overriding them silently disabled all of it.
 *
 * Instead the row keeps VC's 15px column gutter and simply subtracts that 15px
 * from its own horizontal padding. A builder section still lines up exactly
 * with a section rendered by a PHP template, and everything in the builder's
 * Design Options keeps working natively.
 */

/* ---------------------------------------------------------------- Rows */

.if-row.vc_row,
.if-row.vc_section {
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

/* The theme controls vertical rhythm; VC's default element margin would add to
   it. Anything set in Design Options is !important and still overrides this. */
.if-row .wpb_content_element,
.if-row .wpb_column,
.if-row .vc_figure,
.if-row ul.wpb_thumbnails-fluid > li {
  margin-bottom: 0;
}

.if-row .wpb_wrapper > * + * {
  margin-top: var(--section-gap);
}

.if-row .wpb_wrapper > .section-heading + * {
  margin-top: 0;
}

/* --------------------------------------------------------- Row: width */

/*
 * --if-row-x is the row's horizontal padding, always 15px less than the
 * section inset, because VC's column padding makes up the difference.
 */
.if-row {
  --if-row-x: calc(var(--section-x) - 15px);
}

.if-row.if-width-site {
  --if-row-x: max(calc(var(--section-x) - 15px), calc((100% - var(--max)) / 2 - 15px));
}

.if-row.if-width-narrow {
  --if-row-x: max(calc(var(--section-x) - 15px), calc((100% - 52rem) / 2 - 15px));
}

/* Full bleed reaches the viewport edge, so the column gutter goes too. */
.if-row.if-width-full {
  --if-row-x: 0px;
}

.if-row.if-width-full > .vc_column_container > .vc_column-inner {
  padding-left: 0;
  padding-right: 0;
}

/* ------------------------------------------------------- Row: spacing */

.if-row.section-pad {
  padding: var(--section-y) var(--if-row-x);
}

.if-row.if-pad-large {
  padding: calc(var(--section-y) * 1.75) var(--if-row-x);
}

.if-row.if-pad-compact {
  padding: calc(var(--section-y) * .5) var(--if-row-x);
}

.if-row.if-pad-tight {
  padding: calc(var(--section-y) * .25) var(--if-row-x);
}

.if-row.if-pad-none {
  padding: 0 var(--if-row-x);
}

/* Stacked columns need vertical space where the side gutter used to be. */
@media (max-width: 767px) {
  .if-row .vc_column_container + .vc_column_container {
    margin-top: var(--section-gap);
  }
}

/* ----------------------------------------------------------- Row: tone */

/*
 * Every builder row that is not explicitly dark paints the theme surface.
 * Without this a row is transparent, so anything behind it shows through and
 * breaks the section rhythm. A background set on the row or on a single column
 * in Design Options is !important and still wins over this.
 */
.if-row:not(.section-dark):not(.if-tone-band) {
  background-color: var(--paper);
}

.if-row.if-tone-band {
  color: var(--white);
  background: #19191c;
  border-top: 1px solid var(--line-dark);
}

.if-row.section-dark .section-heading p,
.if-row.if-tone-band .section-heading p {
  color: #aaa8a2;
}

/* Sections carrying their own full-bleed background must escape the row
   padding and the column gutter together. */
.if-row .page-hero,
.if-row .contact-band,
.if-row .next-service,
.if-row .market-note {
  margin-left: calc(-1 * (var(--if-row-x) + 15px));
  margin-right: calc(-1 * (var(--if-row-x) + 15px));
}

.if-row.if-width-full .page-hero,
.if-row.if-width-full .contact-band,
.if-row.if-width-full .next-service,
.if-row.if-width-full .market-note {
  margin-left: 0;
  margin-right: 0;
}

/* ------------------------------------------------------ Heading styles */

.if-heading-stacked,
.if-heading-centred {
  max-width: var(--max);
  margin: 0 auto var(--section-gap);
}

.if-heading-stacked h1,
.if-heading-stacked h2,
.if-heading-centred h1,
.if-heading-centred h2 {
  margin-bottom: 0;
  font-size: var(--h2-size);
  line-height: 1.05;
  letter-spacing: -.055em;
}

/* Block-level so the label is exactly its own height. As inline-flex it sits in
   a text line box sized by the parent font metrics, which makes the gap above
   the heading unpredictable and impossible to line a neighbouring column up
   with. */
.if-heading-stacked .eyebrow,
.if-heading-centred .eyebrow {
  display: flex;
}

/* Offsets a sibling column so its top edge starts level with the heading's
   first line rather than with the eyebrow above it. */
.if-align-heading {
  padding-top: calc(.7rem + 1.5rem);
}

@media (max-width: 767px) {
  .if-align-heading {
    padding-top: 0;
  }
}

.if-heading-stacked p,
.if-heading-centred p {
  max-width: 40rem;
  margin: 1.2rem 0 0;
  color: #676661;
  font-size: 1.02rem;
  line-height: 1.75;
}

.if-heading-centred {
  text-align: center;
}

.if-heading-centred .eyebrow {
  justify-content: center;
}

.if-heading-centred p {
  margin-inline: auto;
}

.section-dark .if-heading-stacked p,
.section-dark .if-heading-centred p {
  color: #aaa8a2;
}

/* --------------------------------------------------- Builder feedback */

.if-builder-empty {
  background: color-mix(in srgb, var(--orange) 4%, transparent);
  border-style: dashed;
}

.if-builder-empty h3 {
  margin: 1rem 0 0;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}

.if-builder-empty p {
  margin: 1rem 0 0;
}

.if-builder-empty .text-link {
  color: var(--orange);
}

/* -------------------------------------------------- Front-end editor */

/* Keep the builder's own controls readable on the theme's dark sections. */
.vc_element-name,
.vc_controls .vc_control-btn {
  color: #fff;
}

.vc_empty-placeholder {
  background: rgba(10, 10, 11, .05);
}

/* The fixed site header must not cover the editor toolbar. */
body.vc_editor .site-header {
  top: 42px;
}

/* ------------------------------------------------- Columns from the editor
   Two-column sections are real WPBakery columns: an IF Section Heading on one
   side and IF Text & Link (or anything else) on the other. The widths come
   from the row layout chosen in the builder. WPBakery puts columns side by
   side from 768px up, which is why the stacking rules above use 767px. */

.if-text p {
  margin: 0 0 1.2rem;
  color: #5f5e59;
  font-size: 1.08rem;
  line-height: 1.75;
}
.section-dark .if-text p,
.if-tone-band .if-text p,
.if-inner-dark .if-text p {
  color: #aaa8a2;
}
.if-text p:last-of-type { margin-bottom: 0; }
.if-text > .text-link,
.if-text > .button { margin-top: 1.6rem; }
.if-text + .if-social,
.wpb_wrapper > .if-text + * { margin-top: 2.2rem; }

/* The space between the two sides, matching the original statement. */
.if-split-row > .wpb_column:first-child > .vc_column-inner { padding-right: clamp(15px, 4vw, 4rem); }
.if-split-row.if-inner-wide-gap > .wpb_column:first-child > .vc_column-inner { padding-right: clamp(15px, 7vw, 8rem); }

/* Dark statement band (was the statement's "Dark" / "Dark band" background). */
.vc_row.if-inner-dark {
  margin-left: 0;
  margin-right: 0;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(.5rem, 3vw, 2.5rem);
  color: var(--white);
  background: var(--ink);
  border-radius: var(--radius);
}

/* ------------------------------------- Every element fits its own column
   Each builder column is a size container, so an element laid out for the
   full page width rearranges itself when it is placed in a narrower column —
   two-column blocks stack, card grids drop to fewer cards per row. An explicit
   "Cards per row" choice still wins. */
.if-row .wpb_column > .vc_column-inner {
  container-type: inline-size;
  container-name: ifcol;
}

@container ifcol (max-width: 1000px) {
  :is(.service-grid, .solution-grid, .feature-grid, .project-grid, .product-grid, .insights-grid, .capability-grid):not([class*="if-cols-"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .client-list:not([class*="if-cols-"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section-heading { grid-template-columns: .4fr 1fr; }
  .section-heading p, .section-heading .heading-link { grid-column: 2; margin: 1rem 0 0; }
}

@container ifcol (max-width: 760px) {
  :is(.home-intro, .service-combine, .about-split, .solution-definition, .product-bridge, .market-note, .ceo-section, .facts-section, .market-banner, .page-hero) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2rem;
  }
  :is(.intro-copy, .service-combine > div:last-child, .about-split > div:last-child, .solution-definition > div:last-child, .market-note > p) { padding-top: 0; }
  .section-heading { grid-template-columns: minmax(0, 1fr); }
  .section-heading p, .section-heading .heading-link { grid-column: auto; }
  .model-flow { grid-template-columns: minmax(0, 1fr); }
  .model-flow > i { transform: rotate(90deg); justify-self: center; }
  .definition-pair, .facts-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.contact-band, .next-service) { flex-direction: column; align-items: flex-start; }
}

@container ifcol (max-width: 520px) {
  :is(.service-grid, .solution-grid, .feature-grid, .project-grid, .product-grid, .insights-grid, .capability-grid, .client-wall):not([class*="if-cols-"]) {
    grid-template-columns: minmax(0, 1fr);
  }
  .client-list:not([class*="if-cols-"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Inside a column the heading's own bottom margin would double the gap to
   whatever follows the row. */
.if-split-row .if-heading-stacked,
.wpb_column .if-heading-stacked:last-child { margin-bottom: 0; }