/* ==========================================================
   VIJAY ENTERPRISES
   CUSTOMER TESTIMONIALS STYLESHEET

   Website:
   https://vijayenterprises1986.in/

   PUBLICATION STATUS:
   Testimonial content is currently disabled.

   This stylesheet is retained for future,
   genuinely verified customer reviews.

   Dependencies:
   - sections/testimonials.html
   - js/testimonials.js
   - css/style.css

   Existing design preserved:
   - Minimal white testimonial cards
   - Light neutral section background
   - Navy and blue typography
   - Circular customer initials
   - Quotation marks
   - Optional verified customer ratings
   - Horizontal carousel
   - Previous / Next navigation

   Responsive layout:
   - Desktop: 3 cards
   - Tablet: 2 cards
   - Mobile: 1 card

   Important:
   CSS does not create customer reviews or ratings.
========================================================== */


/* ==========================================================
   01. SECTION VARIABLES
========================================================== */

.ve-testimonials {
  --review-navy: #112b48;
  --review-blue: #203f83;
  --review-gold: #d69e56;

  --review-text: #4c5d72;
  --review-muted: #64748b;
  --review-border: #e1e7ef;

  --review-background: #f8fafc;
  --review-white: #ffffff;

  --review-gap: 20px;
  --review-visible: 3;

  position: relative;

  width: 100%;

  padding: 72px 0 64px;

  color: var(--review-navy);
  background: var(--review-background);

  font-family: "Inter", sans-serif;

  overflow: hidden;

  scroll-margin-top: 90px;
}

.ve-testimonials,
.ve-testimonials *,
.ve-testimonials *::before,
.ve-testimonials *::after {
  box-sizing: border-box;
}


/* ==========================================================
   02. SECTION CONTAINER
========================================================== */

.ve-testimonials .ve-testimonials-container {
  width: 100%;
  max-width: 1320px;

  margin-inline: auto;
  padding-inline: 24px;
}


/* ==========================================================
   03. SECTION HEADER
========================================================== */

.ve-testimonials-header {
  max-width: 790px;

  margin-bottom: 32px;
}


/* ==========================================================
   04. EYEBROW LABEL
========================================================== */

.ve-testimonials-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 15px;

  color: var(--review-blue);

  font-size: 11px;
  font-weight: 750;

  line-height: 1.5;
  letter-spacing: 1.6px;

  text-transform: uppercase;
}

.ve-testimonials-eyebrow-line {
  display: inline-block;

  flex: 0 0 28px;

  width: 28px;
  height: 2px;

  background: var(--review-gold);
}


/* ==========================================================
   05. MAIN HEADING
========================================================== */

.ve-testimonials-header h2 {
  margin: 0 0 15px;

  color: var(--review-navy);

  font-family:
    "Plus Jakarta Sans", sans-serif;

  font-size: clamp(32px, 3.5vw, 45px);
  font-weight: 800;

  line-height: 1.2;
  letter-spacing: -1.5px;
}

.ve-testimonials-header h2 span {
  color: var(--review-blue);
}


/* ==========================================================
   06. INTRODUCTION
========================================================== */

.ve-testimonials-header > p {
  max-width: 670px;

  margin: 0;

  color: var(--review-muted);

  font-size: 15px;
  font-weight: 400;

  line-height: 1.8;
}


/* ==========================================================
   07. CAROUSEL WRAPPER
========================================================== */

.ve-testimonials-slider {
  position: relative;

  width: 100%;
  min-width: 0;
}


/* ==========================================================
   08. HORIZONTAL CAROUSEL TRACK
========================================================== */

.ve-testimonials-track {
  display: flex;
  align-items: stretch;

  gap: var(--review-gap);

  width: 100%;
  min-width: 0;

  padding: 3px 1px 10px;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;

  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1px;

  overscroll-behavior-x: contain;

  scrollbar-width: none;
  -ms-overflow-style: none;

  -webkit-overflow-scrolling: touch;
}

.ve-testimonials-track::-webkit-scrollbar {
  display: none;
}


/* ==========================================================
   09. CUSTOMER REVIEW CARD
========================================================== */

.ve-review-card {
  display: flex;
  flex-direction: column;

  flex: 0 0 calc(
    (
      100% -
      (var(--review-visible) - 1) *
      var(--review-gap)
    ) /
    var(--review-visible)
  );

  min-width: 0;
  min-height: 310px;

  margin: 0;
  padding: 25px;

  color: var(--review-text);
  background: var(--review-white);

  border: 1px solid var(--review-border);
  border-radius: 10px;

  scroll-snap-align: start;
  scroll-snap-stop: normal;

  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}


