/**
 * COPYRIGHT 2024 BY ROBERT CURA. ALL RIGHTS RESERVED
 * AUTHOR: ROBERT CURA
 * INCEPTION: 2024MAR26
 * DESCRIPTION: Region GRID overrides
 **/

/*************************************************************************** *
 *
 * REGION GRID OVERRIDES                    
 *
 *************************************************************************** */
/*-------------------------------------------------------------------------- */
/* 1. DEFINE THE GRID AREA MAP
/*-------------------------------------------------------------------------- */
.xrc-grid.xrc-region  {
/*.xrc-grid.xrc-x01--region-branding  {*/
    --xrc-swap-grid-template--display: grid;
}
.xrc-grid--container.xrc-region {
/*.xrc-grid--container.xrc-x01--region-branding {*/
    --xrc-swap-x01-grid--area           : var(--xrc-grid-area-16-small--header-branding);
    --xrc-swap-x01-grid--cols           : 3rem repeat(14, 1fr) 3rem;
    --xrc-swap-x01-grid--rows           : 4px 2rem auto auto 1px 1px 1px;
    --xrc-swap-x01-grid--gap-cols       : 1.0rem;
    --xrc-swap-x01-grid--gap-rows       : 0.0rem;
    --xrc-swap-x01-grid--align-items    : center;
    --xrc-swap-x01-grid--justify-items  : center;
}
    
.xrc-grid--container.xrc-x01--region-highlighted {
    --xrc-swap-x01-grid--area           : var(--xrc-grid-area-16-wide--title-01);
}
/*-------------------------------------------------------------------------- */
/*  2. SWAP THE GRID AREA VALUES IN                                                                          
/*-------------------------------------------------------------------------- */
.xrc-grid--container.xrc-region {
    --xrc-swap-grid-template--columns        : var(--xrc-swap-x01-grid--cols);
    --xrc-swap-grid-template--rows           : var(--xrc-swap-x01-grid--rows);
    --xrc-swap-grid-template--areas          : var(--xrc-swap-x01-grid--area);
    --xrc-swap-grid-template--column-gap     : var(--xrc-swap-x01-grid--gap-cols);
    --xrc-swap-grid-template--row-gap        : var(--xrc-swap-x01-grid--gap-rows);
    --xrc-swap-grid-template--align-items    : var(--xrc-swap-x01-grid--align-items);
    --xrc-swap-grid-template--justify-items  : var(--xrc-swap-x01-grid--justify-items);
    /*--xrc-swap-grid-template--align-content  :*/
    /*--xrc-swap-grid-template--justify-content:*/
    /*--xrc-swap-grid-template--auto-columns   :*/
    /*--xrc-swap-grid-template--auto-rows      :*/
}
/*-------------------------------------------------------------------------- */
/*  3. CUSTOMIZATION: ASSIGN THE PROPERTY VALUES                                                                          
/*-------------------------------------------------------------------------- */

/** COMMON PROPERTIES **/
.xrc-grid--item.xrc-x01-region-branding--box, 
.xrc-grid--item.xrc-x01-region-branding--box-banner,
.xrc-grid--item.xrc-x01-region-branding--box-menu
{
    --xrc-swap-grid-item--align-self    : start;
    --xrc-swap-grid-item--justify-self  : stretch;
}

.xrc-grid--item.xrc-x01-region-branding--box {
    --xrc-swap-grid-item--area          : xbox;
}
.xrc-grid--item.xrc-x01-region-branding--box-banner {
    --xrc-swap-grid-item--area: 1 / 1 / span 2 / span 16;
}
.xrc-grid--item.xrc-x01-region-branding--rect-01 {
    --xrc-swap-grid-item--area: xl02-start / 14 / xl02-end / 15;
    --xrc-swap-grid-item--align-self    : end;
    --xrc-swap-grid-item--justify-self  : end;
}
.xrc-grid--item.xrc-x01-region-branding--site-name {
    --xrc-swap-grid-item--area: xl02;
    --xrc-swap-grid-item--align-self    : end;
    --xrc-swap-grid-item--justify-self  : start;
}
    
.xrc-grid--item.xrc-x01-region-branding--box-menu {
    --xrc-swap-grid-item--area: xm01;
}


.xrc-grid--item.xrc-x01-region--rect-02 {
     /* RC: TO DO:
     1. ADD GRID-AREA 
     2. ASSIGN RECTANGLE TO GRID AREA
     3. ASSIGN REGION CONTENT TO GRID AREA
     */
     --xrc-swap-grid-item--area:            xl01-start / xl01-start / span xl01-end / xl01-end;
    --xrc-swap-grid-item--align-self    :   start;
    --xrc-swap-grid-item--justify-self  :   start;
}
.xrc-grid--item.xrc-x01--block-highlighted {
    --xrc-swap-grid-item--area:             xtx1-start / xtx1-start / xtx1-end / span xtx1-end;
    --xrc-swap-grid-item--align-self    :   start;
    --xrc-swap-grid-item--justify-self  :   stretch;
}


/*************************************************************************** *
 * RESPONSIVE LAYOUT FOR PARAGRAPH                                                                          
 *************************************************************************** */
/*-------------------------------------------------------------------------- */
/*  4. ADJUST THE GRID VALUES FOR RESPONSIVE LAYOUT                                                                          
/*-------------------------------------------------------------------------- */

/* XRC MOD: KNOWN AS SIZE: XSMALL: 500px */
@media(min-width:31.25rem) {
    :root {
        
    }
}

/* XRC MOD: KNOWN AS SIZE: SMALL: 700px */
@media(min-width:43.75rem) {
    :root {
        
    }
}

/* XRC MOD: KNOWN AS SIZE: MEDIUM: 1000px */
@media(min-width:62.5rem) {
    .xrc-grid--container.xrc-region {
    /*.xrc-grid--container.xrc-x01--region-branding {*/
        --xrc-swap-x01-grid--area           : var(--xrc-grid-area-16-large--header-branding);
        --xrc-swap-x01-grid--cols           : 3rem repeat(14, 1fr) 3rem;
        --xrc-swap-x01-grid--rows           : 5rem auto auto auto auto auto 2rem;
        --xrc-swap-x01-grid--gap-cols       : 1.0rem;
        --xrc-swap-x01-grid--gap-rows       : 0.0rem;
        --xrc-swap-x01-grid--align-items    : center;
        --xrc-swap-x01-grid--justify-items  : center;
    }
}

/* XRC MOD: KNOWN AS SIZE: LARGE: 1200px */
@media(min-width:75rem) {
    :root {
        
    }
}

/* XRC MOD: KNOWN AS SIZE: XLARGE: 1440px */
@media(min-width:90rem) {
    :root {
        
    }
}


/* end of file */