/* ================================================================
   Diving Team Members – Frontend Styles
   ================================================================ */

/* ── CSS Custom Properties (overridable via Elementor controls) ── */
.dt-team-section {
    --dt-bg:           #1a2332;
    --dt-card-bg:      #1e2d40;
    --dt-img-bg:       #152030;
    --dt-img-radius:   12px;
    --dt-name-color:   #ffffff;
    --dt-title-color:  #8ab4d4;
    --dt-desc-color:   #c8d8e8;
    --dt-card-radius:  16px;
    --dt-card-shadow:  0 8px 32px rgba(0,0,0,.45);
    --dt-gap:          28px;
    --dt-font-name:    1.2rem;
    --dt-font-title:   0.72rem;
    --dt-font-desc:    0.9rem;
    --dt-cols-desk:    3;
    --dt-cols-tab:     2;
    --dt-cols-mob:     1;

    background-color: var(--dt-bg);
    padding: 60px 20px;
    box-sizing: border-box;
}

/* ── Grid ── */
.dt-team-grid {
    display: grid;
    grid-template-columns: repeat( var(--dt-cols-desk), 1fr );
    gap: var(--dt-gap);
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .dt-team-grid {
        grid-template-columns: repeat( var(--dt-cols-tab), 1fr );
    }
}

@media (max-width: 600px) {
    .dt-team-grid {
        grid-template-columns: repeat( var(--dt-cols-mob), 1fr );
    }
}

/* ── Card ── */
.dt-member-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--dt-card-radius);
    overflow: hidden;
    box-shadow: var(--dt-card-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
}

.dt-member-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
}

/* ── Photo wrapper ── */
.dt-member-photo {
    background-color: var(--dt-img-bg);
    border-radius: var(--dt-img-radius) var(--dt-img-radius) 0 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
}

.dt-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-radius: inherit;
}

/* Placeholder when no image */
.dt-member-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a3a5c 0%, #0d2035 100%);
}

.dt-member-photo-placeholder svg {
    width: 80px;
    height: 80px;
    opacity: .35;
    fill: #8ab4d4;
}

/* ── Info block ── */
.dt-member-info {
    background-color: var(--dt-card-bg);
    border-radius: 0 0 var(--dt-card-radius) var(--dt-card-radius);
    padding: 22px 24px 26px;
    flex: 1;
    text-align: center;
}

.dt-member-name {
    font-size: var(--dt-font-name);
    font-weight: 700;
    color: var(--dt-name-color);
    margin: 0 0 6px;
    line-height: 1.3;
    letter-spacing: .01em;
}

.dt-member-job {
    font-size: var(--dt-font-title);
    font-weight: 700;
    color: var(--dt-title-color);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 14px;
}

.dt-member-desc {
    font-size: var(--dt-font-desc);
    color: var(--dt-desc-color);
    line-height: 1.65;
    margin: 0;
}

/* Section heading */
.dt-section-heading {
    text-align: center;
    margin-bottom: 44px;
}

.dt-section-heading h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dt-name-color);
    margin: 0 0 10px;
}

.dt-section-heading p {
    color: var(--dt-desc-color);
    font-size: 1rem;
    margin: 0;
}

/* No members notice */
.dt-no-members {
    text-align: center;
    color: var(--dt-desc-color);
    font-size: 1rem;
    padding: 40px 0;
}