/* ============================================================
   BSX CAMPAIGN SINGLE
   Requires: bsx-design.css, bsx-base.css
   ============================================================ */

.campaign-container {
    display:             grid;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows:  2fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap:                 10px;
    align-items:         center;
    padding:             10px 20px;
    max-width:           1320px;
    background:          var(--bsx-bg-dark);
    grid-template-areas:
        "cnam cnam cnam stat stat type type perf poe  cass cass cass cass"
        "img1 img1 elab edt  edt  eprc eprc tnur tnur qtp  qtpv img2 img2"
        "img1 img1 elab edt  edt  eprc eprc tnur tnur qcat catv img2 img2"
        "img1 img1 clab cdt  cdt  cprc cprc mcap mcap qhor horv img2 img2"
        "img1 img1 clab cdt  cdt  cprc cprc mcap mcap qavg avgv img2 img2"
        "symb symb regs sec  sec  ind  ind  empl empl xfol foln styx styx"
        "symb symb regs sec  sec  ind  ind  empl empl bsx  bsxv styx styx";
}

/* Grid areas */
.g-comp-name    { grid-area: cnam; color: var(--bsx-accent); font-size: var(--bsx-text-2xl); }
.g-status       { grid-area: stat; font-size: var(--bsx-text-2xl); }
.g-type         { grid-area: type; font-size: var(--bsx-text-2xl); }
.g-perf         { grid-area: perf; font-size: var(--bsx-text-2xl); }
.g-perfoe       { grid-area: poe;  font-size: var(--bsx-text-sm); align-self: end; color: #666; padding-bottom: 4px; }
.g-cass-name    { grid-area: cass; color: var(--bsx-accent); font-size: var(--bsx-text-2xl); justify-self: end; }
.g-comp-logo    { grid-area: img1; align-self: center; }
.g-e-lab        { grid-area: elab; font-size: var(--bsx-text-base); padding-left: 10px; margin-left: 20px; }
.g-edt          { grid-area: edt;  font-size: var(--bsx-text-base); }
.g-eprc         { grid-area: eprc; font-size: var(--bsx-text-base); }
.g-tenure       { grid-area: tnur; font-size: var(--bsx-text-base); }
.g-qeval-price-lab    { grid-area: qtp;  font-size: var(--bsx-text-sm); margin-left: 2rem; }
.g-qeval-catalyst-lab { grid-area: qcat; font-size: var(--bsx-text-sm); margin-left: 2rem; }
.g-qeval-price        { grid-area: qtpv; font-size: var(--bsx-text-sm); justify-self: end; margin-right: 1rem; }
.g-qeval-catalyst     { grid-area: catv; font-size: var(--bsx-text-sm); justify-self: end; margin-right: 1rem; }
.g-cass-logo    { grid-area: img2; align-self: center; justify-self: end; }
.g-c-lab        { grid-area: clab; font-size: var(--bsx-text-base); padding-left: 10px; margin-left: 20px; }
.g-cdt          { grid-area: cdt;  font-size: var(--bsx-text-base); }
.g-cprc         { grid-area: cprc; font-size: var(--bsx-text-base); }
.g-qeval-horizon-lab  { grid-area: qhor; font-size: var(--bsx-text-sm); margin-left: 2rem; }
.g-qeval-avg-lab      { grid-area: qavg; font-size: var(--bsx-text-sm); margin-left: 2rem; }
.g-qeval-horizon      { grid-area: horv; font-size: var(--bsx-text-sm); justify-self: end; margin-right: 1rem; }
.g-qeval-avg          { grid-area: avgv; font-size: var(--bsx-text-md); justify-self: end; margin-right: 1rem; font-weight: 600; color: #e29700; }
.g-sym-exch     { grid-area: symb; font-size: var(--bsx-text-base); }
.g-country      { grid-area: regs; font-size: var(--bsx-text-base); }
.g-sector       { grid-area: sec;  font-size: var(--bsx-text-base); padding-right: 5px; }
.g-industry     { grid-area: ind;  font-size: var(--bsx-text-base); padding-right: 5px; }
.g-mcap         { grid-area: mcap; font-size: var(--bsx-text-base); }
.g-employees    { grid-area: empl; font-size: var(--bsx-text-base); }
.g-xfollowers-lab     { grid-area: xfol; font-size: var(--bsx-text-sm); margin-left: 2rem; }
.g-bsx-interest-lab   { grid-area: bsx;  font-size: var(--bsx-text-sm); margin-left: 2rem; }
.g-xfollowers         { grid-area: foln; font-size: var(--bsx-text-sm); justify-self: end; margin-right: 1rem; }
.g-bsx-interest       { grid-area: bsxv; font-size: var(--bsx-text-sm); justify-self: end; margin-right: 1rem; }
.g-bsx-styx     { grid-area: styx; font-size: var(--bsx-text-2xl); color: var(--bsx-accent); justify-self: end; }

/* Logos */
.corp-img       { align-self: center; justify-self: start; }
.corp-img img   { width: 100%; max-height: 80px; object-fit: contain; }
.cass-img       { align-self: center; justify-self: end; }
.cass-img img   { width: 100%; max-height: 80px; object-fit: contain; }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 768px) {
    .campaign-container {
        grid-template-columns: 2fr 1fr 1fr 2fr;
        grid-template-rows:    repeat(5, 20px);
        grid-template-areas:
            "cnam cnam cnam cass cass cass"
            "img1 img1 stat stat img2 img2"
            "img1 img1 type type img2 img2"
            "img1 img1 perf perf img2 img2"
            "sec  sec  ind  ind  styx styx";
        max-width: 480px;
    }
    .corp-img img, .cass-img img { width: 80%; max-height: 45px; }
    .g-comp-name, .g-cass-name   { font-size: var(--bsx-text-base); }
    .g-status, .g-type, .g-perf  { font-size: var(--bsx-text-base); }
    .g-sector, .g-industry        { font-size: var(--bsx-text-sm); }
    .g-bsx-styx                   { font-size: var(--bsx-text-2xl); justify-self: center; }
    .g-sym-exch, .g-perfoe, .g-e-lab, .g-edt, .g-eprc, .g-tenure,
    .g-qeval-price-lab, .g-qeval-price, .g-qeval-catalyst-lab, .g-qeval-catalyst,
    .g-c-lab, .g-cdt, .g-cprc, .g-qeval-horizon-lab, .g-qeval-horizon,
    .g-qeval-avg-lab, .g-country, .g-mcap, .g-employees,
    .g-xfollowers-lab, .g-xfollowers, .g-bsx-interest-lab, .g-bsx-interest { display: none; }
}