/*
Theme name: Eiken Interieurs
Author: Insomedia
Version: 1.0
Description: WordPress thema voor Eiken Interieurs
*/

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    --im-font-1: "Inter", sans-serif;
    --im-font-2: "Playfair Display", sans-serif;
    --im-color-text: #1A1A1A;
    --im-color-1: #1E2823;
    --im-color-2: #2F3832;
    --im-color-3: #EDE7DF;
    --im-color-4: #F8F6F2;
    --im-radius: 6px;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 1; }

html, body { background: #fff; font-family: var(--im-font-1); font-size: 16px; line-height: 24px; font-weight: 400; color: var(--im-color-text); }

a { color: var(--im-color-text); }

h1, h2, h3, h4, h5 { font-family: "Playfair Display", serif; }

p { line-height: 26px; }

img { max-width: 100%; }

.button { background: var(--im-color-2); border: 2px var(--im-color-2) solid; padding: 8px 23px; border-radius: var(--im-radius); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; display: table; }
.button.alt { background: none; border: 2px var(--im-color-2) solid; color: var(--im-color-2); }
.button.min { background: none; border: 0; color: var(--im-color-2); }

/** TOP BAR **/
.top-bar { background: var(--im-color-1); padding: 11px 0; }
.top-bar .top-bar__usp { display: flex; gap: 30px; }
.top-bar .top-bar__usp .top-bar__usp-item { color: #fff; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.top-bar .top-bar__usp .top-bar__usp-item span { width: 16px; display: table; }
.top-bar .top-bar__usp .top-bar__usp-item span svg { width: 100%; height: 100%; object-fit: contain; }
.top-bar .top-bar__usp .top-bar__usp-item span svg path { fill: #fff; }

/** HEADER **/
.header { padding: 15px 0; }
.header .header-cta { display: flex; }
.header .header-cta a { margin-left: auto; }

/** NAVIGATION **/
.navigation nav { display: flex; justify-content: center; }
.navigation ul { margin: 0; padding: 0; display: flex; gap: 50px; list-style: none; }
.navigation ul li a { text-decoration: none; }
.navigation ul li ul { display: none; }

/** SECTION **/
.section { padding: 80px 0; }
.section.bg-color-3 { background: var(--im-color-3); }
.section .section-title { margin-bottom: 30px; }

.buttons { display: flex; gap: 20px; flex-wrap: wrap; }

/** HERO **/
.hero { background: var(--im-color-3); padding: 100px 0; position: relative; }
.hero .bg-image { position: absolute; top: 0; right: 0; bottom: 0; z-index: 10; }
.hero .bg-image img { width: 100%; height: 100%; object-fit: cover; }
.hero .hero-text { position: relative; z-index: 20; }
.hero .hero-text .hero-text__title { margin-bottom: 30px; font-size: 56px; line-height: 60px; }
.hero .hero-text .hero-text__title span { display: block; }
.hero .hero-text .hero-text__desc { margin-bottom: 30px; max-width: 350px; }
.hero .hero-text .hero-text__buttons { display: flex; gap: 20px; }

/** USP BANNER **/
.usp-banner { background: var(--im-color-4); padding: 35px 0;  }
.usp-banner .usp-banner__items { display: flex; gap: 20px; }
.usp-banner .usp-banner__items .usp-banner__item { width: 25%; }
.usp-banner .usp-banner__items .usp-banner__item .icon { margin-bottom: 15px; }
.usp-banner .usp-banner__items .usp-banner__item .title { font-family: var(--im-font-1); font-size: 16px; }
.usp-banner .usp-banner__items .usp-banner__item p { font-size: 14px; }
.usp-banner .usp-banner__items .usp-banner__item p:last-child { margin-bottom: 0; }

/** CONTENT IMAGE **/
.content-image { display: flex; column-gap: 80px; }
.content-image .content-image__left { width: 55%; }
.content-image .content-image__right { width: 45%; }
.content-image img { border-radius: 10px; }
.content-image .buttons { margin-top: 30px; }

/** CONTENT COLUMNS **/
.content-columns { display: flex; column-gap: 25px; }
.content-columns .content-columns__sticky { top: 50px; }
.content-columns .content-columns__left { width: 50%; padding-right: 5%; }
.content-columns .content-columns__right { width: 50%; }
.content-columns .buttons { margin-top: 30px; }

/** COLLECTIONS **/
.collections { display: flex; gap: 25px; margin-top: 50px; }
.collections .collection-item { width: 25%; position: relative; border-radius: 10px; overflow: hidden; }
.collections .collection-item:after { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 150px; background: #000000; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); z-index: 5; }
.collections .collection-item .collection-item__bg img { aspect-ratio: 4 / 5; object-fit: cover; }
.collections .collection-item .collection-item__text { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; z-index: 10; }
.collections .collection-item .collection-item__text .collection-item__title { font-family: var(--im-font-1); font-size: 20px; font-weight: 500; color: #fff; margin-bottom: 0; }
.collections .collection-item .collection-item__text .collection-item__desc { color: #fff; font-weight: 400; }

.bento { display: grid; grid-template-columns: 1.15fr 1fr; grid-auto-rows: 140px; gap: 20px; grid-template-areas: "a b" "a b" "c c" "c c" "d e" "d e" "d f" "d f"; }
.bento img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
.e { grid-area: e; }
.f { grid-area: f; }

.footer { background: var(--im-color-1); padding: 50px 0; color: #fff; }
.footer .footer-block .footer-block__title { margin-bottom: 10px; font-family: var(--im-font-1); font-size: 18px; font-weight: 500; color: #fff; }
.footer .footer-block .footer-logo { margin-bottom: 20px; }

@media (max-width: 600px) {

    .bento {
        grid-template-columns: 1fr;
        grid-template-areas: "a" "b" "c" "d" "e" "f";
        grid-auto-rows: 220px;
    }

}