/* =============================================================================
   Baarq Business Page — page-templates/template-business.php
   All classes prefixed .bq-b2b-* to avoid collisions.
   ============================================================================= */

/* ── Subtitle strip (below hero) ─────────────────────────────────────────── */
.bq-b2b-subtitle-strip {
    background: var(--orange-500);
    padding: 18px 0;
}
.bq-b2b-subtitle-text {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-align: center;
    line-height: 1.7;
}

/* ── Intro ───────────────────────────────────────────────────────────────── */
.bq-b2b-intro {
    background: var(--navy-900);
    padding: 64px 0;
    position: relative;
    overflow: hidden;
}
.bq-b2b-intro::before {
    content: "";
    position: absolute;
    inset-inline-end: -80px;
    top: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(248,120,0,.15), transparent 65%);
    pointer-events: none;
}
.bq-b2b-intro__inner {
    display: grid;
    grid-template-columns: 4px 1fr;
    gap: 0 28px;
    align-items: start;
    max-width: 900px;
}
.bq-b2b-intro__bar {
    width: 4px;
    background: linear-gradient(180deg, var(--orange-400), var(--orange-600));
    border-radius: 4px;
    min-height: 100%;
    align-self: stretch;
}
.bq-b2b-intro__text {
    font-size: 17px;
    line-height: 2;
    color: var(--navy-100);
}
.bq-b2b-intro__text + .bq-b2b-intro__text {
    margin-top: 18px;
}

/* ── Section shared ──────────────────────────────────────────────────────── */
.bq-b2b-section {
    padding: 72px 0;
}
.bq-b2b-section--alt {
    background: var(--surface-card);
}
.bq-b2b-section--dark {
    background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%);
    position: relative;
    overflow: hidden;
}
.bq-b2b-section--dark::before {
    content: "";
    position: absolute;
    inset-inline-start: -100px;
    bottom: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(248,120,0,.12), transparent 60%);
    pointer-events: none;
}
.bq-b2b-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--orange-500);
    margin-bottom: 10px;
}
.bq-b2b-heading {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(24px, 3.5vw, 36px);
    color: var(--text-strong);
    margin: 0 0 12px;
    line-height: 1.25;
}
.bq-b2b-heading--light { color: #fff; }
.bq-b2b-sub {
    font-size: 16px;
    color: var(--text-muted);
    max-width: 64ch;
    line-height: 1.8;
    margin: 0 0 48px;
}
.bq-b2b-sub--light { color: var(--navy-200); }

/* ── Sector Cards (أولاً) ─────────────────────────────────────────────────── */
.bq-b2b-sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.bq-b2b-sector-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}
.bq-b2b-sector-card__top {
    height: 6px;
}
.bq-b2b-sector-card__top--commercial { background: linear-gradient(90deg, #0c2e55, #1c578f); }
.bq-b2b-sector-card__top--service    { background: linear-gradient(90deg, #f87800, #c75e00); }
.bq-b2b-sector-card__top--industrial { background: linear-gradient(90deg, #08223a, #134272); }
.bq-b2b-sector-card__body {
    padding: 24px 22px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bq-b2b-sector-card__en {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--orange-500);
    text-transform: uppercase;
}
.bq-b2b-sector-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--orange-50);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bq-b2b-sector-card__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
}
.bq-b2b-sector-card__desc {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-muted);
    margin: 0;
    flex: 1;
}

/* ── Services (ثانياً) ───────────────────────────────────────────────────── */
.bq-b2b-services-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.bq-b2b-service {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0 24px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 28px 28px 28px 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.bq-b2b-service__num-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 4px;
    gap: 10px;
    border-inline-end: 1px solid var(--border-subtle);
    padding-inline-end: 0;
    padding-inline-start: 28px;
}
.bq-b2b-service__num {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 800;
    color: var(--orange-200);
    line-height: 1;
}
.bq-b2b-service__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--orange-50);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bq-b2b-service__content {
    padding-inline-start: 24px;
}
.bq-b2b-service__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 10px;
}
.bq-b2b-service__desc {
    font-size: 15px;
    line-height: 1.85;
    color: var(--text-body);
    margin: 0;
}

/* ── Certifications (ثالثاً) ─────────────────────────────────────────────── */
.bq-b2b-certs-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.bq-b2b-cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--orange-500);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: var(--radius-pill);
    padding: 8px 18px;
}
.bq-b2b-certs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.bq-b2b-cert-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 22px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
}
.bq-b2b-cert-card__ic {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(248,120,0,.10);
    border: 1px solid var(--orange-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bq-b2b-cert-card__name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 5px;
}
.bq-b2b-cert-card__desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0;
}

