/* Layout */

header div.container {
    min-height: 100vh;
    background-image: url("../img/personer-i-skov-phone.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    color: var(--main-clr-font);
    isolation: isolate;
    position: relative;
}

.container-intro h1{
    display: inline-block;
    background-color:  var(--clr-headline-900);
    color: hsla(0, 0%, 0%, 0.95); 
    font-size: clamp(2rem, 8vw + 0.5rem, 3rem);
    width: max-content;
    padding-inline: .9rem;
    padding-block: .9rem;
    margin: 0 0 .5em 0;
}
.container-intro p {
    font-size: clamp(1.2rem, 3vw + 0.5rem, 2.5rem);
    line-height: 1.2;
    padding-top: 0.2rem;
}
.container-intro p:first-of-type {
    padding-top: 1.5rem;
}

.container-intro {
    width: 100%;
    margin: 3em 0 13em;
    padding: min(10vh, 5rem) 1rem 1rem;
    position: relative;
}

.container-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #3b6909;
    mix-blend-mode: multiply;
}

/* Product start */
section div.product-section{
    display: grid;
    gap: 1.9rem;
}

section div.product-section .product-grid-item{
    grid-auto-rows: minmax(75px, auto);
}

section div.product-section .product-grid-item > img.icon{
    width: 115px;
    margin-inline: auto auto;
}        
section div.product-section .product-grid-item > h3{
    text-align: center;
    padding-top: 20px;
}

/*
section div.product-section .product-grid-item > h3::after{
    content: "";    
    border: solid 2px blue;
}
*/

section div.product-section .product-grid-item > p > a{
    color: var(--clr-headline-900);
/*    text-decoration: underline;*/
}

/* Product end */

/* form start */
.contact-form{
    display: grid;
    gap: 1.25rem;
}

.form-group{
    display: grid;
}

input[type=text], input[type=tel], input[type=email], textarea{
	border: 1px solid var(--color, rgb(26, 58, 20));
	border-radius: 7px;
  padding: 2px 10px;
  }
  .form-group:has(input), .form-group:has(textarea){
	--color: var(--clr-input-valid);
}

.input-hint {
    margin: 0;
    font-size: 1rem;
    color: hsl(0 0% 70%);
}
  
  input::placeholder, textarea::placeholder {
	font-size: 1rem;
  }
  


@media only screen and (min-width: 35em){
    .contact-form{
        grid-template-columns: 1fr 1fr;
    }
    
}
/* form end */


/* Extra small devices (phones, 600px and down) */
/* @media only screen and (max-width: 600px) {...} */

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    header div.container {
        min-height: 100vh;
        background-color: #3b6909; /*rgba(0, 90, 0, 0.91);*/
        background-image: url("../img/personer-i-skov-small.png");
        background-size: cover;
        background-blend-mode: normal;
    }
    .container-intro h1{
        font-size: clamp(2rem, 3.2vw + 0.5rem, 3rem);
        padding: 12px 5px;
        width: max-content;
    }


    .container-intro {
        width: 40%;
        margin: 0 0 0 2em;
        padding: min(15vh, 10rem) 2em 2em;
    }
    .container-intro p {
        font-size: 1.1rem;
        line-height: 2;
        padding-top: 0.4rem;
    }
    .container-intro p:first-of-type {
        padding-top: 2rem;
    }

    section div.product-section{
        grid-template-columns: repeat(3, 1fr);
    }
    
    /*
    section div.product-section div:not(section div.product-section div:first-of-type){
        padding-inline: 1rem;
        background-color: aqua;
        border: solid 2px red;
    }
    */
    
    section div.product-section div:first-of-type{
        font-weight: 600;
        grid-area: 1 / 1 / span 1 / span 3;
    }
    
    section div.product-section p{
        text-align: left;
    
    }
    
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .container-intro p {
        font-size: 1.3rem;
        line-height: 1.8;
        padding-top: 0.5rem;
    }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .container-intro p {
        font-size: clamp(1.5rem, 1.5vw + 0.5rem, 3.5rem);
        line-height: 1.1;
        padding-top: 0.5rem;
    }

}


@media (max-width: 30em) {
    .container-intro h1{
        font-size: clamp(2rem, 9vw + 0.5rem, 4rem);
        padding: 12px 5px;
        width: max-content;
    }

    h2 {
        font-size: clamp(1.9rem, 3vw + 0.5rem, 3.5rem);
        line-height: 0.9;
    }

    .who-am-i {
        flex-direction: column;
    }

    .section-content-wrapper {
        flex-direction: column;
    }

    section div.product-section{
        grid-template-rows: auto;
    }    
}