/* ==========================================================================
   File: team-member.css
   Description: Layout and styles for AWD team members
========================================================================== */

/* ===============================
   Team Member Layout
=============================== */
.awd-team-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5em 1em; margin: 2rem auto; max-width: 1300px; }
.awd-team-grid .awd-team-member { width: calc(33.333% - 1.33rem); flex: 1 0 auto; box-sizing: border-box; }
.awd-team-list { flex-direction: column; }
.awd-team-list .awd-team-member { display: flex; align-items: center; gap: 1.5rem; }
.awd-team-member { border-radius: 16px; overflow: hidden; position: relative; }
p.no-posts { text-align: center; font-size: 1.75rem; font-style: italic; }

/* ===============================
   Team Member Image
=============================== */
.team-image { position: relative; overflow: hidden; }
.awd-team-member .team-image img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 2 / 3; -webkit-aspect-ratio: 2 / 3; /* Fallback */ transform: scale(1); transition: transform 0.4s ease; transform-origin: center; will-change: transform; }
a.team-cta-link:hover img { transform: scale(1.03); }
a.team-cta-link:hover .awd-card-icon svg { transform: rotate(45deg); }

/* ===============================
   Team Info Overlay
=============================== */
.team-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 100px 10px 30px; background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0) 100%); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; z-index: 1; gap: 0; }
.team-info .team-name { font-size: 2rem; color: #fff; text-align: left; margin: 0 0 0.25rem; font-weight: 600; letter-spacing: -0.045em; }
.team-info .team-title { font-size: 0.875rem; color: #fff; text-align: left; width: 100%; opacity: 0.85; }
.team-info .awd-card-icon { position: absolute; right: 15px; bottom: 15px; }

/* ===============================
   Modal Layout
=============================== */
.modal-inner { display: flex; flex-wrap: nowrap; max-width: 767px; gap: 2rem; align-items: center; }
.modal-image { flex: 0 0 33%; text-align: center; }
.modal-info { flex: 1 1 auto; }
.modal-title { font-size: 1.2rem; }
.modal-info h3 { margin-bottom: 7px; letter-spacing: -0.05em; font-weight: 600; }
.modal-content { padding-top: 1.5rem; }

/* ===============================
   Fancybox Persistent Modal Fix
=============================== */
.persistent-modal .fancybox__content { will-change: unset; animation: none !important; }

/* ===============================
   Media Queries
=============================== */
@media screen and (max-width:1024px) {
  .awd-team-wrapper { justify-content: center; gap: 2em; }
  .awd-team-grid .awd-team-member { flex: 1 1 45%; width: 100%; max-width: 49.2%; }
}
@media screen and (max-width:767px) {
  .awd-team-grid .awd-team-member { flex: 0 0 100%; width: 100%; max-width: 480px; }
}
@media screen and (max-width:700px) {
  .modal-inner { flex-direction: column; }
  .team-modal-content.fancybox__content { max-width: 480px; }
  .modal-image img { max-width: 270px; }
}
@media screen and (max-width:480px) {
  .modal-image img { max-width: 100%; }
  .team-modal-content.fancybox__content { max-width: 94%; padding: 1em; }
}