/* ==========================================================================
   Page: About Carolyn — “My Approach”
   White background, refined cards, three per row on desktop.
   Uses site variables where available (with safe fallbacks).
   ========================================================================== */

:root{
  /* Resolve site palette to local aliases with fallbacks */
  --ink:  var(--tgt-colour-ink,   #0d1b2b);
  --text: var(--tgt-colour-text,  #243447);
  --muted:var(--tgt-colour-muted, #4f6072);
  --gold: var(--tgt-colour-gold,  #d4a574);
  --gold2:var(--tgt-colour-gold-2,#e8c196);
  --white:var(--tgt-colour-white, #ffffff);

  --radius-xl: var(--tgt-radius-xl, 20px);
  --shadow-md: 0 10px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.12);
}

/* Section wrapper */
body .tgt-principles-section{
  background: var(--white);
  padding: clamp(3.5rem, 6vw, 6rem) min(5vw, 48px);
  color: var(--ink);
}

/* Constraining container */
body .tgt-principles-container{
  max-width: 1200px;
  margin: 0 auto;
}

/* Heading & subtitle (dark on white) */
body .section-title-dark{
  margin: 0 0 .5rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  color: var(--ink);
  text-align: center;
}
body .section-title-dark .highlight{ color: var(--gold); }

body .section-subtitle-dark{
  margin: 0 auto clamp(2.25rem, 4vw, 3rem);
  max-width: 860px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
}

/* Responsive grid: 3 / 2 / 1 */
body .tgt-principles-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
}
@media (max-width: 1024px){
  body .tgt-principles-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  body .tgt-principles-grid{ grid-template-columns: 1fr; }
}

/* Card */
body .tgt-principle-card{
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: clamp(20px, 2.2vw, 28px);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(13,27,43,.06);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  isolation: isolate;
}

/* Subtle gold top rule */
body .tgt-principle-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
}

/* Icon chip */
body .tgt-principle-card .principle-icon{
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--ink);
  background: radial-gradient(60% 60% at 45% 40%, var(--gold2), var(--gold));
  border: 1px solid rgba(13,27,43,.08);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  margin-bottom: 14px;
}

/* Title & copy */
body .tgt-principle-card .principle-title{
  margin: 0 0 6px;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink);
  letter-spacing: .01em;
}
body .tgt-principle-card .principle-description{
  margin: 0;
  color: var(--text);
  line-height: 1.65;
}

/* Hover / focus */
@media (hover:hover){
  body .tgt-principle-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(212,165,116,.35);
  }
}
body .tgt-principle-card:focus-within{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(212,165,116,.35), var(--shadow-lg);
  border-color: rgba(212,165,116,.45);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body .tgt-principle-card{ transition: none; }
}