/**
 * @file
 * Staff profile pages.
 */

.node--type-profiles .layout__region--second {background-color:#fff;}
.node--type-profiles .layout__region--third{
  background-color: rgba(var(--mt-color-base-value), 0.05); /* Very light grey */
  padding: 1em!important;
  border-radius: 4px;
}

/* 1. Profile Image Styling */
.node--type-profiles .field--name-field-profile-image {
  text-align: center; /* Centers the image in the column */
  margin-bottom: 20px;
}
.node--type-profiles .field--name-field-profile-image img {
  width: 280px;         /* Smaller fixed width */
  height: 280px;        /* Matching height to create a square */
  object-fit: cover;    /* Important: Clips the image to fit the square without stretching */
  object-position: top; /* Ensures the face remains visible if the photo is tall */
  border-radius: 12px;   /* Optional: change to 12px if you prefer rounded squares */
  border: 4px solid #fff;
  box-shadow: 0 10px 25px rgba(var(--mt-color-base-value), 0.15);
  transition: transform 0.3s ease;
}

.node--type-profiles .field--name-field-profile-image img:hover {
  transform: scale(1.02); /* Subtle zoom on hover */
}

.node--type-profiles .layout__region--second .field__label{
  font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: var(--mt-color-base-light);
    margin-bottom: 3px;
}
/* 2. Adjusting the side columns for the smaller image */
@media (min-width: 992px) {
  .node--type-profiles .layout--threecol-33-34-33 > .layout__region--first {
    flex: 0 0 300px; /* Constrains the first column to the image size */
  }
}

/* 2. Primary Information (Center Column) */
.node--type-profiles .field--name-title {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--mt-color-base-dark);
  margin-bottom: 15px;
  line-height: 1.1;
}

.node--type-profiles .layout__region--second .field {
  margin-bottom: 10px;
  font-size: 1.05rem;
  display: flex;
  flex-direction: column;
}

.node--type-profiles .field--label-above .field__label::after {
    content: ":";
}

.node--type-profiles .layout__region--second .field__label {
  font-weight: 700;
  color: var(--mt-color-primary); /* Teal for labels */
  margin-right: 8px;
}

/* 3. The Contact Card (Third Column) */
.node--type-profiles .layout__region--third {
  background-color: rgba(var(--mt-color-base-value), 0.05);
  padding: 1.5rem !important;
  border-radius: 8px;
  border-left: 4px solid var(--mt-color-primary); /* Teal accent bar */
}

.node--type-profiles .layout__region--third .field,
.node--type-news .layout__region--second .field
.node--type-pms-cs-news .layout__region--second .field{
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.node--type-profiles .layout__region--third .field__label,
.node--type-news .layout__region--second .field__label,
.node--type-pms-cs-news .layout__region--second .field__label
 {
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: var(--mt-color-base-light);
  margin-bottom: 3px;
}

.node--type-profiles .layout__region--third .field__item {
  font-weight: 600;
  color: var(--mt-color-base-dark);
}

/* 4. Content Sections (Bottom Region) */
.node--type-profiles .layout__region--bottom .block {
  margin-top: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(var(--mt-color-base-value), 0.1);
}

.node--type-profiles .layout__region--bottom .field__label {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--mt-color-base-dark);
  margin-bottom: 20px;
  display: block;
  position: relative;
}

/* 5. List Styling (Studies, Career, Interests) */
.node--type-profiles .layout__region--bottom ul {
  list-style: none;
  padding-left: 0;
}

.node--type-profiles .layout__region--bottom li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.node--type-profiles .layout__region--bottom li::before {
  content: "\f105"; /* FontAwesome Right Angle */
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro';
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--mt-color-primary);
}

/* 6. Teaching/Courses Links */
.node--type-profiles .field--name-field-staff-related-courses- .field__item {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

.node--type-profiles .field--name-field-staff-related-courses- a {
  display: inline-block;
  padding: 6px 15px;
  background-color: #fff;
  border: 1px solid rgba(var(--mt-color-primary-value), 0.2);
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.node--type-profiles .field--name-field-staff-related-courses- a:hover {
  background-color: var(--mt-color-primary);
  color: #fff !important;
  box-shadow: 0 4px 8px rgba(var(--mt-color-primary-value), 0.2);
}