/*
 * Category and sub-category pages.
 *
 * Shares the tokens and section rhythm of the About and Why Us pages, in its
 * own file so a fresh drop of the design team's stylesheet cannot wipe it.
 *
 * The hard constraint here is the imagery: these product shots were taken over
 * twenty years, at every aspect ratio, some on white and some on grey. Every
 * card therefore gets a fixed-height window with the image contained inside it
 * rather than cropped, which is the only treatment that survives all 89.
 */

/* The hero's job is to say what the range is and get out of the way — the
   grid below it is what the visitor came for. It used to hold 56px of its own
   bottom padding above the grid's 56px of top padding, so 112px of nothing sat
   between the intro and the first product. */
.cat-hero {
    background: linear-gradient(160deg, #fdf2f2 0%, #ffffff 65%);
    padding: 32px 0 32px;
}

.cat-breadcrumb {
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: #6b7280;
}

.cat-breadcrumb a { color: #6b7280; text-decoration: none; }
.cat-breadcrumb a:hover { color: var(--primary-red); }
.cat-breadcrumb span { margin: 0 0.35rem; }
.cat-breadcrumb span[aria-current] { margin-left: 0; color: #111827; }

.cat-hero h1 {
    font-size: clamp(1.9rem, 3.4vw, 2.85rem);
    font-weight: 800;
    line-height: 1.18;
    margin-bottom: 1.1rem;
}

.cat-hero__lead {
    max-width: 40rem;
    font-size: 1.04rem;
    line-height: 1.75;
    color: #4b5563;
    margin: 0 0 1.75rem;
}

.cat-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.cat-hero__secondary {
    font-weight: 600;
    color: #111827;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.cat-hero__secondary:hover { color: var(--primary-red); }

/* Sized nearer the words beside it. At 20rem the picture was half again as
   tall as the intro text, and centring the two left a band of white on the
   text side that reads as a mistake rather than as space. */
.cat-hero__image {
    display: block;
    width: 100%;
    max-height: 15rem;
    object-fit: contain;
}

/* ------------------------------------------------------------------ grid */

.cat-grid { padding: 32px 0 24px; }

.product-card { height: 100%; }

.product-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-card__link:hover {
    transform: translateY(-4px);
    border-color: #f3d0d0;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.product-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15rem;
    padding: 1.25rem;
    background: #f8f9fb;
}

.product-card__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.25rem 1.35rem 1.4rem;
}

.product-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}

.tag {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.5;
}

.tag--count { background: #fdeaea; color: #b02024; font-weight: 600; }
.tag--code { background: #eef2ff; color: #3f4a8a; letter-spacing: 0.02em; }

.product-card__title {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    color: #111827;
}

.product-card__summary {
    margin-top: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #6b7280;
}

/* The models behind a sub-category card, and the model table on a carrom board
   card. Both answer "what is actually in here" before the click. */
.product-card__children {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #9ca3af;
}

.product-card__models {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.product-card__models span {
    padding: 0.2rem 0.55rem;
    border: 1px solid #eceef1;
    border-radius: 6px;
    font-size: 0.74rem;
    color: #4b5563;
}

.product-card__models strong { color: #111827; font-weight: 600; }

.product-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary-red);
}

.product-card__more i { font-size: 0.7rem; transition: transform 0.25s ease; }
.product-card__link:hover .product-card__more i { transform: translateX(3px); }

/* -------------------------------------------------------------- siblings */

.cat-siblings { padding: 48px 0 8px; }

.cat-siblings h2,
.cat-cta h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 800;
    margin-bottom: 1.35rem;
}

.sibling-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 100%;
    padding: 0.9rem 1.1rem;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 12px;
    text-decoration: none;
    color: #111827;
    font-weight: 600;
    font-size: 0.94rem;
    line-height: 1.4;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sibling-card:hover {
    color: #111827;
    border-color: #f3d0d0;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.sibling-card img {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.sibling-card i { font-size: 0.68rem; color: var(--primary-red); }

/* ------------------------------------------------------------------- cta */

.cat-cta { padding: 48px 0 72px; }

.cat-cta__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.25rem 2.5rem;
    background: linear-gradient(160deg, #fdf2f2 0%, #ffffff 70%);
    border: 1px solid #f3d0d0;
    border-radius: 16px;
}

.cat-cta__panel h2 { margin-bottom: 0.6rem; }

.cat-cta__panel p {
    max-width: 44rem;
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.75;
    color: #4b5563;
}

.cat-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.cat-cta__secondary {
    font-weight: 600;
    color: #111827;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.cat-cta__secondary:hover { color: var(--primary-red); }

/* ----------------------------------------------------------- small screens */

@media (max-width: 991.98px) {
    .cat-hero { padding-bottom: 40px; }
    .cat-hero__image { max-height: 14rem; }
    .cat-grid { padding-top: 40px; }
    .product-card__media { height: 13rem; }
}

@media (max-width: 575.98px) {
    .cat-hero__actions,
    .cat-cta__actions { gap: 1rem; }
    .cat-cta__panel { padding: 1.75rem 1.5rem; }
    .product-card__media { height: 12rem; }
}