/* ---------------------------------------------------------------------------
   Coleções e fundos — hero ([cmq_colecoes_fundos_hero], page 56297)

   Rebuild of the first section against design/colecoes_e_fundos.png.
   Layout numbers are read off that 1366px-wide reference, so `--cf` is
   "1px of the design": every measure below is `calc(<design px> * var(--cf))`
   and the whole composition scales as one piece on desktop.

   Kept out of salient-child/style.css on purpose: this section is being
   rebuilt while other fronts edit the main stylesheet.
--------------------------------------------------------------------------- */

.page-id-56297 .container-wrap {
    padding-top: 0;
}

/* The part can end up inside the legacy WPBakery row (prod currently embeds the
   shortcode in the old full-height hero row's Text Block). That row centers its
   column vertically and carries a 100vh min-height, which parks a gap between
   the header and the hero and another one below it. Null the wrapper so the
   hero is flush under the header wherever it is pasted. */
.page-id-56297 .wpb_row:has(#cmq-colecoes-fundos) {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-id-56297 .wpb_row:has(#cmq-colecoes-fundos) .row_col_wrap_12 {
    min-height: 0 !important;
    align-items: flex-start !important;
}

.page-id-56297 .wpb_row:has(#cmq-colecoes-fundos) .vc_column-inner,
.page-id-56297 .wpb_row:has(#cmq-colecoes-fundos) .wpb_wrapper,
.page-id-56297 .wpb_row:has(#cmq-colecoes-fundos) .wpb_text_column {
    margin: 0 !important;
    padding: 0 !important;
}

/* the legacy row still paints the old hero photo behind the part */
.page-id-56297 .wpb_row:has(#cmq-colecoes-fundos) .row-bg-wrap {
    display: none !important;
}

#cmq-colecoes-fundos {
    /* 1 unit = 1px of the 1366px design; clamped so it never collapses or
       explodes between phone and very wide screens */
    --cf: clamp(0.72px, calc(100vw / 1366), 1.2px);

    --cf-cream: rgba(250, 240, 203, 0.96);   /* cards  */
    --cf-band: rgba(250, 240, 203, 0.26);    /* lead highlight */
    --cf-line: rgba(252, 244, 208, 0.9);     /* grid   */
    --cf-red: #d5111e;

    color: #000;
}

#cmq-colecoes-fundos .cmq-cf-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* the design's height at 1366 (the photo's own aspect), but never shorter
       than the fold: the hero starts right under the 75px header, so it fills
       the rest of the viewport instead of letting the next section peek */
    min-height: calc(765 * var(--cf));
    min-height: max(calc(765 * var(--cf)), calc(100vh - 75px));
    min-height: max(calc(765 * var(--cf)), calc(100svh - 75px));
    background-color: #fffbe9;
    background-image: var(--cmq-cf-bg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

/* logged-in editors get the 32px admin bar above the header */
.admin-bar #cmq-colecoes-fundos .cmq-cf-hero {
    min-height: max(calc(765 * var(--cf)), calc(100vh - 107px));
}

/* decorative cream grid: 30px cells behind the cards. Anchored to the right
   edge with the design's own width (668px) so it keeps its ~79px lead-in to the
   cards at every viewport — a `left: 51%` block stretched away from the cards
   once `--cf` capped on wide screens. The bottom rule is drawn separately
   because 390px is a whole number of cells: the reference closes the block. */
#cmq-colecoes-fundos .cmq-cf-grid {
    position: absolute;
    z-index: 0;
    top: calc(126 * var(--cf));
    right: 0;
    width: calc(668 * var(--cf));
    height: calc(390 * var(--cf));
    background-image:
        linear-gradient(to right, var(--cf-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--cf-line) 1px, transparent 1px);
    background-size: calc(30 * var(--cf)) calc(30 * var(--cf));
    box-shadow: inset 0 -1px 0 var(--cf-line);
    pointer-events: none;
}

