/* ==========================================================================
   Section 3: Recognitions ribbon
   Layout: recognitions
   Figma node: 493:1966
   Reference: pages/homepage-v4/figma/screenshots/03-recognitions.png
   ========================================================================== */

.recognitions {
    background-color: var(--color-white);
    color: var(--color-text-dark);
    padding: 18px 24px 18px 57px;
    border-top: 1px solid var(--color-text-dark);
    border-bottom: 1px solid var(--color-text-dark);
    width: 100%;
    min-height: 92px;
    overflow: hidden;
}

.recognitions-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    min-height: 56px;
    max-width: 100%;
}

.recognitions-heading {
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 400;
    line-height: 55px;
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.recognitions-divider {
    width: 1px;
    height: 29px;
    background: var(--color-black);
    flex-shrink: 0;
}

.recognitions-list {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}

/* Slick marquee track — becomes active once Slick initializes at >=768px */
.recognitions-marquee.slick-slider .slick-track {
    display: flex;
    align-items: center;
}
.recognitions-marquee.slick-slider .slick-list {
    overflow: hidden;
}

.recognitions-item {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    line-height: 27.2px;
    margin-right: clamp(16px, 1.7vw, 40px);
    min-width: 258px !important;
    justify-content: center;
}
@media (max-width: 1600px) {
    .recognitions-item { margin-right: clamp(12px, 1.4vw, 24px); }
}

.recognitions-item-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.recognitions-item-link:hover { opacity: 0.8; }

.recognitions-label {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 27.2px;
    letter-spacing: -0.32px;
    color: var(--color-text-dark);
    white-space: nowrap;
}

.recognitions-bullet {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--color-brand-blue);
    border-radius: 50%;
    flex-shrink: 0;
}

.recognitions-sub-label {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 27.2px;
    letter-spacing: -0.32px;
    color: var(--color-brand-blue);
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 1440px) {
    .recognitions { padding: 18px 24px 18px 40px; }
    .recognitions-inner { gap: 30px; }
}

@media (max-width: 1200px) {
    .recognitions { padding: 20px 24px; }
    .recognitions-inner { gap: 24px; flex-wrap: wrap; }
    .recognitions-list { gap: 24px 40px; }
}

@media (max-width: 991px) {
    .recognitions-heading { font-size: 30px; line-height: 40px; }
    .recognitions-divider { display: none; }
}

@media (max-width: 767px) {
    .recognitions { padding: 20px 16px; }
    .recognitions-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .recognitions-list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
    .recognitions-item { white-space: normal; margin-right: 0; }
    .recognitions-label, .recognitions-sub-label { white-space: normal; }
}