/* ==========================================================
   SR CREATIVE STUDIO — NATIVE RESPONSIVE CASE STUDY STYLES
   ========================================================== */

.cs-main {
    width: 100%;
    background-color: #fafafa;
    color: #111111;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cs-section {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(30px, 5vw, 60px) clamp(20px, 3.5vw, 40px);
    box-sizing: border-box;
    transition: padding 0.3s ease;
}

.cs-section-header { 
    margin-bottom: clamp(24px, 3vw, 40px); 
}

.cs-section-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 1;
    color: rgba(107, 114, 128, 0.43);
    margin: 0 0 10px 0;
    transition: font-size 0.3s ease;
}

.cs-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(32px, 4.5vw, 64px);
    line-height: 1.1;
    color: #111111;
    margin: 0;
    transition: font-size 0.3s ease;
}

.cs-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(28px, 4.2vw, 64px);
    line-height: 1.1;
    color: #6b7280;
    margin: clamp(30px, 4vw, 60px) 0 clamp(15px, 2vw, 30px) 0;
    transition: font-size 0.3s ease;
}

/* Base Grids */
.cs-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 21px;
    align-items: stretch;
    transition: all 0.3s ease;
}

.cs-grid-2-unequal {
    display: grid;
    grid-template-columns: minmax(280px, 431px) 1fr;
    gap: 21px;
    align-items: stretch;
    transition: all 0.3s ease;
}

