/**
 * Category Card - Frontend & Editor Styles
 *
 * Mirrors the front-page tile design: bordered rectangle with a
 * circular accent ring around the image, bold title + auto item
 * count, faint divider, then a list of bulleted category links
 * with chevron affordances. The whole circle (image + accent ring)
 * gently scales up when the card is hovered, in place — `transform`
 * doesn't affect layout, so nothing else on the card moves.
 *
 * Colour control is driven entirely by the `--ims-card-accent` CSS
 * variable (set inline by the renderer). Lighter tints needed for the
 * placeholder stripes are derived with `color-mix()` so a single hex
 * value drives the whole accent treatment.
 *
 * The Shop-all CTA at the bottom appears whenever a heading-link
 * URL is configured on the card; the CTA label is author-editable
 * via the inspector, defaulting to "Shop all".
 *
 * @package IMS_by_Soul_Country
 */

/* ==========================================================================
   Card shell
   ========================================================================== */

.ims-category-card {
    --ims-card-accent: #FAB000;
    --ims-card-accent-soft: color-mix(in srgb, var(--ims-card-accent) 18%, transparent);
    --ims-card-accent-softer: color-mix(in srgb, var(--ims-card-accent) 8%, transparent);
    --ims-card-border: #e5e7eb;
    --ims-card-text: #111111;
    --ims-card-muted: #6b7280;
    --ims-card-divider: #e5e7eb;

    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid var(--ims-card-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ims-category-card:hover {
    border-color: color-mix(in srgb, var(--ims-card-accent) 60%, var(--ims-card-border));
    box-shadow: 0 6px 18px -10px rgba(17, 17, 17, 0.18);
}

/* ==========================================================================
   Inner padding wrapper
   Keeps the badge positioning anchored to the card while letting the
   content breathe.
   ========================================================================== */

.ims-category-card__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 22px 20px;
    text-align: center;
}

/* ==========================================================================
   Badge ("POPULAR", "NEW", etc.)
   ========================================================================== */

.ims-category-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
    line-height: 1.2;
    z-index: 2;
    pointer-events: none;
}

/* ==========================================================================
   Circular image
   The placeholder uses a soft striped fill in the accent tint and
   shows an uppercase bracketed label (the title fallback). When a
   real image is set, it fills the circle via object-fit: cover.
   ========================================================================== */

.ims-category-card__image-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.ims-category-card__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid var(--ims-card-accent);
    background: #ffffff;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    /* Scaled on card hover (see rule below). `transform` doesn't
       affect layout, so the circle visually grows in place without
       nudging the title, count, lines, etc. The `transform-origin`
       keeps the growth centred on the circle itself. */
    transform-origin: center center;
    transition: transform 0.3s ease;
    will-change: transform;
}

.ims-category-card:hover .ims-category-card__image,
.ims-category-card:focus-within .ims-category-card__image {
    transform: scale(1.08);
}

.ims-category-card__image-link {
    cursor: pointer;
}

.ims-category-card__image--placeholder {
    background-image: repeating-linear-gradient(
        -45deg,
        var(--ims-card-accent-soft) 0,
        var(--ims-card-accent-soft) 6px,
        var(--ims-card-accent-softer) 6px,
        var(--ims-card-accent-softer) 12px
    );
}

.ims-category-card__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .ims-category-card__image {
        transition: none;
    }
    .ims-category-card:hover .ims-category-card__image,
    .ims-category-card:focus-within .ims-category-card__image {
        transform: none;
    }
}

.ims-category-card__image-placeholder-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ims-card-accent) 70%, #1c1c1c);
    padding: 0 10px;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}

/* ==========================================================================
   Heading & item count
   ========================================================================== */

.ims-category-card__heading {
    margin-bottom: 14px;
}

.ims-category-card__title,
.ims-category-card__title-link {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ims-card-text);
    text-decoration: none;
    margin: 0 0 4px;
}

.ims-category-card__title-link:hover {
    color: color-mix(in srgb, var(--ims-card-accent) 90%, var(--ims-card-text));
}

.ims-category-card__count {
    font-size: 13px;
    font-weight: 400;
    color: var(--ims-card-muted);
    line-height: 1.4;
}

/* ==========================================================================
   Divider
   ========================================================================== */

.ims-category-card__divider {
    height: 1px;
    background: var(--ims-card-divider);
    margin: 0 -4px 14px;
}

/* ==========================================================================
   Bullet list of lines
   ========================================================================== */

.ims-category-card__lines {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    flex: 1;
    text-align: left;
}

.ims-category-card__line {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 15px;
    color: var(--ims-card-text);
    line-height: 1.3;
}

/* Subtle hairline between sibling lines so the bullet list reads as
   distinct rows without competing with the heading divider above. */
.ims-category-card__line + .ims-category-card__line {
    border-top: 1px solid #f1f3f5;
}

.ims-category-card__line-bullet {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ims-card-accent);
    margin-right: 10px;
    margin-left: 2px;
}

.ims-category-card__line-link {
    display: flex;
    align-items: center;
    flex: 1;
    text-decoration: none;
    color: inherit;
    transition: color 0.12s ease;
}

.ims-category-card__line-link:hover .ims-category-card__line-label,
.ims-category-card__line-link:focus-visible .ims-category-card__line-label {
    color: color-mix(in srgb, var(--ims-card-accent) 60%, var(--ims-card-text));
}

.ims-category-card__line-label {
    flex: 1;
}

.ims-category-card__line-chevron {
    flex-shrink: 0;
    margin-left: 8px;
    color: #9ca3af;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.12s ease, color 0.12s ease;
}

.ims-category-card__line-link:hover .ims-category-card__line-chevron,
.ims-category-card__line-link:focus-visible .ims-category-card__line-chevron {
    transform: translateX(2px);
    color: var(--ims-card-accent);
}

/* ==========================================================================
   Shop all CTA
   ========================================================================== */

.ims-category-card__shop-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 6px;
    padding: 6px 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ims-card-text);
    text-decoration: none;
    transition: color 0.12s ease;
    margin-top: auto;
}

.ims-category-card__shop-all-arrow {
    transition: transform 0.15s ease;
}

a.ims-category-card__shop-all:hover,
a.ims-category-card__shop-all:focus-visible {
    color: color-mix(in srgb, var(--ims-card-accent) 80%, var(--ims-card-text));
}

a.ims-category-card__shop-all:hover .ims-category-card__shop-all-arrow,
a.ims-category-card__shop-all:focus-visible .ims-category-card__shop-all-arrow {
    transform: translateX(3px);
}

/* ==========================================================================
   Editor-only refinements
   The block editor wraps each block with extra chrome (block toolbar,
   selection outline, the drag handle, etc.) which can fight the
   card's own border. We dial back our hover state inside the editor
   so the visual distinction between "selected" and "hovered" stays
   clear, and ensure the title RichText placeholder sits in the right
   place even when the field is empty.
   ========================================================================== */

.ims-category-card--editor {
    height: auto;
    min-height: 320px;
}

.ims-category-card--editor:hover {
    box-shadow: none;
    transform: none;
}

.ims-category-card--editor .ims-category-card__title,
.ims-category-card--editor .ims-category-card__count {
    text-align: center;
    width: 100%;
}

.ims-category-card--editor .ims-category-card__line-label em {
    font-style: italic;
    font-weight: 400;
}