/* ═══════════════════════════════════════════════════════════════════════════
   Finanzia Consulting — Layout
   Container · Sections · Grids · Page structures
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Container ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  box-sizing: border-box;
}

.container--narrow {
  max-width: 820px;
}

.container--text {
  max-width: var(--max-w-text);
}

/* ── 2. Section Spacing ───────────────────────────────────────────────────── */
.section {
  padding: var(--sp-24) 0;
}

.section--sm {
  padding: var(--sp-16) 0;
}

.section--lg {
  padding: var(--sp-32) 0;
}

.section--white   { background: var(--c-white); }
.section--bg      { background: var(--c-bg); }
.section--bg-alt  { background: var(--c-bg-alt); }
.section--navy    { background: var(--c-navy); }
.section--petrol  { background: var(--c-petrol); }
.section--dark    { background: var(--c-navy-deep); }

/* ── 3. Index Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 45%, var(--c-petrol) 100%);
  padding: calc(var(--header-h) + var(--sp-20)) 0 var(--sp-24);
  overflow: hidden;
}

/* Subtle texture overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Gold glow bottom-left */
.hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,146,42,.12) 0%, transparent 65%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--sp-12);
  align-items: center;
  position: relative;
}

.hero__content { position: relative; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.hero__proof {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding-top: var(--sp-10);
  margin-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,.1);
}

/* ── 4. Inner Page Hero ───────────────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-petrol) 100%);
  padding: calc(var(--header-h) + var(--sp-16)) 0 var(--sp-20);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Gold accent line at top */
.page-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-light), transparent);
}

/* ── 5. General Grids ─────────────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
}

/* ── 6. Flex helpers ──────────────────────────────────────────────────────── */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-gap-4  { display: flex; align-items: center; gap: var(--sp-4); }
.flex-gap-6  { display: flex; align-items: center; gap: var(--sp-6); }

/* ── 7. Two-column content (text + aside) ─────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.split--60-40 {
  grid-template-columns: 1.4fr 1fr;
}

.split--40-60 {
  grid-template-columns: 1fr 1.4fr;
}

/* ── 8. CTA Block ─────────────────────────────────────────────────────────── */
.cta-block {
  text-align: center;
  padding: var(--sp-24) var(--sp-6);
}

.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-8);
}

/* ── 9. Contact page layout ───────────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}