/* ==========================================================
   10. CARD HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

  .ve-review-card:hover {
    border-color: #cbd6e5;

    box-shadow:
      0 8px 28px rgba(17, 43, 72, 0.055);
  }

}


/* ==========================================================
   11. CARD HEADER
========================================================== */

.ve-review-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;

  min-width: 0;
}


/* ==========================================================
   12. REVIEWER IDENTITY
========================================================== */

.ve-review-person {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
}


/* ==========================================================
   13. CUSTOMER INITIALS / AVATAR
========================================================== */

.ve-review-avatar {
  display: grid;
  place-items: center;

  flex: 0 0 45px;

  width: 45px;
  height: 45px;

  color: var(--review-blue);
  background: #e9eff8;

  border: 1px solid #dce5f1;
  border-radius: 50%;

  font-family:
    "Plus Jakarta Sans", sans-serif;

  font-size: 12px;
  font-weight: 800;

  line-height: 1;

  text-align: center;

  overflow: hidden;
}


/* ==========================================================
   14. ALTERNATING AVATAR BACKGROUNDS

   Decorative colors only.

   These styles do not indicate a customer
   rating, status or verification.
========================================================== */

.ve-review-card:nth-child(3n + 2)
.ve-review-avatar {
  color: #326b58;

  background: #eaf3ef;

  border-color: #dce9e3;
}

.ve-review-card:nth-child(3n + 3)
.ve-review-avatar {
  color: #8b6537;

  background: #f7f0e6;

  border-color: #ebdfce;
}


/* ==========================================================
   15. REVIEWER NAME AND DETAILS
========================================================== */

.ve-review-person-info {
  min-width: 0;
}

.ve-review-person-info h3 {
  margin: 0 0 5px;

  color: var(--review-navy);

  font-family:
    "Plus Jakarta Sans", sans-serif;

  font-size: 14px;
  font-weight: 750;

  line-height: 1.45;

  overflow-wrap: break-word;
}

.ve-review-person-info p {
  margin: 0;

  color: var(--review-muted);

  font-size: 12px;

  line-height: 1.6;

  overflow-wrap: break-word;
}


/* ==========================================================
   16. DECORATIVE QUOTATION ICON
========================================================== */

.ve-review-quote-icon {
  display: block;

  flex: 0 0 22px;

  width: 22px;
  height: 22px;

  color: #c6d2e4;

  stroke-width: 1.65;
}


/* ==========================================================
   17. OPTIONAL CUSTOMER RATING

   Rating elements must only be included
   when a real customer supplied a rating.

   Do not display generated or assumed
   star ratings.
========================================================== */

.ve-review-rating {
  display: flex;
  align-items: center;

  gap: 8px;

  min-height: 22px;

  margin-top: 20px;
}

.ve-review-stars {
  display: inline-flex;
  align-items: center;

  color: #a66b19;

  font-size: 20px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 2px;
}

.ve-review-rating-label {
  color: var(--review-muted);

  font-size: 12px;
  font-weight: 600;

  line-height: 1.5;
}


/* ==========================================================
   18. CUSTOMER REVIEW TEXT
========================================================== */

.ve-review-text {
  flex: 1;

  margin: 19px 0 25px;
  padding: 0;

  color: var(--review-text);

  border: 0;

  font-family: "Inter", sans-serif;

  font-size: 14px;
  font-weight: 400;

  line-height: 1.85;

  overflow-wrap: break-word;
}


/* ==========================================================
   19. CARD BOTTOM AREA
========================================================== */

.ve-review-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: auto;
  padding-top: 16px;

  border-top:
    1px solid #edf1f5;
}


/* ==========================================================
   20. VERIFIED SERVICE LABEL
========================================================== */

.ve-review-service {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: var(--review-blue);

  font-size: 12px;
  font-weight: 650;

  line-height: 1.5;

  overflow-wrap: break-word;
}

.ve-review-service svg {
  display: block;

  flex: 0 0 15px;

  width: 15px;
  height: 15px;

  stroke-width: 1.8;
}


/* ==========================================================
   21. CAROUSEL NAVIGATION
========================================================== */

.ve-testimonials-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  width: 100%;

  margin-top: 18px;
}


/* ==========================================================
   22. PREVIOUS / NEXT BUTTONS
========================================================== */

.ve-testimonials-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  margin: 0;
  padding: 0;

  color: var(--review-navy);
  background: #ffffff;

  border: 1px solid #d6dfeb;
  border-radius: 50%;

  cursor: pointer;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.ve-testimonials-nav-btn svg {
  display: block;

  width: 18px;
  height: 18px;

  stroke-width: 1.8;
}

.ve-testimonials-nav-btn:hover:not(:disabled) {
  color: #ffffff;

  background: var(--review-navy);
  border-color: var(--review-navy);
}

