/* Champion MB widgets — helper CSS.
   The design system lives in the child theme's main.css. This file only
   patches things that need to differ between the frontend and the Elementor
   editor / preview iframe. */

/* Editor preview: force revealed state so widgets are visible when the editor
   injects them into the page after main.js's IntersectionObserver has already
   captured the initial DOM. Frontend animations are untouched. */
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal-left,
body.elementor-editor-active .reveal-right,
body.elementor-editor-active .reveal-scale { opacity: 1 !important; transform: none !important; }

/* Style-variant modifier classes on widget wrappers — kept minimal because
   most variant styling belongs in the child theme's main.css alongside the
   base component styles. Add per-widget variant CSS here when it's truly
   variant-local and not something the static build already handles. */

/* Hero — Style 3 (Page Centered): centre the content column, no image. */
.page-hero--style-3 .hero-content { max-width: 820px; margin: 0 auto; text-align: center; }
.page-hero--style-3 .hero-content .hero-ctas { justify-content: center; }
.page-hero--style-3 .breadcrumb { justify-content: center; }

/* Split — Style 3 (Overlay): image as background, copy overlaid centred. */
.split--overlay { display: block; position: relative; grid-template-columns: 1fr; }
.split--overlay .split-overlay-media { position: relative; z-index: 1; }
.split--overlay .split-overlay-media .split-media::after { display: none; }
.split--overlay .split-overlay-media .split-media img { height: clamp(420px, 60vh, 640px); object-fit: cover; filter: brightness(0.55); }
.split--overlay .split-overlay-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(32px, 6vw, 84px); text-align: center; color: var(--limestone); max-width: 720px; margin: 0 auto; left: 0; right: 0; }
.split--overlay .split-overlay-body h2, .split--overlay .split-overlay-body p { color: var(--limestone); }
.split--overlay .split-overlay-body .btn { margin-top: 24px; }
@media (max-width: 640px) {
  .split--overlay .split-overlay-body { padding: 32px 20px; }
}