#cmq-colecoes-fundos .cmq-cf-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: calc(90 * var(--cf));
    padding: calc(39 * var(--cf)) calc(60 * var(--cf)) calc(51 * var(--cf)) calc(56 * var(--cf));
    box-sizing: border-box;
}

/* ---------------------------------------------------------------- copy ---- */

#cmq-colecoes-fundos .cmq-cf-copy {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    width: calc(630 * var(--cf));
}

#cmq-colecoes-fundos .cmq-cf-title {
    /* wider than the copy column on purpose: "coleções e" runs under the cards'
       column, as in the design (fingerprint: 160px Madani ExtraBold, -0.03em) */
    width: max-content;
    max-width: none;
    margin: 0;
    padding: 0;
    color: var(--cf-red);
    font-size: calc(160 * var(--cf));
    font-weight: 800;
    line-height: 1.031;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

#cmq-colecoes-fundos .cmq-cf-lead {
    /* the mark's padding pushes the text in, so the block is pulled left and
       widened to keep the text on the design's left edge (56) and the cream
       bands bleeding to 46 */
    width: calc(650 * var(--cf));
    margin: calc(21 * var(--cf)) 0 0 calc(-10 * var(--cf));
}

#cmq-colecoes-fundos .cmq-cf-lead p {
    width: 100%;
    margin: 0;
    padding: 0;
    color: #000;
    font-size: calc(30 * var(--cf));
    font-weight: 400;
    line-height: 1.1667;
}

/* per-line cream highlight, as in the design */
#cmq-colecoes-fundos .cmq-cf-mark {
    padding: calc(2 * var(--cf)) calc(10 * var(--cf));
    border-radius: calc(4 * var(--cf));
    background-color: var(--cf-band);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

#cmq-colecoes-fundos .cmq-cf-cta {
    display: inline-flex;
    align-items: center;
    height: calc(45 * var(--cf));
    margin: calc(34 * var(--cf)) 0 0;
    padding: 0 calc(14 * var(--cf));
    border-radius: 999px;
    background-color: var(--cf-red);
    color: #fff;
    font-size: calc(21 * var(--cf));
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

#cmq-colecoes-fundos .cmq-cf-cta:hover,
#cmq-colecoes-fundos .cmq-cf-cta:focus {
    background-color: #b6181e;
    color: #fff;
}

#cmq-colecoes-fundos .cmq-cf-cta:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
}

/* --------------------------------------------------------------- cards ---- */

#cmq-colecoes-fundos .cmq-cf-cards {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    gap: calc(28 * var(--cf));
    margin: calc(235 * var(--cf)) 0 0 auto;
}

#cmq-colecoes-fundos .cmq-cf-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: calc(252 * var(--cf));
    min-height: calc(334 * var(--cf));
    padding: calc(20 * var(--cf)) calc(21 * var(--cf)) calc(24 * var(--cf));
    border-radius: calc(24 * var(--cf));
    background-color: var(--cf-cream);
    text-decoration: none;
    box-sizing: border-box;
    transition: transform 0.2s ease;
}

#cmq-colecoes-fundos .cmq-cf-card:hover {
    transform: translateY(-4px);
}

#cmq-colecoes-fundos .cmq-cf-card:focus-visible {
    outline: 3px solid var(--cf-red);
    outline-offset: 4px;
}

#cmq-colecoes-fundos .cmq-cf-card-bullet {
    display: block;
    width: calc(37 * var(--cf));
    height: calc(27 * var(--cf));
    margin: 0 0 calc(17 * var(--cf));
    border-radius: calc(14 * var(--cf));
    background-color: var(--cf-red);
}

#cmq-colecoes-fundos .cmq-cf-card-title {
    /* the design aligns both cards' body copy, so the title keeps the height of
       its three-line case even when a card's title only wraps to two */
    min-height: 3.556em;
    margin: 0 0 calc(12 * var(--cf));
    padding: 0;
    color: var(--cf-red);
    font-family: Fustat, sans-serif;
    font-size: calc(27 * var(--cf));
    font-weight: 700;
    line-height: 1.185;
    letter-spacing: -0.005em;
}

