/* =========================================================
   Card image aspect-ratio locks
   -----------------------------------------------------------
   The theme's own images are all pre-cropped to specific
   proportions (services/portfolio ~7:8, team ~4:5, events
   ~4:3, blog ~3:2). The base theme CSS only sets width:100%
   with no height rule, so any admin-uploaded photo that isn't
   already cropped to those exact proportions distorts the
   card layout. These rules force every card image to the
   same shape the design was built around, no matter what
   size photo gets uploaded.
   ========================================================= */

.xc-service-two__img img,
.xc-service-details .w-img img,
.xc-portfolio-two__img img,
.xc-portfolio-details__inner .w-img img {
    aspect-ratio: 41 / 47;
    object-fit: cover;
    object-position: center;
}

.xc-team-one__img img,
.xc-team-details__img img {
    aspect-ratio: 41 / 52;
    object-fit: cover;
    object-position: center;
}

.xc-event-one__thumb img {
    aspect-ratio: 30 / 23;
    object-fit: cover;
    object-position: center;
}

.xc-blog-one__thumb img,
.xc-blog-list__thumb img,
.xc-sidebar__blog-thumb img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
}

.xc-portfolio-banner__img img,
.xc-event-details .xc-portfolio-banner__img img {
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: center;
}

/* Highlight the current item in the service-details sidebar list */
ul.xc-sidebar__categories li a.active {
    color: var(--xoomcare-white);
    padding-left: 25px;
}
ul.xc-sidebar__categories li a.active::before {
    width: 100%;
}

/* Blog author avatars — the theme ships with no sizing rule for these at
   all; it only "worked" before because the placeholder file happened to
   already be a tiny 40x40 image. Real uploaded photos need this. */
.xc-blog-two__author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.xc-blog-two__author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.xc-blog-list__meta .xc-post-author img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Preloader — the theme has no size constraint on this image at all (only an
   animation), relying on the placeholder file already being small. Real
   uploads need an explicit cap or they show at full native size. */
.xc-preloader__image img {
    width: 110px;
    max-width: 110px;
    height: auto;
    object-fit: contain;
}

/* Footer logo — the width="180" HTML attribute only constrains width, not
   height, so a tall/square uploaded logo can still look oversized. */
.xc-footer-one__logo img {
    max-width: 260px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Homepage "Our Core Services" grid — same issue: the theme only sets
   border-radius:50% with no width/height, relying on the placeholder
   file already being a tiny 94x94 image. Real uploads need this or the
   whole row breaks apart. */
.xc-service-one__img {
    width: 94px;
    height: 94px;
    flex-shrink: 0;
    overflow: hidden;
}
.xc-service-one__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xc-service-one__content {
    flex: 1;
    min-width: 0;
}

/* Footer copyright row — the theme hardcodes height:75px, which is fine on
   desktop (everything fits on one line) but clips content on mobile once
   the copyright text, legal links, and language flags wrap onto multiple
   lines. That's why the flags were only visible on desktop. */
.xc-footer-one__copyright {
    height: auto !important;
    min-height: 75px;
    padding: 16px 0;
}
@media (max-width: 767px) {
    .xc-footer-one__copyright {
        flex-direction: column;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center;
        gap: 14px;
    }
    .xc-footer__legal-links { text-align: center; }
    #xc-lang-switch {
        align-self: center;
    }
}