/* Strip — back to category. Design: blog-post.html "Back to category" section + styles.css `.alink`
   (display type, 13px, .2em uppercase, a 1px rule under the label, 8px gap that opens to 14px on hover).
   The row owns the surface and the outer padding; this module is transparent and full-width. */

.pardee-catstrip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
}

/* The design draws a rule above the band; the row's padding keeps it off the links. */
.pardee-catstrip--hairline {
    border-top: 1px solid var(--pardee-line);
    padding-top: 32px;
}

.pardee-catstrip__spacer {
    flex: 0 0 auto;
}

.pardee-catstrip__link {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--pp-clay);
    transition: gap var(--dur-base, .3s) var(--ease-soft, ease), color var(--dur-base, .3s);
}

.pardee-catstrip__link:hover,
.pardee-catstrip__link:focus-visible {
    gap: 14px;
    color: var(--pardee-fg, var(--pp-ink-mid));
}

/* Link colour (A4: a value picked in the module wins over the kit). */
.pardee-catstrip--ink .pardee-catstrip__link { color: var(--pardee-fg, var(--pp-ink-mid)); }
.pardee-catstrip--ink .pardee-catstrip__link:hover,
.pardee-catstrip--ink .pardee-catstrip__link:focus-visible { color: var(--pp-clay); }
.pardee-catstrip--cream .pardee-catstrip__link { color: var(--pp-cream); }
.pardee-catstrip--cream .pardee-catstrip__link:hover,
.pardee-catstrip--cream .pardee-catstrip__link:focus-visible { color: var(--pp-tan); }

.pardee-catstrip__arrow {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    align-self: center;
}

/* The design's back arrow is the same glyph, turned around. */
.pardee-catstrip__link--back .pardee-catstrip__arrow {
    transform: rotate(180deg);
}

@media (max-width: 600px) {
    .pardee-catstrip {
        gap: 16px;
    }
    .pardee-catstrip__spacer {
        display: none;
    }
}