/* ==========================================================================
   Devgun Family Law -- Page: PersonPage profile
   Figma: 03-ajay-profile.png / frame 7138:403. Profile header (square
   headshot + Light Blue info card 7146:901), content column aligned to the
   card (7146:1166), accreditation logos row (7146:1140), Education and
   Admissions section (7146:939), and the baked practice-area band
   (7146:949, Dark Blue -- white text and Light Blue accents come from the
   shared section-bg--dark-blue utility in foundation/base.css, F3 fix).
   Consumes tokens from foundation/tokens.css only -- no raw hex.
   Loaded by templates/App/Pages/Layout/PersonPage.ss.
   ========================================================================== */

/* Legacy _globals.scss gives #main 6rem paddings; the profile header sits
   tighter under the nav per the design (60px inset in frame 7146:901). */
#main.profile {
  padding-top: clamp(2rem, 4vw, 3.75rem);
  padding-bottom: var(--space-section-y);
}

/* Shared 1408px content container (canvas geometry: 1900 frame, x=246
   insets). Chrome components use the same pattern (callout.css etc.). */
.profile-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: var(--space-page-gutter);
  padding-right: var(--space-page-gutter);
}

/* ------------------------------------------------------------------ *
 * Profile header + body share one grid so the info card and the
 * content column below it stay pixel-aligned (design: headshot 450px,
 * 40px gap, card/content column 918px).
 * ------------------------------------------------------------------ */

.profile-header__inner,
.profile-body__inner {
  display: grid;
  grid-template-columns: minmax(260px, 450px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Breathing room between the info card (header) and the bio column below
   it -- the two grids sat flush otherwise (client note 2026-07-04). */
.profile-body__inner {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.profile-body__content {
  grid-column: 2;
  min-width: 0;
  max-width: 60rem; /* readable measure, ~918px column in the design */
}

/* Bio body: all paragraphs render at normal body scale. Structure and
   emphasis are authored explicitly via H-tags in the CMS editor
   (Paragraph > Heading 2/3), NOT auto-applied to the first paragraph.
   (The former design-driven auto-lead on p:first-child was removed per
   client direction 2026-07-04 -- editors want manual heading control;
   the in-content h2/h3 rules below still give those headings the design
   scale.) */

/* In-content headings inside the profile body ("Education and
   Admissions", design 7146:940 ~40px) render at the content-heading
   scale -- same X1b treatment legacy-overrides.css applies to
   .detail-content.typography h2 on the detail pages, scoped here to the
   profile body column. */
.profile-body__content.typography h2 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

/* Headshot: square crop, image radius token. */
.profile-header__photo {
  display: block;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-image);
}

/* Empty state (CMS-safe placeholder): same designed treatment as the
   headshotless team card (Fatima 7160:826) -- dark panel with the
   two-tone brand mountain (fore Forest Green, peak Canopy Blue; peak on
   Dark Green = 4.55:1, UI-graphics AA pass, spec pairing #15). */
.profile-header__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-card-dark);
}

.profile-header__placeholder-mark {
  width: 45%;
  height: auto;
}

.profile-header__mark-fore {
  fill: var(--color-green-forest);
}

.profile-header__mark-peak {
  fill: var(--color-blue-canopy);
}

/* ------------------------------------------------------------------ *
 * Info card -- Light Blue surface (--color-bg-card-rail, pairing #20:
 * Rich Black on Light Blue = 7.90:1, passes).
 * ------------------------------------------------------------------ */

.profile-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--color-bg-card-rail);
  border-radius: var(--radius-card);
  padding: clamp(1.75rem, 4vw, 5rem);
  color: var(--color-text-default);
}

.profile-card__name {
  /* Design 7146:901: the name sits at the H1 scale on the card. */
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  margin: 0 0 0.5rem;
}

.profile-card__credentials {
  font-size: var(--fs-h5);
  line-height: 1.35;
  letter-spacing: var(--ls-h5);
  font-weight: var(--fw-regular);
  color: var(--color-text-default);
  margin: 0 0 1.5rem;
  max-width: 46rem;
}

