/* Skora Media - responsive fixes (layout only; loaded last, after style.css and the page stylesheet).
   Found by testing every page at 320-3840px wide, portrait and landscape. No design, colour or content changes. */

/* Social Media Management: platform screenshots were squashed by width:100% + max-height:400px.
   Keep the same box size, but crop instead of stretching. */
.sk-smm-service-image img {
    object-fit: cover;
    object-position: center;
}

/* Social Media Management: the 60x60 platform logos were squeezed into the 48px icon box on small screens. */
.sk-smm-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* Contact: "Visit Our Office" grid collapsed to one 1fr column that refused to shrink below its widest child
   (content was 631px wide on a 375px phone). minmax(0,1fr) lets the column follow the screen width. */
.sk-contact-location4-container > * {
    min-width: 0;
}
@media (max-width: 1000px) {
    .sk-contact-location4-container {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Floating stat cards hang 50-60px outside their image on wide screens. Once the page container is
   as wide as the screen (tablet / small laptop) they were cut off, so keep them inside. */
@media (max-width: 1199px) {
    .engagement-card {
        right: 0;
    }
    .sk-campaign-reach-card {
        right: 0;
    }
}

/* Influencer Marketing: at 992-1199px the four category cards are narrow and the follower pill / category
   badge were wider than the card. Slightly tighter padding keeps them inside. */
.sk-im-followers,
.sk-im-category-badge {
    max-width: 100%;
    box-sizing: border-box;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .sk-im-followers {
        padding: 9px 12px;
        font-size: 13px;
    }
    .sk-im-category-badge {
        top: 14px;
        left: 14px;
        padding: 8px 14px;
        font-size: 12px;
        max-width: calc(100% - 28px);
    }
}

/* Campaign Management "staircase" process: each card is pushed 90px further right (up to 430px) but is also
   70% wide, so on 769-1300px wide wrappers the lower cards ran past the edge. The step now shrinks to fit
   (it is still exactly 90px whenever there is room). */
@media (min-width: 769px) {
    .sk-campaign-process-card:nth-child(1) { margin-left: 70px !important; }
    .sk-campaign-process-card:nth-child(2) { margin-left: calc(70px + 1 * min(90px, 7.5% - 17.5px)) !important; }
    .sk-campaign-process-card:nth-child(3) { margin-left: calc(70px + 2 * min(90px, 7.5% - 17.5px)) !important; }
    .sk-campaign-process-card:nth-child(4) { margin-left: calc(70px + 3 * min(90px, 7.5% - 17.5px)) !important; }
    .sk-campaign-process-card:nth-child(5) { margin-left: calc(70px + 4 * min(90px, 7.5% - 17.5px)) !important; }
}

/* Floating stat cards: also keep them inside on 1200-1399px screens. */
@media (max-width: 1399px) {
    .engagement-card,
    .sk-campaign-reach-card {
        right: 0;
    }
}

/* Web Development hero: single-column grids could not shrink below the fixed-width laptop mock-up
   (650px content on a 600px screen). */
.wdev-page .wdev-hero-grid > *,
.wdev-page .wdev-intro-grid > *,
.wdev-page .wdev-tech-grid > * {
    min-width: 0;
}
@media (max-width: 991px) {
    .wdev-page .wdev-hero-grid,
    .wdev-page .wdev-intro-grid,
    .wdev-page .wdev-tech-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Campaign Management showcase cards: three stats separated by a fixed 100px gap did not fit a 244px card
   on phones. */
@media (max-width: 575px) {
    .sk-campaign-showcase-meta {
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }
}