#cmq-colecoes-fundos .cmq-cf-card-text {
    margin: 0;
    padding: 0;
    color: #141210;
    font-size: calc(23 * var(--cf));
    font-weight: 400;
    line-height: 1.196;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 999px) {
    #cmq-colecoes-fundos .cmq-cf-hero {
        /* below 1000px the header is 59px tall */
        min-height: 0;
        min-height: max(calc(600 * var(--cf)), calc(100vh - 59px));
        min-height: max(calc(600 * var(--cf)), calc(100svh - 59px));
    }

    #cmq-colecoes-fundos .cmq-cf-grid {
        display: none;
    }

    #cmq-colecoes-fundos .cmq-cf-inner {
        flex-direction: column;
        gap: 0;
        padding: calc(40 * var(--cf)) 6vw calc(60 * var(--cf));
    }

    #cmq-colecoes-fundos .cmq-cf-copy {
        width: 100%;
    }

    #cmq-colecoes-fundos .cmq-cf-title {
        width: auto;
        font-size: clamp(56px, 13vw, 120px);
        line-height: 1.02;
    }

    /* the mark's padding still has to bleed left of the text, but the copy now
       spans the whole width instead of the design's fixed 630px column */
    #cmq-colecoes-fundos .cmq-cf-lead {
        width: calc(100% + 16px);
        margin: 26px 0 0 -8px;
    }

    #cmq-colecoes-fundos .cmq-cf-lead p {
        max-width: 640px;
        font-size: clamp(17px, 2.5vw, 23px);
        line-height: 1.45;
    }

    #cmq-colecoes-fundos .cmq-cf-mark {
        padding: 3px 8px;
    }

    #cmq-colecoes-fundos .cmq-cf-cta {
        /* let it grow on very narrow screens instead of clipping the label */
        height: auto;
        min-height: 46px;
        margin-top: 30px;
        padding: 12px 22px;
        font-size: 17px;
        line-height: 1.2;
    }

    #cmq-colecoes-fundos .cmq-cf-cards {
        width: 100%;
        margin: 42px 0 0;
        gap: 18px;
    }

    #cmq-colecoes-fundos .cmq-cf-card {
        flex: 1 1 0;
        width: auto;
        min-height: 0;
        padding: 26px 24px;
        border-radius: 20px;
    }

    #cmq-colecoes-fundos .cmq-cf-card-bullet {
        width: 34px;
        height: 24px;
        margin-bottom: 18px;
        border-radius: 12px;
    }

    #cmq-colecoes-fundos .cmq-cf-card-title {
        min-height: 0;
        margin-bottom: 16px;
        font-size: 24px;
    }

    #cmq-colecoes-fundos .cmq-cf-card-text {
        font-size: 18px;
        line-height: 1.35;
    }
}

@media (max-width: 690px) {
    #cmq-colecoes-fundos .cmq-cf-title {
        font-size: clamp(44px, 13.5vw, 74px);
    }

    #cmq-colecoes-fundos .cmq-cf-lead p {
        font-size: 17px;
        line-height: 1.5;
    }

    #cmq-colecoes-fundos .cmq-cf-cards {
        flex-direction: column;
        margin-top: 34px;
    }

    #cmq-colecoes-fundos .cmq-cf-card {
        flex: 0 0 auto;
        padding: 22px 22px 24px;
    }

    #cmq-colecoes-fundos .cmq-cf-card-title {
        font-size: 22px;
    }

    #cmq-colecoes-fundos .cmq-cf-card-text {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #cmq-colecoes-fundos .cmq-cf-card,
    #cmq-colecoes-fundos .cmq-cf-cta {
        transition: none;
    }

    #cmq-colecoes-fundos .cmq-cf-card:hover {
        transform: none;
    }
}