/**
 * La Villa Hermosa — About page (page-about.php)
 * Source: Figma "About" (node 64:2)
 * Sections not covered by shared components: Story, Pull Quote, Values,
 * Team, Process, Testimonial, CTA.
 */

/* ================= Story ================= */
#story, #process {
  background: var(--bg-surface);
}
.about-story {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: start;
  gap: var(--space-20);
}
.about-story__text { display: flex; flex-direction: column; gap: var(--space-7); color: var(--text-secondary); }
.about-story__lead { color: var(--text-secondary); font-weight: 600; }
.about-story__image {
  align-self: stretch;
  min-height: 388px;
  border-radius: var(--radius-xl);
  background: var(--bg-sand) center/cover no-repeat;
}
@media (max-width: 900px) {
  .about-story { grid-template-columns: 1fr; }
  .about-story__image { order: -1; min-height: 280px; }
}

/* ================= Pull Quote ================= */
.about-quote { background: var(--bg-dark); color: var(--text-on-dark); padding-block: var(--space-24); }
.about-quote__text {
  margin: 0;
  max-width: 1280px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-display-lg);
  line-height: var(--lh-display-lg);
  letter-spacing: var(--ls-display-lg);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* ================= Values (Four Section) ================= */
.about-values h2 { color: var(--text-primary)!important;}
.about-values__text { gap: var(--space-10); background: var(--bg-surface);}
.about-values__list { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }
.about-value { display: flex; flex-direction: column; gap: var(--space-2); }
.about-value__title { margin: 0; color: var(--text-primary)!important;}
.about-value__desc { margin: 0; color: var(--text-primary)!important;}

/* ================= Team ================= */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.team-member { display: flex; flex-direction: column; gap: var(--space-4); }
.team-member__photo,
.team-member__photo-placeholder { border-radius: 14px; overflow: hidden; }
.team-member__photo { aspect-ratio: 302 / 360; background: var(--bg-sand); }
.team-member__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-member__photo-placeholder { width: 100%; height: 100%; min-height: 240px; background: var(--bg-sand); }
.team-member__caption { display: flex; flex-direction: column; gap: 2px; }
.team-member__name { font-family: var(--font-body); font-weight: 700; font-size: var(--text-h5); color: var(--text-primary); }
.team-member__role { color: var(--text-muted); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* ================= Process ================= */
.process-row { display: flex; gap: var(--space-20); align-items: flex-start; }
.process-left { display: flex; flex-direction: column; gap: var(--space-3); width: 420px; flex-shrink: 0; }
.process-list { display: flex; flex-direction: column; flex: 1; }
.process-step { display: flex; gap: var(--space-7); padding-block: var(--space-7); border-top: 1px solid var(--border-default); }
.process-step:first-child { padding-top: 0; border-top: none; }
.process-step__num { flex: 1 0 0; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.1; color: var(--text-brand); }
.process-step__content { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.process-step__title { margin: 0; }
.process-step__desc { margin: 0; }
@media (max-width: 900px) {
  .process-row { flex-direction: column; gap: var(--space-8); }
  .process-left { width: 100%; }
  .process-step__num { flex: 0 0 auto; width: 48px; }
}

/* ================= Testimonial ================= */
.about-testimonial { display: flex; flex-direction: column; gap: var(--space-8); max-width: 1280px; }
.about-testimonial__quote { margin: 0; }
.about-testimonial__attribution { margin: 0; color: var(--text-primary); }

/* ================= CTA ================= */
.about-cta { background: var(--brand-primary-dark); color: var(--text-on-dark); padding-block: var(--space-20); }
.about-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.about-cta__heading { color: var(--text-on-dark); margin: 0; flex: 1 0 auto; max-width: 700px; }
.about-cta__buttons { display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 700px) { .about-cta__inner { flex-direction: column; align-items: flex-start; } }