/* Services Hub — Department Directory */



.vina-sh-dir {

    --vina-sh-dir-navy: #213555;

    --vina-sh-dir-cream: #f5efe7;

    --vina-sh-dir-sand: #efe1d1;

    --vina-sh-dir-accent: #a78295;

    --vina-sh-dir-ease: cubic-bezier(0.22, 1, 0.36, 1);

    width: 100%;

}



.vina-sh-dir__inner {

    max-width: 1280px;

    margin: 0 auto;

    padding: clamp(64px, 8vw, 96px) clamp(20px, 4vw, 96px);

}



.vina-sh-dir__header {

    margin-bottom: clamp(40px, 5vw, 64px);

}



.vina-sh-dir__title {

    margin: 0 0 8px;

    font-weight: 700;

    color: var(--vina-sh-dir-navy);

}



.vina-sh-dir__subtitle {

    margin: 0;

    color: rgba(33, 53, 85, 0.7);

}



.vina-sh-dir__slider-wrap {

    position: relative;

}



/* Desktop: CSS grid */

.vina-sh-dir.is-desktop-grid .vina-sh-dir__swiper {

    overflow: visible;

}



.vina-sh-dir.is-desktop-grid .swiper-wrapper {

    display: grid !important;

    grid-template-columns: repeat(3, 1fr);

    gap: clamp(20px, 2.5vw, 32px);

    transform: none !important;

    width: 100% !important;

    align-items: start;

}



.vina-sh-dir.is-desktop-grid .vina-sh-dir__slide {

    width: 100% !important;

    margin: 0 !important;

    height: auto;

}



.vina-sh-dir.is-desktop-grid .vina-sh-dir__pagination {

    display: none;

}



