/* Import CSS files in order */
@import url("reset.css");
@import url("base.css");
@import url("color.css");
@import url("typography.css");
@import url("component.css");

:root{

    --header-height:17rem;
    --header-shrink:10rem;

}
@media(width < 992px){
    :root{

        --header-height:14rem;

    }
}
@media(width < 768px){
    :root{

        --header-height:var(--header-shrink);

    }
}

/* Header */
header{position: fixed; left: 0; top: 0; width: 100%; height: var(--header-height); z-index: 9999; display: flex; align-items: center; transition: 100ms linear;}
header.header-scrolled{height: var(--header-shrink); background-color: rgba(var(--dark-grey-rgb), 80%); backdrop-filter: blur(10px);}
header .container{display: flex; align-items: flex-start; justify-content: space-between; align-items: center;}
.logo img{width: 8.7rem; aspect-ratio: 1; transition: 100ms linear;}
nav{display: flex; align-items: center; gap: .5rem var(--md);}
nav a{font-size: var(--fs-lg); color: white; display: flex; align-items: center; justify-content: center; gap: 0 1rem; white-space: nowrap; padding: .5rem 0; position: relative;}
nav a::after{position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: .2rem; content: ""; background-color: white; transition: 100ms linear;}
nav a:hover::after{width: 100%;}
header.header-scrolled .logo img{width: 7rem;}
.text-center{text-align:center;}
@media(width < 768px){
    .logo img{width: 7rem;}
    nav{gap: .5rem var(--gutter);}
}

/* Hero Section */
.hero-section{height: clamp(40rem, 75dvh, 75dvh); position: relative;}
.hero-section-content{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(var(--dark-grey-rgb), 33%); padding-top: var(--header-height); display: flex; align-items: center;}
.hero-section-content .container > :not(:last-child){margin-bottom: var(--sm);}
.hero-section-content h1{color: white;}
.youTube-link{display: flex; align-items: center; gap: 1rem 2rem; color: white;}
.youTube-link p{color: white;}
.hero-section video{position: absolute; object-fit: cover; width: 100%; height: 100%; left: 0; top: 0;}
@media(width < 576px){
    .hero-section-content h1 br{display: none;}
}

/* Section */
.section{padding: var(--xl) 0;}
.section-header:not(:last-child), .section-block:not(:last-child){margin-bottom: var(--md);}
.section-content:not(:last-child){margin-bottom: var(--xl);}
@media(width < 1200px){
   .section{padding: var(--lg) 0;}
   .section-content:not(:last-child){margin-bottom: var(--lg);}
}
@media(width < 992px){
   .section{padding: var(--md) 0;}
   .section-content:not(:last-child){margin-bottom: var(--md);}
}
@media(width < 768px){
   .section-header:not(:last-child), .section-block:not(:last-child){margin-bottom: var(--sm);}
}

