/* ======================================================================
   Sauce Investor Grievances Grid  -  v1.15.0
   Widget: sauce-investor-grid   (prefix: sig)
   Plain 3 / 1 / 1 grid of fund cards on the forest-green page background.
   Collapsed borders like the Brands Grid: the grid draws top + left, each
   cell draws right + bottom, so the rules never double up.
   ====================================================================== */

.sauce-investor-grid {
    --sig-cols:       3;
    --sig-pad:        36px;    /* padding inside each cell */
    --sig-title-gap:  14px;    /* title -> subtitle */
    --sig-rule-gap:   24px;    /* space above and below the divider */
    --sig-row-gap:    20px;    /* between detail rows */
    --sig-label-gap:  4px;     /* label -> value */
    --sig-border:     #326F64;
    --sig-rule:       #326F64;
    --sig-title:      #ffffff;
    --sig-subtitle:   #ffffff;
    --sig-label:      var(--sauce-sage, #AABCA2);
    --sig-value:      #ffffff;

    background: transparent;
    width: 100%;
}

.sig__grid {
    display: grid;
    grid-template-columns: repeat(var(--sig-cols), 1fr);
    align-items: stretch;
    border-top:  1px solid var(--sig-border);
    border-left: 1px solid var(--sig-border);
}

.sig__item {
    display: flex;
    flex-direction: column;
    padding: var(--sig-pad);
    border-right:  1px solid var(--sig-border);
    border-bottom: 1px solid var(--sig-border);
    background: transparent;
    box-sizing: border-box;
}

/* Filler cells only exist to close the box on a short last row. */
.sig__item--empty { padding: 0; }

.sig__title {
    margin: 0;
    color: var(--sig-title);
    line-height: 1.2;
}

.sig__subtitle {
    margin: var(--sig-title-gap) 0 0;
    color: var(--sig-subtitle);
    line-height: 1.3;
}

/* Divider sits between the heading block and the details. */
.sig__rule {
    display: block;
    height: 1px;
    width: 100%;
    margin: var(--sig-rule-gap) 0;
    background: var(--sig-rule);
}

.sig__rows {
    display: flex;
    flex-direction: column;
    gap: var(--sig-row-gap);
}

.sig__row {
    display: flex;
    flex-direction: column;
    gap: var(--sig-label-gap);
}

/* Label small, value large. Sizes are defaults; the widget exposes a
   typography group control for each. */
.sig__label {
    color: var(--sig-label);
    font-size: 13px;
    line-height: 1.4;
}

.sig__value {
    color: var(--sig-value);
    font-size: 19px;
    line-height: 1.35;
}

/* ── Responsive: 3 / 1 / 1 ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sauce-investor-grid { --sig-cols: 1; }
    /* One column means no short row to close, so the fillers would just add
       empty bordered cells. */
    .sig__item--empty { display: none; }
}
@media (max-width: 767px) {
    .sauce-investor-grid { --sig-cols: 1; }
    .sig__value { font-size: 17px; }
}