/* Offers */

div[data-layout="offers"] {
	background-color: var(--dark-color);
	padding: 3em 6em;
	border-radius: 1em;
	transition: background 1s ease-out;
	position: relative;
} div[data-layout="offers"] .img-background {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border-radius: inherit;
	width: 100%;
	height: 100%;
} div[data-layout="offers"] .img-background img {
	object-fit: cover;
	object-position: center center;
}

div[data-layout="offers"] > .wrap {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 4em;
} 

div[data-layout="offers"] > .wrap > div {
	display: flex;
	justify-content: center;
	align-items: end;
	transition: box-shadow 0.2s ease-out,transform 0.2s ease-out;
	box-shadow: 0 0 0;
} div[data-layout="offers"] > .wrap > div img {
	border-top-left-radius: 50% 30% !important;
	border-top-right-radius: 50% 30% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
} div[data-layout="offers"] > .wrap .content {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: #fff;
	padding: 2em 1em;
	background-image: linear-gradient(rgba(0,0,0,0) 40%,rgb(0,0,0) 100%);
	flex-direction: column;
} div[data-layout="offers"] > .wrap > div .content .button {
	background-color: rgba(0,0,0,.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
	border-color: #fff;
	color: #fff;
	margin-top: .5rem;
    height: calc(var(--standard-button-height) - 15px);
    padding: 0 1em;
} div[data-layout="offers"] > .wrap > div .content .button:hover {
	border: 1px solid #fff !important;
} div[data-layout="offers"] > .row-grid .button {
	background-color: var(--accent-color);
	margin-top: calc(2em + 10px);
}

div[data-layout="offers"] .ha2, div[data-layout="offers"] .ha3 {
	color: #fff;
	font-size: 1.6em;
}

div[data-layout="offers"] .offerHSH, div[data-layout="offers"] .offerAPT {
	display: inline-block;
	padding: .1em .6em 0;
	border-radius: 30px;
	text-transform: uppercase;
	font-size: .6em;
	letter-spacing: .025em;
	margin: 0 .25em 1em;
}

div[data-layout="offers"] .offerHSH {
	background-color: var(--color-brown);
}

div[data-layout="offers"] .offerAPT {
	background-color: var(--color-apt);
}

@media (max-width: 1200px) {
	div[data-layout="offers"] > .wrap {
		grid-template-columns: 1fr;
	} div[data-layout="offers"] {
		margin: 0 20px;
		padding: 20px;
		width: calc(100% - 40px) !important;
	} div[data-layout="offers"] > .row-grid .button {
		margin-bottom: 2em;
	}
}

/* DOWNLOADS */

div[data-layout="downloads"] {
	background-color: var(--dark-color);
	padding: 3em 6em;
	border-radius: 1em;
	transition: background 1s ease-out;
	position: relative;
} div[data-layout="downloads"] .img-background {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border-radius: inherit;
	width: 100%;
	height: 100%;
}

div[data-layout="downloads"] .pagesDatabaseResult {
	display: grid;
	gap: 1em;
}

div[data-layout="downloads"] .downloads-item {
	border: 1px solid var(--color-darkblue);
	padding: 1em;
	border-radius: 50em;
	overflow: hidden;
	background-color: var(--main-color);
	min-width: fit-content;

	& .ha3 {
		font-weight: bolder;
		text-transform: uppercase;
		font-size: 1.2em;
	}

	& .col-no-gap {
		display: grid;
		align-items: center;
		gap: 2em;
		grid-template-columns: 5em auto 5em;
	}

	& .downloads-image-wrapper {
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		height: 5em;
		background-color: var(--color-darkblue);
		color: var(--main-color);

		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	& i {
		font-size: 1.5rem;
	}

	& .content {
		text-align: left;
	}

	& .content .ha2 {
		text-transform: uppercase;
		letter-spacing: .03em;
		line-height: 1.25;
		font-family: var(--font-regular);
		font-size: 1rem;
		font-weight: 200;
		color: var(--color-darkblue);
	}
}

@media (min-width: 1200px) {
	div[data-layout="downloads"] .pagesDatabaseResult {
		grid-template-columns: 1fr 1fr;
	}
	
}

@media (max-width: 1200px) {
	div[data-layout="downloads"] .pagesDatabaseResult {
		grid-template-columns: 100%;
	}

	div[data-layout="downloads"] {
		background-color: var(--dark-color);
		padding: 1em;
		border-radius: 1em;
		transition: background 1s ease-out;
		position: relative;
	}

	div[data-layout="downloads"] .downloads-item {

		& .col-no-gap {
			gap: 1em;
			grid-template-columns: 3em auto 3em;
		}

		& .downloads-image-wrapper {
			height: 3em;
		}
	}

	[data-table="ash_downloads"] {
		padding: 0 20px;
	}
}

/* Reviews */
.review_icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
}

div[data-layout="reviews"] .reviews-image {
	padding-bottom: 0;
}

div[data-layout="reviews"] .reviews-item {
    background-color: rgba(255,255,255,.33);
	border-radius: var(--standard-button-radius);
    padding: calc(2.1em - 10px) 2em 2em;
}

div[data-layout="reviews"] .reviews-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

div[data-layout="reviews"] h3 {
	line-height: 1.25;
}

div[data-layout="reviews"] h3 span {
	font-size: 1rem;
}

div[data-layout="reviews"] h3 :is(.booking,.google) {
	background-color: var(--color-contrast);
	color: var(--color-highlight);
	padding: .1em .8em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: .5em;
}

div[data-layout="reviews"] .reviews-text :is(:nth-child(1),:nth-child(2)) {
    grid-column: 1 / 3;
}

div[data-layout="reviews"] .reviews-text p {
    padding-top: 1em;
	line-height: 1.25;
}

div[data-layout="reviews"] .reviews-text i {
    font-size: .85em;
    padding-top: .5em;
    justify-self: end;
    grid-column: 2 / 3;
    align-self: end;
}

.strip_box:not(.open) > p:not([contenteditable="true"]) {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

div[data-layout="reviews"] .strip_button {
    font-family: var(--text-font-family-headline);
    cursor: pointer;
    align-self: end;
} .strip_button:hover {
    text-decoration: underline;
}

.strip_box:not(.open) [data-langmore]:not([data-langmore=""])::before {
    content: attr(data-langmore);
} .strip_box.open [data-langless]:not([data-langless=""])::before {
    content: attr(data-langless);
}

.scrollControls {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: end;
    gap: 1em;
    padding: 1em 0;
    margin: 0 auto;
    
    position: absolute;
    width: 100vw;
    bottom: .5em;
} .scrollControls button, .scrollControls button:hover {
    background-color: transparent;
    border: none;
    color: rgba(0,0,0,1);
    cursor: pointer;

	i {
		line-height: 1;
	}
} .scrollControls button:disabled {
    color: rgba(0,0,0,0.3);
} .scrollControls button:hover {
	border: none !important;
} .scrollControls button i {
    font-style: normal !important;
    font-size: 1.5em;
} .scrollControls .dots {
    display: grid;
    grid-auto-flow: column;
    gap: 0.25em;
	position: relative;
	top: 1px;
    min-height: 10px;
} .dot {
    width: 4px;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: rgba(0,0,0,0.3);
    transition: all 500ms var(--ficms-transition-ease);

    cursor: pointer;
} .dot.active {
    background-color: rgba(0,0,0,1);
    width: 10px;
    height: 10px;
} .dot:has(+.active), .active + .dot {
    width: 8px;
    height: 8px;
} .dot:has(+ .dot + .active), .active + .dot + .dot {
    width: 6px;
    height: 6px;
}

div[data-layout="reviews"] .pagesDatabaseResult {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 100vw;
    grid-gap: 4em;
    padding: 4em;

    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
} div[data-layout="reviews"] .pagesDatabaseResult .reviews-item {
    width: calc(25vw - 5em);
    scroll-snap-align: start;
	scroll-margin: 4em;
}



@media(max-width: 2000px){
	div[data-layout="reviews"] .pagesDatabaseResult {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        max-width: 100vw;
        grid-gap: 4em;
        padding: 4em;

        display: grid;
        grid-auto-flow: column;
        grid-template-columns: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    } div[data-layout="reviews"] .pagesDatabaseResult .reviews-item {
        width: calc(25vw - 5em);
        scroll-snap-align: start;
		scroll-margin: 4em;
    }
}

@media(max-width: 1600px){
	div[data-layout="reviews"] .pagesDatabaseResult {
		grid-template-columns: repeat(2, 1fr);
		max-width: 100vw;
		padding: 2em;
		gap: 2em;
        
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    } div[data-layout="reviews"] .pagesDatabaseResult .reviews-item {
        width: calc(50vw - 3em);
        scroll-snap-align: start;
		scroll-margin: 2em;
    }
}

@media(max-width: 1000px){
	div[data-layout="reviews"] .pagesDatabaseResult {
		grid-template-columns: 1fr 1fr;
		max-width: 100vw;
		padding: var(--padding-normal);
		gap: var(--padding-normal);
        
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
	} div[data-layout="reviews"] .pagesDatabaseResult .reviews-item {
        width: calc(50vw - calc(var(--padding-normal) * 1.5));
        scroll-snap-align: start;
		scroll-margin: var(--padding-normal);
    }  .scrollControls {
		position: relative;
	}
}

@media(max-width: 768px){
	div[data-layout="reviews"] .pagesDatabaseResult {
		grid-template-columns: 1fr;
		max-width: 100vw;
		padding: var(--padding-normal);
		gap: var(--padding-normal);
        
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
	} div[data-layout="reviews"] .pagesDatabaseResult .reviews-item {
        width: calc(100vw - calc(var(--padding-normal) * 2));
        scroll-snap-align: start;
		scroll-margin: var(--padding-normal);
    }
}