/* BIG SCREENS (above 1920px) */
@media (min-width: 120.0625em) { /* 1921px / 16 */
  .services-section,
  .ts-bg,
  .verkkokauppa-section,
  .restaurants,
  .tapahtumat-section,
  .tarina-content,
  .feedback-section,
  .apply-section,
  .intro-area {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: scroll !important;
  }

}

/* 1920px */
@media (max-width: 120em) {
  html {
    font-size: 60%;
  }
}

/* BELOW 84 * 16px = 1344px (Smaller desktops) */
@media (max-width: 84em) {
  html {
    /* 9px / 16p = 56% */
    font-size: 59%;
  }

  .main-nav-list {
    gap: 4.6rem;
  }
  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 1.6rem;
  }

  .t-line {
    border: 0.3rem solid rgb(244, 243, 243);
    width: 30%;
  }

  .restaurants {
    padding: 8rem;
  }
}

/* BELOW 1200px (Landscape tablets) */
@media (max-width: 75em) {
  html {
    /* 9px / 16p = 56% */
    font-size: 56.25%;
  }

  .tarina-content {
    padding: 6rem;
  }
  .tarina-descr {
    font-size: 1.8rem;
  }
  .main-nav-list {
    gap: 3rem;
  }

  .intro-restaurants {
    gap: 6rem;
  }

  .intro-rest-info-descr {
    font-size: 2rem;
  }

  .kampanja-img,
  .tapahtuma-img {
    width: 42vw; /* responsive width (each 32% of viewport width) */
    max-width: 47rem;
  }
  .tapahtumat-section {
    padding: 2rem 0;
  }

  .serv-title {
    margin-top: 16rem;
  }
  .serv-title1 {
    margin-top: 2rem;
  }
  .services-descr {
    font-size: 1.8rem;
  }

  .verkkokauppa-section {
    padding: 4rem 0;
  }

  .verkkis-jaali-title,
  .verkkis-kaakkuri-title {
    font-size: 3.2rem;
  }
  .rest-intro,
  .tarina-intro {
    width: 60%;
  }

  .rest-subtitle {
    font-size: 2rem;
  }

  .rest-info {
    gap: 4rem;
  }

  .rest-descr-info {
    font-size: 1.8rem;
  }

  .palaute-descr {
    padding: 2rem 12rem;
  }

  .feedback-title {
    margin-left: 2rem;
  }

  .yhteystiedot {
    margin-right: 2rem;
  }

  .yhteys-title {
    margin-left: 6rem;
  }
  .yht-list {
    padding: 0 0 0 10rem;
  }
  .feedback-form {
    margin-left: 2rem;
  }

  .apply-intro {
    padding: 6rem 12rem 2rem 12rem;
  }
  .logo-wrapper .restSelect {
  bottom: -3rem; 
}
}

/* BELOW 944px (Tablets) */
@media (max-width: 59em) {
  html {
    /* 8px / 16p = 50% */
    font-size: 50%;
  }
  /* .main-nav-list {
    gap: 2.7rem;
} */
  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 1.4rem;
  }

  .intro-rest-info-descr {
    font-size: 1.8rem;
  }

  .t-line2 {
    margin-left: 2rem;
  }
  .serv-title {
    margin-left: 2rem;
  }
  .serv-title1 {
    margin: 0 auto;
    margin-top: 2rem;
  }
  .services-descr {
    padding: 3rem 2rem 0 2rem;
  }
  .verkkis-jaali {
    margin-bottom: 4rem;
  }
  .verkkis-links {
    flex-direction: column;
  }

  .verkkis-jaali-title,
  .verkkis-kaakkuri-title {
    font-size: 3.6rem;
  }

  .verkkis-jaali-title {
    padding: 0 19rem 2rem 0;
  }
  .verkkis-kaakkuri-title {
    padding: 0 10rem 2rem 0;
  }
  .restaurants {
    padding: 8rem 4rem;
  }
  .rest-descr-title {
    margin-top: 4rem;
    margin-bottom: 0;
    font-size: 3.6rem;
  }
    .intro-section {
  position: relative;
  width: 100%;
  height: 75vh;         
    min-height: 320px;      
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #000;     
}

/* VIDEO SCALES DOWN */
.intro-video {
  position: relative;
    width: 100vw;         
    max-height: 75vh;    
    height: 100%;     
  object-fit: contain;
      transform: scale(1.15);  
    transform-origin: center;
  display: block;
  z-index: 0;
}

/* overlay logo stays centered on video area */
.center-logo {
  position: absolute;
  inset: 0;
  display: grid;
  transform: translateX(0%);
  place-items: center;
  z-index: 1;
  pointer-events: none;
}

