/* NAVIGATION */
#main-page nav {
   position: relative;
}

#main-page nav ul li a {
   color: var(--font);
}

#main-page nav ul li a::after {
   background-color: var(--font);
}

#main-page nav #toggleNav span {
   background-color: var(--font);
}

#main-page #weather {
   color: var(--font);
}

/* HERO BANNER */
#hero {
   height: calc(100vh - 180px);
   background-color: var(--green);
   background-image: url('/cprg-218-final-project/assets/heropage.jpg');
   background-size: cover;
   background-position: center;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-inline: 2rem;
   margin-inline: 5rem;
}

#hero h1 {
   text-align: center;
}

/* ABOUT SECTION */
#about {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-template-rows: repeat(5, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 20px;
}

#about .about-content {
   grid-column: 1/6;
   grid-row: 5;
}

#about .about-content p {
   line-height: 1.6;
   margin-top: 16px;
   max-width: 320px;
}

#about .about-image {
   position: relative;
   width: 100%;
   overflow: hidden;
}

#about .about-image-1 {
   aspect-ratio: 430/378;
   grid-column: 4/8;
   grid-row: 1/4;
   max-width: 300px;
}

#about .about-image-2 {
   aspect-ratio: 430/479;
   grid-column: 9/13;
   grid-row: 3/7;
   max-width: 420px;
}

/* ACTIVITIES OR EXPERIENCES */
#activities {
   background-color: var(--light-tan);
   background-image: url('/cprg-218-final-project/assets/lines.svg');
   margin: 0;
}

#activities h2 {
   text-align: center;
   margin: 0 auto;
}

#activities .promo-boxes {
   --column-count: 4;
   --gap-x: 1.1rem;
   --gap-x-sum: (var(--gap-x) * (var(--column-count) - 1));
   --item-width: calc((100% - var(--gap-x-sum)) / var(--column-count));
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   gap: 2rem var(--gap-x); 
   margin-top: 3.2rem;
}

#activities .promo-boxes .promo-box {
   position: relative;
   width: var(--item-width);
   max-width: 350px;
}

#activities .promo-box .promo-content {
   position: absolute;
   bottom: 0;
   left: 0;
   width: calc(100% - 2rem);
   background-color: var(--light-tan);
   margin: 1rem;
   padding: 1rem;
}

#activities h3 {
   font-family: 'PP Editorial Old', sans-serif;
   font-weight: 200;
   font-size: calc(20px + (32 - 20) * ((100vw - 320px) / 1600));
   line-height: 1.1;
   margin: 0;
}

#activities p {
   margin-bottom: 0;
}

/* ACCOMMODATIONS */
.accommodation-boxes {
   margin-top: 3.2rem;
}

.accommodation-box {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   padding-block: 3rem;
   border-bottom: 1px solid var(--font);
}

.accommodation-box:last-of-type {
   border-bottom: none;
}

.accommodation-box-img {
   position: relative;
   width: 65%;
   max-width: 700px;
   height: auto;
}

.accommodation-box .accommodation-content {
   display: flex;
   flex-flow: column;
   align-items: flex-start;
   width: 35%;
}

.accommodation-box .accommodation-box-img {
   overflow: hidden;
}

.accommodation-box .accommodation-box-img::after {
   transform-origin: right center;
}

.accommodation-box a.button {
   margin-top: auto;
}


/* REVIEWS */
#home-reviews {
   position: relative;
   background-image: url('/cprg-218-final-project/assets/heropage.jpg');
   background-size: cover;
}

#home-reviews .container {
   position: relative;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: center;
   gap: 2rem;
   color: var(--light-tan);
   z-index: 1;
}

#home-reviews h2 {color: var(--light-tan);}

#home-reviews .section-content-title,
#home-reviews .reviews-btn {
   flex: 1 0 100%;
}

#home-reviews .reviews-box,
#home-reviews .reviews-img {
   flex: 1 0 calc(33.33% - 4rem);
}

#home-reviews p {
   max-width: 280px;
}

#home-reviews .reviews-box.right {
   margin-top: auto;
}

#home-reviews .reviews-box.right p {
   margin-left: auto;
}

#home-reviews p span {
   display: block;
   font-style: italic;
   padding-top: 0.8rem;
   text-align: right;
}

#home-reviews .reviews-img {
   position: relative;
   max-width: 390px;
}

#home-reviews .reviews-img img:last-of-type {
   position: absolute;
   left: -110px;
   bottom: -50px;
   max-width: 180px;
   border: 10px solid var(--light-tan);
}

