/* Fabuko.pl - CSS */

/* CSS Resets */
html,
body,
* {
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
}

*,
:after,
:before {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	display: block;
	user-drag: none;
	-webkit-user-drag: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

/* Variables */
:root {
	--primary: #3a3636;
	--accent: #13251f;

	--off-white: #f0ebe7;
	--white: #ffffff;
}

/* body */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
}

/* typography */
body,
html,
p,
p a,
input,
textarea {
	font-family: mozaic-geo-variable, sans-serif;
	font-optical-sizing: auto;
	font-weight: 200;
	font-style: normal;
	color: var(--primary);
	font-size: 16px;
	line-height: 1.6em;
	letter-spacing: 0.02em;
}

h1,
h1 a,
.text-h1 {
	font-weight: 600;
	font-size: 2rem;
	line-height: 1em;
	margin-bottom: 2rem;
	text-decoration: none;
}

h2,
h2 a,
.text-h2 {
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1em;
	margin-bottom: 1.75rem;
	text-decoration: none;
}

h3,
h3 a,
.text-h3 {
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1em;
	margin-bottom: 1.5rem;
	text-decoration: none;
}

h4,
h4 a,
.text-h4 {
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1em;
	margin-bottom: 1.25rem;
	text-decoration: none;
}

h5,
h5 a,
.text-h5 {
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1em;
	margin-bottom: 1.125rem;
	text-decoration: none;
}

h6,
h6 a,
.text-h6 {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1em;
	margin-bottom: 1rem;
	text-decoration: none;
}

/* text-decoration */
.title-upper {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1em;
	margin-bottom: 1.5rem;
}
.title-main {
	font-weight: 600;
	font-size: 3rem;
	line-height: 1em;
	margin-bottom: 3rem;
}

/* icons */
.icon {
	fill: none;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* button */
.button {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	text-decoration: none;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: all 0.3s ease-in-out;
	color: inherit;
}
.button__icon {
	width: 100px;
	height: 100px;
	display: flex;
}

/* section-numbers */
.section-number {
	display: flex;
	align-items: center;
	justify-content: right;
	margin-bottom: 3rem;
}
.section-number--center {
	justify-content: center;
}
.section-number-text {
	font-weight: 300;
	font-size: 1rem;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	display: flex;
	align-items: center;
	gap: 3rem;
}
.section-number-text-before::before {
	content: "";
	display: block;
	width: 64px;
	height: 1px;
	background-color: var(--primary);
}
.section-number-text-after::after {
	content: "";
	display: block;
	width: 64px;
	height: 1px;
	background-color: var(--primary);
}

/* layout */
.container {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 2rem;
	width: 100%;
}
.container-fluid {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 2rem;
	width: 100%;
}

.row {
	display: flex;
	flex-wrap: wrap;
}

.col {
	flex: 1;
	padding: 0 1rem;
	min-width: 300px;
	max-width: 100%;
}
.col-1 {
	flex: 0 0 8.33%;
	max-width: 8.33%;
}
.col-2 {
	flex: 0 0 16.66%;
	max-width: 16.66%;
}
.col-3 {
	flex: 0 0 25%;
	max-width: 25%;
}
.col-4 {
	flex: 0 0 33.33%;
	max-width: 33.33%;
}
.col-5 {
	flex: 0 0 41.66%;
	max-width: 41.66%;
}
.col-6 {
	flex: 0 0 50%;
	max-width: 50%;
}
.col-7 {
	flex: 0 0 58.33%;
	max-width: 58.33%;
}
.col-8 {
	flex: 0 0 66.66%;
	max-width: 66.66%;
}
.col-9 {
	flex: 0 0 75%;
	max-width: 75%;
}
.col-10 {
	flex: 0 0 83.33%;
	max-width: 83.33%;
}
.col-11 {
	flex: 0 0 91.66%;
	max-width: 91.66%;
}
.col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

/**
 * Fabuko.pl - CSS
 */

/* Hero */
.hero {
	color: var(--off-white);
	height: 100vh;
	position: relative;
}
.hero__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero__bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(30, 30, 30, 0.6);
	z-index: 1;
}
.hero__container {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.hero__text {
	margin-bottom: 3rem;
	color: var(--off-white);
}
.hero__corner {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
}
.hero__corner--social {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 3rem;
	background: var(--white);
}
.hero__corner--translate {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 3rem;
}

.hero__corner--translate-item,
.hero__corner--translate a.glink {
	opacity: 0.6;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	font-size: 0.75rem;
}
.hero__corner--translate a.glink.gt-current-lang {
	font-weight: 300;
}
.hero__corner--translate a.glink {
	text-decoration: none;
	color: inherit;
	text-transform: uppercase;
}

/* content-block */
.content-block {
	margin-top: 8rem;
	margin-bottom: 8rem;
}
.content-block__row {
	align-items: stretch;
}
.content-block__content {
	padding: 4rem;
	margin-top: 3rem;
	margin-bottom: 3rem;
	width: calc(100% + 6rem);
	z-index: 1;
	position: relative;
	background: var(--white);
}
.content-block__image--wrap {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.content-block__button {
	margin-top: 3rem;
}
.content-block__text a {
	text-decoration: none;
	color: inherit;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 300;
}

.content-block__image--left .content-block__content {
	margin-left: -6rem;
}

.content-block--beige .content-block__content {
	background: var(--off-white);
}

/* content-block-center */
.content-block-center {
	text-align: center;
	margin-top: 8rem;
	margin-bottom: 8rem;
}
.content-block-center__button {
	margin-top: 3rem;
}

/* gallery-grid */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	align-items: stretch;
}

.gallery-grid__item {
	width: 100%;
	overflow: hidden;
}
.gallery-grid__item-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 1 / 1;
}

