/* ========== CASES PAGE OVERRIDES ========== */
:root {
    --case-card-border: 2px solid #68A0FF;
    --case-card-radius: 8px;
    --case-card-shadow: 0 4px 20px rgba(104, 160, 255, 0.1);
    --case-card-hover-shadow: 0 12px 32px rgba(104, 160, 255, 0.2);
    --case-chip-bg: #00358F;
    --case-chip-bottom: -7px;
    --case-chip-size: 15px;
    
    /* Tunable Spacing */
    --case-title-min-height: 2.2em;     /* Vertical area for title (keeps descriptions aligned) */
    --case-title-margin-bottom: 8px;  /* Gap between title and description */
    --case-title-size: clamp(12px, 1.5vw, 22px); /* Font size of the main title */
    
    /* Client Name Configuration */
    --case-client-size: 18px;
    --case-client-margin: 16px;
    
    /* Description Font Size */
    --case-desc-size: 17px;

    /* Filter Bar Tuning */
    --case-filter-padding-y-pc: 32px; /* Adjust this to change the height of the blue bar on desktop */
    --case-filter-padding-y-sp: 20px; /* Adjust this to change the height of the blue bar on mobile */
    --case-filter-font-size-pc: 22px; 
    --case-filter-font-size-sp: 18px;
    --case-filter-square-size-pc: 18px;
    --case-filter-square-size-sp: 16px;
}

.cases-page {
    background: #F8FAFC; /* Match index.html background schema */
    color: #1f2a3c;
    overflow: hidden;
}

/* Content wrapper matching features.html structure */
.cases-page-content {
    position: relative;
    overflow: hidden;
    background: #F8FAFC; /* Consistent premium background */
}

/* ========== CASES INTRO (HERO) ========== */
.cases-intro {
    position: relative;
    text-align: left;
    padding: 80px 0 70px;
    width: var(--container-w);
    margin: 0 auto;
    box-sizing: border-box;
    background: transparent; /* No longer needs its own background color as wrapper has it */
    overflow: hidden;
}

/* Old CSS mesh removed — now using global bpo-mask-bg.png */

.cases-title {
    position: relative;
    z-index: 1;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #1f2a3c;
}

/* ========== CASES FILTER BAR ========== */
.cases-filter-bar {
    background: transparent; /* No longer full-width blue */
    padding: 24px 0;
    position: relative;
    z-index: 2;
}

.cases-filter-inner {
    width: min(1300px, 92vw); /* Contained width like the card grid */
    margin: 0 auto;
    background: #00358F; /* NEW BRAND COLOR */
    display: flex;
    justify-content: center;
    padding: var(--case-filter-padding-y-pc) 24px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 53, 143, 0.15); /* Subtle shadow for depth */
}

.cases-filter-list {
    display: flex;
    gap: 80px; /* Desktop gap */
}

.cases-filter-item {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #ffffff;
    font-size: var(--case-filter-font-size-pc);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cases-filter-item:hover {
    opacity: 1;
    color: #ffffff;
}

.cases-filter-item.active {
    font-weight: 800;
}

.cases-checkbox {
    width: var(--case-filter-square-size-pc);
    height: var(--case-filter-square-size-pc);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 2px;
    position: relative;
    transition: all 0.2s ease;
}

.cases-filter-item.active .cases-checkbox {
    background-color: transparent;
    border-color: #ffffff;
}

.cases-filter-item.active .cases-checkbox::after {
    /* --- TICK ADJUSTMENT PANEL (Change these only!) --- */
    --tick-width: 6px;
    --tick-height: 16px;
    --tick-top: -3px;
    --tick-left: 6px;
    /* -------------------------------------------------- */

    content: "";
    position: absolute;
    left: var(--tick-left);
    top: var(--tick-top);
    width: var(--tick-width);
    height: var(--tick-height);
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    animation: checkIn 0.3s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes checkIn {
    0% {
        height: 0;
        width: 0;
        opacity: 0;
    }
    100% {
        height: var(--tick-height);
        width: var(--tick-width);
        opacity: 1;
    }
}

.cases-card.hidden {
    display: none !important;
}

/* ========== CASES GRID ========== */
.cases-grid-section {
    padding: 80px 0 120px;
    background: transparent;
}

.cases-grid-inner {
    width: min(1160px, 92vw);
    margin: 0 auto;
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* ========== CASES CARD ========== */
.cases-card {
    background: #ffffff;
    border: var(--case-card-border);
    border-radius: var(--case-card-radius);
    overflow: visible; /* CRITICAL: To allow overlapping tags */
    display: flex;
    flex-direction: column;
    box-shadow: var(--case-card-shadow);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
}

.cases-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--case-card-hover-shadow);
}

.cases-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1.75;
    background-color: #d7e8ef;
    background-size: cover;
    background-position: center;
    border-radius: 6px 6px 0 0; /* Match inner corner curve */
    overflow: visible; /* CRITICAL: To allow overlapping tags */
    box-shadow: 0 4px 16px rgba(0, 52, 138, 0.08); /* Internal shadow for premium feel */
}