/* Feature Grid — variant-specific */
.fg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.fg-grid--s2, .fg-grid--s4 { grid-template-columns: repeat(3, 1fr); }
.fg-item--check { padding: 22px 24px; background: rgba(245,240,232,0.02); border-left: 3px solid var(--red); }
.fg-item--check .fg-num { display: inline-block; font: 700 12px var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.fg-item--check h3 { font: 800 20px var(--display); text-transform: uppercase; margin-bottom: 6px; }
.fg-item--check p  { font-size: 15px; line-height: 1.6; color: var(--limestone-muted); }
.fg-item--horiz { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; padding: 20px 22px; }
.fg-item--horiz .fg-icon svg { width: 40px; height: 40px; stroke: var(--red); stroke-width: 1.6; fill: none; }
.fg-item--horiz h3 { font: 800 20px var(--display); text-transform: uppercase; margin-bottom: 6px; }
.fg-item--horiz p  { font-size: 15px; line-height: 1.6; color: var(--limestone-muted); }
@media (max-width: 1024px) { .fg-grid, .fg-grid--s2, .fg-grid--s4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .fg-grid, .fg-grid--s2, .fg-grid--s4 { grid-template-columns: 1fr; } }

/* Process — vertical timeline + zig-zag */
.process-grid--timeline { display: block; }
.process-grid--timeline .step { display: grid; grid-template-columns: 96px 1fr; align-items: start; padding: 24px 0 28px; border-bottom: 1px solid var(--charcoal-light); }
.process-grid--timeline .step:last-child { border-bottom: 0; }
.process-grid--timeline .step .s-num { font: 800 clamp(44px, 5vw, 72px)/1 var(--display); color: var(--red); }
.process-grid--zigzag { display: block; }
.process-grid--zigzag .step { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 32px 0; }
.process-grid--zigzag .step:nth-child(even) .s-num { order: 2; text-align: right; }

/* Stat band — cards variant */
.stat-band--cards { padding: clamp(56px, 7vw, 96px) 0; }
.stat-band--cards .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat-band--cards .stat { background: var(--charcoal-mid); padding: 32px 28px; border-top: 3px solid var(--red); text-align: left; }
.stat-band--cards .sb-icon svg { width: 44px; height: 44px; stroke: var(--red); stroke-width: 1.6; fill: none; margin-bottom: 16px; }
@media (max-width: 1024px) { .stat-band--cards .container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .stat-band--cards .container { grid-template-columns: 1fr; } }

/* Gallery — masonry */
.gal-grid--masonry { column-count: 3; column-gap: 20px; display: block; }
.gal-grid--masonry .gal-item { break-inside: avoid; margin: 0 0 20px; display: block; }
@media (max-width: 1024px) { .gal-grid--masonry { column-count: 2; } }
@media (max-width: 640px)  { .gal-grid--masonry { column-count: 1; } }

/* Projects Showcase — cards + rows variants */
.proj-grid--cards .proj-tile { display: block; }
.proj-grid--cards .proj-tile .proj-info { position: static; padding: 20px 22px; opacity: 1; transform: none; }
.proj-grid--rows { grid-template-columns: 1fr; }
.proj-grid--rows .proj-tile { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.proj-grid--rows .proj-tile:nth-child(even) .proj-info { order: -1; }
.proj-grid--rows .proj-tile .proj-info { position: static; padding: 32px 8px; opacity: 1; transform: none; }
@media (max-width: 1024px) { .proj-grid--rows .proj-tile { grid-template-columns: 1fr; } }

/* Testimonials — featured + slider */
.testi-grid--featured { grid-template-columns: 1.6fr 1fr 1fr; align-items: stretch; }
.testi-grid--featured .testi:first-child { grid-row: 1 / span 2; }
.testi-grid--slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 24px; }
.testi-grid--slider .testi { min-width: 85%; scroll-snap-align: center; }
@media (max-width: 1024px) { .testi-grid--featured { grid-template-columns: 1fr; } .testi-grid--featured .testi:first-child { grid-row: auto; } }

/* Tabs — icon + vertical */
.tabs-wrap--icons .tab-btn svg { width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; stroke: currentColor; stroke-width: 1.6; fill: none; }
.tabs-wrap--vertical { display: grid; grid-template-columns: 220px 1fr; gap: 32px; }
.tabs-wrap--vertical .tabs-bar { flex-direction: column; align-items: stretch; }
.tabs-wrap--vertical .tab-btn { text-align: left; }
@media (max-width: 768px) { .tabs-wrap--vertical { grid-template-columns: 1fr; } }

/* FAQ — two-column + two-tier */
.faq-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.faq-tier-heading { font: 800 20px var(--display); text-transform: uppercase; letter-spacing: 0.05em; margin: 32px 0 16px; }
@media (max-width: 1024px) { .faq-two-col { grid-template-columns: 1fr; } }

/* CTA band — solid + split */
.cta-band--solid { background: var(--charcoal-deep); padding: clamp(64px, 8vw, 104px) 0; }
.cta-band--split { background: var(--charcoal-deep); padding: 0; }
.cta-band--split .cta-inner--split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; padding: 0; }
.cta-band--split .cta-copy { padding: clamp(48px, 6vw, 80px); }
.cta-band--split .cta-side img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1024px) { .cta-band--split .cta-inner--split { grid-template-columns: 1fr; } }

/* Contact — style-3 full-width bg */
.sec--bg-image { position: relative; overflow: hidden; }
.sec--bg-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,10,0.75), rgba(11,11,10,0.9)); z-index: 0; }
.sec--bg-image > .container { position: relative; z-index: 1; }
.form-card--ghl { max-width: 820px; margin: 0 auto; }

/* Services Nav — chip row + icon grid */
.services-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.services-nav--style-1 .services-nav__chip { padding: 10px 20px; background: var(--charcoal-mid); border: 1px solid var(--charcoal-light); color: var(--limestone); font: 700 13px var(--display); letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.services-nav--style-1 .services-nav__chip:hover { background: var(--red); border-color: var(--red); color: #fff; }
.services-nav--style-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.services-nav--style-2 .services-nav__chip { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; background: var(--charcoal-mid); border: 1px solid var(--charcoal-light); text-align: center; }
.services-nav--style-2 .sn-icon svg { width: 32px; height: 32px; stroke: var(--red); stroke-width: 1.6; fill: none; }
.sec--tight { padding: clamp(28px, 3vw, 44px) 0; }
@media (max-width: 1024px) { .services-nav--style-2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .services-nav--style-2 { grid-template-columns: 1fr; } }