
.ajf-route-cats,
.ajf-route-cats * { box-sizing: border-box; }

.ajf-route-cats {
    --ajf-cols-desktop: 5;
    --ajf-cols-tablet: 2;
    --ajf-cols-mobile: 1;
    --ajf-hover-y: -10px;
    --ajf-route-bg-decor-color: rgba(214, 167, 75, 0.16);
    --ajf-route-bg-dots-color: rgba(214, 167, 75, 0.28);
    --ajf-route-bg-decor-scale: 1;
    position: relative;
    overflow: hidden;
    padding: 78px 0 96px;
    background:
        radial-gradient(circle at 50% 0%, rgba(214, 167, 75, 0.045), transparent 38%),
        linear-gradient(180deg, #ffffff 0%, #FCFBF8 100%);
}

.ajf-route-cats__container {
    position: relative;
    z-index: 3;
    max-width: 1510px;
    margin: 0 auto;
    padding: 0 42px;
}

.ajf-route-cats__bg-decor,
.ajf-route-cats__bg-dots {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.ajf-route-cats__bg-decor {
    border-radius: 999px;
    border: 1px solid var(--ajf-route-bg-decor-color);
    transform: scale(var(--ajf-route-bg-decor-scale));
    transform-origin: center;
}

.ajf-route-cats__bg-decor--left-top {
    left: -135px;
    top: 122px;
    width: 255px;
    height: 255px;
    box-shadow:
        0 0 0 16px rgba(214,167,75,.045),
        0 0 0 34px rgba(214,167,75,.025),
        0 0 0 52px rgba(214,167,75,.012);
}

.ajf-route-cats__bg-decor--left-bottom {
    left: -164px;
    bottom: -92px;
    width: 255px;
    height: 255px;
    box-shadow:
        0 0 0 16px rgba(214,167,75,.04),
        0 0 0 34px rgba(214,167,75,.022);
}

.ajf-route-cats__bg-decor--right-top {
    right: -118px;
    top: -78px;
    width: 315px;
    height: 315px;
    box-shadow:
        0 0 0 16px rgba(214,167,75,.04),
        0 0 0 34px rgba(214,167,75,.022),
        0 0 0 54px rgba(214,167,75,.012);
}

.ajf-route-cats__bg-decor--right-bottom {
    right: -146px;
    bottom: 84px;
    width: 245px;
    height: 245px;
    box-shadow:
        0 0 0 16px rgba(214,167,75,.04),
        0 0 0 34px rgba(214,167,75,.02);
}

.ajf-route-cats__bg-dots {
    width: 150px;
    height: 92px;
    background-image: radial-gradient(var(--ajf-route-bg-dots-color) 1.35px, transparent 1.35px);
    background-size: 14px 14px;
    opacity: .54;
}

.ajf-route-cats__bg-dots--top-left {
    left: 34px;
    top: 26px;
}

.ajf-route-cats__bg-dots--top-right {
    right: 94px;
    top: 42px;
}

.ajf-route-cats--hide-bg-decors .ajf-route-cats__bg-decor,
.ajf-route-cats--hide-bg-decors .ajf-route-cats__bg-dots {
    display: none;
}

.ajf-route-cats__header {
    text-align: center;
    margin-bottom: 54px;
}

.ajf-route-cats__decor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-bottom: 26px;
}

.ajf-route-cats__decor-line {
    display: inline-block;
    width: 42px;
    height: 2px;
    background: #D6A74B;
}

.ajf-route-cats__decor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #D6A74B;
    font-size: 30px;
    line-height: 1;
}

.ajf-route-cats__decor-icon svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.ajf-route-cats__title {
    margin: 0;
    color: #061126;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 54px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: .01em;
}

.ajf-route-cats__title .ajf-highlight {
    color: #B88924;
}

