/* Extracted from module/computer/blog/list.phtml during audit Step 6c. */

/*
 * Chrome clearance — bumps the breathing room between the sticky
 * header and the "Blog / X" title. Targets the h1 directly so the
 * header's reuse of `.container.lb-mw-1320` isn't affected.
 */
body[data-module="/blog/"] #blogList h1{
    /* !important required to beat BS4's `.mt-0 { margin-top: 0 !important }`
     * that the markup carries on the h1. Source order alone can't override
     * a utility class with !important — only !important can. */
    margin-top: 20px !important;
}

/*
 * Title links — pin to the tenant brand color (--lb-brand) instead of
 * BS4's default link blue (#007bff) which doesn't match the tenant.
 * Applies to "Blog" in "Blog / Consumíveis De Impressão".
 */
body[data-module="/blog/"] #blogList h1 a,
body[data-module="/blog/"] #blogList h1 a:hover,
body[data-module="/blog/"] #blogList h1 a:focus{
    color: var(--lb-brand);
    text-decoration: none;
}

body[data-module="/blog/"] #blogList h1 a:hover{
    color: var(--lb-brand-hover);
}

/*
 * Target text weight — the markup uses `.font-weight-bold` (700) on
 * the active page name span. Against the h1's default 500 weight
 * (BS4), the contrast read as too aggressive ("Consumíveis De
 * Impressão" screaming over "Blog"). Bumped down to 500 so it sits
 * at the same weight as the parent "Blog" — distinction comes from
 * the brand color on the link instead.
 */
body[data-module="/blog/"] #blogList h1 .font-weight-bold{
    font-weight: 500 !important;
}

.article{
    border-radius: 4px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.article img{
    border-radius: 4px 4px 0 0;
}

.articleTitle{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.articleSummary{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.article:first-of-type{
    margin-left: 0 !important;
}


.articlesRow{
    display: flex;
    flex-wrap: wrap;
    margin-right: -25px !important;
}

.articleCol{
    flex: 0 0 calc(33.333% - 16px);
    margin: 0 10px 22px;
    box-sizing: border-box;
}

.articleCol:nth-child(3n+1){
    margin-left: 0;
}

.articleCol:nth-child(3n){
    margin-right: 0;
}

.article{
    cursor: pointer;
}

.article img{
    width: 100%;
    height: auto;
    display: block;
}


#sharingLinks div{
    padding: 0 30px;
}

#sharingLinks div .sharingLink{
    font-size: 20px;
}

#sharingLinks div .sharingLink:hover > i{
    color: #212121 !important;
}