/*
 * Elementor bridge — Auric Metal Corp
 * ==================================
 * Every value here is taken from the approved design in style.css and mapped
 * onto Elementor's markup, so the Elementor build renders as the original.
 *
 * Structure: one Elementor TOP-LEVEL section per original <section>, with grids
 * as INNER sections inside it. Only top-level sections carry the 100px band
 * padding — inner sections must not, or a heading and its cards drift apart.
 */

/* ── Bands ─────────────────────────────────────────────────────────────────
   Original: section { padding:100px 48px } · .section-inner { max-width:1200px } */
.elementor-page .elementor-section.elementor-top-section {
  padding: 100px 48px;
}

.elementor-page .elementor-section.elementor-top-section > .elementor-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Inner sections are structure, never spacing. */
.elementor-page .elementor-section.elementor-inner-section {
  padding: 0;
  width: 100%;
}

.elementor-page .elementor-section.elementor-inner-section > .elementor-container {
  max-width: 100%;
}

/* ── Page banner ───────────────────────────────────────────────────────── */
.elementor-page .elementor-section.auric-banner {
  padding: 140px 48px 80px;
  position: relative;
  background: var(--bg-primary);
  overflow: hidden;
}

.elementor-page .elementor-section.auric-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(205,127,50,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 60%, rgba(205,127,50,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.elementor-page .elementor-section.auric-banner > .elementor-container { position: relative; z-index: 1; }

/* ── Typography ────────────────────────────────────────────────────────── */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-serif);
  color: var(--text-primary);
  line-height: 1.15;
}

.auric-page-title .elementor-heading-title {
  font-size: clamp(32px, 4.5vw, 52px); font-weight: 700; margin-bottom: 16px;
}

.section-title .elementor-heading-title {
  font-size: clamp(32px, 4vw, 48px); font-weight: 700; margin-bottom: 20px;
}

.elementor-widget-heading .elementor-heading-title .highlight {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-label .elementor-heading-title {
  display: inline-block; font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}

.elementor-widget-text-editor {
  font-family: var(--font-sans); color: var(--text-secondary);
  font-size: 15px; line-height: 1.8;
}
.elementor-widget-text-editor p { margin-bottom: 16px; }

.auric-page-sub, .auric-page-sub .elementor-widget-container {
  font-size: 17px; max-width: 600px;
}

.section-desc, .section-desc .elementor-widget-container {
  font-size: 16px; max-width: 600px; line-height: 1.7;
}

.elementor-widget-text-editor ul { list-style: none; margin: 20px 0; padding: 0; }
.elementor-widget-text-editor ul li {
  color: var(--text-secondary); padding: 8px 0 8px 24px;
  position: relative; font-size: 14px;
}
.elementor-widget-text-editor ul li::before {
  content: '\25C6'; position: absolute; left: 0; top: 10px;
  color: var(--gold); font-size: 8px;
}

/* ── Section header inside a band ──────────────────────────────────────── */
.auric-band .elementor-widget-heading,
.auric-band > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor {
  text-align: center;
}
.auric-band .section-desc .elementor-widget-container { margin: 0 auto; }
.auric-band .elementor-widget-heading + .elementor-widget-text-editor { margin-bottom: 56px; }
.auric-band .elementor-widget-text-editor + .elementor-inner-section,
.auric-band .elementor-widget-heading + .elementor-inner-section { margin-top: 40px; }

/* ── Grids ─────────────────────────────────────────────────────────────────
   Original gap is 28px; rows sit 28px apart. */
.auric-grid > .elementor-container { gap: 28px; align-items: stretch; }
.auric-grid + .auric-grid { margin-top: 28px; }
.auric-grid .elementor-column > .elementor-widget-wrap { align-content: stretch; padding: 0; }
.auric-grid .elementor-widget-icon-box { width: 100%; height: 100%; }

/* ── Cards ─────────────────────────────────────────────────────────────────
   Original: .feature-card { padding:36px 32px } h3 17px · p 14px · icon 56px */
.auric-card, .auric-card > .elementor-widget-container {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  transition: var(--transition);
  height: 100%;
}
.auric-card:hover, .auric-card > .elementor-widget-container:hover {
  transform: translateY(-6px);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-glow);
}

.auric-card .elementor-icon-box-icon { margin-bottom: 20px; }
.auric-card .elementor-icon {
  width: 56px; height: 56px; background: var(--gold-subtle);
  border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--gold); font-size: 24px;
}
.auric-card .elementor-icon svg, .auric-card .elementor-icon svg path {
  fill: var(--gold); width: 26px; height: 26px;
}
.auric-card .elementor-icon i { color: var(--gold); font-size: 24px; }

.auric-card .elementor-icon-box-title, .auric-card .elementor-icon-box-title a {
  font-family: var(--font-serif); font-size: 17px; font-weight: 600;
  color: var(--text-primary); margin-bottom: 12px;
}
.auric-card .elementor-icon-box-description {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--text-secondary); line-height: 1.7; margin: 0;
}

