/* Container */
.profile-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Desktop grid */
.profile-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  grid-template-areas:
    "back-team back-team"
    "photo header"
    "photo meta"
    "bio   bio"
    "details details";
  grid-template-rows: auto min-content auto auto auto;
  column-gap: 48px;
  row-gap: 4px;                 /* tighter so meta hugs the header */
  align-items: start;
}

/* Areas */
.profile-header  { grid-area: header; margin-bottom: 0; }
.profile-photo   { grid-area: photo; align-self: start; }
.profile-meta    { grid-area: meta; }
.profile-bio     { grid-area: bio; }
.profile-details { grid-area: details; }

/* Spacing */
.profile-page { padding-top: 32px; }

/* Header */
.profile-name { font-size: 2.25rem; line-height: 1.2; margin: 0; color: #c51517; }
.profile-header .section-rule { width: 180px; height: 4px; margin: 2px 0; background: #000; }
.profile-subtitle { margin: 0 0 2px 0; color: #6b6f76; font-size: 1.5rem; }

/* Photo */
.profile-photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  max-width: 520px;
  margin: 0 auto 2rem;
}
.profile-photo img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* Portrait swap */
.profile-photo .photo-normal {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  opacity: 1;
  z-index: 1;
  transition: opacity .25s ease, filter .25s ease;
}
.profile-photo .photo-fun {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity .25s ease;
}
.profile-photo:hover .photo-fun,
.profile-photo:focus-within .photo-fun { opacity: 1; }
.profile-photo:hover .photo-normal,
.profile-photo:focus-within .photo-normal { opacity: 0; filter: grayscale(0%); }

/* Meta (Contact | Expertise) directly under the name */
.profile-meta {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  margin: -450px 0 12px 0 !important;   /* lift closer to header */
  align-items: start;
  min-width: 0;
  contain: layout;                     /* isolate layout so nothing bubbles upward */
}
.profile-meta h3 { color: #c51517 !important; margin: 0 0 4px 0 !important; }
.profile-contact  { padding-right: 24px; min-width: 0; }
.profile-expertise { padding-left: 24px; min-width: 0; }

/* Accent bars and spacing */
.profile-contact ul,
.profile-details .col > ul {
  position: relative;
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid #c51517;
  list-style: none;
  max-width: 100%;
}

/* List item spacing */
.profile-meta li,
.profile-details li {
  margin: 0.25rem 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* Bio */
.profile-bio p { margin: 0 0 1rem 0; }

/* Details */
.profile-details.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 1.25rem;
}
.profile-details h3 { color: #c51517; }

/* Utilities */
.muted { color: #9aa1a9; }
.profile-content { margin-bottom: 64px; }

/* —— Expertise collapsible, pinned so it only expands downward —— */

/* If you have .expertise-wrapper in markup, this wins.
   It creates a new formatting context and uses gap, not margins. */
.profile-expertise .expertise-wrapper {
  border-left: 2px solid #c51517;
  padding-left: 14px;
  display: grid !important;
  grid-auto-rows: min-content;
  row-gap: 6px;                 /* spacing replaces top margins, no collapse */
  padding-top: 4px;
  overflow: hidden;             /* pin the top edge */
  contain: layout;              /* isolate reflow to this column */
}
/* If you do NOT have .expertise-wrapper, fall back to the column itself. */
.profile-expertise:not(:has(.expertise-wrapper)) {
  border-left: 2px solid #c51517;
  padding-left: 14px;
  display: grid !important;
  grid-auto-rows: min-content;
  row-gap: 6px;
  padding-top: 4px;
  overflow: hidden;
  contain: layout;
}

.profile-expertise .expertise-wrapper ul,
.profile-expertise > ul {
  list-style: none;
  margin: 0 !important;         /* kill collapsing margins */
  padding-left: 0;
}

/* Collapsible body, grows only downward */
.expertise-collapsible {
  max-height: 0;
  overflow: clip;
  margin: 0 !important;         /* nothing to collapse upward */
  transition: max-height .5s ease;
  will-change: max-height;
  transform-origin: top;         /* make intent explicit */
}
.expertise-collapsible.open {
  max-height: 800px;            /* adjust if you have very long lists */
}

/* Items */
.expertise-section ul { list-style-type: none; padding: 0; margin: 0 !important; }
.expertise-section li,
.profile-expertise li { margin: 0; }   /* margin killed, gap handles spacing */

/* Button */
.expand-btn {
  display: inline-block;
  margin: 0;                    /* sits on the grid row below the list */
  background: none;
  border: 1px solid #c00;
  color: #c00;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
.expand-btn:hover { background: #c00; color: #fff; }
.expertise-actions { text-align: left; padding-left: 0; margin: 0; }

/* Back to team link */
.back-team { margin: 1.5rem 0; }
.back-team .back-link {
  color: var(--red, #c00);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}
.back-team .back-link:hover { color: #000; text-decoration: underline; }

/* Mobile and tablet */
@media (max-width: 1023px) {
  .profile-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "back-team"
      "header"
      "photo"
      "meta"
      "bio"
      "details";
    row-gap: 12px;
    grid-template-rows: none;
  }
  .profile-meta { grid-template-columns: 1fr; margin-top: -4px !important; }
  .profile-details.two-col { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .profile-meta { gap: 16px !important; }
  .profile-contact  { padding-right: 0 !important; }
  .profile-expertise { padding-left: 0 !important; }

  /* Long expertise items get ellipsis */
  .profile-expertise li {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Keep two-column layout on tablets */
@media (min-width: 769px) and (max-width: 1200px){
  .profile-grid{
    grid-template-columns: 300px 1fr;
    grid-template-areas:
      "back-team back-team"
      "photo header"
      "photo meta"
      "bio bio"
      "details details";
    column-gap: 32px;
    row-gap: 4px;
    grid-template-rows: auto min-content auto auto auto;
  }
  .profile-photo img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: cover;
  }
  .profile-meta{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: start;
    margin-top: -6px !important;   /* keep it tucked under the header */
  }
  .profile-meta > * { min-width: 0; }
}