/* ABOUT / TRAVEL PAGE LAYOUT */
.about-page {
  padding: var(--block-gap) var(--side) 1.5rem;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(3 * var(--col) + 3rem); /* cols 10–12 */
  column-gap: 1.5rem;
  row-gap: 4.5rem;
  align-items: start;
}
.about-main { grid-column: 1; }

/* SIDEBAR */
.about-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.125rem; /* 18px — Figma start-a-project block (#50) */
  position: fixed;
  top: 12.75rem; /* 204px — aligns with headline bottom, consistent across About and Services */
  right: var(--side);
  width: calc(3 * var(--col) + 3rem); /* 3 cols + 2 gaps = cols 10–12 */
}
.sidebar-bio {
  font-family: var(--display);
  font-size: 0.75rem; /* 12px = Size/SM (p - style) */
  font-weight: 400;
  font-style: normal;
  line-height: 1.28; /* Figma p - lh (#50) */
  color: var(--text);
  transition: color var(--transition);
  max-width: calc(2 * var(--col) + 1.5rem); /* 2 cols + 1 gap */
}
.sidebar-email {
  display: block;
  font-family: var(--display);
  font-size: 0.75rem; /* 12px = Size/SM */
  font-weight: 400;
  font-style: normal;
  line-height: 1.24;
  color: var(--muted);
  text-decoration: underline;
  letter-spacing: 0;
  text-transform: none;
}
.sidebar-avail {
  color: var(--muted);
}
.sidebar-photo {
  display: block;
  width: calc(2 * var(--col) + 1.5rem); /* 2 cols + 1 gap */
  height: auto;
  object-fit: cover;
}
.sidebar-photo[src=""] { display: none; }

.sidebar-links {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  flex-wrap: wrap;
  position: fixed;
  bottom: 1.5rem;
  left: calc(100vw - var(--side) - 3 * var(--col) - 3rem); /* left edge of col 10 */
}

.about-headline {
  font-family: var(--display);
  font-size: clamp(2.25rem, 3.9vw, 3.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.08;
  color: var(--text);
  transition: color var(--transition);
  margin-bottom: 0;
}
.about-headline em { font-style: italic; }

/* SECTION ROW — label cols 1–2, content cols 3–7 of the 12-col grid */
.about-row {
  display: grid;
  grid-template-columns: calc(3 * var(--col) + 3rem) minmax(0, calc(5 * var(--col) + 6rem));
  column-gap: 1.5rem;
  margin-bottom: 4.5rem; /* 72px — Figma section gap (desktop) */
  align-items: baseline;
}
.row-label {
  font-family: var(--display);
  font-size: 1.5rem; /* 24px = Size/XL (h2) */
  font-weight: 300;
  font-style: italic;
  line-height: 1.24;
  color: var(--text);
  transition: color var(--transition);
}
.sidebar-label {
  font-family: var(--display);
  font-size: 1rem; /* 16px = Size/LG (h3) on laptop+ — #50 */
  font-weight: 400;
  font-style: normal;
  line-height: 1.24;
  color: var(--text);
  transition: color var(--transition);
}

/* SKILLS (Subsection component) */
.skill-item { margin-bottom: 1.5rem; } /* 24px — Figma between subsections */
.skill-item:last-child { margin-bottom: 0; }
.skill-name {
  font-family: var(--display);
  font-size: 1rem; /* 16px = Size/LG (h3) */
  font-weight: 400;
  font-style: normal;
  line-height: 1.24;
  color: var(--text);
  margin-bottom: 0.75rem; /* 12px — Figma h3 → desc gap */
  transition: color var(--transition);
}
.skill-desc {
  font-family: var(--base);
  font-size: 0.875rem;
  font-weight: 400; /* Figma p — #50 */
  font-style: normal;
  line-height: 1.28; /* Figma p — #50 */
  color: var(--muted);
  transition: color var(--transition);
}

/* SIDEBAR TEXT WRAPPER (services page — bio + email) */
.sidebar-text {
  display: flex;
  flex-direction: column;
  gap: 1.125rem; /* 18px — match .about-sidebar gap so all stack gaps are equal */
}

/* BIO / SERVICES TEXT */
.services-text,
.bio-para {
  font-family: var(--base);
  font-size: 0.875rem;
  font-weight: 400; /* Figma p — #50 */
  font-style: normal;
  line-height: 1.28; /* Figma p — #50 */
  color: var(--muted);
  margin-bottom: 1.5rem; /* 24px — Figma p mb */
  transition: color var(--transition);
}
.bio-para:last-child { margin-bottom: 0; }

/* SIDEBAR / CONTACT LINKS */
.contact-link {
  font-family: var(--base);
  font-size: 0.75rem; /* match .label style (#50) */
  font-weight: 400;
  line-height: 1.12;
  color: var(--nav-2);
  text-decoration: none;
  transition: color var(--transition);
}
.contact-link:hover { color: var(--nav-1); }

/* SERVICES — headline spans full width, sidebar starts below it */
body[data-theme="services"] .about-layout > .about-headline {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* SERVICES LISTS — 2-column flow used for Services, Clients, City Guides.
   Using CSS Grid instead of columns: mobile Safari has clipping/fragmentation
   bugs with multi-column layouts and break-inside: avoid (#100). */
.travel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  list-style: none;
}
.travel-grid li {
  margin-bottom: var(--gap-list-item); /* 6px with natural leading, 16px when trimmed */
}
.travel-grid li > .bio-para { margin-bottom: 0; } /* suppress the 24px paragraph margin inside list items */

/* Pages with sidebar social links don't need footer links too */
.footer-links { display: none; }

/* MOBILE */
@media (max-width: 767px) {
  .about-layout {
    grid-template-columns: 1fr;
    row-gap: 3.75rem;       /* 60px — matches .about-row margin-bottom so sidebar→main and section→section gaps equal (#78) */
  }
  .about-headline { order: -2; }
  .about-sidebar {
    position: static;
    order: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    column-gap: 1rem; /* 16px on mobile */
    row-gap: 0.75rem;
    align-items: start;
    width: 100%;
    right: auto;
    top: auto;
  }
  .sidebar-label { grid-column: 1 / -1; }
  .sidebar-photo { grid-column: 1; width: 100%; }
  .sidebar-text  { grid-column: 2; gap: 0.75rem; }
  .sidebar-bio   { grid-column: 2; max-width: none; }
  .sidebar-links { display: none; }
  .footer-links  { display: flex; }
  .about-row {
    grid-template-columns: 1fr;
    gap: 2.25rem;          /* 36px — Figma h2 → first subsection on mobile */
    margin-bottom: 3.75rem; /* 60px — Figma between-sections on mobile */
  }
  .row-label     { font-size: 1.75rem; } /* 28px = Size/XL on mobile (h2 section headings) */
  .sidebar-label { font-size: 1.25rem; } /* 20px on mobile — same h3 scale as .skill-name (#89) */
  .skill-name    { font-size: 1.25rem; } /* 20px on mobile (was 16px) — keep hierarchy above 16px body */
  .bio-para,
  .services-text { font-size: 1rem; } /* 16px = Size/Base on mobile (applies to .bio-para inside .travel-grid li too) */
  .skill-desc { font-size: 1rem; }
  .sidebar-bio,
  .sidebar-email { font-size: 0.875rem; } /* 14px on mobile, 12px on laptop+ (#50 — p - style; #89 email matches bio) */
}