/**
 * TransferJet — category child panel.
 *
 * Cards under the category title linking to the categories either side of the
 * current one. Rendered by Magento_Catalog::category/child-panel.phtml; see the
 * note at the top of that file for what decides whether it appears.
 *
 * Columns are 3 / 4 / 8. Eight is held back to xl rather than lg because the
 * 320px filter sidebar arrives at lg and leaves roughly 660px of content — at
 * eight columns that is 82px a card, too narrow for an icon and a label. Four
 * gives about 157px there, and by xl the content is wide enough for eight at
 * about 114px.
 *
 * With at most seven children that gives 3+3+1 on a phone, 4+3 in the middle,
 * and a single row on a wide desktop.
 */

/* A direct child of the .columns grid, spanning both tracks, so it sits above
   the filter sidebar as well as the products rather than inside the content
   column beneath the finder. */
.tj-category-panel {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    /* More air beneath it on desktop, where the sidebar and the finder both
       start immediately below and the panel needs separating from them. */
    .tj-category-panel {
        margin-bottom: 2rem;
    }

    /* The layered navigation wrapper carries my-6 from the component. Below lg
       that spacing sits above the trigger bar and is wanted; at lg the sidebar
       starts level with the content column and the top margin pushes the filter
       heading out of line with the finder beside it.
     *
       :has() because that wrapper has no class of its own — only Tailwind
       utilities — and #filters-heading is the one stable thing inside it. */
    div:has(> #filters-heading) {
        margin-block: 0;
    }
}

/* Flex, not grid. Both fixed columns and auto-fit tie the tile width to the
   entry count: eight columns against seven children leaves an empty track, and
   auto-fit stretches two children across the whole page. A tile should be the
   same size whether a category has two children or seven, and simply wrap when
   it runs out of room.
 *
   Left-aligned rather than centred: a trailing row of one or two reads as the
   continuation of a list when it starts where the row above starts, and as a
   stray element when it floats in the middle. */
.tj-category-panel__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Icons at 60px. Smaller reads as decoration rather than as the thing being
   chosen: in a 148px tile the icon identifies and the label confirms. */
.tj-category-panel__item {
    align-items: center;
    /* 148 is the floor for a one-line label: "Ramme & Demper" needs 129px at
       15px and the side padding takes 16. Height so the anchor fills the <li>,
       which stretches to its row while the anchor would not. */
    height: 100%;
    min-width: 148px;
    width: 148px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    /* A floor, so a row holding a wrapped label still matches the row above.
       No name in the icon map wraps at the current size; this is insurance. */
    min-height: 112px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tj-category-panel__icon {
    fill: #4a4948;
    flex-shrink: 0;
    height: 60px;
    width: 60px;
}

/* One size at every width, a step below the megamenu's 16. Tied to the tile
   width above — see the floor there before changing it. */
.tj-category-panel__label {
    color: #1f1a16;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
}

/* No lift: these are wide targets, and the fill reads clearly enough on its
   own. Same values the pagination roundels and the filter chips use. */
.tj-category-panel__item:hover {
    background: #f7f7f7;
    border-color: #cfcdcb;
}

/* The current category, when the panel is showing siblings rather than
   children. Marked in brand red with a tinted ground — the same relationship
   the pagination gives the current page, filled rather than merely outlined. */
.tj-category-panel__item.is-current {
    background: #fdf2f3;
    border-color: var(--color-primary);
}

.tj-category-panel__item.is-current .tj-category-panel__icon {
    fill: var(--color-primary);
}

.tj-category-panel__item.is-current .tj-category-panel__label {
    color: var(--color-primary);
}

/* Below sm the tiles fill their row. Grid rather than flex: this class is on
   the <a>, not the <li> that is the flex item, so flex properties here never
   applied. auto-fill, not auto-fit — auto-fit collapses the empty tracks and
   stretches a trailing single tile across the page. */
@media (max-width: 639px) {
    .tj-category-panel__list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    }

    .tj-category-panel__item {
        width: auto;
    }
}

/* From lg the panel sits a step below the megamenu's cell, not level with it.
   The icon carries that step alone: the menu cell is fluid (155px at 1280,
   174 from about 1480) and the tile cannot go below its label floor, so width
   is within a few per cent of the cell whatever it is. */

@media (min-width: 1024px) {
    .tj-category-panel__icon {
        height: 64px;
        width: 64px;
    }
}