/* menu-teaser */
.menu-teaser {
	background: var(--off-white);
	margin-top: 8rem;
	margin-bottom: 8rem;
	padding-top: 8rem;
	padding-bottom: 8rem;
}
.menu-teaser__text,
.menu-block__text {
	margin-bottom: 3rem;
}

.menu-teaser__content,
.menu-block__content {
	text-align: center;
}
.menu-teaser__button {
	margin-top: 3rem;
}

/* menu grid */
.menu__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem;
	text-align: left;
}
.menu__item--title,
.menu__item--price {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1em;
}
.menu__item--price {
	flex-shrink: 0;
}
.menu__item--head {
	display: flex;
	justify-content: space-between;
}
.menu__item--spacer {
	border: none;
	display: block;
	width: 64px;
	height: 1px;
	background-color: var(--primary);
	margin-bottom: 1.5rem;
	margin-top: 1.5rem;
}
.menu__item--desc {
	font-size: 0.875rem;
	line-height: 1.2em;
}

.header {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9;
	padding: 3rem 1rem;
}
.header__menu--nav {
	display: flex;
	gap: 3rem;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: flex-end;
}
.header__menu--nav .menu-item,
.header__menu--nav .menu-item a {
	text-decoration: none;
	color: var(--off-white);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1em;
}

/* footer */
.footer__primary {
	background: var(--accent);
	color: var(--off-white);
}
.footer__map {
	filter: grayscale(1);
	height: 100%;
	min-height: 400px;
}
.footer__primary__content {
	padding: 8rem;
}
.footer__primary__text {
	color: var(--off-white);
	margin-top: 1.5rem;
}
.footer__primary__text.title-upper {
	margin-top: 3rem;
}

.footer__secondary {
	margin-top: 8rem;
	margin-bottom: 8rem;
}
.footer__secondary__title {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1em;
	margin-bottom: 1.5rem;
}
.footer__secondary__text {
	margin-bottom: 3rem;
}
.footer__secondary__social {
	display: flex;
	gap: 1.5rem;
	align-items: center;
}

.footer__copyright {
	margin-top: 3rem;
	margin-bottom: 3rem;
	font-size: 0.625rem;
	line-height: 1em;
}
.footer__copyright a {
	color: inherit;
	text-decoration: none;
	font-weight: 300;
	line-height: 1em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.footer__copyright__content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
}

