/*
Frontend Mentor
Four Card Feature Section
C Lewis
clewisdev.com
September 2022
*/

:root {
--primary-red: hsl(0, 78%, 62%);
--primary-cyan: hsl(180, 62%, 55%);
--primary-orange: hsl(34, 97%, 64%);
--primary-blue: hsl(212, 86%, 64%);

--neutral-very-dark-blue: hsl(232, 61%, 23%);
/* --neutral-grayish-blue: hsl(229, 6%, 66%); */ /*! Contrast too low via accessibility checker */
--neutral-grayish-blue: hsl(228, 38%, 42%);
--neutral-very-light-gray: hsl(0, 0%, 98%);

--br: .5rem; 

--fs-xs: .8125em; /*? 13px; */
--fs-s: 1em; /*? 16px */
--fs-m: 1.25em; /*? 20px */
--fs-l: 1.5em; /*? 24px grows to 36px / 2rem */
}

/****** MOBILE-FIRST DESIGN ******/
/****** GLOBAL STYLING ******/

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
}

main { 
    background-color: white;
    min-width: 375px;
    max-width: 1440px;
    padding-bottom: 4.875rem;
}

/****** HEADLINE TEXT STYLING ******/

h1 {
    font-size: var(--fs-l);
    line-height: 2rem;
    font-weight: 200;
    text-align: center;
    color: var(--neutral-grayish-blue);
    padding-top: 5.3125rem;
}

h2 {
    font-size: var(--fs-l);
    line-height: 2rem;
    font-weight: 600;
    text-align: center;
    color: var(--primary-red); 
    /*! I changed the color of this headline to the "primary red". 
    /* ! The colors of the lighter-colored "neutral grayish blue" text
    /*! needed to be changed due to accessibility issues in contrast.
    /*! By making them a darker "neutral grayish blue,"
    /*! I felt that more visual interest needed to be added to the text. */
    /* color: var(--neutral-very-dark-blue); */
    padding-top: 1rem;
}

.description {
    font-size: var(--fs-s);
    line-height: 1.5625rem;
    font-weight: 400;
    text-align: center;
    color: var(--neutral-grayish-blue);
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}


/******* HEADLINE CONTAINER *******/

/* TODO this is a div that exists outside of the grid */
.headline-wrapper {
    max-width: 540px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/******* GRID CONTAINER *******/

.grid-wrapper {
    /*! GRID DESIGN*/
    display: grid;
    grid-template-columns: minmax(2rem, 350px) minmax(311px, 350px) minmax(2rem, 350px);
    row-gap: 2rem;      
}

/****** GRID SIZING FOR CHILD ELEMENTS ******/

.supervisor-wrapper, .builder-wrapper, .karma-wrapper, .calculator-wrapper {
    display: block;
    width: 311px;
    height: 222px;
}


@media screen and (min-width: 1200px) {
    .supervisor-wrapper, .builder-wrapper, .karma-wrapper, .calculator-wrapper {
        width: 350px;
        height: 250px;
    }

}


/****** CARD TEXT STYLING ******/

h3 {
    font-size: var(--fs-m);
    line-height: 1.875rem;
    font-weight: 600;
    padding-top: 1.6875rem;
    padding-left: 1.75rem;
    color: var(--neutral-very-dark-blue);
    grid-row: 1;
    grid-column: 1;
}

.card-description {
    font-size: var(--fs-xs);
    line-height: 1.4375rem;
    font-weight: 400;
    letter-spacing: 0.0902778px;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    color: var(--neutral-grayish-blue);
    grid-row: 2;
    grid-column: 1 / -1;
}

/******* CARD STYLING AND GRIDS ******/

.supervisor-wrapper {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 75px;
    grid-template-rows: .5fr 1fr 1fr;
    border-radius: var(--br);
    border-top: solid .25rem var(--primary-cyan);
    box-shadow: 0px .25rem 2rem 0px rgba(0, 0, 0, 0.15);
/* TODO x axis, y axis, blur radius, spread radius */
}

.builder-wrapper {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 75px;
    grid-template-rows: .5fr 1fr 1fr;
    border-top: solid .25rem var(--primary-red);
    border-radius: var(--br);
    box-shadow: 0px .25rem 2rem 0px rgba(0, 0, 0, 0.15);
}

.karma-wrapper {
    grid-column: 2;
    grid-row: 4;
    display: grid;
    grid-template-columns: 1fr 75px;
    grid-template-rows: .5fr 1fr 1fr;
    border-top: solid .25rem var(--primary-orange);
    border-radius: var(--br);
    box-shadow: 0px .25rem 2rem 0px rgba(0, 0, 0, 0.15);
}

.calculator-wrapper {
    grid-column: 2;
    grid-row: 5;
    display: grid;
    grid-template-columns: 1fr 75px;
    grid-template-rows: .5fr 1fr 1fr;
    border-top: solid .25rem var(--primary-blue);
    border-radius: var(--br);
    box-shadow: 0px .25rem 2rem 0px rgba(0, 0, 0, 0.15);
}

img {
    grid-row: 3;
    grid-column: 2;
}

/****** DESKTOP DESIGN - MEDIA QUERIES ******/

@media screen and (min-width: 1080px) {

    :root {
        --fs-l: 2.25rem;
    }

    .grid-wrapper {
        column-gap: 2rem;
        row-gap: 1rem;
        grid-template-rows: repeat(4, 125px);
        justify-items: center;
    }

    .supervisor-wrapper {
        grid-column: 1;
        grid-row: 2 / 3;
        
    }

    .builder-wrapper {
        grid-row: 1;
    }

    .karma-wrapper {
        grid-row: 3 / 4;
    }

    .calculator-wrapper {
        grid-column: 3;
        grid-row: 2 / 3;
    }
}

/*
# Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

### Primary

- Red: hsl(0, 78%, 62%)
- Cyan: hsl(180, 62%, 55%)
- Orange: hsl(34, 97%, 64%)
- Blue: hsl(212, 86%, 64%)

### Neutral

- Very Dark Blue: hsl(234, 12%, 34%)
- Grayish Blue: hsl(229, 6%, 66%)
- Very Light Gray: hsl(0, 0%, 98%)

## Typography

### Body Copy

- Font size: 15px

### Fonts

- Family: [Poppins](https://fonts.google.com/specimen/Poppins)
- Weights: 200, 400, 600
*/