/* ── Economic Impact Table (رابعاً) ──────────────────────────────────────── */
.bq-b2b-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.bq-b2b-impact-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bq-b2b-impact-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bq-b2b-impact-card__ic {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(248,120,0,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bq-b2b-impact-card__service {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.bq-b2b-impact-card__mechanism {
    font-size: 13px;
    color: var(--navy-200);
    padding: 9px 14px;
    background: rgba(255,255,255,.05);
    border-radius: var(--radius-md);
    border-inline-start: 3px solid var(--orange-500);
    line-height: 1.65;
}
.bq-b2b-impact-card__result {
    font-size: 14px;
    color: var(--orange-300);
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.6;
}

/* ── Partner (خامساً) ────────────────────────────────────────────────────── */
.bq-b2b-partner-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.bq-b2b-partner-text p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-body);
    margin: 0 0 16px;
}
.bq-b2b-partner-text p:last-child { margin-bottom: 0; }
.bq-b2b-stats-box {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-xl);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.bq-b2b-stat-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.bq-b2b-stat-row__ic {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(248,120,0,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bq-b2b-stat-row__v {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--orange-400);
    line-height: 1;
}
.bq-b2b-stat-row__l {
    font-size: 13px;
    color: var(--navy-200);
    margin-top: 3px;
}
.bq-b2b-partner-certs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}
.bq-b2b-partner-cert-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.08);
    color: var(--navy-100);
    border: 1px solid rgba(255,255,255,.14);
}

/* ── Recommendations (سادساً) ────────────────────────────────────────────── */
.bq-b2b-recs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.bq-b2b-rec-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bq-b2b-rec-card__num {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    color: var(--orange-500);
    letter-spacing: .05em;
}
.bq-b2b-rec-card__ic {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-lg);
    background: var(--orange-50);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bq-b2b-rec-card__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
}
.bq-b2b-rec-card__desc {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-body);
    margin: 0;
}
.bq-b2b-closing {
    margin-top: 48px;
    padding: 28px 32px;
    background: linear-gradient(135deg, var(--orange-50), #fff);
    border: 1px solid var(--orange-100);
    border-radius: var(--radius-xl);
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-body);
    border-inline-start: 4px solid var(--orange-500);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bq-b2b-partner-grid { grid-template-columns: 1fr; }
    .bq-b2b-stats-box { flex-direction: row; flex-wrap: wrap; }
    .bq-b2b-stat-row { flex: 1 1 160px; }
}
@media (max-width: 768px) {
    .bq-b2b-sectors-grid { grid-template-columns: 1fr; }
    .bq-b2b-certs-grid { grid-template-columns: 1fr; }
    .bq-b2b-impact-grid { grid-template-columns: 1fr; }
    .bq-b2b-recs-grid { grid-template-columns: 1fr; }
    .bq-b2b-service {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    .bq-b2b-service__num-col {
        flex-direction: row;
        border-inline-end: none;
        border-bottom: 1px solid var(--border-subtle);
        padding: 0 0 16px;
    }
    .bq-b2b-service__content { padding-inline-start: 0; padding-top: 16px; }
    .bq-b2b-intro__inner { grid-template-columns: 3px 1fr; gap: 0 18px; }
    .bq-b2b-section { padding: 48px 0; }
}