/* ==========================================================================
   EliteBlocc — Layout Utilities
   File: assets/css/global/eb-utilities.css
   Version: 2.0

   Only utilities that are genuinely reused across multiple pages.
   No page-specific or component-specific rules belong here.

   SECTIONS
   01. Container + wrapper
   02. Grid system
   03. Spacing helpers
   04. Section base
   05. Divider
   06. Display helpers
   07. Section background variants
   08. Scroll reveal base states (JS-driven)
   ========================================================================== */

/* ── 01. Container + wrapper ─────────────────────────────────────────────── */

.eb-container {
  max-width:   var(--eb-container-max, 1140px);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--eb-container-pad, clamp(1rem, 4vw, 2.5rem));
  padding-right: var(--eb-container-pad, clamp(1rem, 4vw, 2.5rem));
}

.eb-container--narrow {
  max-width: var(--eb-container-narrow, 760px);
}

/* ── 02. Grid system ─────────────────────────────────────────────────────── */

.eb-grid {
  display: grid;
  gap: var(--eb-space-6, 24px);
}

.eb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.eb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.eb-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Split layout — sticky left panel */
.eb-grid--split {
  grid-template-columns: 40% 1fr;
  align-items: flex-start;
}

/* Responsive collapses */
@media (max-width: 960px) {
  .eb-grid--3 { grid-template-columns: 1fr 1fr; }
  .eb-grid--4 { grid-template-columns: 1fr 1fr; }
  .eb-grid--split { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .eb-grid--2 { grid-template-columns: 1fr; }
  .eb-grid--3 { grid-template-columns: 1fr; }
}

/* ── 03. Spacing helpers ─────────────────────────────────────────────────── */

.eb-mt-section { margin-top: var(--eb-space-16, 64px); }
.eb-mb-section { margin-bottom: var(--eb-space-16, 64px); }
.eb-gap-sm  { gap: var(--eb-space-3, 12px); }
.eb-gap-md  { gap: var(--eb-space-6, 24px); }
.eb-gap-lg  { gap: var(--eb-space-10, 40px); }
.eb-gap-xl  { gap: var(--eb-space-14, 56px); }

/* ── 04. Section base ────────────────────────────────────────────────────── */

.eb-section {
  padding-top:    var(--eb-section-pad, clamp(3.5rem, 7vw, 5.5rem));
  padding-bottom: var(--eb-section-pad, clamp(3.5rem, 7vw, 5.5rem));
  padding-left:   var(--eb-container-pad, clamp(1rem, 4vw, 2.5rem));
  padding-right:  var(--eb-container-pad, clamp(1rem, 4vw, 2.5rem));
}

/* ── 05. Divider ─────────────────────────────────────────────────────────── */

.eb-divider {
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--eb-border-emerald, rgba(16,185,129,.22)), transparent);
  border:     none;
}

.eb-divider--subtle {
  background: linear-gradient(90deg, transparent, var(--eb-border-subtle, rgba(255,255,255,.08)), transparent);
}

/* ── 06. Display helpers ─────────────────────────────────────────────────── */

.eb-flex          { display: flex; }
.eb-flex--center  { align-items: center; }
.eb-flex--between { justify-content: space-between; }
.eb-flex--wrap    { flex-wrap: wrap; }
.eb-flex--col     { flex-direction: column; }
.eb-flex--gap-sm  { gap: var(--eb-space-3, 12px); }
.eb-flex--gap-md  { gap: var(--eb-space-6, 24px); }

.eb-sr-only {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0, 0, 0, 0);
  border:   0;
}

/* ── 07. Section background variants ─────────────────────────────────────── */

