/* Case Study Detail page (templates/website/case_study_detail.html) */
/* Uses the site's existing colour scheme: --bg-dark-1 / --bg-dark-2 / --primary-color / --secondary-color */
.csd {
    --csd-bg1: var(--bg-dark-1, #101435);
    --csd-bg2: var(--bg-dark-2, #1A1E42);
    --csd-primary: var(--primary-color, #764DF0);
    --csd-primary-rgb: var(--primary-color-rgb, 118, 77, 240);
    --csd-secondary: var(--secondary-color, #442490);
    --csd-text: rgba(255, 255, 255, .75);
    --csd-line: rgba(255, 255, 255, .1);
    overflow: hidden;
}
.csd section { position: relative; }
.csd p { margin-bottom: 0; }

/* ---------- Shared bits ---------- */
.csd-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--csd-primary);
    margin: 0 auto 14px;
    box-shadow: 0 0 0 6px rgba(var(--csd-primary-rgb), .2);
}
.csd-head { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.csd-head h2 { font-size: 2.6rem; line-height: 1.15; margin-bottom: 10px; color: #fff; }
.csd-head .csd-sub { font-size: 1.35rem; color: var(--csd-text); display: inline-block; padding-bottom: 6px; border-bottom: 2px solid var(--csd-primary); }
.csd-head p { margin-top: 18px; color: var(--csd-text); }

.csd-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 34px; border-radius: 6px;
    font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #fff !important; text-decoration: none;
    background: var(--csd-primary);
    box-shadow: 0 10px 30px rgba(var(--csd-primary-rgb), .35);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.csd-btn:hover { transform: translateY(-2px); background: var(--csd-secondary); box-shadow: 0 14px 34px rgba(var(--csd-primary-rgb), .5); }
.csd-btn-outline {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px; border-radius: 4px;
    font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #fff !important; text-decoration: none;
    border: 2px solid var(--csd-primary);
    transition: background .3s ease;
}
.csd-btn-outline:hover { background: var(--csd-primary); }

.csd-vertical-right {
    position: absolute; right: -4.5rem; top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    font-size: 5rem; font-weight: 800; line-height: 1; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1px rgba(var(--csd-primary-rgb), .45);
    pointer-events: none; user-select: none;
}

.csd-vertical-left {
    position: absolute; left: -4.5rem; top: 50%;
    transform: translateY(-50%) rotate(270deg);
    transform-origin: center;
    font-size: 5rem; font-weight: 800; line-height: 1; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1px rgba(var(--csd-primary-rgb), .45);
    pointer-events: none; user-select: none;
}

/* ---------- Hero ---------- */
.csd section.csd-hero { background: var(--csd-bg1); padding: 110px 0; }
.csd-hero::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 30%, rgba(var(--csd-primary-rgb), .28), transparent 50%),
                radial-gradient(circle at 10% 90%, rgba(var(--csd-secondary-rgb, 68, 36, 144), .35), transparent 45%);
    pointer-events: none;
}
.csd-hero .container { position: relative; z-index: 2; }
.csd-eyebrow { font-size: 1rem; font-weight: 600; color: var(--csd-primary); margin-bottom: 10px; }
.csd-hero .csd-title { font-size: 3.6rem; line-height: 1.05; margin-bottom: 16px; color: #fff; }
.csd-tagline { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 18px !important; }
.csd-intro { font-style: italic; color: var(--csd-text); max-width: 520px; margin-bottom: 34px !important; line-height: 1.7; }
.csd-hero-visual { position: relative; }
.csd-hero-visual .csd-shot {
    width: 100%; border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px var(--csd-line);
    transform: perspective(1400px) rotateY(-8deg) rotateX(3deg);
    transition: transform .6s ease;
}
.csd-hero-visual:hover .csd-shot { transform: perspective(1400px) rotateY(0) rotateX(0); }
.csd-badge {
    position: absolute; right: -10px; bottom: -26px;
    background: var(--csd-bg2); color: #fff; border: 1px solid rgba(var(--csd-primary-rgb), .5);
    border-radius: 10px; padding: 14px 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    text-align: center; min-width: 150px;
}
.csd-badge small { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--csd-primary); font-weight: 700; }
.csd .csd-badge strong { color: #fff; display: block; font-size: 1.05rem; line-height: 1.3; }

/* ---------- Challenge / Solution ---------- */
.csd-band { padding: 110px 0; }
.csd section.csd-challenge { background: var(--csd-bg2); }
.csd section.csd-solution { background: var(--csd-bg1); }
.csd-items {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 60px; max-width: 1040px; margin: 0 auto 56px;
}
.csd-item { display: flex; gap: 18px; align-items: flex-start; }
.csd-item-mark {
    flex: 0 0 auto; min-width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem; color: #fff;
    background: rgba(var(--csd-primary-rgb), .15); border: 1px solid rgba(var(--csd-primary-rgb), .6);
}
.csd-solution .csd-item-mark { background: var(--csd-primary); border: 0; }
.csd-item p { color: var(--csd-text); line-height: 1.75; padding-top: 10px; }

.csd-text {
    max-width: 860px; margin: 0 auto 56px; text-align: center;
    font-size: 1.1rem; line-height: 1.9; color: var(--csd-text);
}
.csd-text p + p { margin-top: 1.2em; }

/* ---------- Results ---------- */
.csd section.csd-results { background: var(--csd-bg2); padding: 110px 0; }
.csd-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px; margin: 0 0 60px;
}
.csd-stat {
    padding: 28px 26px; border-radius: 14px;
    background: var(--csd-bg1); border: 1px solid var(--csd-line);
    backdrop-filter: blur(4px);
    transition: transform .3s ease, background .3s ease;
}
.csd-stat:hover { transform: translateY(-6px); border-color: rgba(var(--csd-primary-rgb), .6); }
.csd-stat .num {
    font-size: 3.4rem; font-weight: 800; line-height: 1; margin-bottom: 14px;
    background: linear-gradient(90deg, #fff, var(--csd-primary)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.csd-stat .bar { width: 46px; height: 3px; background: var(--csd-primary); border-radius: 3px; margin-bottom: 16px; }
.csd-stat p { color: var(--csd-text); line-height: 1.7; }

/* ---------- Repeating project image wall ---------- */
.csd section.csd-light { background: #d1d1d5; padding: 110px 0 100px; }
.csd section.csd-light .csd-head h2 {
    color: var(--csd-primary);
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: var(--csd-primary);
}
.csd section.csd-light .csd-head .csd-sub { color: #252943; border-color: var(--csd-primary); }
.csd section.csd-light .csd-dot { background: var(--csd-primary); }
.csd-image-wall {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
    border-radius: 14px;
    background: #d1d1d5;
}
.csd-image-wall-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    padding: 0;
}
.csd-wall-card {
    min-width: 0;
    margin: 0;
}
.csd-wall-card:nth-child(-n + 3) { grid-column: span 2; }
.csd-wall-card:nth-child(n + 4) { grid-column: span 3; }
.csd-wall-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1350 / 759;
    object-fit: contain;
    object-position: center;
    background: transparent;
}

/* ---------- Responsive ---------- */
@media (max-width: 1399px) { .csd-vertical, .csd-vertical-left, .csd-vertical-right { display: none; } }
@media (max-width: 991px) {
    .csd section.csd-hero { padding: 80px 0; }
    .csd-hero .csd-title { font-size: 2.6rem; }
    .csd-hero-visual { margin-top: 50px; }
    .csd-vertical, .csd-vertical-left, .csd-vertical-right { display: none; }
}
@media (max-width: 767px) {
    .csd-band, .csd-results { padding: 80px 0; }
    .csd-light { padding-top: 80px; }
    .csd-head { margin-bottom: 40px; }
    .csd-head h2 { font-size: 1.9rem; }
    .csd-head .csd-sub { font-size: 1.05rem; }
    .csd-items { grid-template-columns: 1fr; gap: 26px; }
    .csd-image-wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .csd-wall-card:nth-child(-n + 3), .csd-wall-card:nth-child(n + 4) { grid-column: span 1; }
    .csd-wall-card:nth-child(5) { grid-column: 1 / -1; width: 50%; justify-self: center; }
    .csd-badge { right: 10px; bottom: -40px; min-width: 0; padding: 10px 14px; }
    .csd-badge strong { font-size: .95rem; }
    .csd-btn, .csd-btn-outline { padding: 13px 22px; font-size: .75rem; }
}

/* ---------- Moved from inline style attributes ---------- */
.csd-banner-img { object-fit: cover; }
.csd-banner-caption { bottom: 60px; left: 0; padding-left: 120px; }
.csd-badge .csd-badge-cat { color: rgba(255, 255, 255, .6); letter-spacing: .06em; }
.csd .csd-head.csd-head-tight { margin-bottom: 30px; }
.csd-related-card { height: 350px; }
.csd-related-img { object-fit: cover; object-position: center; }
.csd-related-cat { font-size: .75rem; letter-spacing: .1em; display: block; margin-bottom: 4px; }

/* Banner title on phones: less left padding, smaller title */
@media (max-width: 767px) {
    .csd-banner-caption { padding-left: 20px; padding-right: 20px; bottom: 40px; }
    .csd-banner-caption h1 { font-size: 36px; line-height: 1.1; }
}