/* ==========================================================================
   Blog — Blog listing and single post pages
   Merged from: assets/pages/css/blog.css
   ========================================================================== */

.blog-page .bordered {
    border: 1px solid;
    border-color: #e7ecf1;
}

.blog-page .blog-container {
    margin-bottom: 30px;
}

.blog-page .blog-title > a {
    color: #4e5a64;
    font-weight: 600;
}

.blog-page .blog-title > a:hover {
    color: #3598DC;
    text-decoration: none;
}

/* Blog content layout 1 — listing */
.blog-content-1 .blog-img-thumb {
    overflow: hidden;
    position: relative;
}

.blog-content-1 .blog-img-thumb img {
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
}

.blog-content-1 .blog-post-content {
    padding: 20px 30px 30px 30px;
    background-color: #fff;
}

.blog-content-1 .blog-post-content > .blog-post-title {
    margin: 0 0 30px 0;
}

.blog-content-1 .blog-post-content > .blog-post-title > a {
    font-size: 20px;
}

.blog-content-1 .blog-post-content > .blog-post-desc {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 15px 0;
}

.blog-content-1 .blog-post-content > .blog-post-foot > .blog-post-meta {
    display: inline-block;
    margin-right: 10px;
}

.blog-content-1 .blog-post-content > .blog-post-foot > .blog-post-meta > a {
    color: #9aa5b2;
    font-size: 13px;
    font-weight: 600;
}

.blog-content-1 .blog-post-content > .blog-post-foot > .blog-post-meta > a:hover {
    color: #3598DC;
    text-decoration: none;
}

.blog-content-1 .blog-post-content > .blog-post-foot > .blog-post-meta > i {
    margin-right: 5px;
}

.blog-content-1 .blog-post-content > .blog-post-foot > .blog-post-meta:last-child {
    margin-right: 0;
}

/* Large post */
.blog-content-1 .blog-post-lg > .blog-img-thumb {
    height: 480px;
}

.blog-content-1 .blog-post-lg > .blog-post-content > .blog-post-desc {
    margin-bottom: 30px;
}

.blog-content-1 .blog-post-lg > .blog-post-content > .blog-post-foot {
    border-top: 1px solid;
    border-top-color: #f0f1f2;
    padding-top: 20px;
    text-align: right;
}

.blog-content-1 .blog-post-lg > .blog-post-content > .blog-post-foot > .blog-post-tags {
    text-align: left;
    float: left;
    padding: 0;
}

.blog-content-1 .blog-post-lg > .blog-post-content > .blog-post-foot > .blog-post-tags > li {
    list-style: none;
    display: inline-block;
    margin-right: 5px;
}

.blog-content-1 .blog-post-lg > .blog-post-content > .blog-post-foot > .blog-post-tags > li > a {
    background-color: #f4f6f8;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 7px 10px;
}

.blog-content-1 .blog-post-lg > .blog-post-content > .blog-post-foot > .blog-post-tags > li > a:hover {
    background-color: #3598DC;
    color: #fff;
    text-decoration: none;
}

.blog-content-1 .blog-post-lg > .blog-post-content > .blog-post-foot > .blog-post-tags > li:last-child {
    margin-right: 0;
}

/* Small post */
.blog-content-1 .blog-post-sm > .blog-img-thumb {
    height: 200px;
}

.blog-content-1 .blog-post-sm > .blog-post-content > .blog-post-title {
    margin: 0 0 15px 0;
}

.blog-content-1 .blog-post-sm > .blog-post-content > .blog-post-foot {
    border: none;
}

/* Quote post */
.blog-content-1 .blog-quote {
    background-color: #fff;
    padding-bottom: 30px;
}

.blog-content-1 .blog-quote > .blog-quote-label {
    color: #fff;
    padding: 30px 40px 80px 40px;
    font-size: 18px;
    line-height: 28px;
}

.blog-content-1 .blog-quote > .blog-quote-label > i {
    display: block;
    font-size: 30px;
    margin-bottom: 15px;
}

.blog-content-1 .blog-quote > .blog-quote-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50% !important;
    margin: -55px auto 25px auto;
    overflow: hidden;
}

.blog-content-1 .blog-quote > .blog-quote-avatar img {
    width: 100%;
}

.blog-content-1 .blog-quote > .blog-quote-author {
    text-align: center;
}

