/* ============================================================
   SERVICES.CSS — Services Grid Section
   ============================================================
   PURPOSE:
     Styles the 6-card services grid (Achat résidentiel,
     Refinancement, Renouvellement, Investissement locatif,
     Financement commercial, Situation complexe) and the
     CTA strip below it.

   SAFE TO EDIT:
     - Service card padding if cards feel too tight/spacious
     - Hover background color on .service-card:hover
     - The green CTA strip colors at the bottom

   DO NOT MODIFY:
     - background: var(--line) on .services-grid — this is
       the trick that creates the 1.5px borders between cards.
       The grid background shows through the 1.5px gap between
       white cards, creating the appearance of grid lines.
       If you change this, all border lines disappear.
============================================================ */


/* ── Section Background ───────────────────────────────────── */
#services {
  background: var(--white);
}


/* ── Services Header ──────────────────────────────────────── */
.services-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
  gap: 2rem;
}


/* ── Services Grid ────────────────────────────────────────────
   3-column grid with a border-color background trick.
   The --line color shows through 1.5px gaps between cards,
   creating subtle grid divider lines without actual borders.
────────────────────────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;              /* controls grid line thickness */
  background: var(--line); /* grid line color */
  border: 1px solid var(--line);
}


/* ── Service Card ─────────────────────────────────────────── */
.service-card {
  background: var(--white);
  padding: 2.4rem 2rem;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background 0.25s;
  position: relative;
  overflow: hidden;
}

.service-card:hover {
  background: var(--paper);
}

/* Show the "En savoir plus →" arrow on hover */
.service-card:hover .service-arrow {
  opacity: 1;
  transform: translateX(0);
}


/* ── Service Icon ─────────────────────────────────────────── */
.service-icon {
  width: 36px;
  height: 36px;
  color: var(--gold);
}


/* ── Service Card Heading ─────────────────────────────────── */
.service-card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--ink);
  line-height: 1.2;
}


/* ── Service Card Body ────────────────────────────────────── */
.service-card p {
  font-size: 0.85rem;
  color: var(--stone);
  line-height: 1.65;
}


/* ── Service Arrow (hover reveal) ────────────────────────────
   Hidden by default; slides in from left on card hover.
   Uses margin-top: auto to push to bottom of the flex column.
────────────────────────────────────────────────────────────── */
.service-arrow {
  margin-top: auto;
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}


/* ── Service CTA Strip ────────────────────────────────────── */
.service-cta-strip {
  background: var(--gold-bg);
  border: 1px solid rgba(76,156,46,0.25);
  border-radius: 6px;
  padding: 1.6rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.service-cta-strip-text {
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 400;
}

.service-cta-strip-text strong {
  font-weight: 600;
}