#home-reviews .reviews-btn {
   order: 4;
   text-align: center;
   margin: 4rem auto 0;
}

#home-reviews .reviews-btn a {
   display: inline-block;
}


/* MEDIA QUERIES */
@media screen and (min-width: 1600px) {
   #home-reviews .container {
      max-width: 1260px;
      margin: 0 auto;
   }
}

@media screen and (max-width: 1366px) {
   /* ACCOMMODATIONS */
   .accommodation-box-img {
      width: 50%;
   }

   .accommodation-box .accommodation-content {
      width: 45%;
   }
}

@media screen and (max-width: 1280px) {
   /* ACTIVITIES */
   #activities .promo-boxes {
      --column-count: 3;
   }

   /* REVIEWS */
   #home-reviews h2 {
      width: 100%;
      margin-bottom: 2rem;
   }

   #home-reviews .reviews-box {
      flex: 1 0 calc(50% - 4rem);
   }

   #home-reviews .reviews-box p {
      margin: 0 auto;
   }

   #home-reviews .reviews-img {
      order: 2;
      flex: 1 0 100%;
      margin: 0 auto;
      max-width: 300px;
   }
}

@media screen and (max-width: 1024px) {
   #hero {
      height: calc(100vh - 140px);
      margin-inline: 2.5rem;
   }

   /* ACTIVITIES */
   #activities .promo-boxes {
      --column-count: 2;
   }
}


@media screen and (max-width: 768px) {
   #hero {
      height: calc(100vh - 120px);
      margin-inline: 1.25rem;
   }

   /* ABOUT */
   #about {
      display: flex;
      flex-direction: column;
   }

   #about .about-image-1 {
      align-self: flex-end;
      max-width: 300px;
      margin-right: 4rem;
   }

   #about .about-image-2 {
      display: none;
   }

   /* ACCOMMODATIONS */ 
   .accommodation-box {
      flex-flow: column;
      gap: 1.2rem;
   }

   .accommodation-box-img,
   .accommodation-box .accommodation-content {
      width: 100%;
   }

   .accommodation-box a.button {
      margin-top: 1.5rem;
   }

   /* REVIEWS */
   #home-reviews .container {
      flex-flow: column;
   }
}

@media screen and (max-width: 480px) {

   #main-page nav #weather {
      left: 50%;
      top: 8rem;
      text-align: center;
      transform: translateX(-50%);
   }

   /* ABOUT */
   #about .about-image-1 {
      margin-inline: auto;
   }

   /* ACTIVITIES */
   #activities .promo-boxes {
      --column-count: 1;
   }
   
}


/* ANIMATIONS */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {

   #about .about-image::after,
   .accommodation-boxes .accommodation-box-img::after {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--light-color);
      transform-origin: 0% 50%;
   }

   .accommodation-boxes .accommodation-box-img::after {
      transform-origin: right center;
   }

   #activities .promo-boxes .promo-box::after {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--light-tan);
      transform-origin: 50% 100%;
   }

   #about .about-image.animated::after,
   .accommodation-box.animated .accommodation-box-img::after {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) slide-out-x both;
   }

   #about .about-image-2.animated::after {
      animation-delay: 0.2s;
   }

   #about .about-image.animated img,
   .accommodation-box .accommodation-box-img img {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) scale-out both;
   }

   #about .about-image-2.animate img {
      animation-delay: 0.3s;
   }

   #about .about-content.animated h2 {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) fade-in-ttb both;
   }

   #about .about-content.animated p {
      animation: 0.6s cubic-bezier(0.83, 0, 0.17, 1) fade-in both;
      animation-delay: 0.4s;
   }

   #activities h2.animated {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) fade-in both;
   }

   #activities .promo-box.animated::after {
      animation: 0.8s cubic-bezier(0.83, 0, 0.17, 1) slide-out-y both;
   }

   #activities .promo-box:nth-child(2).animated::after {
      animation-delay: 0.1s;
   }

   #activities .promo-box:nth-child(3).animated::after {
      animation-delay: 0.2s;
   }

   #activities .promo-box:nth-child(4).animated::after {
      animation-delay: 0.3s;
   }

   .accommodation-box.animated .accommodation-content {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) fade-in both;
      animation-delay: 0.3s;
   }

   .reviews-box.animated {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) fade-in both;
   }

   .reviews-box:nth-of-type(2).animated {
      animation-delay: 0.3s;
   }

}