/* adres-layout.css — the ONE two-column advert-results layout.
 *
 * Used by every screen that presents a lead's five adverts: the Ad-Builder Submissions detail
 * panel, the public Ad-Builder result page, and the Multi-Framework Dashboard A/B tab.
 *
 * THE SPEC IS THE OWNER-APPROVED DESIGN, 2026-08-16:
 *   https://claude.ai/code/artifact/41f853bd-51f3-458a-bb8f-e36a89ec2b90
 *   Every value below is taken from it. Where a plan document disagrees, the design wins.
 *
 * THE SPLIT
 *   LEFT  — the shared post: body, call to action, hashtags. Identical across all five variants,
 *           so it is read once instead of five times. Labelled "Constant".
 *   RIGHT — the five being tested: angle, attention line, projected score, Mark winner / WINNER.
 *           Labelled "Being tested".
 *
 * WHY A NEW PREFIX RATHER THAN THE EXISTING COLUMN NAMES
 *   `.cols` and `.col` are already taken on the public result page and mean something else there
 *   — `.foot .cols` is its footer grid and `.col` is a rounded comparison card. Reusing them
 *   would break that page. `adres` was measured unused across the whole tree before this file
 *   was written.
 *
 * Theme variables only — no hardcoded colours. Follows light and dark through the shared theme.
 */

.adres {
    display: grid;
    grid-template-columns: 1fr 1.15fr;   /* approved design */
    gap: 0;
    align-items: start;
}

.adres-side,
.adres-main {
    padding: 24px 22px;                  /* approved design */
    min-width: 0;                        /* long copy wraps instead of forcing the grid wider */
}

.adres-side {
    border-right: 1px solid var(--border-primary);
}

/* Column labels — the approved design names each column so the split is stated, not implied. */
.adres-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.adres-tag {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
}

.adres-tag.is-constant {
    background: var(--bg-success-light);
    color: var(--color-success-700);
}

.adres-tag.is-varying {
    background: var(--bg-primary-subtle);
    color: var(--color-primary-700);
}

/* NO heading rule here, deliberately. An earlier version styled every heading inside these
   columns as a small uppercase column label. The only headings inside them are the advert
   headlines, so that rule shrank every headline to 11px and put it in capitals — caught in a
   browser screenshot, not by checking the markup. The columns are labelled by the tags above;
   the headlines keep the advert card's own styling. */

/* Where the two columns stack into one on a narrow screen.
   The approved design said 860. The result page's own side-by-side blocks stack at 820, so at 860
   the adverts stacked while the page around them had not yet — the page changed shape in two
   steps. Owner ruled 2026-08-16: match the page, so everything stacks together. */
@media (max-width: 820px) {
    .adres {
        grid-template-columns: 1fr;
    }
    .adres-side {
        border-right: 0;
        border-bottom: 1px solid var(--border-primary);
    }
}