/**
 * VSLiitto Contact Card Styles
 * Used by both the contact-box VC element and contact-information archive
 */

/* Contact Card Base Styles */
.vsliitto-contact-card {
    display: flex;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    width: 100%;
    transition: all 0.3s ease;
    overflow: hidden;
    /* min-width: 220px; */
    /* margin: 0 auto; */
    /* position: relative; */
}


/* Uniform height for side-by-side contact boxes in Visual Composer */
.wpb_row .vc_col-sm-3 .vsliitto-contact-card,
.wpb_row .vc_col-sm-4 .vsliitto-contact-card,
.wpb_row .vc_col-sm-6 .vsliitto-contact-card {
    height: 100%;
}

.vsliitto-contact-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
    border-color: #0066cc;
}

.vsliitto-contact-card:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
    border-color: #0066cc;
}

/* Make entire card clickable in archive view and VC contact boxes */
.vsliitto-contacts-grid .vsliitto-contact-card,
.vsliitto-vc-contact-card {
    cursor: pointer;
}

.vsliitto-contacts-grid .vsliitto-contact-card:hover .vsliitto-contact-card-name a,
.vsliitto-contacts-grid .vsliitto-contact-card:focus .vsliitto-contact-card-name a,
.vsliitto-vc-contact-card:hover .vsliitto-contact-card-name a,
.vsliitto-vc-contact-card:focus .vsliitto-contact-card-name a {
    color: #0066cc;
}

.vsliitto-contact-card-heading {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--nectar-header-font-color, inherit);
}

.vsliitto-contact-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.vsliitto-contact-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    --webkit-aspect-ratio: 1 / 1;
    background: #f5f5f5;
    position: relative;
    overflow: hidden;
}

.vsliitto-contact-card-image img,
.vsliitto-contact-card-image .contact-photo {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    --webkit-aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 25%;
    margin: 0;
    display: block;
}

.contact-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
}

.vsliitto-contact-card-meta {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.vsliitto-contact-card-name,
.vsliitto-contact-card-name h5 {
    font-family: "Basier Circle", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 0;
    margin: 0 0 8px 0;
}

.vsliitto-contact-card-name a {
    color: #003366;
    text-decoration: none;
}

.vsliitto-contact-card-name a:hover {
    color: #0066cc;
    text-decoration: underline;
}

.vsliitto-contact-card-position {
    font-family: "Basier Circle", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
    line-height: 140%;
    letter-spacing: 0;
    color: #666;
    margin: 0 0 8px 0;
}

.vsliitto-contact-card-department {
    font-size: 13px;
    color: #999;
    margin: 0 0 15px 0;
    font-style: italic;
}

.vsliitto-contact-card-details {
    margin-top: auto;
}

.vsliitto-contact-card-phone,
.vsliitto-contact-card-phone a,
.vsliitto-contact-card-email {
    font-family: "Basier Circle", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    line-height: 140%;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    color: #555;
    display: block;
    margin-bottom: 5px;
}

.vsliitto-contact-card-phone a:hover,
.vsliitto-contact-card-email:hover {
    color: #0066cc;
}

/* Archive-specific styles */
.vsliitto-contacts-grid .vsliitto-contact-card {
    /* max-width: 360px; */
    margin: 0;
    height: 100%;
    flex-direction: column;
}

.vsliitto-contacts-grid .vsliitto-contact-card-details {
    margin-top: auto;
}

/* Responsive styles - Tablet and below */
@media (max-width: 768px) {
    .vsliitto-contact-card-meta {
        padding: 15px;
    }
}

/* Mobile small screens - maintain vertical card layout */
@media (max-width: 480px) {

    .vsliitto-contact-card-name,
    .vsliitto-contact-card-name h5 {
        font-size: 20px;
    }

    .vsliitto-contact-card-position {
        font-size: 16px;
    }

    .vsliitto-contact-card-phone,
    .vsliitto-contact-card-phone a,
    .vsliitto-contact-card-email {
        font-size: 15px;
    }
}

.vsliitto-equal-height-row .vc_column-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Mobile/tablet responsive */
@media (max-width: 999px) {

    /* Visual Composer contact boxes only, not archive */
    .wpb_row .vsliitto-contact-card,
    .vc_row .vsliitto-contact-card,
    .row_col_wrap_12 .vsliitto-contact-card,
    .row_col_wrap_12_inner .vsliitto-contact-card {
        max-width: 250px;
        margin: 0;
    }
}