/*
Theme Name: Mazuma
Author: JE Consulting
Author URI: https://www.mazumamoney.co.uk/
Version: 1.0.0
text-domain: mazuma
*/

.profile-card-slider .slick-slide > div > div {
    padding-right: 2.8em;
}

.profile-card {
    background-color: var(--purple-700);
    background: linear-gradient(183.52deg, var(--purple-700) 2.97%, #7B08B5 97.03%);
    padding: 20px;
    /* border-radius: 20px; */
    clip-path: url(/wp-content/themes/mazuma-2026/assets/images/team-profile-cutout.svg#card-shape);
    aspect-ratio: 246 / 366;
    margin: 1em 0;
}

.profile-card > a {
    color: var(--blue-400);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.profile-card.green-400 > a {
    color: var(--green-400);
}

.profile-card .upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-card .upper .h6 {
    color: var(--blue-400);
    font-weight: 900;
    font-size: 20px;
    padding-right: 20px; 
}

.profile-card.green-400 .upper .h6 {
    color: var(--green-400);
} 

.profile-card .bg-blob::before {
    content: url('/wp-content/themes/mazuma-2026/assets/images/mazuma-blob-a.svg');
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    z-index: -1;
}

.profile-card .bg-blob.blob-b::before {
    content: url('/wp-content/themes/mazuma-2026/assets/images/mazuma-blob-b.svg');
    filter: brightness(0) saturate(100%) invert(79%) sepia(64%) saturate(600%) hue-rotate(93deg) brightness(107%) contrast(105%);
    bottom: -13px;
}

.profile-card .bg-blob.blob-c::before {
    content: url('/wp-content/themes/mazuma-2026/assets/images/mazuma-blob-c.svg');
    filter: brightness(0) saturate(100%) invert(63%) sepia(34%) saturate(2077%) hue-rotate(137deg) brightness(103%) contrast(101%);
}

.profile-card .center {
    position: relative;
    display: flex;
    justify-content: center;
    mask: url(/wp-content/themes/mazuma-2026/assets/images/mazuma-blob-a-overlay-aspect.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: bottom center;
    mask-mode: luminance;
    mask-size: 100% 100%;
    aspect-ratio: 215.21 / 230;
}

.profile-card .center .wp-post-image {
    width: auto;
    height: 230px;
    filter: drop-shadow(8px 0 white) drop-shadow(-8px 0 white) drop-shadow(0 0 white) drop-shadow(0 -8px white);
}

.profile-card .pattern-container {
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.profile-card .pattern-container::before {
    content: url(/wp-content/themes/mazuma-2026/assets/images/profile-cards-a-asset-nf.svg);
    filter: brightness(0) saturate(100%) invert(76%) sepia(16%) saturate(6930%) hue-rotate(132deg) brightness(98%) contrast(101%);
    width: 0.7em;
    height: 0.7em;
}

.profile-card.green-400 .pattern-container::before {
    filter: brightness(0) saturate(100%) invert(79%) sepia(64%) saturate(600%) hue-rotate(93deg) brightness(107%) contrast(105%);
}

.profile-card .lower .pattern-container {
    transform: rotate(180deg);
}

.profile-card .lower {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.profile-card .lower .job-role {
    color: #fff;
    font-family: var(--secondary-font);
    font-weight: 900;
    font-size: 16px;
    text-align: right;
}

.profile-card.clubs {
    transform: rotate(-3.85deg) translateX(10px);
}

.profile-card.spades {
    transform: rotate(2.77deg);
}

.profile-card.hearts {
    transform: rotate(-0.23deg);
}

.profile-card.diamonds {
    transform: rotate(3.55deg);
}

/* Resonsive Code */
/* Device = Laptops, Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
}

/* Device = Tablets, Ipads (portrait) */
@media (min-width: 768px) and (max-width: 1024px) {
}

/* Device = Tablets, Ipads (landscape) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}

/* Device = Low Resolution Tablets, Mobiles (Landscape) */
@media (min-width: 481px) and (max-width: 767px) {
}

/* Device = Most of the Smartphones Mobiles (Portrait) */
@media (min-width: 320px) and (max-width: 480px) {
}