/* ── code-of-bce.css ── */

body {
    font-family: 'Poppins', sans-serif;
    background: var(--pg);
    margin: 0; padding-top: 0;
    color: var(--t1); font-size: 14px; line-height: 1.6;
}

/* header overrides */
/*.ireda-header { background: var(--white) !important; box-shadow: 0 2px 20px rgba(30,58,138,.08) !important; }
.header-bg-overlay { background: var(--white) !important; backdrop-filter: none !important; opacity: 1 !important; }
.ireda-header:not(.scrolled) .nav-link,
.ireda-header:not(.scrolled) .glass-btn { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.ireda-header:not(.scrolled) .utility-link    { color: rgba(255,255,255,0.75) !important; }
.ireda-header:not(.scrolled) .utility-divider { color: rgba(255,255,255,0.35) !important; }
.ireda-header:not(.scrolled) .col-lg-2 img    { filter: none !important; opacity: 1 !important; }
.ireda-header.scrolled .nav-link,
.ireda-header.scrolled .glass-btn             { color: var(--t2) !important; text-shadow: none !important; }
.ireda-header.scrolled .utility-link          { color: var(--t3) !important; }
.ireda-header.scrolled .col-lg-2 img          { filter: none !important; opacity: .92 !important; }*/

/* header overrides — subpage: always solid white, always dark text */
.ireda-header { background: var(--white) !important; box-shadow: 0 2px 20px rgba(30,58,138,.08) !important; }
.header-bg-overlay { background: var(--white) !important; backdrop-filter: none !important; opacity: 1 !important; }
.ireda-header .nav-link,
.ireda-header .glass-btn { color: var(--blue) !important; text-shadow: none !important; }
.ireda-header .utility-link,
.ireda-header .utility-lang-btn,
.ireda-header .utility-font-btn { color: var(--t3) !important; }
.ireda-header .utility-divider { color: var(--border) !important; }
.ireda-header .col-lg-2 img { filter: none !important; opacity: 1 !important; }

/* ─────────────────────────────────────────
   WRAPPER — single card centred
───────────────────────────────────────── */
.bce-wrap {
    display: flex;
    justify-content: center;
}

.bce-card {
    background: var(--white);
    border-radius: var(--r1);
    box-shadow: var(--s2);
    border: 1px solid rgba(37,99,235,.06);
    overflow: hidden;
    transition: var(--t);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 780px;
}
.bce-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--s3);
}

.bce-accent-bar {
    height: 4px;
    background: var(--G);
    flex-shrink: 0;
}

/* ─────────────────────────────────────────
   ICON AREA
───────────────────────────────────────── */
.bce-icon-area {
    width: 100%;
    aspect-ratio: 4/3;
    background: linear-gradient(160deg, var(--xpale) 0%, var(--pale) 60%, #dbeafe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* large faint bg icon */
.bce-bg-icon {
    position: absolute;
    font-size: 11rem;
    color: rgba(37,99,235,.06);
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

/* document stack */
.bce-doc-stack {
    position: relative;
    width: 140px;
    height: 180px;
}

/* back page */
.bce-doc--back {
    position: absolute;
    width: 120px; height: 155px;
    background: var(--white);
    border-radius: 4px;
    border: 1px solid rgba(37,99,235,.12);
    box-shadow: 0 2px 10px rgba(30,58,138,.08);
    top: 14px; left: 22px;
    transform: rotate(4deg);
}

/* mid page */
.bce-doc--mid {
    position: absolute;
    width: 120px; height: 155px;
    background: var(--white);
    border-radius: 4px;
    border: 1px solid rgba(37,99,235,.1);
    box-shadow: 0 2px 10px rgba(30,58,138,.07);
    top: 8px; left: 14px;
    transform: rotate(2deg);
}

/* front page — main visible doc */
.bce-doc--front {
    position: absolute;
    width: 124px; height: 160px;
    background: var(--white);
    border-radius: 4px;
    border: 1px solid rgba(37,99,235,.15);
    box-shadow: 0 8px 28px rgba(30,58,138,.15);
    top: 0; left: 8px;
    transform: rotate(-1deg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* front page header stripe */
.bce-doc-header {
    height: 28px;
    background: var(--G);
    flex-shrink: 0;
}

/* text lines on front page */
.bce-doc-lines {
    flex: 1;
    padding: 10px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.bce-line {
    height: 4px;
    border-radius: 2px;
    background: rgba(30,58,138,.12);
}
.bce-line--long  { width: 90%; }
.bce-line--med   { width: 70%; }
.bce-line--short { width: 50%; }

/* badge on front page bottom-right */
.bce-doc-badge {
    position: absolute;
    bottom: 8px; right: 8px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--G);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; color: var(--white);
    box-shadow: 0 3px 10px rgba(30,58,138,.25);
}

/* page count pill */
.bce-page-pill {
    position: absolute;
    bottom: 16px; right: 20px;
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--white);
    border: 1px solid var(--pale);
    border-radius: 20px;
    padding: .3rem .85rem;
    font-size: .7rem; font-weight: 700;
    color: var(--blue);
    box-shadow: var(--s1);
}
.bce-page-pill i { font-size: .72rem; color: var(--mid); }

/* ─────────────────────────────────────────
   INFO STRIP
───────────────────────────────────────── */
.bce-info {
    padding: 1.3rem 1.5rem 1.6rem;
    display: flex; flex-direction: column;
    gap: .3rem;
    border-top: 1px solid var(--border);
}
.bce-category-label {
    font-size: .62rem; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--mid);
}
.bce-name {
    font-size: 1.1rem; font-weight: 800;
    color: var(--t1); margin: 0;
    letter-spacing: -.01em; line-height: 1.2;
}
.bce-org {
    font-size: .78rem; color: var(--t3);
    margin: 0 0 .4rem; line-height: 1.5;
}
.bce-view-btn {
    display: inline-flex; align-items: center;
    gap: .45rem; align-self: flex-start;
    background: var(--G); color: var(--white);
    border-radius: 8px;
    padding: .55rem 1.3rem;
    font-size: .78rem; font-weight: 700;
    text-decoration: none;
    transition: var(--t);
    box-shadow: 0 4px 12px rgba(30,58,138,.22);
    margin-top: .3rem;
}
.bce-view-btn:hover {
    opacity: .88;
    transform: translateY(-1px);
    color: var(--white);
}
.bce-view-btn:focus-visible {
    outline: 3px solid var(--mid); outline-offset: 2px;
}
.bce-view-btn i { font-size: .8rem; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 576px) {
    .bce-card { max-width: 100%; }
}

@media print {
    .bce-card { box-shadow: none; border: 1px solid #ccc; }
    .bce-view-btn { display: none; }
}