/* ============================================================
   BLANC CHEQUE — MOBILE RESPONSIVE OVERRIDES
   Breakpoints: 768px (tablet), 480px (phone)
   Class names match the built theme (BEM), not the React handoff.
   ============================================================ */

/* ── HAMBURGER BUTTON (hidden on desktop) ── */
.bc-mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    flex-shrink: 0;
}
.bc-mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: rgba(242, 236, 224, 0.7);
    transition: all 0.2s;
}
.bc-mobile-menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.bc-mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
.bc-mobile-menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

/* ── MOBILE MENU OVERLAY ── */
.bc-mobile-menu {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(10, 9, 8, 0.98);
    flex-direction: column;
    padding: 32px 24px;
    border-top: 1px solid rgba(242, 236, 224, 0.12);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.bc-mobile-menu.open { display: flex !important; }
.bc-mobile-menu a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(242, 236, 224, 0.45);
    padding: 20px 0;
    border-bottom: 1px solid rgba(242, 236, 224, 0.08);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}
.bc-mobile-menu a:hover,
.bc-mobile-menu a.active { color: #E8263A; }

/* ============================================================
   768px — TABLET / LARGE PHONE
   ============================================================ */
@media (max-width: 768px) {

    /* NAV */
    .bc-nav {
        padding: 0 16px !important;
        height: 52px !important;
    }
    .bc-nav nav { display: none !important; } /* hide desktop nav */
    .bc-nav__brand img,
    .bc-nav__brand .custom-logo { height: 32px !important; width: auto !important; }
    .bc-clock { display: none !important; }
    .bc-mobile-menu-btn { display: flex !important; }
    .bc-mobile-menu { top: 52px; }

    /* NAV brand suffix */
    .bc-nav__brand-suffix { display: inline !important; font-size: 8px !important; }

    /* META STRIP */
    .bc-meta-strip {
        grid-template-columns: 1fr 1fr !important;
        font-size: 9px !important;
        gap: 8px !important;
        padding: 8px 16px !important;
    }
    .bc-meta-strip > span:nth-child(3),
    .bc-meta-strip > span:nth-child(4) { display: none !important; }

    /* SECTIONS — general padding */
    .bc-section { padding: 64px 16px !important; }
    .bc-page-hero { padding: 72px 16px 48px !important; }

    /* HERO */
    .bc-hero { padding: 80px 16px 72px !important; }
    .bc-hero__abstract {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .bc-hero__abstract-label { display: none !important; }
    .bc-stamp--hero { display: none !important; }

    /* LEDGER */
    .bc-ledger-row__cells {
        grid-template-columns: 80px 1fr auto !important;
        gap: 10px !important;
        font-size: 10px !important;
    }
    .bc-ledger-row__status {
        white-space: nowrap !important;
    }
    .bc-ledger-row__place,
    .bc-ledger-row__year { display: none !important; }
    .bc-ledger-row__detail-inner { padding-left: 0 !important; }

    /* TENETS */
    .bc-tenets__grid { grid-template-columns: 1fr !important; }
    .bc-tenet { min-height: 0 !important; padding: 24px !important; }
    .bc-tenet__title { font-size: 36px !important; }

    /* ABOUT */
    .bc-about__premise {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .bc-about__premise-label { display: none !important; }
    .bc-about__premise-body .bc-lede { font-size: 22px !important; }
    .bc-about__rules { grid-template-columns: 1fr !important; }
    .bc-rule__statement { font-size: 22px !important; }
    .bc-stamp--about { display: none !important; }

    /* JOURNAL LIST — stacked layout on mobile */
    .bc-journal-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 20px 16px !important;
        position: relative !important;
    }
    /* Hide desktop-only individual columns */
    .bc-journal-row__date,
    .bc-journal-row__tag,
    .bc-journal-row__ref,
    .bc-journal-row__read { display: none !important; }
    /* Show combined mobile meta row */
    .bc-journal-row__meta-mobile {
        display: block !important;
        font-size: 10px !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        order: 1 !important;
    }
    /* Date — red */
    .bc-journal-row__meta-mobile .meta-date {
        color: #E8263A !important;
    }
    /* Tag — cream */
    .bc-journal-row__meta-mobile .meta-tag {
        color: rgba(242,236,224,0.9) !important;
    }
    /* Read time — dim */
    .bc-journal-row__meta-mobile .meta-read {
        color: rgba(242,236,224,0.35) !important;
    }
    .bc-journal-row__meta-mobile .bc-journal-row__meta-sep {
        color: rgba(242,236,224,0.15) !important;
        margin: 0 5px !important;
    }
    /* Title */
    .bc-journal-row__title {
        font-size: 19px !important;
        line-height: 1.25 !important;
        padding-right: 28px !important;
        order: 2 !important;
    }
    /* Arrow pinned top-right */
    .bc-journal-row__arrow {
        position: absolute !important;
        top: 20px !important;
        right: 16px !important;
        font-size: 16px !important;
    }

    /* JOURNAL SINGLE */
    .bc-post { padding: 48px 16px 80px !important; }
    .bc-post__title { font-size: clamp(28px, 8vw, 56px) !important; }
    .bc-post__lede { font-size: 18px !important; }
    .bc-post__body p { font-size: 14px !important; }
    .bc-meta-strip--inner {
        padding: 8px 16px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 9px !important;
    }
    .bc-meta-strip--inner span:nth-child(2) { display: none !important; }

    /* PRESS */
    .bc-press {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }

    /* CAREERS — intro */
    .bc-about__premise { grid-template-columns: 1fr !important; gap: 16px !important; }
    .bc-about__premise-label { display: none !important; }
    .bc-about__rules { grid-template-columns: 1fr !important; }
    .bc-rule { padding: 24px 16px !important; }
    .bc-rule__statement { font-size: 22px !important; }

    /* CAREERS — position list header (fixed-column inline grid) */
    .bc-careers__list-header { display: none !important; }
    .bc-careers__position-summary {
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
        padding: 16px !important;
    }
    .bc-careers__position-summary .pos-ref,
    .bc-careers__position-summary .pos-type { display: none !important; }
    .bc-careers__position-summary .pos-status { display: none !important; }

    /* Open application footer row */
    .bc-careers__open-application-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 16px !important;
        padding: 16px !important;
    }
    .bc-careers__open-application-row .oar-title {
        grid-column: 1 / -1 !important;
    }
    .bc-careers__open-application-row .oar-status {
        text-align: left !important;
    }

    /* CAREERS — role detail */
    .bc-careers__role-head {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .bc-careers__role-title { font-size: clamp(28px, 7vw, 56px) !important; }
    .bc-careers__section {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 20px 16px !important;
    }
    .bc-careers__section-label { margin-bottom: 8px !important; }
    .bc-careers__list-item {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding-top: 12px !important;
    }
    .bc-careers__list-key { font-size: 9px !important; color: var(--red) !important; }

    /* CAREERS — how to apply section */
    .bc-careers__form-wrap .bc-careers__open-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 16px !important;
        gap: 20px !important;
    }
    .bc-careers__form-wrap .bc-careers__lede { font-size: 18px !important; }
    .bc-careers__form-wrap .bc-careers__list-item {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    /* CONTACT */
    .bc-contact__grid { grid-template-columns: 1fr !important; }
    .bc-contact__note {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .bc-contact__stamp { display: none !important; }

    /* FOOTER */
    .bc-footer { padding: 48px 16px 32px !important; }
    .bc-footer__display { font-size: clamp(52px, 18vw, 120px) !important; line-height: 0.88 !important; }
    .bc-footer__bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
        margin-top: 32px !important;
    }
    .bc-footer__nav {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .bc-footer__social {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    /* Hide the tagline on small screens — already in the display */
    .bc-footer__social span:last-child { display: none !important; }
    .bc-footer__social .bc-divider:last-of-type { display: none !important; }
}

/* ============================================================
   480px — SMALL PHONE
   ============================================================ */
@media (max-width: 480px) {
    .bc-tenet__title { font-size: 28px !important; }
    .bc-section--signed .bc-signed__title { font-size: clamp(40px, 13vw, 80px) !important; }
    .bc-hero__title { letter-spacing: -0.03em !important; }
    .bc-page-hero__title { font-size: clamp(44px, 13vw, 100px) !important; }
    .bc-careers__form-foot { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
}