.ve-testimonials-nav-btn:disabled {
  opacity: 0.4;

  cursor: not-allowed;
}


/* ==========================================================
   23. HIDE UNUSED NAVIGATION

   Future testimonials.js may hide controls
   if all reviews fit in the viewport.
========================================================== */

.ve-testimonials-navigation[hidden],
.ve-testimonials-nav-btn[hidden] {
  display: none !important;
}


/* ==========================================================
   24. KEYBOARD ACCESSIBILITY
========================================================== */

.ve-testimonials button:focus-visible,
.ve-testimonials a:focus-visible,
.ve-testimonials-track:focus-visible {
  outline:
    3px solid var(--review-blue);

  outline-offset: 3px;
}

.ve-testimonials-nav-btn:focus-visible {
  box-shadow:
    0 0 0 3px #ffffff;
}


/* ==========================================================
   25. LAPTOP
========================================================== */

@media (max-width: 1199.98px) {

  .ve-testimonials {
    padding: 64px 0 57px;
  }

  .ve-testimonials
  .ve-testimonials-container {
    padding-inline: 20px;
  }

  .ve-review-card {
    min-height: 310px;

    padding: 23px;
  }

  .ve-review-text {
    font-size: 14px;
  }

}


/* ==========================================================
   26. TABLET
========================================================== */

@media (max-width: 991.98px) {

  .ve-testimonials {
    --review-visible: 2;

    padding: 58px 0 53px;
  }

  .ve-testimonials-header {
    margin-bottom: 27px;
  }

  .ve-testimonials-header h2 {
    font-size: 38px;
  }

  .ve-review-card {
    min-height: 300px;

    padding: 22px;
  }

  .ve-review-person-info h3 {
    font-size: 14px;
  }

  .ve-review-text {
    font-size: 14px;
  }

}


/* ==========================================================
   27. MOBILE
========================================================== */

@media (max-width: 767.98px) {

  .ve-testimonials {
    --review-visible: 1;
    --review-gap: 14px;

    padding: 51px 0 47px;
  }

  .ve-testimonials
  .ve-testimonials-container {
    padding-inline: 16px;
  }

  /* Section heading */

  .ve-testimonials-header {
    margin-bottom: 24px;
  }

  .ve-testimonials-eyebrow {
    margin-bottom: 12px;

    font-size: 10px;

    letter-spacing: 1.3px;
  }

  .ve-testimonials-header h2 {
    margin-bottom: 13px;

    font-size:
      clamp(30px, 7.4vw, 39px);

    letter-spacing: -1px;
  }

  .ve-testimonials-header > p {
    font-size: 14px;

    line-height: 1.8;
  }

  /* Review card */

  .ve-review-card {
    min-height: 295px;

    padding: 22px 19px;
  }

  .ve-review-person-info h3 {
    font-size: 14px;
  }

  .ve-review-person-info p {
    font-size: 12px;
  }

  .ve-review-text {
    font-size: 14px;

    line-height: 1.8;
  }

  .ve-review-service {
    font-size: 12px;
  }

  /* Navigation */

  .ve-testimonials-navigation {
    gap: 10px;

    margin-top: 14px;
  }

  .ve-testimonials-nav-btn {
    flex-basis: 44px;

    width: 44px;
    height: 44px;
  }

}


/* ==========================================================
   28. SMALL MOBILE
========================================================== */

@media (max-width: 380px) {

  .ve-testimonials
  .ve-testimonials-container {
    padding-inline: 13px;
  }

  .ve-review-card {
    min-height: 310px;

    padding: 20px 16px;
  }

  .ve-review-person {
    gap: 9px;
  }

  .ve-review-avatar {
    flex-basis: 41px;

    width: 41px;
    height: 41px;
  }

  .ve-review-text {
    font-size: 14px;

    line-height: 1.75;
  }

}


/* ==========================================================
   29. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .ve-testimonials-track {
    scroll-behavior: auto;
  }

  .ve-review-card,
  .ve-testimonials-nav-btn {
    animation: none !important;
    transition: none !important;
  }

}


/* ==========================================================
   30. PRINT SUPPORT
========================================================== */

@media print {

  .ve-testimonials {
    padding: 30px 0;

    background: #ffffff;

    overflow: visible;
  }

  .ve-testimonials-track {
    display: block;

    overflow: visible;

    scroll-snap-type: none;
  }

  .ve-review-card {
    width: 100%;
    min-height: auto;

    margin-bottom: 15px;

    break-inside: avoid;

    box-shadow: none !important;
  }

  .ve-testimonials-navigation {
    display: none !important;
  }

}


/* ==========================================================
   END OF TESTIMONIALS STYLESHEET
========================================================== */