/**
 * Staff Profile pages — /staff/[username]
 *
 * Display Suite renders these pages with .fac-staff-profile-page.ds-2col as the
 * outer wrapper. This file overrides DS's float layout with CSS Grid and applies
 * the full visual redesign. No other pages are affected.
 *
 * DOM structure (from DS 2-col layout config):
 *
 * .fac-staff-profile-page.ds-2col
 *   .profile-info-fields.group-left        ← bio / education / scholarship / links
 *     <div>                                ← name/title node (stafftitlename view mode)
 *       .node--view-mode-stafftitlename
 *         .profilef-name-head              ← h2 name
 *         .profilef-title-head             ← h3 title + dept
 *     <div>                                ← per-field wrapper (no class, DS default)
 *       <div>Label text</div>
 *       <div>HTML content</div>
 *   .profile-contact-fields.group-right    ← photo / contact / appointment
 *     <div>                                ← photo (img has inline w/h — overridden below)
 *     <div>                                ← duplicate empty name/title (hidden)
 *     .StaffProfContBlock                  ← contact card
 *     .LibProfApptsBlock                   ← appointment button(s)
 */

/* -------------------------------------------------------
   1. Page wrapper + grid override
------------------------------------------------------- */

/* DS uses floats; override with grid */
.fac-staff-profile-page.ds-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 2rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

/* Remove clearfix pseudo-elements (they become orphan grid items) */
.fac-staff-profile-page.ds-2col::before,
.fac-staff-profile-page.ds-2col::after {
  display: none !important;
}

/* DS sets width: 50%; float: left — reset both */
.fac-staff-profile-page.ds-2col > .group-left,
.fac-staff-profile-page.ds-2col > .group-right {
  float: none;
  width: 100%;
  min-width: 0;
}

/* -------------------------------------------------------
   2. Name / title hero (top of left column)
------------------------------------------------------- */

/* Outer wrapper div around the stafftitlename node */
.profile-info-fields > div:first-child {
  margin-bottom: 1.5rem;
}

.node--view-mode-stafftitlename {
  background: var(--gmu-primary-green);
  border-radius: var(--radius-md);
  padding: 2rem 2.5rem;
  box-shadow: var(--shadow-md);
}

.profilef-name-head {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-white) !important;
  line-height: 1.2;
}

.profilef-title-head {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--gmu-accent-yellow) !important;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.profilef-title-head span {
  font-size: 100% !important;  /* override inline style="font-size:85%" */
  color: rgba(255,255,255,0.85);
  font-weight: var(--font-weight-normal);
  display: block;
  margin-top: 0.15rem;
}

/* -------------------------------------------------------
   3. Left column field sections — card style
------------------------------------------------------- */

/* Every direct-child div in the left column AFTER the first (name) one */
.profile-info-fields.group-left > div + div {
  background: var(--gmu-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

/* Field label (first inner div = the label text: "Biography", "Education", etc.) */
.profile-info-fields.group-left > div + div > div:first-child {
  font-family: var(--font-heading);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-primary-green);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 3px solid var(--gmu-accent-yellow);
}

/* Field value (second inner div = the HTML content) */
.profile-info-fields.group-left > div + div > div:last-child {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gmu-dark-gray);
}

.profile-info-fields.group-left > div + div > div:last-child p:first-child { margin-top: 0; }
.profile-info-fields.group-left > div + div > div:last-child p:last-child  { margin-bottom: 0; }

.profile-info-fields.group-left > div + div > div:last-child a {
  color: var(--gmu-primary-green);
  text-decoration: underline;
}

.profile-info-fields.group-left > div + div > div:last-child ul,
.profile-info-fields.group-left > div + div > div:last-child ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

/* -------------------------------------------------------
   4. Right column: photo
------------------------------------------------------- */

/* Hide the empty duplicate name/title DS puts in the right column.
   DS renders it two ways: wrapped in .node--view-mode-stafftitlename, and as a
   plain div directly containing h2.profilef-name-head — catch both. */
.profile-contact-fields .node--view-mode-stafftitlename,
.profile-contact-fields > div:has(> .node--view-mode-stafftitlename),
.profile-contact-fields > div:has(> h2.profilef-name-head) {
  display: none !important;
}

/* Photo wrapper — first child of right column */
.profile-contact-fields > div:first-child {
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 4px solid var(--gmu-accent-yellow);
  aspect-ratio: 1;
  background: #eee;
}

/* Override inline width/height attributes — make all photos consistent */
.profile-contact-fields > div:first-child img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: cover;
  object-position: top center;
}

/* -------------------------------------------------------
   5. Right column: contact card
------------------------------------------------------- */

.StaffProfContBlock {
  background: var(--gmu-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.StaffProfContBlock > .field__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gmu-primary-green);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--gmu-accent-yellow);
}

/* Contact node: email, phone, campus, building fields */
.node--view-mode-staffcontact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--font-size-14);
  color: var(--gmu-dark-gray);
}

.node--view-mode-staffcontact a {
  color: var(--gmu-primary-green);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  word-break: break-all;
}

.node--view-mode-staffcontact a:hover {
  text-decoration: underline;
}

/* DS field label inside contact node */
.node--view-mode-staffcontact .field__label {
  font-size: var(--font-size-12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gmu-primary-green);
  font-weight: var(--font-weight-semibold);
}

/* -------------------------------------------------------
   6. Right column: appointment button(s)
------------------------------------------------------- */

.LibProfApptsBlock {
  margin-bottom: 1rem;
}

.LibProfApptsBlock a {
  display: block;
  text-align: center;
  padding: 0.65rem 1rem;
  background: var(--gmu-accent-yellow);
  color: var(--gmu-black);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  transition: background 0.15s, color 0.15s;
}

