/* Logo Wall Template Styles */

.sbt-logo-wall {
    @apply py-16 xl:py-24;
}

.sbt-logo-wall__container {
    @apply max-w-container mx-auto px-6 xl:px-[100px];
}

.sbt-logo-wall--bg-container .sbt-logo-wall__container {
    @apply py-12 xl:py-16 px-8 xl:px-16;
}

.sbt-logo-wall__title {
    @apply text-[40px] xl:text-[56px] leading-tight mb-4 text-center;
    color: inherit;
}

.sbt-logo-wall__subtitle {
    @apply text-[18px] xl:text-[20px] leading-relaxed mb-12 text-center;
    color: inherit;
    opacity: 0.8;
}

.sbt-logo-wall__grid {
    @apply grid grid-cols-2 gap-8 xl:gap-12 items-center justify-items-center;
}

.sbt-logo-wall--cols-3 .sbt-logo-wall__grid {
    @apply md:grid-cols-3;
}

.sbt-logo-wall--cols-4 .sbt-logo-wall__grid {
    @apply md:grid-cols-4;
}

.sbt-logo-wall--cols-5 .sbt-logo-wall__grid {
    @apply md:grid-cols-5;
}

.sbt-logo-wall--cols-6 .sbt-logo-wall__grid {
    @apply md:grid-cols-6;
}

.sbt-logo-wall__item {
    @apply flex items-center justify-center p-4 transition-all duration-300;
}

.sbt-logo-wall__logo {
    @apply w-auto object-contain;
    max-width: 100%;
}

/* Grayscale mode */
.sbt-logo-wall--grayscale .sbt-logo-wall__logo {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.sbt-logo-wall--grayscale .sbt-logo-wall__item:hover .sbt-logo-wall__logo {
    filter: grayscale(0%);
    opacity: 1;
}

/* Font variants */
.sbt-logo-wall--font-sans {
    @apply font-sans;
}

.sbt-logo-wall--font-mono {
    @apply font-mono;
}

/* ==========================================================================
   Navigable mode (carousel: one row per page, prev/next arrows)
   ========================================================================== */

.sbt-logo-wall--navigable .sbt-logo-wall__viewport {
    @apply overflow-hidden;
    position: relative;
}

.sbt-logo-wall--navigable .sbt-logo-wall__track {
    @apply flex items-center gap-8 xl:gap-12;
    transition: transform .35s ease;
    will-change: transform;
}

.sbt-logo-wall--navigable .sbt-logo-wall__item {
    flex: 0 0 calc(50% - 1rem); /* mobile: 2 cols (gap 8 = 2rem total = 1rem por item) */
}

@media (min-width: 768px) {
    .sbt-logo-wall--navigable.sbt-logo-wall--cols-3 .sbt-logo-wall__item {
        flex: 0 0 calc(33.3333% - 1.3333rem);
    }
    .sbt-logo-wall--navigable.sbt-logo-wall--cols-4 .sbt-logo-wall__item {
        flex: 0 0 calc(25% - 1.5rem);
    }
    .sbt-logo-wall--navigable.sbt-logo-wall--cols-5 .sbt-logo-wall__item {
        flex: 0 0 calc(20% - 1.6rem);
    }
    .sbt-logo-wall--navigable.sbt-logo-wall--cols-6 .sbt-logo-wall__item {
        flex: 0 0 calc(16.6666% - 1.6666rem);
    }
}

.sbt-logo-wall__nav {
    @apply flex items-center justify-center gap-4 mt-8;
}

.sbt-logo-wall__nav-btn {
    @apply flex items-center justify-center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    padding: 0 0 4px 0;
    transition: opacity .2s ease, background-color .2s ease;
}

.sbt-logo-wall__nav-btn:hover:not(:disabled) {
    @apply bg-black/5;
}

.sbt-logo-wall__nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.sbt-logo-wall--navigable.sbt-logo-wall--single-page .sbt-logo-wall__nav {
    display: none;
}