/* TIZ-170 — Case Studies. Ported from the approved design prototype
   (TizbiTech-case-1-acid.html). All rules are scoped under .case-study (detail)
   and .case-studies (index) so they never collide with article.css, which owns
   its own .custom-article / .key-takeaway. Brand blue is the site's AA token
   #2f63e8 (TIZ-158), not the prototype's #4070f4. */

.case-study,
.case-studies {
    --cs-blue: #2f63e8;
    --cs-blue-d: #244fbf;
    --cs-line: #dee2e6;
    --cs-muted: #6c757d;
    --cs-green: #1f9d57;
    --cs-green-bg: #eaf7ef;
    --cs-red: #d6463b;
    --cs-red-bg: #fdeeec;
}

/* ---- detail: head ---- */
.case-study .cs-narrow {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 6px;
}

.case-study .crumb {
    display: inline-block;
    color: var(--cs-blue);
    font-weight: 600;
    font-size: 13px;
    margin: 26px 0 12px;
}

.case-study .eyebrow {
    text-align: center;
    color: var(--cs-blue);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.case-study .page-title {
    text-align: center;
    margin: 6px 0 0;
}

.case-study .page-title h1 {
    font-size: 37px;
    font-weight: 800;
    color: #1c2330;
    line-height: 1.22;
    margin: 0;
}

.case-study .std-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 16px 0 4px;
}

.case-study .std {
    font-size: 11.5px;
    font-weight: 700;
    color: #41506b;
    background: #eef2f9;
    border: 1px solid #e1e8f4;
    border-radius: 20px;
    padding: 4px 12px;
}

.case-study .key-takeaway {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: #f1f5fe;
    border: 1px solid #d8e4fd;
    border-radius: 12px;
    padding: 16px 18px;
    color: #39435a;
    font-size: 15.5px;
    line-height: 1.6;
    margin: 22px 0 26px;
}

.case-study .kt-label {
    flex: 0 0 auto;
    background: var(--cs-blue);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 9px;
    border-radius: 5px;
    margin-top: 2px;
}

/* ---- detail: media ---- */
.case-study .hero {
    margin: 0 0 6px;
}

.case-study .hero-cap {
    text-align: center;
    font-size: 13px;
    color: #8a94a2;
    font-style: italic;
    margin-top: 10px;
}

.case-study .cs-photo {
    margin: 0;
}

.case-study .cs-photo img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
    max-height: 560px;
    object-fit: contain;
    background: #f4f6f9;
    border: 1px solid var(--cs-line);
}

.case-study .cs-photo figcaption {
    text-align: center;
    font-size: 13px;
    color: #8a94a2;
    font-style: italic;
    margin-top: 10px;
}

/* centered, height-capped photo (for near-square / portrait specimen images) */
.case-study .cs-photo.center img {
    width: auto;
    max-width: 100%;
    max-height: 400px;
    margin-left: auto;
    margin-right: auto;
}

.case-study .sec-body .cs-photo {
    margin: 18px 0;
}

.case-study .compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.case-study .cmp {
    margin: 0;
    border: 1px solid var(--cs-line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 20px rgba(16, 24, 43, .07);
}

.case-study .cmp-img {
    height: 300px;
    overflow: hidden;
    background: #f4f6f9;
}

.case-study .cmp-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.case-study .cmp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    font-size: 14px;
}

.case-study .cmp-bar.bad {
    background: var(--cs-red-bg);
}

.case-study .cmp-bar.good {
    background: var(--cs-green-bg);
}

.case-study .cmp-lab {
    font-weight: 800;
    color: #2b3340;
}

.case-study .cmp-v {
    font-weight: 800;
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: 20px;
    color: #fff;
    white-space: nowrap;
}

.case-study .cmp-v.bad {
    background: var(--cs-red);
}

.case-study .cmp-v.good {
    background: var(--cs-green);
}

/* ---- detail: stats ---- */
.case-study .stats {
    margin: 22px 0 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.case-study .stat {
    flex: 1;
    min-width: 150px;
    background: #fff;
    border: 1px solid var(--cs-line);
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
}

.case-study .stat-num {
    font-size: 27px;
    font-weight: 800;
    color: var(--cs-blue);
    line-height: 1.1;
}

.case-study .stat-lbl {
    font-size: 12.5px;
    color: var(--cs-muted);
    margin-top: 6px;
}

/* ---- detail: body ---- */
.case-study .cs-content {
    margin: 10px 0 0;
}

.case-study .cs-section {
    padding: 22px 0;
    border-bottom: 1px solid #eef1f5;
}

.case-study .cs-section h2 {
    font-size: 25px;
    font-weight: 800;
    color: #1c2330;
    margin: 0 0 10px;
}

.case-study .cs-section.about .sec-body p {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 16px 18px;
    color: #5a6472;
}

.case-study .sec-body p {
    color: #54606f;
    margin: 12px 0;
    font-size: 16px;
}

.case-study .sec-body b {
    color: #2b3340;
}

.case-study .hero-cap + p,
.case-study .compare + .hero-cap {
    margin-top: 14px;
}

.case-study ul.bluedot {
    list-style: none;
    padding: 0;
    margin: 14px 0;
}

.case-study ul.bluedot li {
    position: relative;
    padding-left: 24px;
    margin: 9px 0;
    color: #54606f;
    font-size: 16px;
}

.case-study ul.bluedot li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--cs-blue);
    border-radius: 50%;
}

/* ---- index (/case-studies), same feel as /articles ---- */
.case-studies {
    padding: 30px 0 80px;
}

.case-studies .page-title.idx {
    text-align: center;
    margin: 14px 0 48px;
}

.case-studies .page-title.idx h1 {
    font-size: 46px;
    font-weight: 800;
    color: #1c2330;
}

.case-studies .page-title.idx p {
    color: var(--cs-muted);
    font-size: 17px;
    margin: 10px auto 0;
    max-width: 620px;
    font-weight: 400;
}

.case-studies .acard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.case-studies .acard {
    position: relative;
    display: block;
    min-height: 264px;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    overflow: hidden;
    background-position: 50%;
    background-size: cover;
}

.case-studies .acard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 23, 42, .86), rgba(15, 23, 42, .45));
    transition: background .2s;
}

.case-studies .acard:hover::before {
    background: rgba(47, 99, 232, .62);
}

/* per-case card background (kept in CSS, not inline, per project convention) */
.case-studies .acard.metal-coat-gloss-sulfuric-acid {
    background-image: url("/Themes/TizbiTech/Content/images/case-studies/metal-coat-gloss-sulfuric-acid/hero-industrial-refinery.webp");
}

.case-studies .acard-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 264px;
}

.case-studies .acard-inner {
    padding: 0 46px;
}

.case-studies .acard-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #cfe0ff;
}

.case-studies .acard h2 {
    font-size: 23px;
    font-weight: 800;
    margin: 10px 0;
    color: #fff;
    line-height: 1.3;
}

.case-studies .acard-by {
    font-size: 14px;
    color: #dbe5ff;
}

@media (max-width: 820px) {
    .case-study .page-title h1 {
        font-size: 27px;
    }

    .case-study .compare {
        grid-template-columns: 1fr;
    }

    .case-studies .acard-grid {
        grid-template-columns: 1fr;
    }

    .case-studies .page-title.idx h1 {
        font-size: 34px;
    }
}