/* =============================================================
   Widget: Services Category Card  (qb-scc)

   Matches Figma tokens:
     secondary-10 #fffdfd   card background
     secondary-40 #bea6a4   card + divider border
     secondary-20 #e7d0ce   number-box border
     secondary-60 #967e7c   number color + total-number color
     secondary-80 #6d5857   title color
     bg-1         #ffffff   number-box background
     font-100     #252525   item text color
     font-60      #9f9f9f   total-label color
   ============================================================= */

.qb-scc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    background: #fffdfd;
    border: 1px solid #bea6a4;
    padding: 40px 24px;
    box-sizing: border-box;
}

/* --- Title --- */
.qb-scc__title {
    margin: 0;
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.1;
    color: #6d5857;
}

/* --- Body stack --- */
.qb-scc__body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

/* --- Numbered list --- */
.qb-scc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.qb-scc__item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.qb-scc__item-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e7d0ce;
    box-sizing: border-box;
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: #967e7c;
}

.qb-scc__item-text {
    flex: 1 0 0;
    min-width: 0;
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.1;
    color: #252525;
}

/* --- Divider --- */
.qb-scc__divider {
    height: 1px;
    width: 100%;
    max-width: 468px;
    background: #bea6a4;
}

/* --- Total block --- */
.qb-scc__total {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qb-scc__total-num {
    margin: 0;
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1;
    color: #967e7c;
}

.qb-scc__total-label {
    margin: 0;
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.1;
    color: #9f9f9f;
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .qb-scc { padding: 28px 20px; gap: 28px; }
    .qb-scc__title { font-size: 24px; }
    .qb-scc__body { gap: 28px; }
    .qb-scc__list { gap: 18px; }
    .qb-scc__item-text { font-size: 18px; }
    .qb-scc__total-num { font-size: 40px; }
    .qb-scc__total-label { font-size: 16px; }
}