/* ==========================================================================
   1. ARCHIVE, GRID & CAROUSEL DESIGN
   ========================================================================== */

.sg-portfolio-archive-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 112px) 20px;
    font-family: Poppins, "Segoe UI", Arial, sans-serif;
}

/* Header & Layout */
.sg-archive-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}
.sg-header-content h2 {
    color: #1a202c;
    font-size: clamp(2rem, 4vw, 32px);
    font-weight: 700;
    margin: 0 0 5px 0;
}
.sg-header-content p {
    color: #718096;
    margin: 0;
    font-size: 16px;
}
.sg-view-all-btn {
    border: 1px solid #4285f4;
    color: #1a202c;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 4px;
}
.sg-view-all-btn:hover {
    background: #4285f4;
    color: #fff;
}

/* Filters */
.sg-portfolio-filters {
    margin-bottom: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.sg-filter-btn {
    background: transparent;
    border: none;
    color: #4a5568;
    cursor: pointer;
    font-size: 16px;
    padding: 5px 0;
    transition: color 0.2s ease;
}
.sg-filter-btn.active {
    color: #4285f4;
    font-weight: 600;
    border-bottom: 2px solid #4285f4;
}

/* Layout Wrappers */
.sg-portfolio-wrapper-carousel {
    display: flex;
    align-items: center;
    
}
.sg-portfolio-wrapper-grid {
    display: block;
}
.sg-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    color: #4285f4; /* Theme Blue */
    transition: all 0.3s ease;
    flex-shrink: 0; /* Prevents arrows from being squished */
}


/* Base Grid Structure */
.sg-portfolio-grid-new {
    width: 100%;
    transition: opacity var(--sg-speed) ease;
}

/* STATIC GRID LAYOUT (FORCED 3-COLUMN) */
.sg-portfolio-grid-new.sg-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 25px !important;
    width: 100%;
    align-items: stretch;
}

/* CAROUSEL LAYOUT */
.sg-layout-carousel {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.sg-layout-carousel::-webkit-scrollbar {
    display: none; 
}
.sg-layout-carousel .sg-portfolio-card-new {
    flex: 0 0 calc(33.333% - 17px);
    scroll-snap-align: start;
}

/* Card Styling */
.sg-portfolio-card-new {
    border: 2px solid #4285f4;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sg-portfolio-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(66, 133, 244, 0.14);
}
.sg-card-media {
    border-bottom: 1px solid #edf2f7;
    padding: 15px;
    background: #f8fafc;
}

/* Prevent images from breaking the grid container */
.sg-card-media img {
    width: 100%;
    max-width: 100% !important; 
    height: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Card Content & Typography */
.sg-card-content {
    padding: 20px;
    flex-grow: 1;
}
.sg-card-title {
    color: #4285f4;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 5px 0;
}
.sg-card-subtitle {
    color: #718096;
    font-size: 14px;
    margin: 0 0 20px 0;
}

/* Meta Tags (Our Work / Source) */
.sg-card-meta-section {
    margin-bottom: 15px;
}
.sg-meta-label {
    display: block;
    color: #4a5568;
    font-size: 14px;
    margin-bottom: 8px;
}
.sg-work-tags, .sg-source-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sg-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
}
.sg-tag .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    margin-right: 4px;
}
.sg-tag-blue {
    background: #e8f0fe;
    color: #4285f4;
}
.sg-tag-green-outline {
    border: 1px solid #34a853;
    color: #34a853;
    background: transparent;
}

/* Card Footer */
.sg-card-footer {
    padding: 15px 20px;
    border-top: 1px solid #edf2f7;
}
.sg-details-link {
    color: #4285f4;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    font-size: 14px;
}
.sg-details-link span {
    margin-left: 8px;
    transition: transform 0.2s ease;
}
.sg-portfolio-card-new:hover .sg-details-link span {
    transform: translateX(4px);
}

/* Empty State */
.sg-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #718096;
    background: #f8fafc;
    border-radius: 8px;
}

/* Responsive Archive Overrides */
@media(max-width: 900px) {
    .sg-portfolio-grid-new.sg-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .sg-layout-carousel .sg-portfolio-card-new {
        flex: 0 0 calc(50% - 12.5px);
    }
}
@media(max-width: 600px) {
    .sg-portfolio-grid-new.sg-layout-grid {
        grid-template-columns: 1fr !important;
    }
    .sg-layout-carousel .sg-portfolio-card-new {
        flex: 0 0 100%;
    }
    .sg-carousel-nav {
        display: none; 
    }
}

/* ==========================================================================
   2. SINGLE CASE STUDY DESIGN (FIXED CENTERING & TECH LOGOS)
   ========================================================================== */

/* ==========================================================================
   2. SINGLE CASE STUDY DESIGN 
   ========================================================================== */

/* Force full viewport width breakout for the white background */
.sg-case-study {
    background: #ffffff !important;
    color: #18233b;
    padding: 40px 20px 100px;
    font-family: 'Manrope',sans-serif;
    
    /* Viewport Breakout Trick */
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box;
}

