/* ============================================================
   APPROACH / VISION — FANUCAiLeadCV
   The strategic centrepiece section. Three pillars map to the
   Sell / Service & Support / Build & Scale mandate.
   ============================================================ */

/* ----------------------------------------------------------
   SECTION OVERRIDES
   Lead paragraph gets extra breathing room here.
---------------------------------------------------------- */

.approach .section__subtitle {
  max-width:   66ch;
  font-size:   var(--text-base);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
}

/* ----------------------------------------------------------
   THREE PILLARS GRID
   Desktop: 3 columns; tablet: 2+1; mobile: stacked.
---------------------------------------------------------- */

.approach__pillars {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-6);
  margin-block-end:      var(--space-12);
}

@media (max-width: 900px) {
  .approach__pillars {
    grid-template-columns: 1fr 1fr;
  }
  /* Third pillar spans full width on 2-col layout */
  .approach__pillars > :nth-child(3) {
    grid-column: 1 / -1;
    max-width:   480px;
    justify-self: center;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .approach__pillars {
    grid-template-columns: 1fr;
  }
  .approach__pillars > :nth-child(3) {
    grid-column: auto;
    max-width:   none;
    justify-self: stretch;
  }
}

/* ----------------------------------------------------------
   PILLAR CARD
---------------------------------------------------------- */

.approach__pillar {
  position:        relative;
  background:      var(--color-surface-1);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-xl);
  padding:         var(--space-8);
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-4);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out);
}

.approach__pillar:hover {
  border-color: var(--color-border-accent);
  box-shadow:   var(--shadow-accent);
  transform:    translateY(-2px);
}

/* Accent top border — decorative line */
.approach__pillar::before {
  content:       '';
  position:      absolute;
  top:           0;
  left:          var(--space-8);
  right:         var(--space-8);
  height:        2px;
  background:    var(--color-accent);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
  opacity:       0.5;
  transition:    opacity var(--duration-base) var(--ease-out);
}

.approach__pillar:hover::before {
  opacity: 1;
}

/* SELL / SERVICE & SUPPORT / BUILD & SCALE label */
.approach__pillar-label {
  font-size:      var(--text-xs);
  font-weight:    var(--font-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-accent);
}

/* Pillar heading */
.approach__pillar-heading {
  font-size:   var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color:       var(--color-text-primary);
}

/* Body text */
.approach__pillar-body {
  font-size:   var(--text-base);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
  flex:        1;      /* push link to bottom */
}

/* Link to corresponding project card */
.approach__pillar-link {
  display:      inline-flex;
  align-items:  center;
  gap:          var(--space-2);
  font-size:    var(--text-sm);
  font-weight:  var(--font-medium);
  color:        var(--color-accent);
  margin-top:   auto;
  transition:   color var(--duration-fast) var(--ease-out),
                gap   var(--duration-fast) var(--ease-out);
}

.approach__pillar-link:hover,
.approach__pillar-link:focus-visible {
  color: var(--color-accent-hover);
  gap:   var(--space-3);
}

.approach__pillar-arrow {
  transition: transform var(--duration-fast) var(--ease-out);
}

.approach__pillar-link:hover .approach__pillar-arrow {
  transform: translateX(3px);
}

/* ----------------------------------------------------------
   CLOSING LINE
   A thesis statement below the three pillars.
---------------------------------------------------------- */

.approach__closing {
  text-align:    center;
  font-size:     var(--text-lg);
  font-weight:   var(--font-medium);
  line-height:   var(--leading-relaxed);
  color:         var(--color-text-primary);
  max-width:     70ch;
  margin-inline: auto;
  padding-block: var(--space-6);
  border-top:    1px solid var(--color-border);
  position:      relative;
}

/* Accent dot before closing text */
.approach__closing::before {
  content:    '"';
  display:    block;
  font-size:  var(--text-4xl);
  line-height: 0.5;
  color:      var(--color-accent);
  opacity:    0.4;
  margin-block-end: var(--space-4);
  font-family: Georgia, serif;
}