/*
 * Category grid — /drugs/ and /rhythms/ index card layout.
 * Ported + consolidated from the legacy custom-style.css (.category-page-content,
 * .category-list) + RhythmsLayout inline styles (.rhythm-row, .link-block-2,
 * .rhythms-block, .divider). One class set serves both pages: a rule-flanked
 * section title (.divider) + a responsive grid (.category-list) of red cards
 * (.link-block-2), with grey "coming soon" cards (.unlinked).
 * Rendered by Views/CategoryGrid.cshtml. Colours match legacy exactly:
 * red rgba(189,30,43,.86) / #bd1e2b, grey rgba(88,86,86,.86).
 */

.category-page {
    padding: 25px 0 50px;
}

/* Rule-flanked centered section title (legacy .divider-container / .divider). */
.category-page .divider {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    margin: 0 10px 5px;
    padding: 10px 0;
}

.category-page .divider h1,
.category-page .divider h2 {
    margin: 0 10px;
    font-weight: bold;
    letter-spacing: 0;
    /* Legacy titles are title-case; the site's default h2 styling uppercases,
       which would make h2 sections (Heart Blocks…) inconsistent with the h1. */
    text-transform: none;
}

/* The two red rules flanking the title (legacy .divider-line / .rhythms-block). */
.category-page .divider .rule {
    flex: 0 0 45%;
    height: 2px;
    background-color: #bd1e2b;
}

/* Card grid (legacy .category-list). auto-fit reflows columns responsively:
   ~4-up on desktop, fewer as the viewport narrows. */
.category-page .category-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* Cards (legacy .category-list a / .link-block-2). Rendered as <a> (linked) or
   <div> (grey placeholder); style both the same shape. */
.category-page .category-list .link-block-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    padding: 0 1%;
    border-radius: 10px;
    background: rgba(189, 30, 43, 0.86);
    color: #fff;
    font-size: 140%;
    text-align: center;
    text-decoration: none;
    transition: color 0.15s ease;
}

a.link-block-2:hover {
    color: #dfdfdf;
}

/* Grey / disabled "coming soon" card (legacy .unlinked). */
.category-page .category-list .link-block-2.unlinked {
    background: rgba(88, 86, 86, 0.86);
    cursor: default;
}

@media (max-width: 991px) {
    .category-page .category-list {
        gap: 20px;
    }

    .category-page .divider .rule {
        flex-basis: 30%;
    }
}

@media (max-width: 479px) {
    .category-page .category-list .link-block-2 {
        height: 150px;
        font-size: 120%;
    }
}