@media (max-width: 1024px) {

    .vina-sh-dir.is-desktop-grid .swiper-wrapper {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 767px) {

    .vina-sh-dir.is-desktop-grid .swiper-wrapper {

        grid-template-columns: 1fr;

    }

}



/* Mobile: native horizontal scroll (no Swiper — stable accordion) */

.vina-sh-dir.is-mobile-scroll {

    overflow-x: clip;

}



.vina-sh-dir.is-mobile-scroll .vina-sh-dir__slider-wrap {

    position: relative;

}



.vina-sh-dir.is-mobile-scroll .vina-sh-dir__swiper {

    overflow-x: auto;

    overflow-y: visible;

    scroll-snap-type: x mandatory;

    scroll-padding-inline: 0;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    overscroll-behavior-x: contain;

    padding-bottom: 4px;

    container-type: inline-size;

}



.vina-sh-dir.is-mobile-scroll .vina-sh-dir__swiper::-webkit-scrollbar {

    display: none;

}



.vina-sh-dir.is-mobile-scroll .swiper-wrapper {

    display: flex !important;

    flex-wrap: nowrap;

    gap: 0;

    width: max-content !important;

    transform: none !important;

    align-items: flex-start;

    padding-inline: 0;

    box-sizing: border-box;

}



.vina-sh-dir.is-mobile-scroll .vina-sh-dir__slide {

    flex: 0 0 100cqw;

    width: 100cqw;

    max-width: 100cqw;

    margin: 0 !important;

    scroll-snap-align: start;

    scroll-snap-stop: always;

    height: auto;

    box-sizing: border-box;

}



.vina-sh-dir__slide.is-filtered-out {

    display: none !important;

}



.vina-sh-dir__card {

    display: flex;

    flex-direction: column;

    width: 100%;

    height: auto;

    align-self: flex-start;

    background: #fff;

    border-radius: 2rem;

    overflow: hidden;

    border: 1px solid rgba(239, 225, 209, 0.8);

    box-shadow: 0 4px 24px rgba(33, 53, 85, 0.04);

}



.vina-sh-dir__media {

    position: relative;

    flex-shrink: 0;

    height: 220px;

    overflow: hidden;

    border-radius: 2rem 2rem 0 0;

}



.vina-sh-dir__media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.vina-sh-dir__body {

    display: flex;

    flex-direction: column;

    flex: 1 1 auto;

    padding: clamp(24px, 3vw, 32px);

    min-height: 0;

}



.vina-sh-dir__card-title {

    margin: 0 0 12px;

    font-weight: 700;

    color: var(--vina-sh-dir-navy);

}



.vina-sh-dir__card-desc {

    margin: 0 0 20px;

    line-height: 1.75;

    color: rgba(33, 53, 85, 0.7);

    text-align: justify;

}



.vina-sh-dir__accordion {

    margin-top: auto;

}



.vina-sh-dir__toggle {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 14px 16px;

    border: 1px solid var(--vina-sh-dir-sand);

    border-radius: 14px;

    background: var(--vina-sh-dir-cream);

    color: var(--vina-sh-dir-navy);

    font-weight: 700;

    font-size: 0.85rem;

    cursor: pointer;

    outline: none;

    box-shadow: none;

    -webkit-tap-highlight-color: transparent;

}



.vina-sh-dir__toggle:hover,

.vina-sh-dir__toggle:focus,

.vina-sh-dir__toggle:focus-visible,

.vina-sh-dir__toggle:active {

    color: var(--vina-sh-dir-navy);

    border-color: var(--vina-sh-dir-sand);

    background: var(--vina-sh-dir-cream);

    outline: none;

    box-shadow: none;

}



.vina-sh-dir__toggle-icon {

    width: 20px;

    height: 20px;

    position: relative;

    flex-shrink: 0;

}



.vina-sh-dir__toggle-icon::before,

.vina-sh-dir__toggle-icon::after {

    content: '';

    position: absolute;

    background: var(--vina-sh-dir-accent);

    border-radius: 2px;

    transition: transform 0.35s var(--vina-sh-dir-ease);

}



.vina-sh-dir__toggle-icon::before {

    width: 12px;

    height: 2px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.vina-sh-dir__toggle-icon::after {

    width: 2px;

    height: 12px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.vina-sh-dir__toggle[aria-expanded="true"] .vina-sh-dir__toggle-icon::after {

    transform: translate(-50%, -50%) scaleY(0);

}



.vina-sh-dir__panel {

    margin-top: 10px;

    background: var(--vina-sh-dir-cream);

    border: 1px solid var(--vina-sh-dir-sand);

    border-radius: 14px;

    overflow: hidden;

}



.vina-sh-dir__panel[hidden] {

    display: none;

}



.vina-sh-dir__panel:not([hidden]) {

    animation: vinaShDirSweep 0.35s var(--vina-sh-dir-ease);

}



@keyframes vinaShDirSweep {

    from { opacity: 0; transform: translateY(-6px); }

    to { opacity: 1; transform: translateY(0); }

}



.vina-sh-dir__services {

    list-style: none;

    margin: 0;

    padding: 12px 16px 16px;

}



.vina-sh-dir__services li {

    margin-bottom: 8px;

}



.vina-sh-dir__services li:last-child {

    margin-bottom: 0;

}



.vina-sh-dir__service-link {

    display: block;

    font-weight: 600;

    color: rgba(33, 53, 85, 0.8);

    text-decoration: none;

    padding: 4px 0;

}



.vina-sh-dir__service-link::before {

    content: '• ';

    color: var(--vina-sh-dir-accent);

}



a.vina-sh-dir__service-link:hover,

a.vina-sh-dir__service-link:focus,

a.vina-sh-dir__service-link:focus-visible,

a.vina-sh-dir__service-link:active {

    color: rgba(33, 53, 85, 0.8);

    outline: none;

    box-shadow: none;

}



.vina-sh-dir__pagination {

    position: static !important;

    margin-top: 20px;

    text-align: center;

}



.vina-sh-dir__pagination .swiper-pagination-bullet {

    width: 8px;

    height: 8px;

    background: var(--vina-sh-dir-sand);

    opacity: 1;

    cursor: pointer;

    display: inline-block;

}



.vina-sh-dir__pagination .swiper-pagination-bullet-active {

    background: var(--vina-sh-dir-accent);

    width: 24px;

    border-radius: 999px;

}



.vina-sh-dir__no-results {

    text-align: center;

    margin-top: 32px;

    color: rgba(33, 53, 85, 0.6);

}



.vina-sh-dir--animate .vina-sh-dir__reveal {

    opacity: 0;

    transform: translateY(32px);

    transition: opacity 0.65s var(--vina-sh-dir-ease), transform 0.65s var(--vina-sh-dir-ease);

}



.vina-sh-dir--animate.is-visible .vina-sh-dir__reveal {

    opacity: 1;

    transform: translateY(0);

}



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

    .vina-sh-dir--animate .vina-sh-dir__reveal {

        opacity: 1;

        transform: none;

        transition: none;

    }



    .vina-sh-dir__panel:not([hidden]) {

        animation: none;

    }

}