.ajf-route-cats__subtitle {
    margin: 18px auto 0;
    color: #49566E;
    font-family: Inter, Manrope, Arial, sans-serif;
    font-size: 21px;
    line-height: 1.5;
    letter-spacing: .045em;
    max-width: 840px;
}

.ajf-route-cats__grid {
    display: grid;
    grid-template-columns: repeat(var(--ajf-cols-desktop), minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.ajf-route-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 560px;
    padding: 34px 28px 28px;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(218, 207, 194, 0.62);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(6,17,38,.052);
    overflow: hidden;
    outline: none;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    isolation: isolate;
}

.ajf-route-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--route-color) 8%, transparent), transparent 42%);
    opacity: .0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: -1;
}

.ajf-route-card:hover,
.ajf-route-card:focus-within,
.ajf-route-card:focus-visible {
    transform: translateY(var(--ajf-hover-y));
    box-shadow: 0 24px 58px rgba(6,17,38,.09);
    border-color: color-mix(in srgb, var(--route-color) 30%, rgba(6,17,38,.12));
}

.ajf-route-card:hover::before,
.ajf-route-card:focus-within::before,
.ajf-route-card:focus-visible::before {
    opacity: 1;
}

.ajf-route-card__icon {
    width: 92px;
    height: 92px;
    margin-bottom: 26px;
    border-radius: 999px;
    background: var(--route-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 34px color-mix(in srgb, var(--route-color) 22%, transparent);
    position: relative;
}

.ajf-route-card__icon::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    background: color-mix(in srgb, var(--route-color) 10%, transparent);
    z-index: -1;
}

.ajf-route-card__icon-inner {
    color: #ffffff;
    font-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ajf-route-card__icon-inner svg {
    width: 44px;
    height: 44px;
    fill: currentColor;
}

.ajf-route-card__title {
    margin: 0 0 22px;
    color: #061126;
    font-family: Inter, Manrope, Arial, sans-serif;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.02em;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-wrap: balance;
}

.ajf-route-card__desc {
    color: #4B566B;
    font-family: Inter, Manrope, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    min-height: 96px;
    max-width: 230px;
    margin: 0 auto;
    text-wrap: pretty;
}

.ajf-route-card__sep {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(6,17,38,.11);
    margin: 28px 0 22px;
}

.ajf-route-card__sep--bottom {
    margin: 24px 0 0;
}

.ajf-route-card__meta {
    width: 100%;
    display: grid;
    gap: 16px;
    color: #24304A;
    font-family: Inter, Manrope, Arial, sans-serif;
}

.ajf-route-card__meta-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
    padding-left: 18px;
}

.ajf-route-card__meta-row span:last-child {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 500;
}

.ajf-route-card__meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    color: #C58C2A;
    font-size: 27px;
    line-height: 1;
    font-family: Georgia, serif;
}

.ajf-route-card__meta-icon--users {
    font-size: 30px;
    transform: translateY(1px);
}

.ajf-route-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 24px;
    color: var(--route-color);
    text-decoration: none;
    font-family: Inter, Manrope, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    transition: transform .25s ease, opacity .25s ease;
}

.ajf-route-card__button:hover,
.ajf-route-card__button:focus {
    color: var(--route-color);
    transform: translateX(4px);
}

.ajf-route-card__button-arrow {
    font-size: 25px;
    line-height: 1;
}

.ajf-route-cats__notice {
    padding: 22px 26px;
    border: 1px solid rgba(6,17,38,.12);
    border-radius: 14px;
    color: #061126;
    background: #fff;
    font-family: Inter, Manrope, Arial, sans-serif;
    text-align: center;
}

.ajf-route-cats--float .ajf-route-card__icon {
    animation: ajfRouteIconFloat 6.5s ease-in-out infinite;
}

.ajf-route-cats--float .ajf-route-card:nth-child(2) .ajf-route-card__icon { animation-delay: .55s; }
.ajf-route-cats--float .ajf-route-card:nth-child(3) .ajf-route-card__icon { animation-delay: 1.1s; }
.ajf-route-cats--float .ajf-route-card:nth-child(4) .ajf-route-card__icon { animation-delay: 1.65s; }
.ajf-route-cats--float .ajf-route-card:nth-child(5) .ajf-route-card__icon { animation-delay: 2.2s; }

