/* 
 Author: Emma Jaud
 Organization: University of Delaware Library, Museums and Press
 File: libcontact-inlinecard.css
 Description: Define styles for Contact Page Shortcode.
*/

/* CARDS ||||||||||||||||||||||||||||||||||*/
.libcontact-card-inline .libcontact-card {
	padding: 16px 16px;
	display: grid;
	width: 100%;
	position: relative;
    align-content: space-between;
}
.libcontact-card-inline .white-shadow {
	margin: 0 !important;
	border: 1px solid var(--color-gray-light);
}


/* DEFAULT TEMPLATE CARDS ||||||||||||||||||||||||||||||||||*/
.page-template-default .libcontact-card-inline .white-shadow {
	background: #0061b70a;
    border-radius: 1rem;
	border-top: none;
	border-right: 1px solid var(--color-gray-light);
	border-left: 1px solid var(--color-gray-light);
	border-bottom: 1px solid var(--color-gray-light);

    padding: 2rem;
    grid-template-columns: auto;
}
.page-template-default li .libcontact-card-inline .white-shadow,
.page-template-default ul .libcontact-card-inline .white-shadow {
	box-shadow: none;
	border: none;
	background: white;
}

/* CARDS TEXT ||||||||||||||||||||||||||||||||||*/
.libcontact-card-inline .libcontact-card h5 {
    font-weight: bold;
}
.libcontact-card-inline .libcontact-card h3 {
    margin-bottom: 0;
}

/* CARDS ICONS ||||||||||||||||||||||||||||||||||*/
.libcontact-card-inline .libcontact-card .contact-block .linea-svg {
    display: inline-block;
    vertical-align: top;
    margin-right: 1rem;
    width: 1.375rem;
    margin-top: 3px;
	height: auto !important;
}
.libcontact-card-inline .libcontact-card .contact-block .linea-svg-inner {
    margin-right: 0;
    padding-right: 0;
    margin-left: 0;
    padding-left: 0;
	height: 22px !important;
}
.libcontact-card-inline .libcontact-card .phone .linea-svg-inner {
    width: 18px !important;
}
.libcontact-card-inline .libcontact-card .contact-element .linea-svg.white svg {
    stroke: #fff;
    stroke-width: 6px !important;
}


/*  CARD INLINE ||||||||||||||||||||||||||||||||||*/
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 1.25em;
}
.libcontact-card-inline {
    display: flex;
}


/* MEMBER BLOCK ||||||||||||||||||||||||||||||||||*/
.libcontact-card-inline .member-block {
    margin: auto 0;	
	display: grid;
	grid-template-columns: auto 180px;
	grid-gap: 15px;
	width: 100%;
	position: relative;
    
    grid-template-columns: auto;
    grid-gap: 0;
}
/* BLOCK ||||||||||||||||||||||||||||||||||*/
.libcontact-card-inline .block{
	display: grid;
	grid-template-columns: 60px auto;
	grid-gap: 16px;
	width: 100%;
	align-items: center;
	position: relative;
	border-right: 1px solid var(--color-gold);
    
    grid-template-columns: auto;
    grid-gap: 10px;
    border-bottom: 1px solid var(--color-gold);
    border-right: none;
} 
.libcontact-card-inline .block[style*='border-right: none;'] {
    border-bottom: none;
}
/* NAME INFO ||||||||||||||||||||||||||||||||||*/
.libcontact-card-inline .name-block {
    display: block;
/*    border-right: 1px solid var(--color-gray-light);*/
    padding: 0 12px 0 0 !important;
    margin-bottom: 0;
    width: 100%;
    
    border: none;
    padding: 0 0 10px !important;
}
.libcontact-card-inline .block[style*='border-right: none;'] .name-block {
    padding: 0 !important;
}
.libcontact-card-inline .name-element {
	margin: 0 !important;
	line-height: 1.6rem !important;
	border: none !important;
    text-align: center;
}
/* name */
.libcontact-card-inline .name {
	font-size: calc(1.6rem + 0.125vw);
    font-size: 20px;
	line-height: 110% !important;
	padding: 0 0 3px;
	color: var(--color-blue-dark);
	font-family: 'greycliff_semibold';
    letter-spacing: -0.025vmax;
}
/* position */
.libcontact-card-inline .position {
	font-size: 13px;
	line-height: 130% !important;
	padding: 10px 0 0 0;
	color: black;
/*	font-weight: bold;*/
}


/* PHOTO BLOCK ||||||||||||||||||||||||||||||||||*/
.libcontact-card-inline .photo-block {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
    
    height: 60px;
    display: none;
}
.libcontact-card-inline .img3 {
	display: flex;
}
.libcontact-card-inline .img-center {

	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* staff img */
.libcontact-card-inline .photo-block img {
	width: 85px;
	height: 85px;
	border-radius: 50%;	
	object-fit: cover;
}
.libcontact-card-inline .photo-block .linea-svg-inner {
    background: var(--color-blue-dark);
    border-radius: 7rem;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    width: 60px !important;
}


/* CONTACT BLOCK ||||||||||||||||||||||||||||||||||*/
.libcontact-card-inline .contact-block {
    display: block;
    vertical-align: top;
	margin: auto 0 !important;
    
    text-align: center;
}
.libcontact-card-inline .phone1 {
	cursor: default;
}
.libcontact-card-inline .contact-element {
/*	display: block;*/
/*	margin: 2px 0;*/

    margin: 0px 3px 0px;
/*		padding: 3px 6px !important;*/
/*    padding: 2px 6px 2px 4px!important;*/
    padding: 1px 5px 1px 4px!important;
    background: var(--color-gray-light);
    background: #f7f1d7;
    background: var(--color-blue-med);
    border-radius: 2rem;

    display: inline-flex;
    gap: 5px;
}
.libcontact-card-inline .contact-element[title] {
    text-transform: uppercase;
}
.libcontact-card-inline .contact-element-data{
	display: inline-block;
	font-size: 14px;
    
    text-decoration: none;
    font-size: 13px;
    padding-right: 5px;
    color: white !important;
    
    display: flex;
    gap: 5px;
}
.libcontact-card-inline a:hover{
/*	color: var(--color-blue-light) !important;*/
    color: white !important;
}

.libcontact-card-inline .contact-element:hover {
	background: var(--color-blue-dark);
}
.libcontact-card-inline .libcontact-card .contact-block .linea-svg {
    margin-right: 0;
    width: inherit;
    margin-top: 1px;
}


/* MOBILE FORMATTING ||||||||||||||||||||||||||||||||||*/
@media screen and (max-width: 700px){
    .grid {
        grid-template-columns: 1fr;
    }
    
}
@media screen and (max-width: 322px){
	.libcontact-card-inline .contact-element {
		margin: 10px 6px 2px;
	}
	
}