/* ===================================
   Layout Styles | Grid, Flex, Containers
   =================================== */
/* * {
  border: 1px solid red;
} */

/* GENERAL */

.video-wrapper {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  max-width: 75%;
  aspect-ratio: 18 / 9;
  border-radius: 3.2rem;
  overflow: hidden;
}

.video-subpage {
  margin-top: 14rem;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 992px) {
  .video-wrapper {
    aspect-ratio: 4/3;
    margin-top: 0;
    max-width: 100%;
    border-radius: 0;
  }
}

/* HEADER */

.hero-nav {
  display: flex;
  justify-content: center;
}

header {
  position: absolute;
  transition: transform 0.4s ease;
}

.site-header {
  position: fixed;
  top: var(--space-sm);
  left: 0;
  width: 100%;
  z-index: 1000;
}

.header-inner {
  display: flex;
  position: relative;
  padding-inline: 2rem;
  min-height: 60px;
  justify-content: flex-end;
  align-items: center;
}

.site-logo {
  max-height: 50px;
  width: auto;
  display: block;
  transition: transform 0.2s ease;
}

.logo-link {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.logo-link:hover .site-logo {
  transform: scale(0.96) rotate(-1deg);
}

.lang-list a {
  font-family: var(--font-primary);
  font-size: var(--fs-400);
}

/* FRONT-PAGE HERO */

.front-page {
  display: grid;
  position: relative;
  z-index: 2;
}

.scroll-container {
  grid-area: 1 / 1;
  position: relative;
  z-index: 10;
}

.hero {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  z-index: 20;
  margin: 0 auto;
}

.hero img {
  width: clamp(200px, 80vw, 300px);
  margin-bottom: 4rem;
}

@media (max-width: 1024px) {
  .hero img {
    width: clamp(200px, 60vw, 200px);
  }
}

.hero-nav {
  width: 100%;
}

.hero-menu {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-xs);
  width: 100%;
}

.bg-grid::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.bg-grid {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 2fr;
}

.bg-grid img {
  width: 100%;
  object-fit: cover;
}

/* WARNING PAGE */

.regular-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: center;
  min-height: 100vh;
  text-align: center;
  z-index: 2;
  background-color: #0a0a0a;


}

.noncenter-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-lg);
  margin-top: var(--space-2xl);
}

.prebook-wrapper h1 {
  max-width: 25ch;
  text-wrap: balance;
}

.prebook-wrapper p {
  font-size: clamp(1.6rem, 2vw, 2.4rem);
}

/* CONTACT */

.contact-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.contact-wrapper {
  text-align: center;
  width: 50%;
}

.opening-hours {
  display: grid;
  width: 56rem;
}

.opening-hours div {
  display: flex;
  justify-content: space-between;
}

.open-text {
  position: relative;
  display: inline-block;
}

.open-text:after {
  content: "";
  top: 4px;
  left: -20px;
  width: 12px;
  height: 12px;
  position: absolute;
  background-color: #dc2626;
  border-radius: 50%;
  animation: blink 1.5s infinite;
}

.open-text.open::after {
  background-color: #16a34a;
}

.open-text.almost::after {
  background-color: #f59e0b;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@media (max-width: 1024px) {
  .contact-wrapper {
    width: 100%;
  }

  .opening-hours {
    gap: var(--space-xs);
    width: 100%;
  }

  .opening-hours div {
    flex-direction: column;
  }

  .opening-hours dd,
  .opening-hours dt {
    margin-bottom: 0;
  }
}

/* BOOKING */

.booking-heading {
  font-size: clamp(5rem, 4vw, 10rem);
}

/* MENU PAGE */

.slider {
  display: flex;
  max-width: 120rem;
  gap: 1.8rem;
  margin: 0 auto;
  padding-inline: var(--space-lg);
}

.slider-img {
  width: 33%;
  border-radius: 3.2rem;
  overflow: hidden;
}

.slider-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 480px) {
  .hero-content {
    overflow: hidden; 
  }

  .slider {
    width: 100%;
    padding-inline: 0;
    gap: 0;
    max-height: 60vh;

    display: flex;
    transition: transform 0.6s ease;
  }

  .slider-img {
    flex: 0 0 100%;
    border-radius: 0;
  }
}


/* MENU PAGE - ALLERGIES */

/* Functioning */
.accordion-menu-content,
.sub-accordion-menu-content {
  display: none;
  transition: display 0.3s ease-in-out;
}

.accordion-menu-content.open,
.sub-accordion-menu-content.open {
  display: block;
}

.filter-list__item[data-filter-status="active"] {
  transition:
    opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1),
    transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  position: relative;
}
.filter-list__item[data-filter-status="transition-out"] {
  transition:
    opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1),
    transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0.9);
  opacity: 0;
  visibility: visible;
}

