/**
 * 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.625rem;
}

/* Icons at 60px, matching the megamenu's own cells. 24, 36, 44 and 52 were all
   tried and all read as decoration rather than as the thing being chosen: in a
   140px tile the icon is the identifying element and the label confirms it,
   not the other way round.

   min-height rather than height so a label that needs two lines — "Olje &
   Materiell" does — fits without forcing its row taller than the others. */
.tj-category-panel__item {
    align-items: center;
    /* Matches the megamenu panel's cells, so the two read as the same idea at
       two sizes rather than as two different components. */
    min-width: 140px;
    width: 140px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    /* 96 rather than a larger floor or none at all. With no floor the tile is
       about 92px for a single-line label, which is right — but flex stretches
       items to their own row, so a row containing a two-line label such as
       "Olje & Materiell" grows while the row above does not, and the wrap point
       moves with the viewport. 96 fits two lines without stretching, so every
       row matches wherever it happens to break, and single-line tiles carry no
       visible slack. */
    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;
}

.tj-category-panel__label {
    color: #1f1a16;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
}

/* 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 grow to fill their row rather than holding a fixed width.
   The floor is the same 140 as the desktop tile, so there is one number rather
   than two — an earlier version dropped it to 104 and the tiles collapsed to
   that whenever a row held four, smaller than the artwork can carry.
 *
   Usable width is the viewport less roughly 48px of container padding, and two
   tiles need 2 × 140 plus one 10px gap = 290. That fits from a 360px viewport
   up, which is the realistic floor now; three fit from about 490. At 320 it
   falls back to one per row, which is the honest outcome at that width. */
@media (max-width: 639px) {
    .tj-category-panel__item {
        flex: 1 1 140px;
        width: auto;
    }
}