/*
 * Extra styles for content that comes from the admin panel.
 * Loaded after style.css; only touches elements the static design didn't have.
 */

/* Service card: uploaded image instead of an icon, and the accent color chosen in the admin */
.adv-card .icon-hex-wrapper .adv-card-image {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.adv-card[style*="--service-color"] .icon-hex-wrapper .bi {
    color: var(--service-color);
}

.adv-card[style*="--service-color"] .metric-progress-bar {
    background: var(--service-color);
}

/* Bootstrap Icons sized like the Font Awesome icons they replace */
.icon-hex-wrapper .bi,
.capsule-right-circle .bi,
.counter-card-inline .icon-box .bi,
.pd-feature-icon-wrap .bi {
    line-height: 1;
}

/* Person without a photo: first letter in a circle */
.avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 36px;
    min-height: 36px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #ffffff;
    font-weight: 700;
}

.team-img-box .avatar-initial {
    border-radius: 0;
    font-size: 3rem;
    aspect-ratio: 4 / 5;
}

/* "Trusted Tech" logos in the hero */
.hero-tech-logos img {
    height: 26px;
    max-width: 90px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.hero-tech-logos a:hover img,
.hero-tech-logos img:hover {
    opacity: 1;
}

/* Technology Stack: logo on a light tint of the color chosen in the admin */
.pd-tech-icon.pd-tech-logo {
    position: relative;
    overflow: hidden;
}

.pd-tech-icon.pd-tech-logo::before {
    position: absolute;
    inset: 0;
    background: var(--tech-color, #7c3aed);
    opacity: 0.1;
    content: "";
}

.pd-tech-icon.pd-tech-logo img {
    position: relative;
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}

/* Service without a detail image: large icon instead */
.sd-overview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    border-radius: 20px;
    background: #f5f3ff;
    color: var(--service-color, #7c3aed);
    font-size: 6rem;
}

/* Project overview text above the challenge / solution cards */
.pd-overview p {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Images inside blog articles */
.bd-article img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.bd-article iframe {
    max-width: 100%;
    border-radius: 12px;
}

/* Google Map under the contact form */
.contact-map {
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
}

/* Gallery cards open the slider with the keyboard too */
.gallery-card:focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 3px;
}

/* Card titles are links now: keep the title color of the design */
.color-inherit,
.color-inherit:hover {
    color: inherit;
}