/* Cards (for colored logo bg, text cards, spec cards) */
.cs-card {
    border: 1px solid #6b7280;
    background-color: #fafafa;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cs-info-card {
    border: 1px solid #6b7280;
    background-color: #fafafa;
    padding: clamp(20px, 3vw, 40px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: padding 0.3s ease;
}

.cs-info-row {
    font-family: 'Inter', sans-serif;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.5;
    color: #6b7280;
    margin-bottom: 20px;
    transition: font-size 0.3s ease;
}

.cs-info-row strong { font-weight: 600; color: #6b7280; }
.cs-info-row span   { font-weight: 400; color: #6b7280; }

.cs-info-desc {
    font-family: 'Inter', sans-serif;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.65;
    color: #6b7280;
    margin-top: 10px;
    transition: font-size 0.3s ease;
}

.cs-info-desc strong { font-weight: 700; color: #6b7280; }

.cs-statement {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2.3vw, 32px);
    line-height: 1.7;
    color: #6b7280;
    text-align: center;
    max-width: 1134px;
    margin: 0 auto 40px auto;
    transition: font-size 0.3s ease;
}

.cs-statement-left {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2.3vw, 32px);
    line-height: 1.7;
    color: #6b7280;
    text-align: left;
    margin: 0;
    transition: font-size 0.3s ease;
}

.cs-paragraph {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(18px, 2.1vw, 32px);
    line-height: 1.7;
    color: #111111;
    margin-bottom: 30px;
    transition: font-size 0.3s ease;
}

/* Colour swatches */
.cs-palette-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    transition: gap 0.3s ease;
}

.cs-swatch {
    height: clamp(200px, 35vw, 514px);
    flex: 1;
    min-width: 120px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: height 0.3s ease;
}

.cs-swatch-hex {
    font-family: 'Inter', sans-serif;
    font-size: clamp(18px, 2vw, 32px);
    font-weight: 400;
    transform: rotate(-90deg);
    white-space: nowrap;
    transition: font-size 0.3s ease, transform 0.3s ease;
}

/* Typography specimen cards */
.cs-specimen-card {
    border: 1px solid #6b7280;
    background: #fafafa;
    padding: clamp(20px, 3vw, 40px);
    box-sizing: border-box;
    transition: padding 0.3s ease;
}

.cs-specimen-name {
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.79;
    color: #111111;
    margin-bottom: 10px;
    transition: font-size 0.3s ease;
}

.cs-specimen-text {
    font-size: clamp(20px, 2.5vw, 36px);
    line-height: 1.41;
    color: #111111;
    word-break: break-all;
    transition: font-size 0.3s ease;
}

/* ==========================================================
   BENTO IMAGE GRID
   — Desktop (>=900px): Matches Figma 1440px placement precisely
   — Mobile (<=899px): Smooth transition to single-column responsive placement
   ========================================================== */

.cs-img-bento {
    display: grid;
    gap: 21px;
    margin-bottom: 21px;
    width: 100%;
    align-items: stretch;
    transition: all 0.3s ease;
}

/* Desktop Figma Specific Ratios (>= 900px) */
@media (min-width: 900px) {
    .cs-img-bento--2col        { grid-template-columns: 1fr 1fr; }
    .cs-img-bento--3col        { grid-template-columns: 1fr 1fr 1fr; }
    .cs-img-bento--left-lg     { grid-template-columns: 580fr 531fr; }
    .cs-img-bento--right-lg    { grid-template-columns: 531fr 580fr; }
    
    /* Figma Unequal Ratios per case study */
    .cs-img-bento--pramodan-r1 { grid-template-columns: 419fr 694fr; }
    .cs-img-bento--pramodan-r2 { grid-template-columns: 595fr 520fr; }
    
    .cs-img-bento--churn-r1    { grid-template-columns: 417fr 694fr; }
    .cs-img-bento--churn-r2    { grid-template-columns: 627fr 484fr; }

    .cs-img-bento--vytae-r1    { grid-template-columns: 683fr 428fr; }
    .cs-img-bento--vytae-r2    { grid-template-columns: 402fr 709fr; }

    .cs-img-bento--root-r1     { grid-template-columns: 334fr 780fr; }
    .cs-img-bento--root-r2     { grid-template-columns: 753fr 361fr; }

    /* Cells in Desktop Bento fill their designated container bounds cleanly */
    .cs-img-cell {
        height: 100%;
    }
    .cs-img-cell img {
        height: 100%;
        object-fit: cover;
    }
}

/* Base cell */
.cs-img-cell {
    overflow: hidden;
    display: block;
    line-height: 0;
    position: relative;
    transition: all 0.3s ease;
}

.cs-img-cell img {
    width: 100%;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.cs-img-cell:hover img {
    transform: scale(1.015);
}

/* Vertical stacker inside a bento column */
.cs-img-bento-stack {
    display: flex;
    flex-direction: column;
    gap: 21px;
    height: 100%;
    justify-content: space-between;
    transition: gap 0.3s ease;
}

.cs-img-bento-stack .cs-img-cell {
    flex: 1;
}

/* Full-width standalone image */
.cs-banner {
    width: 100%;
    overflow: hidden;
    margin-bottom: 21px;
    line-height: 0;
    transition: margin-bottom 0.3s ease;
}

.cs-banner img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-banner:hover img {
    transform: scale(1.015);
}

/* Staggered bento for logo showcase */
.cs-staggered-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 21px;
    margin-bottom: 21px;
    transition: grid-template-columns 0.3s ease, gap 0.3s ease;
}

.cs-bento-col {
    display: flex;
    flex-direction: column;
    gap: 21px;
    transition: gap 0.3s ease;
}

/* ==========================================================
   RESPONSIVE — Mobile & Tablet Transition (<= 899px)
   ========================================================== */
@media (max-width: 899px) {

    .cs-grid-2,
    .cs-grid-2-unequal {
        grid-template-columns: 1fr;
        gap: 21px;
    }

    /* Bento: smooth shift to single-column stack on screens <= 899px */
    .cs-img-bento,
    .cs-img-bento--2col,
    .cs-img-bento--3col,
    .cs-img-bento--left-lg,
    .cs-img-bento--right-lg,
    .cs-img-bento--pramodan-r1,
    .cs-img-bento--pramodan-r2,
    .cs-img-bento--churn-r1,
    .cs-img-bento--churn-r2,
    .cs-img-bento--vytae-r1,
    .cs-img-bento--vytae-r2,
    .cs-img-bento--root-r1,
    .cs-img-bento--root-r2 {
        grid-template-columns: 1fr;
    }

    /* On <=899px screens, cells and images render at natural size for clean mobile flow */
    .cs-img-cell {
        height: auto !important;
        aspect-ratio: auto !important;
    }

    .cs-img-cell img {
        height: auto !important;
        object-fit: contain;
    }

    .cs-staggered-bento {
        grid-template-columns: 1fr;
        gap: 21px;
    }

    .cs-swatch {
        height: 140px;
        flex: 1 1 calc(50% - 10px);
        min-width: 120px;
    }

    .cs-swatch-hex { 
        transform: none; 
    }
}