.filter-list__item[data-filter-status="not-active"] {
  transform: scale(0.9);
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

/* Styling */

.filter-buttons,
.menu-section {
  margin-bottom: var(--space-md);
}

.menu-section-cat {
  margin-bottom: var(--space-sm);
}

.demo-card__h3 {
  margin-top: var(--space-xs);
}

.optional-label {
  margin-top: var(--space-2xs);
  font-size: var(--fs-300);
}

.filter-btn[data-filter-status="active"] {
  background-color: var(--color-beige-hover);
  border: none;
  color: var(--color-text);
}

.filter-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

.filter-btn {
  background-color: var(--color-beige);
  border: none;
  border-radius: 50rem;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
}

/* GALLERY MASONRY */

.masonry-wrap {
  padding-inline: 2rem;
  max-width: 114rem;
  margin: auto;
}

.masonry-list {
  grid-column-gap: var(--masonry-gap);
  grid-row-gap: var(--masonry-gap);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.masonry-item {
  width: calc(
    ((100% - 1px) - (var(--masonry-col) - 1) * var(--masonry-gap)) /
      var(--masonry-col)
  );
}

.masonry-item__visual {
  border-radius: 1.25rem;
  width: 100%;
  overflow: hidden;
}

.masonry-item__visual.is--square {
  aspect-ratio: 1;
}

.masonry-item__visual.is--wide {
  aspect-ratio: 3 / 2;
}

.masonry-item__visual.is--reg {
  aspect-ratio: 4 / 5;
}

.masonry-item__visual.is--tall {
  aspect-ratio: 4 / 5;
}

.masonry-item__visual-img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 300ms ease;
}

[data-masonry-list] {
  --masonry-col: 3;
  --masonry-gap: 0.5em;
}

@media screen and (max-width: 991px) {
  [data-masonry-list] {
    --masonry-col: 3;
  }
}

@media screen and (max-width: 767px) {
  [data-masonry-list] {
    --masonry-col: 2;
    --masonry-gap: 0.3em;
  }
}

@media screen and (max-width: 480px) {
  [data-masonry-list] {
    --masonry-col: 1;
    --masonry-gap: 0.3em;
  }
}

.masonry-item__visual:hover img {
  transform: scale(1.025);
}

/* FAQ */

.accordion-css {
  max-width: 56rem;
  position: relative;
  margin: 0 auto
}

.accordion-css__list {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: column;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  position: static;
}

.accordion-css__item {
  background-color: var(--color-beige);
  border-radius: .8rem;
  list-style: none;
  text-align: left;
}

.accordion-css__item-top {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 1em 1em 1em 1.5em;
  display: flex;
}

.accordion-css__item-bottom {
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  grid-template-rows: 0fr;
  display: grid;
  position: relative;
  overflow: hidden;
}

[data-accordion-status="active"] .accordion-css__item-bottom {
   grid-template-rows: 1fr;
}

.accordion-css__item-bottom-wrap {
  flex-flow: column;
  height: 100000%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.accordion-css__item-bottom-content {
  padding-bottom: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.accordion-css__item-h3 {
  margin-top: 0;
  margin-bottom: 0;
  color: #000;
  font-size: var(--fs-400);
  font-family: var(--font-primary);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.05rem;
}

.accordion-css__header {
  font-size: var(--fs-600);
}

.accordion-css__item-icon {
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  background-color: #d5c4a9;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  display: flex;
  transform: rotate(180deg);
}

[data-accordion-status="active"] .accordion-css__item-icon {
   transform: rotate(0.001deg);
}

.accordion-css__item-icon-svg {
  width: 1em;
}

.accordion-css__item-p {
  color: #000;
  line-height: 1.5;
}

.accordion-css__item-p p {
  color: inherit;
  font-size: var(--fs-300);
}

.accordion-css__item-p p:not(:last-child) {
  margin-bottom: 1.6rem;
}

/* Footer at bottom */
.footer {
  position: sticky;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 2.4rem;
  bottom: 0;
  z-index: 1;
  background: #000000;
  color: white;
  font-size: 1.6rem;
}

.footer-logo {
  width: 12rem;
  margin: 2.4rem auto;
}

.footer-nav-list li {
  color: var(--color-beige);
  margin-bottom: 0.8rem;
  font-family: var(--font-body);
}

.footer-nav-list a {
  color: var(--color-beige);
}

.footer-socials-icon {
  gap: 0.8rem;
  justify-content: center;
}

.footer-socials-icon a svg {
  width: 24px; /* match your original */
  height: 24px;
  color: var(--color-beige);
  display: block; /* SUPER important */
  transition: transform 300ms ease;
  transform-origin: center center;
}

.footer-socials-icon a:hover svg {
  transform: scale(1.2);
}

.copyright,
.footer-location p {
  font-size: 1.2rem;
}

.text-box {
  max-width: 72rem;
  text-align: center;
  margin: 0 auto;
}

/* AFTER RESET CSS */

main {
  position: relative;
}

.section {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  background-color: #0a0a0a;
  border-bottom: 1px solid #262626;
padding-bottom: 12rem;
}

.section-center {
  display: grid;
  place-items: center;
}

.section-loose {
  padding-block: 14rem;
}

.wrapper {
  max-width: 72rem;
}

.wrapper-tight {
    max-width: 56rem;
}

.center {
  margin-inline: auto;
}

.text-center {
  text-align: center;
}

/* SCROLLDOWN */
.scroll-down header {
  transform: translate3d(0, -150%, 0);
}

/* SITEMAP */
.rank-math-html-sitemap__title {
  padding-block: 2.4rem;
}

/* SWIPER */
.swiper {
  width: 75%;
  max-width: 1240px;
}

.swiper-slide {
  background: #444;
  display: flex;
  border-radius: 2.4rem;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.swiper-slide img {
  height: 100%;
  object-fit: cover;
}

.swiper-pagination-bullet-active {
  background-color: var(--col-light-100) !important;
}

@media (max-width: 796px) {
  .swiper {
    width: 100%;
    margin-top: 0rem;
  }

  .swiper-slide {
    border-radius: 0rem;
  }
}