/* Blue overlay for premium feel matching index.html */
.cases-card-img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 53, 143, 0); 
    border-radius: 6px 6px 0 0;
    z-index: 5;
    pointer-events: none;
    transition: background 0.3s ease;
}

.cases-card:hover .cases-card-img-wrap::after {
    background: rgba(0, 53, 143, 0.12); /* Branded tint on hover */
}

.cases-card-tag {
    position: absolute;
    left: 12px;
    bottom: var(--case-chip-bottom); /* HALF FLOATING */
    background: var(--case-chip-bg);
    color: #ffffff;
    padding: 6px 16px;
    font-size: var(--case-chip-size);
    font-weight: 800;
    letter-spacing: 0.05em;
    z-index: 10;
    border-radius: 4px;
}

.cases-card-content {
    padding: 32px 28px 36px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cases-card-client {
    font-size: var(--case-client-size);
    color: #44546a;
    margin-bottom: var(--case-client-margin);
    font-weight: 700;
}

.cases-card-title {
    font-size: var(--case-title-size);
    font-weight: 800;
    line-height: 1.5;
    color: #1f2a3c;
    margin-bottom: var(--case-title-margin-bottom);
    min-height: var(--case-title-min-height); /* Keeps descriptions aligned */
}

.cases-card-desc {
    font-size: var(--case-desc-size);
    line-height: 1.6;
    color: #4a5665;
    font-weight: 500;
}

/* ========== MOBILE RESPONSIVENESS ========== */
@media (max-width: 900px) {
    .cases-intro {
        padding: 50px 0 40px;
    }

    .cases-filter-bar {
        padding: 32px 0;
    }

    .cases-filter-inner {
        width: 100%; /* Go back to full-ish width on mobile for better touch area */
        padding: var(--case-filter-padding-y-sp) 24px;
        display: flex;
        justify-content: center;
        align-items: center; /* Centers the list block itself */
        border-radius: 0;   /* SHARP LOOK ON MOBILE */
    }

    .cases-filter-list {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start; /* Keeps each checkbox starting at the same horizontal level! */
    }

    .cases-filter-item {
        font-size: var(--case-filter-font-size-sp);
    }

    .cases-checkbox {
        width: var(--case-filter-square-size-sp);
        height: var(--case-filter-square-size-sp);
    }

    .cases-filter-item.active .cases-checkbox::after {
        /* Mobile adjust */
        --tick-width: 5px;
        --tick-height: 14px;
        --tick-top: -2px;
        --tick-left: 5px;
    }

    .cases-grid-section {
        padding: 40px 0 80px;
    }

    .cases-grid-inner {
        width: min(86vw, 620px);
    }

    .cases-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cases-card-img-wrap {
        aspect-ratio: 1.65;
    }

    .cases-card-tag {
        padding: 4px 12px;
        font-size: 12px;
    }

    .cases-card-content {
        padding: 20px 20px 24px;
    }

    .cases-card-client {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .cases-card-title {
        font-size: 18px;
        margin-bottom: 16px;
        line-height: 1.45;
    }

    .cases-card-desc {
        font-size: 14px;
        line-height: 1.55;
    }
}