/* /gear/ catalogue page (templates/gear-page.ts). Every category is a
   collapsible card (<details class="gear-cat">) with its title, product
   count and a three-photo preview in the <summary>; only the first starts
   open, so the whole catalogue fits in about one phone screen. Rows share
   the game-page checklist's look (.gear-check) but not its classes: the GA4
   handler in layout.ts reports placement "article_block" inside .gear-check
   and "gear_page" everywhere else. */
.gear-category {
    margin-bottom: 10px;
}
.gear-cat {
    border: 1px solid var(--card-separator);
    border-left: 3px solid var(--gold);
    border-radius: var(--r-lg);
    background: var(--card-surface);
    box-shadow: var(--shadow-subtle);
}
.gear-cat__summary {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "title preview chev"
        "count preview chev";
    align-items: center;
    column-gap: 12px;
    min-height: 64px;
    padding: 10px 14px;
    border-radius: var(--r-lg);
    cursor: pointer;
    list-style: none;
}
.gear-cat__summary::-webkit-details-marker {
    display: none;
}
.gear-category .gear-cat__title {
    grid-area: title;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 17px;
    line-height: 1.25;
}
.gear-cat__count {
    grid-area: count;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.gear-cat__preview {
    grid-area: preview;
    display: flex;
}
.gear-cat__preview span {
    width: 34px;
    height: 34px;
    margin-left: -10px;
    padding: 2px;
    box-sizing: border-box;
    border: 1px solid var(--card-separator);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.gear-cat__preview span:first-child {
    margin-left: 0;
}
.gear-cat__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.gear-cat__chev {
    grid-area: chev;
    display: flex;
    color: var(--accent-strong);
    transition: transform 0.2s;
}
.gear-cat[open] .gear-cat__chev {
    transform: rotate(180deg);
}
.gear-cat__summary:hover .gear-cat__title {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gear-cat__list {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 32px;
    margin: 0;
    padding: 0 14px 6px;
    list-style: none;
}
.gear-cat__item {
    margin: 0;
    padding: 8px 0 10px;
    border-top: 1px dashed var(--card-separator);
}
.gear-cat__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    color: var(--text-dark);
    text-decoration: none;
}
.gear-cat__thumb {
    flex: none;
    width: 48px;
    height: 48px;
    padding: 3px;
    box-sizing: border-box;
    border: 1px solid var(--card-separator);
    border-radius: 7px;
    background: #fff;
}
.gear-cat__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Colour set on the span: the site-wide [data-theme="dark"] a rule would
   otherwise turn every product name gold. */
.gear-cat__name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-dark);
}
.gear-cat__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1.5px solid var(--accent-strong);
    border-radius: var(--r-xxl);
    background: var(--accent-strong);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    transition: background 0.15s, border-color 0.15s;
}
.gear-cat__link:hover .gear-cat__btn,
.gear-cat__link:focus-visible .gear-cat__btn {
    border-color: var(--accent-strong-hover);
    background: var(--accent-strong-hover);
}
.gear-cat__link:hover .gear-cat__name {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Indented to line up with the product name (48px thumb + 12px gap). */
.content-section .gear-cat__used-in {
    margin: 2px 0 0 60px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}
/* Same treatment as .glossary-used-in: an underline, not colour alone, marks
   the links (axe link-in-text-block; #d4763c on the body text was 2.61:1). */
.gear-cat__used-in a {
    color: var(--accent-strong);
    text-decoration-line: underline;
    text-decoration-color: rgba(162, 76, 23, 0.6);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}
.gear-cat__used-in a:hover {
    color: var(--accent-strong-hover);
    text-decoration-color: currentColor;
}
[data-theme="dark"] .gear-cat__chev {
    color: var(--gold-light);
}
[data-theme="dark"] .gear-cat__btn {
    border-color: var(--gold-light);
    background: var(--gold-light);
    color: #1a251e;
}
[data-theme="dark"] .gear-cat__link:hover .gear-cat__btn,
[data-theme="dark"] .gear-cat__link:focus-visible .gear-cat__btn {
    border-color: var(--gold);
    background: var(--gold);
}
[data-theme="dark"] .gear-cat__used-in a {
    color: var(--gold-light);
    text-decoration-color: rgba(228, 204, 122, 0.7);
}
@media (min-width: 900px) {
    .gear-cat__list {
        grid-template-columns: 1fr 1fr;
    }
}

/* Prime banner: a slim bar (logo block + text) at every width. The whole
   card is the link; the CTA is a span inside it. */
.gear-prime {
    margin-bottom: var(--sp-xl);
}
.gear-prime__card {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #0064f9;
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: box-shadow 0.15s;
}
.gear-prime__card:hover {
    box-shadow: 0 8px 22px rgba(0, 100, 249, 0.35);
}
.gear-prime__logo {
    display: block;
    flex: 0 0 96px;
    width: 96px;
    height: auto;
    box-sizing: border-box;
    padding: 14px;
    object-fit: contain;
    background: #0064f9;
}
.gear-prime__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
}
.gear-prime__title {
    font-size: 15px;
    font-weight: 800;
    color: #2c2416;
}
.gear-prime__body {
    font-size: 12.5px;
    line-height: 1.4;
    color: #5a5248;
}
.gear-prime__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--r-xxl);
    background: #0064f9;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    transition: background 0.15s;
}
.gear-prime__card:hover .gear-prime__cta {
    background: #0052cc;
}
@media (min-width: 641px) {
    .gear-prime__logo {
        flex-basis: 150px;
        width: 150px;
        padding: 18px 24px;
    }
}
.gear-disclosure {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: var(--sp-xxl);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.gear-disclosure svg {
    flex-shrink: 0;
    margin-top: 2px;
}