.cropped-logo {
  width: clamp(220px, 55vw, 700px);
  height: auto;
  display: block;
}
  .logo-wrapper .restSelect {
  bottom: -2.8rem; 
}

  .sticky-lippu {
    width: 90px;
  }
}

/* BELOW 800px (Tablets2) */
@media (max-width: 50em) {
  html {
    /* 8px / 16p = 50% */
    font-size: 48%;
  }
  /* .main-nav-list {
    gap: 2.5rem;
  } */
  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 1.1rem;
  }

  .lennysin-ravintolat-menu {
    width: 100%;
  }

  .feedback-container {
    flex-direction: column;
  }

  .feedback-submit {
    justify-self: center;
  }

  .feedback-submit button {
    font-size: 2.8rem;
    padding: 2rem 8rem;
  }

  .yhteys-title {
    text-align: center;
    padding: 0;
    margin: 0 auto;
    margin-top: 8rem;
  }

  .yht-list {
    padding: 0;
    justify-items: center;
    align-items: center;
    text-align: center;
  }
  .yht-list li {
    list-style: none;
  }

  .feedback-form input,
  .feedback-form select,
  .feedback-form textarea,
  .application-form input,
  .application-form select,
  .application-form textarea {
    font-size: 2rem;
  }

  .feedback-form {
    grid-template-columns: 1fr;
    margin-left: 0;
    padding: 0 4rem;
  }
  .feedback-form textarea,
  .feedback-submit {
    grid-column: 1 / -1;
  }

  .feedback-title {
    text-align: center;
    font-size: 4.2rem;
  }
  .tarina-content {
    grid-template-columns: 1fr;
    padding: 6rem 8rem; /* smaller padding so it fits */
    gap: 4rem;
  }

  /* Make sure images don’t “side-place” anymore */
  .tarina-box,
  .tarina-box2 {
    place-self: stretch;
    margin-bottom: 0;
  }

  .tarina-img {
    max-width: 90%; /* allow full width on mobile */
  }
  .img2 {
    max-width: 75%;
  }
  .img3 {
    max-width: 65%;
  }
  .osa3 {
    margin-bottom: 0; /* 18rem is huge on small screens */
  }

  .tarina-descr {
    padding: 1.6rem 2rem;
    font-size: 2.2rem;
  }
  .resp-tarina-box {
    display: block;
  }
  .dt-box {
    display: none;
  }
  .intro-area {
  padding: 8rem 2rem;
      
  }
  
}

