/* ==========================================================================
   ACCOLADES BLOCK
   Section heading + groups, each with a label and a 3-column image grid.
   Cards = bare images only — no background, no padding, no shadow.
   ========================================================================== */

.accolades-block {
  --ab-title-color: var(--hng-orange, #f58220);
  --ab-subhead-color: var(--hng-muted, rgba(255, 255, 255, 0.72));
  --ab-group-color: var(--hng-white, #ffffff);
  --ab-pad: var(--hng-section-pad, clamp(2rem, 6vw, 6rem));
  --ab-grid-gap: 3%;

  width: 100%;
  box-sizing: border-box;
  margin-bottom: 60px;
}

/* ── Inner container ──────────────────────────────────────────── */
.accolades-block__inner {
  /* max-width: 1400px;
  margin: 0 auto; */
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

/* Outer-box variant */

.accolades-block__content {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
  overflow-y: scroll;
  height: 500px;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
.accolades-block__content::-webkit-scrollbar {
  width: 4px;
}

.accolades-block__content::-webkit-scrollbar-track {
  background: transparent;
}

.accolades-block__content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

.accolades-block__content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45);
}

/* ── Section heading ──────────────────────────────────────────── */
.accolades-block__heading {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.accolades-block__title {
  margin: 0;
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 600 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-h2-size, clamp(2.25rem, 4.5vw, 3.625rem));
  line-height: 1.1;
  color: var(--ab-title-color);
}

.accolades-block__subheader {
  margin: 0;
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 400 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-body-size, clamp(1rem, 1.5vw, 1.25rem));
  line-height: 1.65;
  color: var(--hng-white, #ffffff);
}

/* ── Award group ──────────────────────────────────────────────── */
.accolades-block__group {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
}

.accolades-block__group + .accolades-block__group {
  margin-top: 5%;
  margin-bottom: 10rem;
}

.accolades-block__group-title {
  margin: 0;
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 600 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-h2-size, clamp(2.25rem, 4.5vw, 3.625rem));
  line-height: 1.1;
  color: var(--ab-title-color);
}

.accolades-block__group-company_name {
  margin: 0;
  font-family: "ITCAvantGarde", sans-serif;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-h3-size, clamp(1.75rem, 3.5vw, 2.75rem));
  font-weight: 500;
  color: var(--ab-group-color);
  letter-spacing: 0.01em;
}

/* ── Award sub-group ──────────────────────────────────────────── */
.accolades-block__subgroup {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
}

.accolades-block__subgroup + .accolades-block__subgroup {
  margin-top: 4rem;
}

.accolades-block__subgroup-title {
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 400 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-body-size, clamp(1rem, 1.5vw, 1.25rem));
  color: var(--hng-white, #ffffff);
  line-height: 1.7;
  margin: 0;
}

/* ── Card grid ────────────────────────────────────────────────── */
.accolades-block__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ab-grid-gap);
}

/* ── Card = just the image, no decoration ────────────────────── */
.accolades-block__card {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.accolades-block__card img {
  width: 95%;
  height: auto;
  display: block;
}

.accolades-block__group {
  margin-right: 22px;
}

@media (min-width: 1300px){
  .accolades-block{
    height: 50rem;
  }
  
  .accolades-block__inner{
    height: 100%;
  }
  
  .accolades-block__content{
    height: 600px;
  }
}

/* ── Tablet: 2-col ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .accolades-block__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .accolades-block__group {
    margin-right: 0;
  }
}

/* ── Mobile: 1-col ────────────────────────────────────────────── */
@media (max-width: 540px) {
  /* .accolades-block {
    padding: 1.25rem;
  } */

  .accolades-block__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BLUR REVEAL — scroll-triggered enter / exit
   Watches .accolades-block__content as the scroll root.
   Elements animate in when they enter and out when they leave.
   ========================================================================== */

/* Hidden state */
.accolades-block__group-title,
.accolades-block__group-company_name,
.accolades-block__subgroup-title,
.accolades-block__card {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  transition:
    opacity   0.5s ease,
    filter    0.5s ease,
    transform 0.5s ease;
  will-change: opacity, filter, transform;
}

/* Visible — enters from below */
.accolades-block__group-title.ab--visible,
.accolades-block__group-company_name.ab--visible,
.accolades-block__subgroup-title.ab--visible,
.accolades-block__card.ab--visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* Exit — drifts upward out of view */
.accolades-block__group-title.ab--exit,
.accolades-block__group-company_name.ab--exit,
.accolades-block__subgroup-title.ab--exit,
.accolades-block__card.ab--exit {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-10px);
}

/* Stagger cards within each grid */
.accolades-block__card:nth-child(1) { transition-delay: 0s;    }
.accolades-block__card:nth-child(2) { transition-delay: 0.08s; }
.accolades-block__card:nth-child(3) { transition-delay: 0.16s; }
.accolades-block__card:nth-child(4) { transition-delay: 0.24s; }
.accolades-block__card:nth-child(5) { transition-delay: 0.32s; }
.accolades-block__card:nth-child(6) { transition-delay: 0.40s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .accolades-block__group-title,
  .accolades-block__group-company_name,
  .accolades-block__subgroup-title,
  .accolades-block__card {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* ── Scroll fade mask ─────────────────────────────────────────── */
.accolades-block__content {
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 80%,
    transparent 100%
  );
}

.accolades-block__content:last-child {
  padding-bottom: 5rem;
}

@media only screen and (min-width: 1999px) {
  .accolades-block__grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 1%;
  }
}