/*---------------------------------------------------------------------------
Padding & Margin Helpers FRAMEWORK 2024-07-26
---------------------------------------------------------------------------*/

/* HVC Base CSS */
:root {
    --hvc--gap_column: 0rem;
    --hvc--gap_row: 0rem;
}

*[class*="hvc--"],
*[class*="hvcchild--"] > *  {
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: auto 1fr;
    grid-template-areas:
    'hvc--header'
    'hvc--visual '
    'hvc--content';
    column-gap: var(--hvc--gap_column);
    row-gap: var(--hvc--gap_row);
}

/* HVC Grid Areas & last element margin removal */
*[class*="hvc--"] > :first-child,    
*[class*="hvcchild--"] > * > :first-child    
{ grid-area: hvc--header;   margin-bottom: 0px !important; }
    *[class*="hvc--"] > :first-child  > :last-child, 
    *[class*="hvc--"] > :first-child  > :last-child > :last-child { margin-bottom: 0px !important; }

*[class*="hvc--"] > :nth-child(2),
*[class*="hvcchild--"] > * > :nth-child(2)
{ grid-area: hvc--visual;   margin-bottom: 0px !important; }
    *[class*="hvc--"] > :nth-child(2)  > :last-child,
    *[class*="hvc--"] > :nth-child(2)  > :last-child > :last-child { margin-bottom: 0px !important; }

*[class*="hvc--"] > :nth-child(3),
*[class*="hvcchild--"] > * > :nth-child(3)
{ grid-area: hvc--content;  margin-bottom: 0px !important;}
    *[class*="hvc--"] > :nth-child(3)  > :last-child,
    *[class*="hvc--"] > :nth-child(3)  > :last-child > :last-child { margin-bottom: 0px !important; }

/* HVC Grid Areas & last element margin removal */
*[class*="hvc--"] > :first-child,    
*[class*="hvcchild--"] > * > :first-child    
{ background-color: var(--docsclr-1); }

*[class*="hvc--"] > :nth-child(2),
*[class*="hvcchild--"] > * > :nth-child(2)
{ background-color: var(--docsclr-2); }


*[class*="hvc--"] > :nth-child(3),
*[class*="hvcchild--"] > * > :nth-child(3)
{ background-color: var(--docsclr-3); }


    /* HVC Standard Layouts */
    @media screen and (min-width: 760px) {

        /* Header Visual  */
        /* Content Visual */
        *[class*="hvc--hv_cv"],
        *[class*="hvcchild--hv_cv"] > * {    
            grid-template-columns: 1fr 1fr !important; 
            grid-template-areas:
            'hvc--header  hvc--visual'
            'hvc--content hvc--visual';
        }

            .hvc--hv_cv-2-3, .hvcchild--hv_cv-2-3 > * { grid-template-columns: 2fr 3fr !important; }
            .hvc--hv_cv-3-2, .hvcchild--hv_cv-3-2 > * { grid-template-columns: 3fr 2fr !important; }

        /* Header Header  */
        /* Visual Content */
        *[class*="hvc--hh_vc"],
        *[class*="hvc--hh_vc"].hvcstagger:nth-child(odd), 
        *[class*="hvc--hh_cv"].hvcstagger:nth-child(even) {    
            grid-template-columns: 1fr 1fr !important; 
            grid-template-areas:
            'hvc--header hvc--header'
            'hvc--visual hvc--content';
        }

            /* Fifths */
            .hvc--hh_cv-2-3
            .hvc--hh_cv-2-3.hvcstagger:nth-child(odd),
            .hvc--hh_vc-2-3.hvcstagger:nth-child(even)
            { grid-template-columns: 2fr 3fr !important; }
            .hvc--hh_cv-3-2
            .hvc--hh_cv-3-2.hvcstagger:nth-child(odd),
            .hvc--hh_vc-3-2.hvcstagger:nth-child(even)
            { grid-template-columns: 3fr 2fr !important; }

        /* Header  Header */
        /* Content Visual */
        *[class*="hvc--hh_cv"],
        *[class*="hvc--hh_cv"].hvcstagger:nth-child(odd),
        *[class*="hvc--hh_vc"].hvcstagger:nth-child(even) {    
            grid-template-columns: 1fr 1fr !important; 
            grid-template-areas:
            'hvc--header  hvc--header'
            'hvc--content hvc--visual';
        }
            /* Fifths */
            .hvc--hh_vc-2-3
            .hvc--hh_vc-2-3.hvcstagger:nth-child(odd),
            .hvc--hh_cv-2-3.hvcstagger:nth-child(even)
            { grid-template-columns: 2fr 3fr !important; }
            .hvc--hh_vc-3-2
            .hvc--hh_vc-3-2.hvcstagger:nth-child(odd),
            .hvc--hh_cv-3-2.hvcstagger:nth-child(even)
            { grid-template-columns: 3fr 2fr !important; }

    }

    /* HVC SIDEBAR */
    @media screen and (min-width: 1000px) {
 
        /* Visual  Header  */
        /* Visual  Content */
        *[class*="hvc--sidebar--vh-vc"],
        *[class*="hvcchild--sidebar--vh-vc"] > * {    
            grid-template-columns: 450px auto !important; 
            grid-template-areas:
            'hvc--visual hvc--header '
            'hvc--visual hvc--content';
        }

        *[class*="hvc--sidebar--hv-cv"],
        *[class*="hvcchild--sidebar--hv-cv"] > * {    
            grid-template-columns: auto 450px !important; 
            grid-template-areas:
            'hvc--header  hvc--visual'
            'hvc--content hvc--visual';
        }

    }

Header Visual – Content Visual

Some Header Lead Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in aliquam orci. Donec scelerisque urna in elit dapibus venenatis eget vitae sem. Vestibulum interdum hendrerit rhoncus.

• This is a check-list item with a check
• This is a check-list item with a check
• This is a check-list item with a check

Header Visual – Content Visual – 3-2

Some Header Lead Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in aliquam orci. Donec scelerisque urna in elit dapibus venenatis eget vitae sem. Vestibulum interdum hendrerit rhoncus.

• This is a check-list item with a check
• This is a check-list item with a check
• This is a check-list item with a check