.blog-content-1 .blog-quote > .blog-quote-author > .blog-quote-title {
    font-size: 20px;
    margin: 0 0 15px 0;
}

.blog-content-1 .blog-quote > .blog-quote-author > .blog-quote-desc {
    font-size: 16px;
    color: #9aa5b2;
    margin: 0;
}

/* Video post */
.blog-content-1 .blog-video > .blog-img-thumb {
    height: 330px;
}

.blog-content-1 .blog-video > .blog-img-thumb img {
    margin: 0;
}

.blog-content-1 .blog-video > .blog-video-play i {
    color: #da555b;
    background-color: rgba(0, 0, 0, 0.64);
    font-size: 35px;
    padding: 27px 20px;
    position: absolute;
    z-index: 5;
    margin: -90px 0 0 20px;
    border-radius: 50%;
}

.blog-content-1 .blog-video > .blog-video-content {
    text-align: center;
    padding: 30px;
}

.blog-content-1 .blog-video > .blog-video-content > .blog-video-title {
    font-size: 20px;
    margin: 0 0 15px 0;
}

.blog-content-1 .blog-video > .blog-video-content > .blog-video-desc {
    font-size: 16px;
    color: #9aa5b2;
    margin: 0;
}

/* Banner post */
.blog-content-1 .blog-banner {
    background-position: center;
    text-align: center;
    padding: 100px 0;
}

.blog-content-1 .blog-banner > .blog-banner-title > a {
    color: #fff;
}

.blog-content-1 .blog-banner > .blog-banner-title > a:hover {
    color: #3598DC;
}

/* Blog content layout 2 — single post */
.blog-content-2 .blog-single-content {
    padding: 40px 30px 15px 30px;
    background-color: #fff;
}

.blog-content-2 .blog-single-content > .blog-single-head > .blog-single-head-title {
    font-size: 25px;
    font-weight: 600;
    color: #4e5a64;
    margin: 0 0 40px 0;
    display: inline-block;
}

.blog-content-2 .blog-single-content > .blog-single-head > .blog-single-head-date {
    float: right;
    font-size: 13px;
    font-weight: 600;
    margin-top: 7px;
}

.blog-content-2 .blog-single-content > .blog-single-head > .blog-single-head-date > i {
    margin-right: 5px;
}

.blog-content-2 .blog-single-content > .blog-single-head > .blog-single-head-date > a {
    color: #9aa5b2;
}

.blog-content-2 .blog-single-content > .blog-single-head > .blog-single-head-date > a:hover {
    color: #3598DC;
    text-decoration: none;
}

.blog-content-2 .blog-single-content > .blog-single-img {
    margin: 0 0 35px 0;
}

.blog-content-2 .blog-single-content > .blog-single-img > img {
    width: 100%;
}

.blog-content-2 .blog-single-content > .blog-single-desc > p {
    margin: 0 0 35px 0;
    font-size: 16px;
    color: #7e8691;
    line-height: 24px;
}

.blog-content-2 .blog-single-content > .blog-single-foot {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #f0f1f2;
    padding: 20px 0 25px 0;
    margin-bottom: 20px;
}

.blog-content-2 .blog-single-content > .blog-single-foot > .blog-post-tags {
    text-align: left;
    padding: 0;
    margin: 0;
}

.blog-content-2 .blog-single-content > .blog-single-foot > .blog-post-tags > li {
    list-style: none;
    display: inline-block;
    margin-right: 5px;
}

.blog-content-2 .blog-single-content > .blog-single-foot > .blog-post-tags > li > a {
    background-color: #f4f6f8;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 7px 10px;
}

.blog-content-2 .blog-single-content > .blog-single-foot > .blog-post-tags > li > a:hover {
    background-color: #3598DC;
    color: #fff;
    text-decoration: none;
}

.blog-content-2 .blog-single-content > .blog-single-foot > .blog-post-tags > li:last-child {
    margin-right: 0;
}

.blog-content-2 .blog-single-content .blog-comments {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    margin: 6px 10px 3px 0;
}

.blog-content-2 .blog-single-content .blog-comments .blog-comments-title {
    font-size: 20px;
}

.blog-content-2 .blog-single-content .blog-comments .c-comment-list {
    margin-bottom: 60px;
}

.blog-content-2 .blog-single-content .blog-comments .c-comment-list .media {
    margin: 30px 0;
}