/* Used by multiple pages — not homepage-specific */
.eb-section--dark    { background: rgba(0, 0, 0, 0.22); }
.eb-section--white   { background: #ffffff; color: #111827; }
.eb-section--light   { background: #f9fafb; }
.eb-section--emerald { background: linear-gradient(135deg, rgba(6,78,59,.2) 0%, rgba(1,12,8,.35) 100%); border-top: 1px solid var(--eb-border-emerald, rgba(16,185,129,.22)); border-bottom: 1px solid var(--eb-border-emerald, rgba(16,185,129,.22)); }

/* ── 08. Scroll reveal base ──────────────────────────────────────────────── */

/*
 * .eb-rv is the production reveal class used site-wide.
 * Replaces the .rv shorthand from the mockup prototypes.
 * JS adds .is-visible via IntersectionObserver.
 */
.eb-rv {
  opacity:     0;
  transform:   translateY(20px);
  transition:  opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.eb-rv.is-visible {
  opacity:   1;
  transform: none;
}

/* Stagger delays */
.eb-rv--d1 { transition-delay: 0.07s; }
.eb-rv--d2 { transition-delay: 0.14s; }
.eb-rv--d3 { transition-delay: 0.21s; }
.eb-rv--d4 { transition-delay: 0.28s; }

/* ── No-JS fallback for .eb-rv elements ─────────────────────────────────────
   If JS is blocked or fails, eb-rv elements would stay at opacity:0 forever.
   WordPress adds .js to <html> via wp_body_open / JS detection.
   When .js is absent (script-blocked), reveal immediately via CSS.
   Elementor preview also needs this — inline scripts fire before eb-motion-core. */

.no-js .eb-rv,
html:not(.js) .eb-rv {
  opacity:   1;
  transform: none;
}

/* Elementor editor / preview override — always show content in editor context */
.elementor-editor-active .eb-rv,
.elementor-editor-preview .eb-rv {
  opacity:   1 !important;
  transform: none !important;
}

.eb-rv--d5 { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .eb-rv { opacity: 1; transform: none; transition: none; }
}

/* ── 09. Chip badges ─────────────────────────────────────────────────────── */

/*
 * .eb-chip — used for hero certification badges, filter tags, and status labels.
 * Build note: colour variants --emerald / --gold / --slate map to content type.
 */

.eb-chip {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  padding:        3px 9px;
  font-family:    var(--eb-font-body, 'Inter', sans-serif);
  font-size:      0.64rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  border-radius:  var(--eb-radius-full, 9999px);
  border:         0.5px solid;
  line-height:    1;
}

.eb-chip--emerald {
  background:   rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color:        var(--eb-color-emerald-light, #10b981);
}

.eb-chip--gold {
  background:   rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color:        var(--eb-color-gold, #f59e0b);
}

.eb-chip--slate {
  background:   rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color:        var(--eb-text-secondary, rgba(235, 245, 240, 0.85));
}

/* ── 10. Icon placeholder system ─────────────────────────────────────────── */

/*
 * .eb-icon — build-phase placeholder for inline SVG icons.
 * Render as coloured labelled squares until SVG assets are dropped in.
 * Each modifier maps to one icon category:
 *   --emerald  thermal / sustainability / general
 *   --gold     fire / compliance / certification
 *   --blue     structural / seismic / CAD
 *   --violet   acoustic / install
 *   --slate    neutral / misc
 *
 * Replace <span class="eb-icon eb-icon--lg eb-icon--emerald">THM</span>
 * with     <span class="eb-icon eb-icon--lg eb-icon--emerald" aria-hidden="true">
 *            <svg .../>
 *          </span>
 */

.eb-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  border-radius:   var(--eb-radius-md, 8px);
  font-family:     monospace;
  font-weight:     700;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  border:          0.5px solid;
}

.eb-icon--sm { width: 32px; height: 32px; font-size: 9px; }
.eb-icon--md { width: 40px; height: 40px; font-size: 9px;   border-radius: 10px; }
.eb-icon--lg { width: 48px; height: 48px; font-size: 8.5px; border-radius: 12px; }

.eb-icon--emerald {
  background:   rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.30);
  color:        var(--eb-color-emerald-light, #10b981);
}

.eb-icon--gold {
  background:   rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.30);
  color:        var(--eb-color-gold, #f59e0b);
}

.eb-icon--blue {
  background:   rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.30);
  color:        #60a5fa;
}

.eb-icon--violet {
  background:   rgba(139, 92, 246, 0.10);
  border-color: rgba(139, 92, 246, 0.30);
  color:        #a78bfa;
}

.eb-icon--slate {
  background:   rgba(100, 116, 139, 0.10);
  border-color: rgba(100, 116, 139, 0.30);
  color:        #94a3b8;
}

/* ── 11. Eyebrow bar ─────────────────────────────────────────────────────── */

/*
 * Used alongside .eb-eyebrow (defined in eb-typography.css).
 * Add <span class="eb-eyebrow-bar"></span> as first child.
 */

.eb-eyebrow-bar {
  display:       block;
  width:         20px;
  height:        1.5px;
  background:    currentColor;
  border-radius: 1px;
  flex-shrink:   0;
}


/* ── 09. Icon placeholder system ─────────────────────────────────────────── */
/*
 * .eb-ic — container for inline SVG icons used throughout the site.
 * During the build phase these contain text abbreviations or simple SVGs.
 * Production: replace inner content with finalised SVG from /assets/icons/.
 *
 * Size modifiers: --sm (32px) · --md (40px) · --lg (48px)
 * Colour modifiers: --em (emerald) · --gold · --blue · --violet · --slate · --white
 */

.eb-ic {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  border-radius:   var(--eb-radius-md, 8px);
  border:          0.5px solid;
  font-family:     monospace;
  font-size:       8.5px;
  font-weight:     700;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
}

.eb-ic--sm  { width: 32px; height: 32px; }
.eb-ic--md  { width: 40px; height: 40px; border-radius: var(--eb-radius-lg, 12px); }
.eb-ic--lg  { width: 48px; height: 48px; border-radius: var(--eb-radius-lg, 12px); }

.eb-ic--em     { background: rgba(16,185,129,.1);   border-color: rgba(16,185,129,.3);   color: #10b981; }
.eb-ic--gold   { background: rgba(245,158,11,.1);   border-color: rgba(245,158,11,.3);   color: #f59e0b; }
.eb-ic--blue   { background: rgba(59,130,246,.1);   border-color: rgba(59,130,246,.3);   color: #60a5fa; }
.eb-ic--violet { background: rgba(139,92,246,.1);   border-color: rgba(139,92,246,.3);   color: #a78bfa; }
.eb-ic--slate  { background: rgba(100,116,139,.1);  border-color: rgba(100,116,139,.3);  color: #94a3b8; }
.eb-ic--white  { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2);  color: #fff;    }
.eb-ic--dark-em{ background: rgba(6,78,59,.15);     border-color: rgba(6,78,59,.3);      color: #064e3b; }