/* Keep the inner content safely centered */
.sg-case-container {
    margin: 0 auto !important;
    max-width: 1240px;
    width: 100%;
    box-sizing: border-box;
}

.sg-back-link{color:#60708c;display:inline-block;font-size:.88rem;font-weight:700;margin:0 0 36px;text-decoration:none}
.sg-case-hero{align-items:center;display:grid;gap:clamp(34px,6vw,84px);grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);padding:20px 0 90px}
.sg-case-hero-copy .sg-badge{margin-bottom:18px}
.sg-case-hero h1{font-size:clamp(3rem,6.3vw,5.7rem);letter-spacing:-.07em;line-height:.94;margin:0;font-weight:700}
.sg-case-lead{color:#63708a;font-size:1.15rem;line-height:1.7;max-width:480px; padding-top: 17px;}
.sg-case-actions{align-items:center;display:flex;flex-wrap:wrap;gap:20px;margin-top:30px}
.sg-case-button{background:var(--sg-primary);border-radius:999px;color:#fff;display:inline-block;font-size:.9rem;font-weight:800;padding:14px 20px;text-decoration:none;transition:transform var(--sg-speed) ease,box-shadow var(--sg-speed) ease}
.sg-case-button:hover{box-shadow:0 14px 26px color-mix(in srgb,var(--sg-primary) 32%,transparent);color:#fff;transform:translateY(-3px)}
.sg-case-tech-count{color:#6f7c94;font-size:.83rem;font-weight:700}
.sg-case-hero-visual{min-height:390px;position:relative}
.sg-case-orb{background:linear-gradient(135deg,color-mix(in srgb,var(--sg-primary) 25%,white),color-mix(in srgb,var(--sg-accent) 28%,white));border-radius:48% 52% 45% 55%;inset:7%;position:absolute}
.sg-case-desktop{background:#17223b;border:6px solid #17223b;border-radius:15px 15px 8px 8px;box-shadow:0 30px 50px rgba(24,35,59,.22);left:5%;overflow:hidden;position:absolute;top:11%;transform:perspective(1200px) rotateY(-4deg) rotateX(2deg);width:88%;z-index:1}
.sg-case-desktop img{aspect-ratio:16/9;display:block;object-fit:cover;object-position:top;width:100%}
.sg-case-mobile{background:#17223b;border:5px solid #17223b;border-radius:20px;bottom:2%;box-shadow:-14px 22px 36px rgba(24,35,59,.25);overflow:hidden;position:absolute;right:1%;width:22%;z-index:2}
.sg-case-mobile img{aspect-ratio:9/19;display:block;object-fit:cover;object-position:top;width:100%}
.sg-case-facts{background:#fff;border:1px solid #e7ebf3;border-radius:var(--sg-radius);display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:100px}
.sg-case-facts div{border-right:1px solid #e7ebf3;padding:25px}
.sg-case-facts div:last-child{border:0}
.sg-case-facts span,.sg-case-technology>span{color:#4b5563;display:block;font-size:.68rem;font-weight:800;letter-spacing:.11em;margin-bottom:8px;text-transform:uppercase}
.sg-case-facts strong{font-size:.98rem; font-weight: 500; }
.sg-case-story{display:grid;gap:11%;grid-template-columns:.72fr 1.28fr;margin-bottom:110px}
.sg-case-sidebar h2,.sg-case-features h2,.sg-case-cta h2{font-size:clamp(2rem,3.5vw,3.4rem);letter-spacing:-.055em;line-height:1.03;margin:0;font-weight:700}
.sg-case-technology{border-top:1px solid #e4e8f0;margin-top:34px;padding-top:22px}

/* TECH LOGO SIZE FIX - Restricts the size with !important overrides */
.sg-tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}
.sg-tech-item {
    align-items: center;
    background: #f5f6fa;
    border: 1px solid #e8eaf0;
    border-radius: 8px;
    color: #526078;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 700;
    gap: 8px;
    padding: 6px 12px;
}
.sg-tech-item img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.sg-case-narrative{display:grid;gap:60px}
.sg-story-block{display:grid;gap:24px;grid-template-columns:44px 1fr}
.sg-story-number{color:var(--sg-primary);font-size:.8rem;font-weight:800;padding-top:4px}
.sg-story-block h2{font-size:1.7rem;letter-spacing:-.04em;margin:0 0 16px}
.sg-case-prose{color:#5d6a83;font-size:1.05rem;line-height:1.85}
.sg-case-prose p{margin:0}
.sg-case-features{border-top:1px solid #e2e7ef;padding-top:80px}
.sg-case-features header{align-items:end;display:flex;justify-content:space-between;margin-bottom:38px}
.sg-feature-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.sg-feature-grid article{background:#fff;border:1px solid #e6eaf1;border-radius:18px;padding:25px}
.sg-feature-mark{color:var(--sg-primary);font-size:1.4rem}
.sg-feature-grid h3{font-size:1.1rem;margin:18px 0 9px}
.sg-feature-grid p{color:#68758c;line-height:1.65;margin:0}
.sg-case-cta{align-items:center;background:linear-gradient(135deg,#1c2945,#27395f);border-radius:var(--sg-radius);color:#fff;display:flex;justify-content:space-between;margin-top:100px;overflow:hidden;padding:clamp(34px,6vw,72px);position:relative}
.sg-case-cta:after{background:var(--sg-primary);border-radius:50%;content:"";filter:blur(3px);height:260px;opacity:.3;position:absolute;right:-110px;top:-150px;width:260px}
.sg-case-cta .sg-eyebrow{color:#c5c0ff}
.sg-case-cta h2{max-width:520px}
.sg-case-cta p:not(.sg-eyebrow){color:#ced7e8;line-height:1.7;max-width:550px}
.sg-case-button-light{background:#fff;color:#263754;position:relative;white-space:nowrap;z-index:1}
.sg-case-button-light:hover{color:#263754}

@media(max-width:850px){
    .sg-case-hero,.sg-case-story{grid-template-columns:1fr}
    .sg-case-hero{padding-bottom:60px}
    .sg-case-hero-visual{max-width:670px;width:100%}
    .sg-case-facts{grid-template-columns:repeat(2,1fr);margin-bottom:70px}
    .sg-case-facts div:nth-child(2){border-right:0}
    .sg-case-facts div:nth-child(-n+2){border-bottom:1px solid #e7ebf3}
    .sg-case-story{gap:40px;margin-bottom:75px}
    .sg-case-cta{align-items:flex-start;flex-direction:column;gap:24px}
}
@media(max-width:520px){
    .sg-case-study{padding:18px 15px 70px}
    .sg-case-hero-visual{min-height:270px}
    .sg-case-facts{grid-template-columns:1fr}
    .sg-case-facts div,.sg-case-facts div:nth-child(2){border-bottom:1px solid #e7ebf3;border-right:0}
    .sg-case-facts div:last-child{border-bottom:0}
    .sg-case-features{padding-top:55px}
    .sg-case-features header{display:block}
    .sg-feature-grid{grid-template-columns:1fr}
    .sg-case-cta{margin-top:65px}
    .sg-case-mobile{width:26%}
}

/* ==========================================================================
   3. LOCAL SEO WORK / BRANDING OVERRIDES (SINGLE CASE STUDY SPECIFIC)
   ========================================================================== */

/* Removed the left-margin hack to ensure it stays centered, updated to pure white */
.sg-case-study {
    background: #ffffff;
    color: #101b32;
}

.sg-back-link{color:#2864f0}
.sg-case-hero{padding-bottom:65px}
.sg-case-hero h1{font-size:clamp(2.8rem,5.6vw,5rem)}
.sg-case-lead,.sg-case-prose{color:#69778e}
.sg-case-button{background:#20b862;border-radius:3px;box-shadow:none;padding:12px 18px}
.sg-case-button:hover{background:#15964c;box-shadow:none}
.sg-case-orb{background:#fff;border-radius:18px}
.sg-case-desktop{border-color:#101b32;border-radius:8px}
.sg-case-mobile{border-color:#101b32;border-radius:12px}
.sg-case-facts{border-color:#e8edf4;border-radius:10px;box-shadow:0 6px 18px rgba(16,27,50,.035)}
.sg-case-story{margin-bottom:85px}
.sg-feature-grid article{border-color:#e3eaf4;border-radius:10px}
.sg-feature-mark,.sg-story-number{color:#20b862}
.sg-case-cta{background:#fff;border:1px solid #e4edf9;border-radius:12px;color:#101b32}
.sg-case-cta:after{background:#b9d6ff;opacity:.42}
.sg-case-cta .sg-eyebrow{color:#2864f0}
.sg-case-cta p:not(.sg-eyebrow){color:#69778e}
.sg-case-button-light{background:#2864f0;color:#fff}
.sg-case-button-light:hover{background:#174fc9;color:#fff}



/* ==========================================================================
   4. IMPROVED FILTER UI & PAGINATION
   ========================================================================== */

/* Modern Filter Pills */
.sg-portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}

.sg-filter-btn {
    background: #ffffff;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    border-radius: 40px;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.sg-filter-btn:hover {
    border-color: #cbd5e1;
    color: #1a202c;
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.sg-filter-btn.active {
    background: var(--sg-primary, #2864f0);
    color: #ffffff;
    border-color: var(--sg-primary, #2864f0);
    box-shadow: 0 4px 14px rgba(40, 100, 240, 0.25);
}

/* Pagination Links */
.sg-portfolio-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 50px;
    width: 100%;
}

.sg-portfolio-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    background: #ffffff;
    color: #4a5568;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.sg-portfolio-pagination a.page-numbers:hover {
    background: #f8fafc;
    color: #1a202c;
    border-color: #cbd5e1;
}

.sg-portfolio-pagination .page-numbers.current {
    background: var(--sg-primary, #2864f0);
    color: #ffffff;
    border-color: var(--sg-primary, #2864f0);
    box-shadow: 0 4px 12px rgba(40, 100, 240, 0.25);
}

.sg-portfolio-pagination .page-numbers.dots {
    background: transparent;
    border: none;
    color: #a0aec0;
}