.bg-dark-grey  *{color: white;}
.white-dot {
    border-bottom: .2rem dotted var(--body-color);
}
.post-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;}
.post-grid-item{padding: 4rem; background-color: var(--medium-grey); display: flex; flex-direction: column; justify-content: space-between; gap: var(--gutter); border-radius: .4rem; min-height: 57rem;}
.post-grid-item img{max-width: 22rem;}
@media(width < 1200px){
    .post-grid-item{min-height: 45rem;}
    .post-grid-item img{max-width: 15rem;}
    .post-grid{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 768px){
   .post-grid{grid-template-columns: 1fr;} 
   .post-grid-item{min-height: auto;}
}


article > :not(:last-child){margin-bottom: var(--gutter);}

.border-list{border-top: .2rem solid #929292;}
.border-list li{border-bottom: .2rem solid #929292;}
.border-list li a{transition: 100ms linear; display: flex; align-items: center; padding: var(--gutter);}
.border-list li a:hover, .border-list li a.active{background-color: rgba(255,255,255,13%);}
.list-image{aspect-ratio: 1/1.24; }
.producers-grid{display: grid; grid-template-columns: 1fr auto; justify-content: space-between; gap: var(--md);}
.producers-grid .image{max-width: 53.6rem;}
@media(width < 1200px){
    .border-list{border-top-width: .1rem;}
    .border-list li{border-bottom-width: .1rem;}
    .border-list li a{padding: var(--gutter-half);}
   .producers-grid .image{max-width: 40rem;}
}
@media(width < 992px){
   .producers-grid .image{max-width: 30rem;}
}
@media(width < 768px){
   .producers-grid{grid-template-columns: 1fr;}
   .border-list, .border-list li{border: 0; width:100%; border-bottom:1px solid var(--body-color)}
   .border-list{display: flex; flex-wrap: wrap; flex-direction:column;}
   .border-list li a{padding: 2rem 0; white-space: nowrap;pointer-events:none;}
   .border-list li a h3{font-size: var(--h6);}
   .list-image-wrapper{display:none;}
}

.list-image.hide{display: none;}
.list-image.active{display: block;}

.article-section .btn{margin-top: var(--xl);}
@media(width < 1300px){
    .article-section .btn{margin-top: var(--lg);}
}
@media(width < 1200px){
    .article-section .btn{margin-top: var(--md);}
}
@media(width < 992px){
    .article-section .btn{margin-top: 0;}
}

footer{border-top: .1rem solid var(--dark-grey); padding: var(--xl) 0;}
footer .container{display: flex; gap: var(--sm);}
footer h6:not(:last-child){margin-bottom: var(--gutter);}
.footer-logo img{width: 12.2rem;}
.footer-inks li:not(:last-child){margin-bottom: 1rem;}
.footer-inks li{display: flex;}
.footer-inks li a{display: flex; align-items: center; gap: 0 .5rem; white-space: nowrap; line-height: 1;}
.footer-inks li a, footer p{font-size: var(--fs); color: rgba(var(--dark-grey-rgb), 70%);}
.footer-logo{margin-left: auto;}
footer .container > div{min-width: clamp(20rem, 20vw, 20vw);}
@media(width < 1200px){
    footer{padding: var(--lg) 0;}
    .footer-logo img{width: 10rem;}
}
@media(width < 992px){
    footer{padding: var(--md) 0;}
    .footer-logo img{width: 8rem;}   
}
@media(width < 641px){
    footer .container{flex-direction: column;}
    footer .container > div{min-width: auto;}
    footer h6:not(:last-child){margin-bottom: var(--gutter-half);}
    .footer-logo{margin-left: unset;}
}

.intro-section{border-bottom: .2rem dotted var(--dark-grey);}
.intro-section-image-column figure{margin-right: calc(((100vw - var(--container-width))   / 2) * -1); aspect-ratio: 1;}
@media(width < 1640px){
    .intro-section-image-column figure{margin-right: calc(var(--gutter) * -1);}
}
@media(width < 1400px){
    .intro-section-image-column figure{aspect-ratio: unset; height: 100%;}
    .intro-section article{padding: var(--lg) 0;}
}
@media(width < 1200px){
    .intro-section article{padding: var(--md) 0;}
}
@media(width < 992px){
    .intro-section{padding: var(--md) 0;}
    .intro-section article{padding: 0;}
    .intro-section-image-column figure{aspect-ratio: 1; margin-right: 0;}
}

.soils{display: flex; flex-wrap: wrap; align-items: center; gap: var(--gutter);}
.soils img{max-width: 20rem;}
@media(width < 1500px){
    .soils img{max-width: 16rem;}
}
@media(width < 1500px){
    .soils img{max-width: 12rem;}
}

.verticle-slide{min-height: 65rem; position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-height) + var(--gutter)) 0;}
.verticle-slide::after{pointer-events:none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background-position: center center; background-repeat: no-repeat; background-size: cover; opacity: 25%;}
.verticle-slide-1{background-color: #E2CFA9;}
.verticle-slide-1::after{background-image: url('../images/pattern-1.png');}
.verticle-slide-2{background-color: #8A5A44;}
.verticle-slide-2::after{background-image: url('../images/pattern-2.png');}
.verticle-slide-3{background-color: #72665E;}
.verticle-slide-3::after{background-image: url('../images/pattern-3.png');}
.verticle-slide p:not(:last-child){margin-bottom: var(--gutter);}
.vision-section{position: relative; z-index: 99;}

.list-image-wrapper{padding: calc(var(--header-shrink) + var(--gutter)) 0;}
@media(width < 1500px){
    .list-image-wrapper{padding: 0;}
}