/* Cards are left-aligned in the original. Newer Elementor uses
   `elementor-position-block-start`, older uses `elementor-position-top`. */
.elementor-widget-icon-box.auric-card .elementor-icon-box-wrapper,
.elementor-widget-icon-box.auric-card[class*="elementor-position-"] .elementor-icon-box-wrapper,
.elementor-widget-icon-box.auric-card .elementor-icon-box-content,
.elementor-widget-icon-box.auric-card .elementor-icon-box-title,
.elementor-widget-icon-box.auric-card .elementor-icon-box-description { text-align: left; }
.elementor-widget-icon-box.auric-card .elementor-icon-box-icon { margin-left: 0; margin-right: auto; }

/* ── Two-column rows ───────────────────────────────────────────────────────
   Original: .content-grid / .about-grid { 1fr 1fr; gap 60px/80px; centred } */
.auric-two-col > .elementor-container { gap: 60px; align-items: center; }
.auric-two-col .elementor-column > .elementor-widget-wrap { align-content: center; }
.auric-two-col .elementor-widget-heading,
.auric-two-col .elementor-widget-text-editor { text-align: left; }

.auric-col-image .elementor-widget-image { position: relative; }
.auric-col-image .elementor-widget-image img {
  width: 100%; display: block; border-radius: var(--radius-lg);
}
.auric-col-image .elementor-widget-image::after {
  content: ''; position: absolute; bottom: -16px; right: -16px;
  width: 120px; height: 120px; border: 3px solid var(--gold);
  border-radius: var(--radius-md); z-index: -1;
}
.elementor-widget-image img { border-radius: var(--radius-lg); }

/* ── Checklist (about-feature items) ───────────────────────────────────────
   Small inline ticks in the original — never cards. */
.auric-checklist .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.auric-checklist .elementor-icon-list-item { color: var(--text-secondary); font-size: 14px; }
.auric-checklist .elementor-icon-list-icon svg,
.auric-checklist .elementor-icon-list-icon svg path { fill: var(--gold); width: 15px; height: 15px; }
.auric-checklist .elementor-icon-list-icon i { color: var(--gold); font-size: 14px; }

/* ── CTA band ──────────────────────────────────────────────────────────────
   Gold gradient panel, dark text, everything centred and stacked. */
