/*
    Blog-grid component styles — JM-WEB-CHANGESET-01.

    Vendored verbatim from the purchased template's own page stylesheet:
    _reference/purchased-template/extracted/template/pages/css/style.css

    blog-grid.html loads that file in addition to the common stylesheet, and the
    classes below are the ones its cover and card component actually use. They
    are copied rule for rule rather than reinterpreted; the only edit is the
    background-image path, rewritten from the template's own
    `../../img/pages/banner.jpeg` to this stylesheet's location under
    public/assets/css, which resolves to the identical vendored asset.

    Source line references are given per rule.
*/

/* pages/css/style.css:31 */
.text-purple {
	color: #E72E13 !important;
}

/* pages/css/style.css:66 */
.breadcrumb.bg-dark .breadcrumb-item + .breadcrumb-item::before {
	color: rgb(204 204 204 / 23%);
}

/* pages/css/style.css:52 — the solid accent, used for the selected category
   filter so the active state stays in the template's own vocabulary. */
.bg-purple {
	background-color: #E72E13;
}

/* pages/css/style.css:70 */
.bg-opacity-purple {
	background: rgb(139 61 255 / 8%);
}

/* pages/css/style.css:92 — the curved white lower edge of the cover. The
   wrapper it sits in must be position-relative for this to anchor. */
.svg-border-rounded svg {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 60px;
	width: 100%;
}

/* pages/css/style.css:218 — the cover background. */
.bg-elements {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/pages/banner.jpeg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*
    Cover breadcrumb colours — JM-WEB-CHANGESET-01-R4.

    blog-grid.html gets its red "Home" link from the pages stylesheet's GLOBAL
    `a { color: #E72E13 }` (pages/css/style.css:27-30). Vendoring that global
    rule would repaint every link on the JOBMASTER site, and the site's own
    `a { color: #1b1b1b }` was overriding the pill's link instead. So the
    template's link colour is applied here scoped to the cover breadcrumb
    only; the active item is the template's text-white-50 treatment, restated
    under the same scope. The separator colour needs no new rule — the
    template's own `.breadcrumb.bg-dark` rule above already paints it.

    Loaded after style.css, so at equal specificity these also win over the
    site's `a:hover` — matching the template, whose pages stylesheet defines
    no link hover shift.
*/
.blog-grid-breadcrumb a {
	color: #E72E13;
}
.blog-grid-breadcrumb .breadcrumb-item.active {
	color: rgba(255, 255, 255, .5);
}

/*
    Product Owner override — JM-WEB-CHANGESET-01 §9.

    Applied on top of the template's own category badge treatment, so padding,
    background and text colour stay exactly as blog-grid.html renders them and
    only the radius and size change.
*/
.insight-category-pill {
	border-radius: 30px !important;
	font-size: 14px;
}