/* BELOW 704 (Smaller tablets) */
@media (max-width: 44em) {
  html {
    /* 7px / 16p = 50% */
    font-size: 43.75%;
  }

  .swiper-button-next,
  .swiper-button-prev {
    max-width: 2.8rem;
  }
   /*.intro-section {
    min-height: 100svh; small viewport height 
  }*/

  .intro-restaurants {
    display: flex; /* keep flex */
    flex-direction: column; /* stack vertically */
    gap: 12rem; /* optional spacing between boxes */
    align-items: center; /* center them horizontally */
    margin-top: 14rem;
  }

  .intro-rest-box {
    max-width: 64rem; /* optional: limit how wide they get */
    gap: 4rem;
  }

  .rafla-img {
    width: 100%;
    height: auto;
    max-width: 64rem;
    max-height: 44rem;
  }

  .intro-rest-info-descr {
    font-size: 2.4rem;
  }

  .kampjbox,
  .tapahtbox {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
  .kampanja-img,
  .tapahtuma-img {
    width: 95%; 
    max-width: 100%;
    min-height: 85%;
  }

  .insider-section {
    display: flex;
    flex-direction: column;
  }
  .insider-info-box {
    align-self: center;
    margin-right: 0;
    text-align: center;
  }

  .liity-descr {
    margin-right: 0;
  }

  .mobile-logo {
    display: block;
    margin-left: 0rem;
  }
  .mob-logo {
    height: 11rem;
    width: 11rem;
  }
  .header {
    justify-content: space-between;
  }
  .desktop-wrapper {
    display: none;
  }
  .mobile-logo .logo-wrapper {
    display: flex;
    align-self: center;
  }

  .mobile-logo .logo-wrapper .restSelect2 {
    font-family: "ITC Souvenir";
    background-color: rgb(17, 17, 17);
    color: rgb(255, 255, 255);
    left: 50%;
    margin-top: 4.3rem;
    margin-bottom: 3.7rem;
    padding: 0.7rem;
    font-size: 2rem;
    border: 0.4rem solid rgb(214, 214, 214);
    border-radius: 5px;

    text-align: center; /* Center default text */
    text-align-last: center;
    -webkit-appearance: none; /* Chrome/Safari */
    -moz-appearance: none; /* Firefox */
    appearance: none;
  }

  @supports (-ms-ime-align: auto) {
    .kampjbox,
    .tapahtbox {
      /* Edge-specific fixes */
      display: grid;
      place-items: center;
    }
  }
  @supports (-webkit-touch-callout: none) {
    .kampjbox,
    .tapahtbox {
      /* Safari-specific fixes */
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .services {
    height: 52rem;
  }
  .services-section,
  .kantis-lahjis-section {
    display: flex;
    flex-direction: column;
  }

  .services-descr {
    font-size: 2.4rem;
  }

  .t-line2 {
    width: 24%;
  }

  .rest-intro,
  .tarina-intro {
    width: 70%;
  }

  .restaurants-box {
    display: flex;
    flex-direction: column;
  }

  .rest-img {
    border-right: 0;
  }

  .rest-descr-title {
    color: rgb(0, 0, 0);
    background-color: #f0c321;
    padding: 1rem 0;
    margin-top: -0.2rem;
    background: linear-gradient(66deg, #ffe48c 0%, #eb9900 100%);
    margin-bottom: 0;
  }

  .rest-info {
    order: 2;
    border-radius: 0;
    border: 0;
    gap: 12rem;
    border-bottom: 0.8rem solid rgba(255, 204, 0, 0.8);
  }
  .rest-descr {
    order: 3;
    border-bottom: 0;
    border-radius: 0 0 2rem 2rem;
  }
  .rest-descr-info {
    font-size: 2rem;
  }

  .rest-title-mobile {
    display: block;
    color: rgb(0, 0, 0);
    background-color: #f0c321;
    padding: 1rem 0;
    margin-top: -0.2rem;
    background: linear-gradient(66deg, #ffe48c 0%, #eb9900 100%);
    margin-bottom: 0;
  }

  .rest-descr-title {
    display: none;
  }

  .apply-intro {
    padding: 6rem 6rem;
  }

  /* MOBILE NAVIGATION */
  .btn-mobile-nav {
    z-index: 999;
    display: block;
  }

  body.front-page .header {
    position: fixed;
  }

  .main-nav {
    position: fixed;
    top: 14rem;
    right: 0;
    width: 29rem;
    padding: 2rem 4rem 2rem 0;
    height: 55rem;
    background-color: #000000d3;
    transform: translateX(100%);
    opacity: 0;
    display: flex;

    /* Hide after animation */
    pointer-events: none;
    /* visibility: hidden; */
    margin-right: 0;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 15px;
    border: 0.4rem solid rgb(214, 214, 214);
    transition:
      transform 0.35s ease-in-out,
      opacity 0.35s ease-in-out;
  }

  /* OPEN STATE */
  .nav-open .main-nav {
    transform: translateX(15%);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .nav2 {
    display: none;
  }
  /* Vertical nav list */
  .main-nav-list {
    flex-direction: column;
    gap: 3.2rem;
    align-items: flex-start;
  }

  .main-nav-link {
    font-size: 2.4rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 2.6rem;
  }

  .t-line {
    width: 36%;
  }
  .line2 {
    width: 100%;
  }
  .insider-enter-box {
    display: flex;
    align-self: center;
  }

  .intro-rest-info {
    border-radius: 0 0 4rem 4rem;
  }
  .rest-descr-info,
  .lennys-raflat-descr,
  .lennys-raflat-menu-descr {
    font-size: 2.2rem;
    line-height: 1.6;
  }
      .lang-dropdown {
    top: 15rem;
  }

  .s1::before,
  .s2::before,
  .s3::before,
  .s4::before,
  .s5::before {
    filter: blur(2px) !important;     
  transform: scale(1.08) !important;      
  }

  /* If you also don't want blur changes on hover on mobile */
  .s1:hover::before,
  .s2:hover::before,
  .s3:hover::before,
  .s4:hover::before,
  .s5:hover::before {
    filter: none !important;
  transform: scale(1.2) rotate(2deg) !important;
  }
  
  .sticky-lippu {
    width: 60px;
  }

     .kampanja-img,
  .tapahtbox:has(.tapahtkuva:nth-child(2)):not(:has(.tapahtkuva:nth-child(3)))
    .tapahtuma-img {
    width: 86vw;
    max-width: none;
  }

}

/* BELOW 600px (Phones) */
@media (max-width: 37em) {
  html {
    /* 6px / 16p = 50% */
    font-size: 37.5%;
  }
  .feedback-form input,
  .feedback-form select,
  .feedback-form textarea,
  .application-form input,
  .application-form select,
  .application-form textarea {
    font-size: 1.8rem;
    padding: 1.2rem 1.7rem;
  }

    .intro-video, .center-logo {
  margin-top: 25rem;
    }  


}

/* BELOW 400px (Thin) */
@media (max-width: 26em) {
  html {
    /* 6px / 16p = 50% */
    font-size: 28.5%;
  }

    .intro-restaurants {
        margin-top: 1rem;
}
}