@import url("../../../style.css");

/* ── TESTIMONIALS PAGE ── */
body.testimonials-page {
   background: var(--black);
   color: #101010;
}

body.testimonials-page section {
   min-height: auto;
}

.testimonials-main {
   position: relative;
   z-index: 40;
}

.testimonials-hero {
   position: relative;
   width: 100vw;
   margin-left: calc(50% - 50vw);
   min-height: 100svh;
   background-image: url('../../../assets/images/balcony.png');
   background-size: cover;
   background-position: center center;
   overflow: hidden;
}

.testimonials-hero__content {
   position: relative;
   z-index: 2;
   width: 100%;
   min-height: 100svh;
   color: #101010;
}

.testimonials-hero h1 {
   position: absolute;
   right: 42px;
   top: 50%;
   transform: translateY(-50%) translateX(20%) rotate(-90deg) ;
   transform-origin: center center;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   width: max-content;
   white-space: nowrap;
   margin-top: 0;
   font-size: clamp(2.2rem, 4.6vw, 4.1rem);
   line-height: 0.94;
   letter-spacing: -0.05em;
   text-transform: uppercase;
   color: #101010;
   font-weight: 400;
}

.testimonials-hero h1 span {
   display: block;
}

.testimonials-hero h1 span + span {
   margin-block-start: 0.18em;
}

.testimonials-hero__quote {
   position: absolute;
   left: 44%;
   top: 57%;
   width: min(520px, 36vw);
   transform: translate(-50%, -50%);
   padding: 0;
}

.testimonials-kicker {
   position: absolute;
   right: 54px;
   bottom: 104px;
   font-size: 0.68rem;
   letter-spacing: 0.24em;
   text-transform: uppercase;
   color: #101010;
   text-align: right;
   font-weight: 300;
}

.testimonials-kicker span {
   color: var(--blue);
}

.testimonials-stars {
   color: #ce1f2e;
   font-size: clamp(1.2rem, 2vw, 1.65rem);
   letter-spacing: 0.14em;
   display: inline-block;
   margin-bottom: 14px;
}

.testimonials-hero blockquote {
   font-size: 0.96rem;
   line-height: 1.75;
   font-style: italic;
   color: #101010;
   font-weight: 300;
}

.testimonials-author {
   margin-top: 16px;
   font-size: 0.72rem;
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #101010;
}

.testimonials-author span {
   display: block;
   margin-top: 6px;
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: none;
   color: rgba(16, 16, 16, 0.72);
}

.testimonials-reviews {
   position: relative;
   margin-top: calc(var(--testimonials-cover-shift, 0px) * -1);
   background: #ffffff;
   overflow: visible;
   z-index: 55;
   will-change: margin-top;
}

.testimonials-reviews::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 2;
   background-image: url('../../../assets/images/logo-2-removebg-preview.png');
   background-repeat: no-repeat;
   background-position: 24% 34%;
   background-size: 40vw auto;
   filter: grayscale(100%) saturate(10%);
   opacity: 0.06;
   pointer-events: none;
}

.testimonials-reviews::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 2;
   background-image: url('../../../assets/images/logo-2-removebg-preview.png');
   background-repeat: no-repeat;
   background-position: 78% 90%;
   background-size: 40vw auto;
   filter: grayscale(100%) saturate(10%);
   opacity: 0.05;
   pointer-events: none;
}

.testimonials-reviews__clouds {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 8;
   aspect-ratio: 1408 / 359;
   background-image: url('../../../assets/images/clouds.png');
   background-position: center top;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   pointer-events: none;
   transform: translateY(-42%);
}

.testimonials-reviews__inner {
   position: relative;
   z-index: 4;
   width: min(1260px, 92vw);
   margin: 0 auto;
   padding: clamp(150px, 27vw, 560px) 0 60px;
}

.testimonials-section-head {
   max-width: 780px;
   margin-bottom: 28px;
}

.testimonials-section-head h2 {
   font-size: clamp(1.8rem, 3.8vw, 3.1rem);
   line-height: 0.96;
   letter-spacing: -0.03em;
   text-transform: uppercase;
   font-weight: 300;
}

.testimonials-zigzag {
   display: grid;
   gap: 26px;
   padding-bottom: 18px;
}

.testimonial-card {
   width: min(520px, 100%);
   background: transparent;
   padding: 0;
}

.testimonial-card p {
   color: #171717;
}

.testimonial-card p:not(.testimonial-role) {
   font-size: 0.96rem;
   line-height: 1.8;
   font-style: italic;
   font-weight: 300;
}

.testimonial-card h3 {
   margin-top: 14px;
   font-size: 0.92rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   font-weight: 500;
}

.testimonial-role {
   margin-top: 6px;
   font-size: 0.72rem;
   font-weight: 400;
   color: rgba(23, 23, 23, 0.72);
}

.testimonial-card--left {
   justify-self: start;
}

.testimonial-card--right {
   justify-self: end;
}

.testimonials-footer-shell {
   margin-top: 0;
   background: #ffffff;
}

@media (max-width: 980px) {
   .testimonials-hero__content {
      min-height: 100svh;
   }

   .testimonials-hero h1,
   .testimonials-kicker,
   .testimonials-hero__quote {
      position: absolute;
   }

   .testimonials-hero h1 {
      right: 30px;
   }

   .testimonials-hero__quote {
      left: 50%;
      top: 60%;
      width: min(480px, 58vw);
   }

   .testimonials-reviews {
      margin-top: 0;
   }

   .testimonials-reviews__inner {
      padding-top: clamp(140px, 30vw, 420px);
   }
}

@media (max-width: 760px) {
   .testimonials-hero {
      min-height: 92svh;
   }

   .testimonials-hero__content {
      min-height: 92svh;
   }

   .testimonials-hero h1 {
      right: 14px;
      font-size: clamp(2.45rem, 10vw, 3.6rem);
   }

   .testimonials-kicker {
      right: 16px;
      bottom: 78px;
      font-size: 0.58rem;
      letter-spacing: 0.2em;
   }

   .testimonials-hero__quote {
      left: 53%;
      top: 58%;
      width: min(320px, 66vw);
   }

   .testimonial-card,
   .testimonial-card--left,
   .testimonial-card--right {
      justify-self: start;
      width: 100%;
   }

   .testimonials-reviews__clouds {
      background-size: 100% 100%;
      transform: translateY(-34%);
   }

   .testimonials-reviews__inner {
      padding-top: clamp(120px, 34vw, 280px);
      padding-bottom: 34px;
   }
}