.profile-card__contact {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.profile-card__contact li {
  display: flex;
  align-items: center;
}

.profile-card__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text-default);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body1);
  line-height: var(--lh-body1);
  letter-spacing: 0;
}

.profile-card__contact a [class^='icon-'] {
  color: var(--color-blue-dark);
  font-size: 1.25rem;
}

/* Thin vertical divider between contact rows (design line 7146:1114). */
.profile-card__contact li + li {
  border-left: 1px solid var(--color-blue-dark);
  padding-left: 1.5rem;
}

/* ------------------------------------------------------------------ *
 * Accreditation logos row (7146:1140) -- natural-width logos, capped
 * height per the design (94px), omitted entirely when no logos exist.
 * ------------------------------------------------------------------ */

.profile-accreditations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.75rem);
  margin: clamp(2rem, 4vw, 3.75rem) 0;
}

.profile-accreditations__logo {
  display: block;
  max-height: 94px;
  width: auto;
}

/* ------------------------------------------------------------------ *
 * Education and Admissions (7146:939) -- H4-scale heading per design.
 * ------------------------------------------------------------------ */

.profile-education {
  margin-top: clamp(2rem, 4vw, 3.75rem);
}

/* ------------------------------------------------------------------ *
 * Baked practice-area band (7146:949). Dark Blue band via
 * section-bg--dark-blue (white text + --icon-accent-color = Light Blue,
 * F3). Tiles are dark cards (--color-bg-card-dark) holding a title link;
 * no icons yet -- child pages carry no icon field (see template note).
 * ------------------------------------------------------------------ */

.practice-band {
  padding: var(--space-section-y) 0;
}

.practice-band__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--space-page-gutter);
}

.practice-band__heading {
  text-align: center;
  color: var(--color-text-on-dark);
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.practice-band__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-gap);
}

.practice-band__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 9rem;
  background-color: var(--color-bg-card-dark);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  color: var(--color-text-on-dark);
  transition: background-color 150ms ease, transform 150ms ease;
}

.practice-band__card:hover,
.practice-band__card:focus-visible {
  /* Lighten toward Forest Green (white on Forest Green = 7.57:1, passes). */
  background-color: var(--color-bg-section-green);
  text-decoration: none;
  transform: translateY(-2px);
}

.practice-band__title {
  font-size: var(--fs-intro);
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: var(--fw-semibold);
  color: var(--color-text-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .practice-band__card {
    transition: none;
  }
}

/* Mobile: the title-only tiles stack 1-up below 768px; the desktop
   min-height (9rem) left ~70px of dead space under each short title
   (edit-plan "tile dead-space on mobile"). Hug the content instead. */
@media (max-width: 767.98px) {
  .practice-band__card {
    min-height: 0;
    padding: 1.25rem 1.5rem;
  }
}

/* ------------------------------------------------------------------ *
 * Featured Blog (7146:1076) -- card grid lives in blocks/blog-cards.css
 * (shared include); this wrapper carries the section rhythm between the
 * practice band above and the callout band below. No headline is
 * rendered (no verbatim source -- see PersonPage.ss note).
 * ------------------------------------------------------------------ */

.profile-featured-blog {
  padding: var(--space-section-y) 0;
  background-color: var(--color-bg-page);
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
  .profile-header__inner,
  .profile-body__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-body__content {
    grid-column: auto;
  }
}

@media (max-width: 575.98px) {
  .profile-card__contact {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-card__contact li + li {
    border-left: 0;
    padding-left: 0;
  }
}

/* Per-lawyer practice chips: icon above the title, mirroring the
   auto-pull grid's mask-recolor technique (Light Blue on the dark band). */
.practice-band__icon {
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: 0.75rem;
  background-color: var(--icon-accent-color, var(--color-blue-light));
  -webkit-mask: var(--icon-src) no-repeat center / contain;
  mask: var(--icon-src) no-repeat center / contain;
}