/* testimonials */
.testimonials {
	margin-top: 8rem;
	margin-bottom: 8rem;
}
.testimonials__content {
	padding: 0 4rem;
}
.testimonials__item {
	background: var(--off-white);
	padding: 4rem;
	text-align: center;
}
.testimonials__item .icon {
	margin-bottom: 3rem;
	margin-left: auto;
	margin-right: auto;
}

/* additionals */
.content-block__id--01 {
	position: relative;
}
.content-block__id--01::after {
	content: "";
	position: absolute;
	top: -8rem;
	left: 0;
	z-index: 1;
	background: url("../assets/Fabuko-Pattern.svg") repeat center center;
	width: 20%;
	max-width: 300px;
	height: 140%;
}
.content-block-center__id--05 {
	position: relative;
}
.content-block-center__id--05::after {
	content: "";
	position: absolute;
	top: -8rem;
	right: 0;
	z-index: 1;
	background: url("../assets/Fabuko-Pattern.svg") repeat center center;
	width: 20%;
	max-width: 300px;
	height: 80%;
}

/* media queries */
@media screen and (max-width: 768px) {
	.col-1,
	.col-2,
	.col-3,
	.col-4,
	.col-5,
	.col-6,
	.col-7,
	.col-8,
	.col-9,
	.col-10,
	.col-11,
	.col-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* typography */
	h1,
	h1 a,
	.text-h1 {
		font-size: 1.75rem;
	}

	h2,
	h2 a,
	.text-h2 {
		font-size: 1.5rem;
	}

	h3,
	h3 a,
	.text-h3 {
		font-size: 1.25rem;
	}

	h4,
	h4 a,
	.text-h4 {
		font-size: 1.125rem;
	}

	h5,
	h5 a,
	.text-h5 {
		font-size: 1rem;
	}

	h6,
	h6 a,
	.text-h6 {
		font-size: 1rem;
	}

	/* text-decoration */
	.title-upper {
		font-size: 1rem;
	}
	.title-main {
		font-size: 2rem;
	}

	/* header */
	.header__menu {
		display: none;
	}

	/* footer */
	.footer__primary .container-fluid {
		padding: 0;
	}
	.footer__primary__content {
		padding: 4rem 2rem;
	}

	.footer__secondary {
		margin-top: 4rem;
		margin-bottom: 4rem;
	}
	.footer__secondary .row {
		gap: 3rem;
	}

	.footer__copyright__content {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 1.5rem;
	}

	/* content-block */
	.content-block__content {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		padding: 0;
	}
	.content-block__image--left .content-block__content {
		margin-left: 0;
		margin-right: 0;
	}
	.content-block--beige .container {
		padding: 0;
	}
	.content-block--beige .content-block__content {
		padding: 4rem 2rem;
	}
	.content-block__image--wrap {
		height: 600px;
	}

	/* hero */
	.hero__corner--translate {
		padding: 1.5rem;
		flex-direction: row;
		gap: 1rem;
	}
	.hero__corner--social {
		padding: 1.5rem;
		flex-direction: row;
		gap: 1rem;
	}

	/* menu */
	.menu__grid {
		grid-template-columns: 1fr;
	}

	/* testimonials */
	.testimonials .container {
		padding: 0;
	}
	.testimonials__content {
		margin-bottom: 3rem;
		padding: 0 2rem;
	}
}

/*
 * Fabuko - page
 */

.fabuko-page .hero {
	height: 70vh;
}

.menu-category-block {
	margin-top: 8rem;
	margin-bottom: 8rem;
}
.menu-category-block-beige {
	background: var(--off-white);
	padding-top: 8rem;
	padding-bottom: 8rem;
}

/*
 * Fabuko - gallery 
 */

.gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3rem;
}
.gallery .gallery-item img {
	object-fit: cover;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
}

/*
 * Hero Short
 */
.fabuko-page .hero--short {
	height: 500px;
}