/**
 * Copyright © Caravel. All rights reserved.
 *
 * "Cartão Cassol" section of the Black Cassol home: the two banners of the regular home (the card and its app),
 * brought into the scheduled content as Page Builder elements so the client swaps a banner or the copy in the
 * editor: Row (full-width, CSS classes "bf-row bf-row--cartao") > Text ("bf-cartao__kick") + Heading
 * ("bf-cartao__title") > Columns (2 × 6/12, one line) > one Column per banner ("bf-cartao__item") with an Image
 * ("bf-cartao__banner", desktop and mobile files, linked), so the editor stage shows the banners side by side exactly
 * as the storefront does (a line per banner would stack them in the stage only). The banners keep their own blue artwork;
 * this sheet frames them as cards (radius, hairline) on the dark page and gives the section the kicker and the title
 * of the widgets, so it reads as one of them. Every rule starts at the row with #html-body to beat the
 * "#html-body [data-pb-style]" rules the Page Builder writes and the theme rules that reach into a Text or a heading.
 */

#html-body [data-content-type="row"].bf-row--cartao {
    background-color: var(--bf-bg);
    border-top: 1px solid var(--bf-line);
    color: var(--bf-text);
}

/* Lines up with the content of the widgets (their __wrap: 1360px with the mockup gutter), not with the theme
   container; widget-rows.css zeroes the margin and padding of the "bf-row" children, so both are set here. The
   theme sets the max-width of the home full-width rows (1536px) with !important. */
#html-body [data-content-type="row"].bf-row--cartao > .row-full-width-inner {
    max-width: 1360px !important;
    margin: 0 auto;
    padding: clamp(40px, 5.6vw, 77px) clamp(16px, 4vw, 48px);
}

/* ---------- heading (the kicker and the title of the widgets) ---------- */
#html-body [data-content-type="row"].bf-row--cartao .bf-cartao__kick,
#html-body [data-content-type="row"].bf-row--cartao .bf-cartao__kick p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bf-red);
}

#html-body [data-content-type="row"].bf-row--cartao .bf-cartao__kick {
    margin-bottom: 14px;
}

#html-body [data-content-type="row"].bf-row--cartao .bf-cartao__kick p::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--bf-red);
}

#html-body [data-content-type="row"].bf-row--cartao .bf-cartao__title {
    margin: 0 0 26px;
    padding: 0;
    font-weight: 900;
    /* the condensed display font of the mockup at about two thirds with the theme font, like the widget titles */
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: .95;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--bf-text);
}

/* ---------- banners ---------- */
#html-body [data-content-type="row"].bf-row--cartao .pagebuilder-column-group,
#html-body [data-content-type="row"].bf-row--cartao .pagebuilder-column-line {
    margin: 0;
    padding: 0;
}

/* two banners side by side with the gap of the regular home, one under the other on narrow screens */
#html-body [data-content-type="row"].bf-row--cartao .pagebuilder-column-line {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#html-body [data-content-type="row"].bf-row--cartao .bf-cartao__item {
    width: auto;
    margin: 0;
    padding: 0;
}

#html-body [data-content-type="row"].bf-row--cartao .bf-cartao__banner {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bf-line-2) !important; /* the Page Builder writes border-style:none inline on the figure */
    border-radius: 16px;
    background-color: var(--bf-surface);
}

#html-body [data-content-type="row"].bf-row--cartao .bf-cartao__banner a {
    display: block;
    border-radius: inherit;
}

#html-body [data-content-type="row"].bf-row--cartao .bf-cartao__banner a:focus-visible {
    outline: 2px solid var(--bf-outline);
    outline-offset: 3px;
}

#html-body [data-content-type="row"].bf-row--cartao .bf-cartao__banner img {
    display: block;
    width: 100%;
    height: auto;
    transition: filter .2s;
}

#html-body [data-content-type="row"].bf-row--cartao .bf-cartao__banner a:hover img {
    filter: brightness(1.08);
}

@media (max-width: 860px) {
    #html-body [data-content-type="row"].bf-row--cartao .pagebuilder-column-line {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    #html-body [data-content-type="row"].bf-row--cartao .bf-cartao__banner img {
        transition: none;
    }
}