/* Root block spacing */
.block.jscriptz-subcats {
    margin-bottom: 2.5rem;
}

/* Generic / Luma (and default) layout */
.jscriptz-subcats__list {
    display: flex;
    flex-wrap: wrap;

    /* This is the spacing between cards – controlled by admin setting */
    gap: var(--js-subcats-card-spacing, 20px);

    /* No negative margins needed when using gap */
    margin: 0;
}

.jscriptz-subcats__item {
    box-sizing: border-box;

    padding: var(--js-subcats-card-padding, 10px);

    flex: 0 0 var(--js-subcats-col-width-phone, 100%);
    max-width: var(--js-subcats-col-width-phone, 100%);

    border-radius: var(--js-subcats-card-radius, 0);
    border: var(--js-subcats-card-border, none);
    background: var(--js-subcats-card-background, transparent);

    /* Base shadow from config */
    box-shadow: var(--js-subcats-card-shadow, none);

    /* Smooth hover animation; can still be overridden by --js-subcats-transition-card */
    transition: var(
            --js-subcats-transition-card,
            transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out
    );
}

/* Hover behavior controlled entirely by config dropdowns */
.jscriptz-subcats__item:hover {
    transform: scale(var(--js-subcats-hover-scale, 1));
    box-shadow: var(
            --js-subcats-hover-shadow,
            var(--js-subcats-card-shadow, none)
    );
}


@media (min-width: 640px) {
    .jscriptz-subcats__item {
        flex-basis: var(--js-subcats-col-width-tablet, 50%);
        max-width: var(--js-subcats-col-width-tablet, 50%);
    }
}

@media (min-width: 1024px) {
    .jscriptz-subcats__item {
        flex-basis: var(--js-subcats-col-width-desktop, 25%);
        max-width: var(--js-subcats-col-width-desktop, 25%);
    }
}

/* Card look */
.jscriptz-subcats__image-link {
    display: block;
    text-decoration: none;
}

.jscriptz-subcats__image-wrapper {
    display: block;
    overflow: hidden;
    border-radius: inherit;
    background: #f5f5f5;
    border: var(--js-subcats-image-border, none);
    transition: var(--js-subcats-transition-image, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out);
}

.jscriptz-subcats__image {
    display: block;
    width: 100%;
    height: auto;
}

.jscriptz-subcats__content {
    margin-top: 10px;
    text-align: center;
}

.jscriptz-subcats__name {
    font-size: var(--js-subcats-name-font-size, 1.4rem);
    font-weight: var(--js-subcats-name-font-weight, 400);
    margin: 0 0 0.3rem;
}

.jscriptz-subcats__link {
    color: var(--js-subcats-link-color, inherit);
    text-decoration: none;
    transition: var(--js-subcats-transition-text, color 0.2s ease-in-out);
}

.jscriptz-subcats__link:hover {
    text-decoration: none;
}

.jscriptz-subcats__description {
    margin: 0;
    font-size: var(--js-subcats-description-font-size, 0.9rem);
    color: var(--js-subcats-description-color, #666666);
    transition: var(--js-subcats-transition-text, color 0.2s ease-in-out);
}

/* Optional "grow" hover effect controlled by config */
.jscriptz-subcats__item--grow .jscriptz-subcats__image-wrapper {
    /* transition already controlled via CSS variable; just reuse */
}

.jscriptz-subcats__item--grow:hover .jscriptz-subcats__image-wrapper {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}


/* Preset-based overrides for per-block design */

/* Default: inherit global design variables configured in Stores > Configuration. */
.jscriptz-subcats--preset-default .jscriptz-subcats__item {
    /* No additional overrides; uses CSS variables from Design block */
}

/* Soft cards: rounded, light border, soft background and subtle shadow */
.jscriptz-subcats--preset-soft .jscriptz-subcats__item {
    border-radius: 0.75rem;
    border: 1px solid #e5e5e5;
    background: #f9fafb;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}

/* Borderless grid: very clean, no border or background, tight padding */
.jscriptz-subcats--preset-borderless .jscriptz-subcats__item {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 6px;
}

.jscriptz-subcats--preset-borderless .jscriptz-subcats__image-wrapper {
    border-radius: 0;
}

/* Light cards: white cards with soft gray text */
.jscriptz-subcats--preset-light .jscriptz-subcats__item {
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.jscriptz-subcats--preset-light .jscriptz-subcats__link {
    color: #111827;
}

.jscriptz-subcats--preset-light .jscriptz-subcats__description {
    color: #4b5563;
}

/* Dark cards: dark background and light text */
.jscriptz-subcats--preset-dark .jscriptz-subcats__item {
    border-radius: 0.5rem;
    border: 1px solid #374151;
    background: #111827;
}

.jscriptz-subcats--preset-dark .jscriptz-subcats__link {
    color: #f9fafb;
}

.jscriptz-subcats--preset-dark .jscriptz-subcats__description {
    color: #d1d5db;
}

/* Custom: rely on Store > Configuration > Jscriptz > Subcats > Design for fine-tuning */
.jscriptz-subcats--preset-custom .jscriptz-subcats__item {
    /* No hard-coded overrides; use CSS variables from Design block */
}


.jscriptz-subcats__media-wrapper {
    display: block;
    overflow: hidden;
    border-radius: inherit;
    background: #000;
    border: var(--js-subcats-image-border, none);
    transition: var(--js-subcats-transition-image, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out);
}


.jscriptz-subcats__item {
    margin: 0 !important;
}