.auric-cta .cta-banner {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  border-radius: var(--radius-lg);
  padding: 80px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.auric-cta .cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255,255,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.auric-cta .cta-banner > .elementor-widget-wrap { position: relative; z-index: 1; }
.auric-cta .cta-banner .elementor-widget { text-align: center; width: 100%; }

.auric-cta .cta-banner .elementor-heading-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 42px);
  color: var(--bg-primary);
  margin-bottom: 16px;
}
.auric-cta .cta-banner .elementor-heading-title .highlight {
  -webkit-text-fill-color: var(--bg-primary); background: none;
}
.auric-cta .cta-banner .elementor-widget-text-editor,
.auric-cta .cta-banner .elementor-widget-text-editor p {
  color: rgba(0,0,0,0.6); font-size: 16px;
}
.auric-cta .cta-banner .elementor-widget-text-editor {
  max-width: 500px; margin: 0 auto 32px;
}
.elementor-widget-button.auric-btn-cta { display: block; width: 100%; }
.elementor-widget-button.auric-btn-cta .elementor-button {
  background: var(--bg-primary); color: var(--gold);
  display: inline-flex; width: auto; padding: 15px 34px; border-radius: 50px;
}
.elementor-widget-button.auric-btn-cta .elementor-button:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.2); filter: none; transform: none;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.elementor-widget-button .elementor-button {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: #10131c; font-family: var(--font-sans); font-weight: 600;
  font-size: 15px; border-radius: 50px; padding: 15px 34px;
  transition: var(--transition);
}
.elementor-widget-button .elementor-button:hover {
  filter: brightness(1.08); transform: translateY(-2px);
}
.elementor-widget-button.auric-btn-secondary .elementor-button {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}
.elementor-widget-button.auric-btn-secondary .elementor-button:hover {
  border-color: var(--gold); color: var(--gold);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.elementor-page .elementor-section.auric-hero { padding: 0 48px; }
.auric-hero > .elementor-container { align-items: center; }
.auric-hero .elementor-widget { text-align: left; }

.elementor-widget-heading.hero-badge-text .elementor-heading-title {
  display: inline-block; font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
  background: var(--gold-subtle); border: 1px solid var(--border-subtle);
  border-radius: 50px; padding: 9px 20px; margin-bottom: 26px;
}
.auric-hero-title .elementor-heading-title {
  font-size: clamp(44px, 6vw, 76px); font-weight: 600;
  line-height: 1.05; margin-bottom: 20px;
}
.auric-hero-sub, .auric-hero-sub .elementor-widget-container {
  max-width: 620px; font-size: 18px; line-height: 1.7;
}

/* Buttons occupy their own row so they cannot overlap the paragraph. */
.auric-hero-actions { margin-top: 12px; }
.auric-hero-actions > .elementor-container { gap: 16px; justify-content: flex-start; }
.auric-hero-actions .elementor-column { width: auto; flex: 0 0 auto; }
.auric-hero-actions .elementor-widget-button { width: auto; }

/* Stats: flex row with a top rule, 60px apart. */
.auric-stat-row { margin-top: 60px; }
.auric-stat-row > .elementor-container {
  border-top: 1px solid var(--border-subtle);
  padding-top: 36px; gap: 60px; justify-content: flex-start;
}
.auric-stat-row .elementor-column { width: auto; flex: 0 0 auto; }
.auric-stat-value .elementor-heading-title {
  font-family: var(--font-serif); font-size: 32px;
  color: var(--gold); font-weight: 600; margin: 0;
}
.auric-stat-label, .auric-stat-label .elementor-widget-container {
  font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
}
.auric-stat-label p { margin-bottom: 0; }

/* ── Partners + map ────────────────────────────────────────────────────── */
.auric-partners { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin-top: 40px; }
.auric-partners span {
  color: var(--text-muted); font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
}
.auric-paystrip img { max-width: 100%; opacity: 0.7; border-radius: 0; }
.auric-map iframe { width: 100%; min-height: 420px; border: 0; border-radius: var(--radius-md); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .elementor-page .elementor-section.elementor-top-section { padding: 80px 32px; }
  .elementor-page .elementor-section.auric-banner { padding: 120px 32px 60px; }
  .elementor-page .elementor-section.auric-hero { padding: 0 32px; }
  .auric-two-col > .elementor-container { gap: 40px; }
  .auric-grid > .elementor-container { flex-wrap: wrap; }
  .auric-grid .elementor-column { width: 50%; }
}

@media (max-width: 767px) {
  .elementor-page .elementor-section.elementor-top-section { padding: 60px 20px; }
  .elementor-page .elementor-section.auric-banner { padding: 110px 20px 48px; }
  .elementor-page .elementor-section.auric-hero { padding: 0 20px; }
  .auric-grid .elementor-column,
  .auric-two-col .elementor-column { width: 100%; }
  .auric-card, .auric-card > .elementor-widget-container { padding: 28px 24px; }
  .auric-cta .cta-banner { padding: 48px 24px; }
  .auric-stat-row > .elementor-container,
  .auric-hero-actions > .elementor-container { gap: 24px; flex-wrap: wrap; }
  .auric-checklist .elementor-icon-list-items { grid-template-columns: 1fr; }
  .auric-col-image .elementor-widget-image::after { display: none; }
}

/* ── Final alignment corrections ───────────────────────────────────────────
   Three issues remained after the structural rewrite:
   1. Section descriptions sat left-of-centre inside centred bands.
   2. Hero buttons and stats were stretched across the full width, because
      Elementor writes an inline percentage width onto each generated column.
   3. The hero video overlay was too light for the headline to stay legible. */

/* 1. Centre the supporting line under a band heading, like the original
      .features-header .section-desc { margin: 0 auto } with centred text. */
.auric-band .section-desc,
.auric-band .section-desc .elementor-widget-container,
.auric-band .section-desc p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* 2. Hero action + stat columns must hug their content. Elementor writes an
      inline width onto the column, so this needs to override it. */
.auric-hero-actions > .elementor-container > .elementor-column,
.auric-stat-row > .elementor-container > .elementor-column {
  width: auto !important;
  max-width: none;
  flex: 0 0 auto !important;
}

.auric-hero-actions > .elementor-container > .elementor-column > .elementor-widget-wrap,
.auric-stat-row > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding: 0;
}

.auric-hero-actions > .elementor-container { gap: 16px; }
.auric-stat-row  > .elementor-container { gap: 60px; }

/* 3. Deepen the hero overlay so the headline and body copy stay readable
      against the brightest frames of the refinery video. */
.elementor-page .elementor-section.auric-hero > .elementor-background-overlay {
  background-color: rgba(10, 14, 26, 0.82);
}

.auric-hero > .elementor-container { position: relative; z-index: 2; }

/* Keep the last row of an odd-numbered grid aligned to the left rather than
   centring the orphans. */
.auric-grid > .elementor-container { justify-content: flex-start; }


/* ── Button wrapper reset ──────────────────────────────────────────────────
   Elementor applies a widget's CSS class to the WRAPPER div, not the <a>.
   The theme's .btn-* rules are written for anchors, so when both matched, the
   wrapper painted one pill and the inner <a> painted another inside it. The
   wrapper must stay a plain layout box; only the <a> is ever the button. */
.elementor-widget-button,
.elementor-widget-button.auric-btn-primary,
.elementor-widget-button.auric-btn-secondary,
.elementor-widget-button.auric-btn-cta {
  background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0;
}
.elementor-widget-button .elementor-button-wrapper {
  background: none; border: 0; padding: 0;
}