/* ==========================================================
   VIJAY ENTERPRISES
   SPECIALITIES / SERVICES NAVIGATION STRIP

   Website:
   https://vijayenterprises1986.in/

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

   Features:
   - Existing navy-blue service strip
   - Five-column desktop layout
   - Responsive tablet/mobile grid
   - Accessible service navigation links
   - Full-item clickable areas
   - Readable service labels
   - Existing entrance animations
   - Reduced-motion support
========================================================== */


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

.ve-specialities {
  --specialities-blue: #203f83;
  --specialities-gold: #e5c08b;
  --specialities-white: #ffffff;
  --specialities-muted: #dbe5f5;

  position: relative;

  width: 100%;
  padding: 28px 0;

  color: var(--specialities-white);
  background: var(--specialities-blue);

  overflow: clip;

  scroll-margin-top: 90px;
}

@supports not (overflow: clip) {
  .ve-specialities {
    overflow: hidden;
  }
}

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


/* ==========================================================
   02. CONTENT CONTAINER
========================================================== */

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

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


/* ==========================================================
   03. FIVE-COLUMN GRID
========================================================== */

.ve-specialities-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  align-items: stretch;

  gap: 0;

  width: 100%;
}


/* ==========================================================
   04. SERVICE ITEM
========================================================== */

.ve-speciality-item {
  position: relative;

  display: flex;
  align-items: center;

  gap: 12px;

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

  padding: 10px 16px;

  border-radius: 8px;

  opacity: 1;
  transform: translate3d(0, 0, 0);

  transition:
    background-color 200ms ease;
}


/* ==========================================================
   05. DIVIDER LINES
========================================================== */

.ve-speciality-item:not(:last-child)::after {
  content: "";

  position: absolute;

  right: 0;
  top: 13%;

  width: 1px;
  height: 74%;

  background: rgba(255, 255, 255, 0.22);

  pointer-events: none;
}


/* ==========================================================
   06. ICON CONTAINER
========================================================== */

.ve-speciality-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  color: var(--specialities-white);

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;

  pointer-events: none;

  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

.ve-speciality-icon svg {
  display: block;

  width: 19px;
  height: 19px;

  stroke-width: 1.8;
}


/* ==========================================================
   07. TEXT CONTENT
========================================================== */

.ve-speciality-content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;
}

.ve-speciality-content h3 {
  margin: 0 0 5px;

  color: #ffffff;

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

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

  line-height: 1.45;
  letter-spacing: -0.2px;
}

.ve-speciality-content p {
  margin: 0;

  color: var(--specialities-muted);

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

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

  line-height: 1.5;

  overflow-wrap: break-word;
}


/* ==========================================================
   08. SERVICE NAVIGATION LINKS
========================================================== */

.ve-speciality-link {
  display: inline;

  color: inherit;

  font: inherit;

  line-height: inherit;

  text-decoration: none;

  text-underline-offset: 3px;

  cursor: pointer;

  /*
    The link pseudo-element covers the whole
    speciality item, so the entire card is
    clickable without changing the HTML.
  */
}

.ve-speciality-link::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  border-radius: 8px;
}

.ve-speciality-link:hover,
.ve-speciality-link:focus-visible {
  color: #ffffff;

  text-decoration: none;
}


/* ==========================================================
   09. HOVER STATES
========================================================== */

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

  .ve-speciality-item:hover {
    background:
      rgba(255, 255, 255, 0.07);
  }

  .ve-speciality-item:hover
  .ve-speciality-icon {
    transform: translateY(-2px);

    background:
      rgba(255, 255, 255, 0.16);

    border-color:
      rgba(229, 192, 139, 0.65);
  }

  .ve-speciality-item:hover
  .ve-speciality-content h3 {
    color: #ffffff;
  }

}


/* ==========================================================
   10. KEYBOARD FOCUS
========================================================== */

.ve-speciality-item:focus-within {
  background:
    rgba(255, 255, 255, 0.1);
}

.ve-speciality-link:focus-visible {
  outline: none;
}

.ve-speciality-link:focus-visible::after {
  outline:
    3px solid var(--specialities-gold);

  outline-offset: -3px;
}

.ve-speciality-item:focus-within
.ve-speciality-icon {
  border-color: var(--specialities-gold);

  background:
    rgba(255, 255, 255, 0.16);
}


/* ==========================================================
   11. SCROLL ENTRANCE ANIMATION

   Animation is enabled only when
   js/specialities.js adds the ready class.

   Without JS, content remains visible.
========================================================== */

