/* ==========================================================================
   Section: Team List
   Layout: team_list
   Source: pages/our-team-v1/figma (Partners / Counsel / Associates / Staff sections)

   Figma spec (verified from section-specs.json):
     - Group heading  : Playfair Display 43px / 55 line-height, weight 400, #333333
     - Group divider  : 1px thin gray line under the heading (border-bottom)
     - Card image     : 383x410 (aspect 383/410), object-fit cover
     - Card container : padding 10px sides, 13px bottom, gap 3px between image and body
     - Member name    : Playfair Display 24px, weight 400, #333333
     - Member title   : Aktiv Grotesk 16px, weight 400, #333333
     - LinkedIn icon  : 21x20 (#010101 square, white "in" glyph), bottom-right of image
     - Grid columns   : 4 at desktop
     - Grid gap       : 53px between cards
     - Section gap    : 69px between designation groups
   ========================================================================== */

.team-list {
    background-color: var(--color-white);
    padding-top: clamp(40px, calc(-18px + 7.552vw), 127px);
    padding-bottom: clamp(40px, calc(-82px + 15.885vw), 223px);
}
.team-list .container{
    max-width: 100%;
    padding-left: 86px;
    padding-right: 63px;
}
.team-list.content-columns{
    padding-top: clamp(48px, calc(26.713px + 2.775vw), 80px) !important;
    padding-bottom: clamp(48px, calc(26.713px + 2.775vw), 80px) !important;
}
/* --------------------------------------------------------------------------
   Group (Partners, Counsel, Associates, Staff)
   -------------------------------------------------------------------------- */
.team-list-group {
    margin-bottom: clamp(48px, 5vw, 69px);
}

.team-list-group:last-child {
    margin-bottom: 0;
}

/* Heading + underline. Figma has a hairline gray divider running the full row width
   directly below the heading text. */
.team-list-group-heading {
	color: var(--color-text-dark);
	font-family: var(--font-heading);
	font-size: clamp(30px, 3vw, 43px);
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: 0;
	margin: 0 0 clamp(35px, calc(13px + 2.865vw), 68px);
	padding-bottom: clamp(35px, calc(25px + 1.302vw), 50px);
	border-bottom: 1px solid #333;
}

/* --------------------------------------------------------------------------
   Grid of cards
   -------------------------------------------------------------------------- */
.team-list-grid {
    gap: clamp(24px, 3vw, 53px) clamp(24px, 3vw, 53px);
    display: flex; flex-wrap: wrap;
}

.team_list-center .team-list-grid{
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.team-list-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 13px;   /* Figma exact: 10 top / 10 sides / 13 bottom */
    gap: 3px;                  /* Figma exact */
    transition: all 0.4s;
    width: calc((100% - 3 * clamp(24px, 3vw, 53px)) / 4);
}
.team-list-card:hover{
    background-color: #045A83;
    transform: translateY(-4px);
}
/* Media wrapper — becomes the positioning context for the LinkedIn overlay. background-color: var(--color-brand-navy); */
.team-list-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 383 / 410;
    overflow: hidden;
    background: #eee url("/wp-content/themes/fordobrien/assets/images/team_member_photo_bg.jpg") no-repeat;
    position: relative;
}
.person_backside_blue_gradient .team-list-card-media{
    background: linear-gradient(180deg, #E8F2F8 0%, #76B5D0 100%);
}
.team-list-card-media-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}
.team-list-card-media-wrap.name_data::after {
	content: attr(data-i);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--color-white);
	font-weight: 800;
	font-size: 50px;
}

/* Card image (383:410) */
.team-list-card-media-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	transition: opacity 0.25s ease;
	position: absolute;
	inset: 0;
    z-index: 1;
}

.team-list-card-media-link:hover .team-list-card-image {
    opacity: 0.92;
}

.team-list-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: opacity 0.25s ease;
}

/* Body link (name + title beneath image) — kept out of the media anchor. */
.team-list-card-body-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.team-list-card-body-link:visited,
.team-list-card-body-link:hover,
.team-list-card-body-link:focus {
    color: inherit;
    text-decoration: none;
}

/* LinkedIn "in" icon overlay on bottom-right of the image (inside the media box).
   Figma: 21x20, background #010101 with 5px radius, white glyph — already in the SVG. */
.team-list-card-linkedin {
	position: absolute;
	right: 0;
	top: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	line-height: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.team-list-card-linkedin svg {
    display: block;
    width: 21px;
    height: 20px;
}

.team-list-card-linkedin:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* --- Card body (name + designation + city) -------------------------------- */
.team-list-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
	padding: 16px 25px 0 0;
    position: relative;
}

/* Figma: Playfair Display, 400, 24px */
.team-list-card-name {
    color: var(--color-text-dark);
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0;
}
.team-list-card:hover .team-list-card-name{
    color: var(--color-white);
}
/* Figma: Aktiv Grotesk, 400, 16px */
.team-list-card-designation,
.team-list-card-city {
    display: block;
    color: var(--color-text-dark);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
}
.team-list-card-designation{
    color: var(--color-brand-blue);
}
.team-list-card:hover .team-list-card-designation,
.team-list-card:hover .team-list-card-city{
    color: var(--color-white);
}

.page-template-teamfind .team-list{
    padding-top: clamp(40px, 4vw, 80px) !important;
	padding-bottom: clamp(40px, 4vw, 80px) !important;
}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1600px) {
    .team-list .container{
        padding-left: 24px; padding-right: 24px;
    }
}

@media (max-width: 1440px) {
    .team-list-grid {
        gap: 40px;
    }
    .team-list-card{
        width: calc((100% - 3 * 40px) / 4);
    }
}

@media (max-width: 1200px) {
    .team-list-grid {
        gap: 32px;
    }
    .team-list-card{
        width: calc((100% - 3 * 32px) / 4);
    }
    .team-list-card-name {
        font-size: 22px;
    }
}

@media (max-width: 991px) {
    .team-list-grid {
        gap: 32px;
    }
    .team-list-card{
        width: calc((100% - 1 * 32px) / 2);
    }
}

@media (max-width: 767px) {
    .team-list .container{
        padding-left: 20px; padding-right: 20px;
    }
    .team-list-grid {
        gap: 15px;
    }
    .team-list-card{
        width: calc((100% - 1 * 15px) / 2);
    }
    .team-list-group {
        margin-bottom: 50px;
    }
    .team-list-group-heading {
        margin-bottom: 24px;
        padding-bottom: 16px;
    }
    .team-list-card-name {
        font-size: 20px;
    }
    .team-list-card-designation,
    .team-list-card-city {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .team-list-grid {
        gap: 24px 0;
    }
    .team-list-card{
        width: 100%;
    }
    .team-list-card-media {
        aspect-ratio: 4 / 5;
    }
    .team-list-group {
	    margin-bottom: 30px;
    }
}