.blog-content-2 .blog-single-content .blog-comments .c-comment-list .media .media-body > .media:last-child {
    margin-bottom: 0;
}

.blog-content-2 .blog-single-content .blog-comments .c-comment-list .media-object {
    height: 50px;
    width: 50px;
    border-radius: 50px !important;
}

.blog-content-2 .blog-single-content .blog-comments .c-comment-list .media-heading > a {
    color: #9aa5b2;
    font-weight: 600;
}

.blog-content-2 .blog-single-content .blog-comments .c-comment-list .media-heading > a:hover {
    color: #3598DC;
    text-decoration: none;
}

.blog-content-2 .blog-single-content .blog-comments .c-comment-list .media-heading > .c-date {
    font-size: 14px;
}

.blog-content-2 .blog-single-content .blog-comments i {
    position: relative;
    top: 2px;
}

.blog-content-2 .blog-single-content .blog-comments input:focus,
.blog-content-2 .blog-single-content .blog-comments textarea:focus {
    outline: 0;
    border: 1px solid #ccc;
}

/* Blog sidebar */
.blog-content-2 .blog-single-sidebar {
    padding: 40px 30px;
    background-color: #fff;
}

.blog-content-2 .blog-single-sidebar .blog-sidebar-title {
    font-weight: 600;
    font-size: 14px;
    color: #4e5a64;
    letter-spacing: 1px;
    margin-top: 40px;
    margin-bottom: 30px;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-search input {
    font-size: 14px;
    color: var(--color-text-muted);
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-search input:focus {
    outline: 0;
    border: 1px solid #ccc;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-recent > ul {
    padding: 0;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-recent > ul > li {
    list-style: none;
    margin-bottom: 10px;
    position: relative;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-recent > ul > li > a {
    color: #49a7fa;
    font-size: 16px;
    padding-left: 20px;
    display: block;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-recent > ul > li > a:hover {
    text-decoration: none;
    color: #3598DC;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-recent > ul > li:before {
    content: "\2022";
    color: #dae0e5;
    font-size: 30px;
    position: absolute;
    margin-top: -9px;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-tags .blog-post-tags {
    text-align: left;
    padding: 0;
    margin: 20px 0 0 0;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-tags .blog-post-tags > li {
    list-style: none;
    display: inline-block;
    margin: 0 5px 20px 0;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-tags .blog-post-tags > li > a {
    background-color: #f4f6f8;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 7px 10px;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-tags .blog-post-tags > li > a:hover {
    background-color: #3598DC;
    color: #fff;
    text-decoration: none;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-tags .blog-post-tags > li:last-child {
    margin-right: 0;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-links > ul {
    padding: 0;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-links > ul > li {
    list-style: none;
    border-bottom: 1px solid;
    border-color: #f0f1f2;
    padding: 20px 0;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-links > ul > li > a {
    color: #49a7fa;
    font-size: 16px;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-links > ul > li > a:hover {
    text-decoration: none;
    color: #3598DC;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-links > ul > li:first-child {
    padding-top: 0;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-links > ul > li:last-child {
    border: none;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-ui .ui-margin {
    margin: 0;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-ui .ui-padding {
    padding: 0 5px 5px 0;
}

.blog-content-2 .blog-single-sidebar > .blog-single-sidebar-ui img {
    width: 100%;
}

/* Blog responsive */
@media (max-width: 991px) {
    .blog-content-1 .blog-post-lg > .blog-img-thumb {
        height: 330px;
    }

    .blog-content-1 .blog-post-sm > .blog-img-thumb {
        height: 170px;
    }

    .blog-content-1 .blog-video > .blog-img-thumb {
        height: 301px;
    }

    .blog-content-1 .blog-video > .blog-img-thumb img {
        height: auto;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .blog-content-1 .blog-post-lg > .blog-post-content > .blog-post-foot {
        text-align: left;
    }

    .blog-content-1 .blog-post-lg > .blog-post-content > .blog-post-foot > .blog-post-tags {
        float: none;
    }

    .blog-content-1 .blog-post-lg > .blog-post-content > .blog-post-foot > .blog-post-meta {
        margin-right: 10px;
        margin-top: 10px;
    }

    .blog-content-2 .blog-single-content > .blog-single-head > .blog-single-head-title {
        margin-bottom: 0;
    }

    .blog-content-2 .blog-single-content > .blog-single-head > .blog-single-head-date {
        float: none;
        margin-bottom: 40px;
    }
}

/* ------------------------------------------------------------------
   Tables inside a blog article
   ------------------------------------------------------------------
   Blog content is stored as raw HTML, so a table arrives as a bare
   <table> with no class of ours on it. Two things then went wrong and
   both are visible on /blog/mtd-for-income-tax-what-uk-sole-traders-need-to-know/:

   1. The Metronic theme forces `table-layout: fixed` on tables with
      enough specificity to beat a plain class selector, so a narrow
      first column collapsed and a long header ("You're in scope if
      your turnover is over...") was clipped mid-word.
   2. Metronic also right-aligns cells that look numeric, so the £
      figures and the deadline dates drifted right while their headers
      stayed left.

   Seeded posts also carry border="1" cellpadding="6" cellspacing="0" —
   HTML 3.2 presentational attributes that paint a black grid. The
   attributes are being stripped from the two posts that have them, but
   these rules override them anyway, so a future post pasted in with
   the same markup still renders correctly.

   Deliberately mirrors .gm-table in pages/guides.css. Guides and blog
   articles are the same kind of reading surface and a table should not
   look like it came from a different product depending on which one
   the reader landed on. The gm- custom properties are scoped to
   .gm-root, so the underlying globals are used here instead.
   ------------------------------------------------------------------ */

.top-section.blog-post-content table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
    /* Beat the theme's fixed layout so columns size to their content. */
    table-layout: auto !important;
    border: 0;
}

.top-section.blog-post-content table th,
.top-section.blog-post-content table td {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle, #ebedf2);
    /* !important on both: Bootstrap's table styles and Metronic's
       numeric right-alignment both target bare td/th and would
       otherwise win. Same reason .gm-table carries them. */
    text-align: left !important;
    vertical-align: top !important;
}

.top-section.blog-post-content table th {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-muted, #666666);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* A table is the one block that cannot reflow, so let it scroll rather
   than force the whole article to scroll sideways on a phone. */
@media (max-width: 767px) {
    .top-section.blog-post-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------
   Blog listing: equal-height cards, "Read more" pinned to the bottom
   ------------------------------------------------------------------
   The cards were as tall as their own intro text, so a row of three
   ended in three different places and "Read more" sat at a different
   height in each. Intro lengths are not going to be equalised by
   editing, so the layout has to absorb it.

   Done in CSS rather than by opting into the theme's own height
   equaliser. app.js has one (`data-auto-height` + `data-height` on
   each item, and the wrapper here already carries the parent
   attribute) but it measures on load and on resize, which means a
   visible reflow after paint and nothing at all if the script fails.
   Flexbox does it before first paint and cannot fall out of sync.

   Bootstrap 3's .row is float-based; a flex container ignores the
   floats on its children and honours their widths, so col-lg-4 /
   col-sm-6 keep working untouched.

   Scoped to this listing. .blog-post-content and .blog-post-foot are
   used by the single-post view and the sidebar as well, and those must
   not become flex containers.
   ------------------------------------------------------------------ */

.blog-page.blog-content-1 > .container > .row {
    display: flex;
    flex-wrap: wrap;
}

.blog-page.blog-content-1 > .container > .row > [class*="col-"] {
    display: flex;
}

/* The card fills the column, and stacks so the foot can be pushed down. */
.blog-page.blog-content-1 > .container > .row .blog-post-sm {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.blog-page.blog-content-1 > .container > .row .blog-post-sm > .blog-post-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* The intro takes the slack, so every foot lands on the same line. */
.blog-page.blog-content-1 > .container > .row .blog-post-sm .blog-post-desc {
    flex: 1 1 auto;
}

.blog-page.blog-content-1 > .container > .row .blog-post-sm .blog-post-foot {
    margin-top: auto;
}

/* The thumbnail is a fixed 200px box, but the image inside it was only
   width-constrained, so how much got cropped depended on the source
   aspect ratio: the older headers are 16:9 and anything from
   gpt-image-1 is 3:2, which is noticeably taller at the same width.
   Filling the box and cropping to it makes the ratio of the source
   stop mattering, which is worth more than matching ratios by hand
   every time an image is generated. */
.blog-page.blog-content-1 > .container > .row .blog-post-sm > .blog-img-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}