@media (prefers-reduced-motion: no-preference) {

  .ve-specialities.ve-specialities-ready
  .ve-speciality-item {
    opacity: 0;

    transition:
      opacity 650ms cubic-bezier(
        0.22, 1, 0.36, 1
      ),
      transform 650ms cubic-bezier(
        0.22, 1, 0.36, 1
      ),
      background-color 200ms ease;

    transition-delay:
      var(--ve-speciality-delay, 0ms);

    will-change: opacity, transform;
  }

  .ve-specialities.ve-specialities-ready
  .ve-speciality-item[data-ve-reveal="left"] {
    transform:
      translate3d(-28px, 0, 0);
  }

  .ve-specialities.ve-specialities-ready
  .ve-speciality-item[data-ve-reveal="right"] {
    transform:
      translate3d(28px, 0, 0);
  }

  .ve-specialities.ve-specialities-ready
  .ve-speciality-item.is-visible {
    opacity: 1;

    transform:
      translate3d(0, 0, 0);
  }

  .ve-specialities.ve-specialities-complete
  .ve-speciality-item {
    will-change: auto;
  }

}


/* ==========================================================
   12. LAPTOP
   BELOW 1200px
========================================================== */

@media (max-width: 1199.98px) {

  .ve-specialities {
    padding: 24px 0;
  }

  .ve-specialities-container {
    padding-inline: 18px;
  }

  .ve-speciality-item {
    gap: 9px;

    min-height: 70px;

    padding: 9px 11px;
  }

  .ve-speciality-icon {
    flex-basis: 37px;

    width: 37px;
    height: 37px;
  }

  .ve-speciality-icon svg {
    width: 18px;
    height: 18px;
  }

  .ve-speciality-content h3 {
    font-size: 12.5px;
  }

  .ve-speciality-content p {
    font-size: 10px;
  }

}


/* ==========================================================
   13. TABLET
   BELOW 992px
========================================================== */

@media (max-width: 991.98px) {

  .ve-specialities {
    padding: 23px 0;
  }

  .ve-specialities-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    row-gap: 14px;
  }

  .ve-speciality-item {
    min-height: 72px;

    padding: 9px 13px;
  }

  .ve-speciality-item:nth-child(3)::after {
    display: none;
  }

  .ve-speciality-content h3 {
    font-size: 14px;
  }

  .ve-speciality-content p {
    font-size: 11px;
  }

}


/* ==========================================================
   14. MOBILE
   BELOW 768px
========================================================== */

@media (max-width: 767.98px) {

  .ve-specialities {
    padding: 21px 0;
  }

  .ve-specialities-container {
    padding-inline: 15px;
  }

  .ve-specialities-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 12px 0;
  }

  .ve-speciality-item {
    gap: 10px;

    min-height: 74px;

    padding: 10px 9px;
  }

  .ve-speciality-item:nth-child(2n)::after {
    display: none;
  }

  .ve-speciality-item:nth-child(3)::after {
    display: block;
  }

  .ve-speciality-icon {
    flex-basis: 37px;

    width: 37px;
    height: 37px;

    border-radius: 8px;
  }

  .ve-speciality-icon svg {
    width: 18px;
    height: 18px;
  }

  .ve-speciality-content h3 {
    margin-bottom: 4px;

    font-size: 13px;

    line-height: 1.4;
  }

  .ve-speciality-content p {
    font-size: 10.5px;

    line-height: 1.45;
  }

}


/* ==========================================================
   15. SMALL MOBILE
   BELOW 400px
========================================================== */

@media (max-width: 400px) {

  .ve-specialities-container {
    padding-inline: 10px;
  }

  .ve-speciality-item {
    gap: 8px;

    min-height: 76px;

    padding: 9px 7px;
  }

  .ve-speciality-icon {
    flex-basis: 34px;

    width: 34px;
    height: 34px;
  }

  .ve-speciality-icon svg {
    width: 17px;
    height: 17px;
  }

  .ve-speciality-content h3 {
    font-size: 12px;

    letter-spacing: -0.2px;
  }

  .ve-speciality-content p {
    font-size: 10px;
  }

}


/* ==========================================================
   16. MOBILE ENTRANCE ANIMATION
========================================================== */

@media
  (max-width: 767.98px) and
  (prefers-reduced-motion: no-preference) {

  .ve-specialities.ve-specialities-ready
  .ve-speciality-item[data-ve-reveal="left"] {
    transform:
      translate3d(-16px, 0, 0);
  }

  .ve-specialities.ve-specialities-ready
  .ve-speciality-item[data-ve-reveal="right"] {
    transform:
      translate3d(16px, 0, 0);
  }

  .ve-specialities.ve-specialities-ready
  .ve-speciality-item.is-visible {
    transform:
      translate3d(0, 0, 0);
  }

}


/* ==========================================================
   17. REDUCED MOTION
========================================================== */

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

  .ve-speciality-item,
  .ve-speciality-icon,
  .ve-speciality-link {
    opacity: 1 !important;

    transform: none !important;

    animation: none !important;
    transition: none !important;
  }

}


/* ==========================================================
   END OF SPECIALITIES STYLESHEET
========================================================== */