.ajf-route-cats--shine .ajf-route-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.34) 42%, rgba(214,167,75,.18) 50%, transparent 70%);
    transform: translateX(-140%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.ajf-route-cats--shine .ajf-route-card:hover::after,
.ajf-route-cats--shine .ajf-route-card:focus-within::after {
    animation: ajfRouteShine 1.15s ease forwards;
}

.ajf-route-cats--reveal .ajf-route-card {
    opacity: 0;
    transform: translateY(36px);
}

.ajf-route-cats--reveal.ajf-in-view .ajf-route-card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .72s ease, transform .72s ease, box-shadow .35s ease, border-color .35s ease;
}

.ajf-route-cats--reveal.ajf-in-view .ajf-route-card:nth-child(2) { transition-delay: .07s; }
.ajf-route-cats--reveal.ajf-in-view .ajf-route-card:nth-child(3) { transition-delay: .14s; }
.ajf-route-cats--reveal.ajf-in-view .ajf-route-card:nth-child(4) { transition-delay: .21s; }
.ajf-route-cats--reveal.ajf-in-view .ajf-route-card:nth-child(5) { transition-delay: .28s; }
.ajf-route-cats--reveal.ajf-in-view .ajf-route-card:nth-child(6) { transition-delay: .35s; }

@keyframes ajfRouteIconFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-7px) scale(1.015); }
}

@keyframes ajfRouteShine {
    0% { transform: translateX(-140%); opacity: 0; }
    35% { opacity: .85; }
    100% { transform: translateX(140%); opacity: 0; }
}

@media (max-width: 1024px) {
    .ajf-route-cats__grid { grid-template-columns: repeat(var(--ajf-cols-tablet), minmax(0,1fr)); }
    .ajf-route-card__title { min-height: auto; }
    .ajf-route-card__desc { min-height: 72px; max-width: 320px; }
}

@media (max-width: 767px) {
    .ajf-route-cats {
        padding: 54px 0 70px;
    }
    .ajf-route-cats__container {
        padding: 0 20px;
    }
    .ajf-route-cats__title {
        font-size: 36px;
    }
    .ajf-route-cats__subtitle {
        font-size: 17px;
        letter-spacing: .01em;
    }
    .ajf-route-cats__grid {
        grid-template-columns: repeat(var(--ajf-cols-mobile), minmax(0, 1fr));
        gap: 18px;
    }
    .ajf-route-card {
        min-height: 0;
        padding: 30px 22px 26px;
    }
    .ajf-route-card__icon {
        width: 82px;
        height: 82px;
    }
    .ajf-route-card__icon-inner,
    .ajf-route-card__icon-inner svg {
        font-size: 38px;
        width: 38px;
        height: 38px;
    }
    .ajf-route-card__desc {
        min-height: 0;
    }
    .ajf-route-card__meta-row {
        justify-content: center;
        padding-left: 0;
    }
    .ajf-route-cats__bg-decor--left-top,
    .ajf-route-cats__bg-decor--left-bottom,
    .ajf-route-cats__bg-decor--right-top,
    .ajf-route-cats__bg-decor--right-bottom {
        transform: scale(calc(var(--ajf-route-bg-decor-scale) * .72));
        opacity: .7;
    }
    .ajf-route-cats__bg-dots--top-right {
        right: -24px;
        top: 24px;
    }
    .ajf-route-cats__bg-dots--top-left {
        left: -34px;
        top: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ajf-route-card,
    .ajf-route-card__icon,
    .ajf-route-card::after,
    .ajf-route-cats--reveal .ajf-route-card,
    .ajf-route-cats--reveal.ajf-in-view .ajf-route-card {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}