.LibProfApptsBlock a:hover {
  background: var(--gmu-primary-green);
  color: var(--gmu-white);
}

.LibProfApptsBlock > div > div {
  padding: 0;
}

/* "Schedule Appointment:" label text (b tag) */
.LibProfApptsBlock b {
  display: block;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gmu-primary-green);
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

/* Layout wrapper inside LibProfApptsBlock */
.LibProfApptsBlock .layout--onecol,
.LibProfApptsBlock .layout__region {
  padding: 0;
}

/* -------------------------------------------------------
   7. Selected Publications and other fields that DS renders
      as <h3 class="field__label"> directly in the left column
      (not wrapped in a div+label+value structure)
------------------------------------------------------- */

/* The field__label h3 sits directly inside .group-left.
 * h3 + div are siblings — split the card shadow across both using clip-path
 * so neither element casts a shadow at the junction between them.
 * The yellow rule uses ::after (a block inside the h3's padding box) so it
 * is naturally inset by 1.5rem on each side, matching the border-bottom on
 * the label divs inside regular cards. */
.profile-info-fields.group-left > .field__label {
  font-family: var(--font-heading);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-primary-green);
  background: var(--gmu-white);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 1.25rem 1.5rem 0;   /* no bottom padding — ::after provides spacing */
  margin: 0;
  box-shadow: var(--shadow-md);
  clip-path: inset(-40px -40px 0 -40px); /* shadow on top/sides, hidden at bottom seam */
}

/* Inset yellow rule — block pseudo-element sits inside the h3's padding box */
.profile-info-fields.group-left > .field__label::after {
  content: '';
  display: block;
  height: 3px;
  background: var(--gmu-accent-yellow);
  margin-top: 0.5rem;
}

/* Content div that follows — completes the card look */
.profile-info-fields.group-left > .field__label + div {
  background: var(--gmu-white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 0.75rem 1.5rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gmu-dark-gray);
  box-shadow: var(--shadow-md);
  clip-path: inset(0 -40px -40px -40px); /* shadow on sides/bottom, hidden at top seam */
}

.profile-info-fields.group-left > .field__label + div p:first-child { margin-top: 0; }
.profile-info-fields.group-left > .field__label + div p:last-child  { margin-bottom: 0; }

.profile-info-fields.group-left > .field__label + div a {
  color: var(--gmu-primary-green);
  text-decoration: underline;
}

/* -------------------------------------------------------
   8. Right column: extra link fields
      (Home Page, Misc link, Twitter, LinkedIn icon, etc.)
      These are plain <div> children with no CSS class.
------------------------------------------------------- */

/* Wrapper for any extra unstyled divs in the right column
   (skips: photo [:first-child], StaffProfContBlock, LibProfApptsBlock) */
.profile-contact-fields > div:not(:first-child):not(.StaffProfContBlock):not(.LibProfApptsBlock) {
  margin-bottom: 0.4rem;
}

/* Group extra link items visually as a "Links" card.
   Use the first such extra div to open a card, and style all together. */
.profile-contact-fields > div:not(:first-child):not(.StaffProfContBlock):not(.LibProfApptsBlock):not(:empty) {
  background: var(--gmu-white);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Label text ("Home Page", "Misc link", "Twitter") */
.profile-contact-fields > div:not(:first-child):not(.StaffProfContBlock):not(.LibProfApptsBlock) > div:first-child:not(:only-child) {
  font-size: 0.6875rem;  /* 11px — --font-size-11 is not defined in variables.css */
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gmu-dark-gray);
  margin-bottom: 0.15rem;
}

/* Link value */
.profile-contact-fields > div:not(:first-child):not(.StaffProfContBlock):not(.LibProfApptsBlock) a {
  color: var(--gmu-primary-green);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  word-break: break-word;
}

.profile-contact-fields > div:not(:first-child):not(.StaffProfContBlock):not(.LibProfApptsBlock) a:hover {
  text-decoration: underline;
}

/* Social icon images (LinkedIn, ORCID icons) */
.profile-contact-fields > div:not(:first-child):not(.StaffProfContBlock):not(.LibProfApptsBlock) img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: middle;
}

/* -------------------------------------------------------
   9. Hide generic "Faculty/Staff Profile #NNN" page title
      (body class added by gmu_libraries_preprocess_html)
------------------------------------------------------- */

body.page--staff-profile h1 {
  display: none;
}

/* -------------------------------------------------------
   8. Responsive
------------------------------------------------------- */

@media (max-width: 860px) {
  /* Switch to flex so order property controls stacking sequence.
     align-items: stretch overrides desktop "start" → every item full-width.
     gap: 0 removes the desktop 2rem grid gap; individual card margins handle spacing. */
  .fac-staff-profile-page.ds-2col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0.75rem 2rem;
  }

  /* Dissolve column wrappers — their children become direct flex items */
  .fac-staff-profile-page.ds-2col > .group-left,
  .fac-staff-profile-page.ds-2col > .group-right {
    display: contents;
  }

  /* 1 — name/title hero (first child of left column) */
  .profile-info-fields.group-left > div:first-child          { order: 1; }
  /* 2 — photo (first child of right column) */
  .profile-contact-fields.group-right > div:first-child      { order: 2; }
  /* 3 — contact card, appointment buttons, extra links */
  .profile-contact-fields.group-right > *:not(:first-child)  { order: 3; }
  /* 4 — bio, education, publications etc */
  .profile-info-fields.group-left > div:not(:first-child),
  .profile-info-fields.group-left > .field__label            { order: 4; }

  .node--view-mode-stafftitlename {
    padding: 1.5rem 1.25rem;
  }
}

@media (max-width: 540px) {
  .profile-info-fields.group-left > div + div {
    padding: 1rem 1.1rem;
  }
}