/* AffBase New's own CSS, loaded after Legacy's content.min.css, which stays as copied from Legacy. */

/* The full deal card (DealFullCard.razor) from 480px up. Legacy's CSS positions the logo column - logo, Code/Deal
   chip, VALID chip - absolutely inside a body with a fixed minimum height of 110px, which fitted Legacy's short, wide
   logos. The logos the import downloads from the networks are often square, so the column ran into the card's footer
   and on merchant pages the VALID chip was clipped away. Laid out by grid, the body grows with the column instead. */
@media (min-width: 480px) {
    .deal.ver2 .main {
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr);
        grid-template-areas:
            "logo title"
            "logo action";
        grid-template-rows: auto 1fr;
        column-gap: 15px;
    }

    /* Bootstrap's panel-body clearfix would become grid items. */
    .deal.ver2 .main:before,
    .deal.ver2 .main:after {
        display: none;
    }

    .deal.ver2 .main .dLeft {
        grid-area: logo;
        position: static;
        float: none;
    }

    .deal.ver2 .main .titleDiv {
        grid-area: title;
        margin-left: 0;
    }

    .deal.ver2 .main .dRight {
        grid-area: action;
        margin-left: 0;
    }
}

/* A deal's description, at the top of the full card's terms panel (DealFullCard.razor): the merchant's line breaks
   show. */
.deal.ver2 .dDescription {
    white-space: pre-line;
}

/* The description under the full card's title (DealFullCard.razor): the merchant's own words, cut to about 160
   characters, in plain weight under the bold title. */
.deal.ver2 .dSummary {
    margin: 4px 0 0;
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.3;
    color: #555;
}