/**
 * BBQGuys Blog, "The Back Porch Blog"
 * Styles specifically for the blog on content pages.
 * <link rel="stylesheet" href="https://sc-site.s3.amazonaws.com/contentPages/_styles/blog.css">
 * https://cdn.shocho.co/sc-site/contentPages/_styles/blog.css (Akamai purge cache)
 * 
 */

:where(:root) {
    --blog-maxwidth-md: clamp(54rem, 30rem + 40vw, 60rem);
    --blog-maxwidth-lg: clamp(60rem, 0rem + 80vw, 72rem);
    --blog-spacer-inc: .75rem;
    --blog-spacer-xsl: calc(var(--blog-spacer-sml)/2);
    --blog-spacer-sml: calc(var(--blog-spacer-inc)/2);
    --blog-spacer-med: var(--blog-spacer-inc);
    --blog-spacer-lrg: calc(var(--blog-spacer-inc)*2);
    --blog-spacer-xlg: calc(var(--blog-spacer-lrg)*2);
    --card-title-fontsize: clamp(1.125rem, 0.125rem + 1.6667vw, 1.625rem);
    --card-descr-fontsize: clamp(0.9375rem, 0.6875rem + 0.4167vw, 1.0625rem);
}

/* Blog Layout */
#bbqblog .article-body { 
    --blog-maxwidth: none;
    max-width: var(--blog-maxwidth);
}
@media (min-width: 960px) {
    #bbqblog .article-body { --blog-maxwidth: var(--blog-maxwidth-md, 90%); }
}
@media (min-width: 1200px) {
    #bbqblog .article-body { --blog-maxwidth: var(--blog-maxwidth-lg, 80%); }
}
#bbqblog .article-header { position: relative; }
@media (min-width: 37.438em) {
    #bbqblog .article-header {
        margin-bottom: 0;
        padding-top:    var(--blog-spacer-lrg);
        padding-bottom: var(--blog-spacer-lrg);
    }
    #bbqblog .article-main { padding-left: clamp(1.5rem, 3vw, 2rem); }
    #bbqblog .article-body { gap: unset; }
    #bbqblog .article-side { border-right: none; }
    #bbqblog .article-hero { padding: 0; }
    #bbqblog .article-header + .section,
    #bbqblog .article-main .section + .section { margin-top: 0; }
    #bbqblog .article-main .section.section-measure { margin-left: 0; }
}
#bbqblog.article .article-header h1 + .article-meta { padding-top: var(--blog-spacer-sml); }

/* Social sharing icon button adjustments */
#bbqblog .article-header #socialShare {
    margin-top: .375rem;
    -webkit-align-self: flex-start;
            align-self: flex-start;
}
@media (min-width: 1200px) {
    #bbqblog .article-header #socialShare {
        position: absolute;
        left: 100%;
    }
}
@media (min-width: 768px) and (max-width: 960px) {
    #bbqblog .article-header #socialShare { margin-left: 0; }
}
#bbqblog .article-header #socialShare::before { display: none; }
@media (min-width: 1440px) {
    #bbqblog .article-header #socialShare::before { display: inline-block; }
}

#bbqblog .article-side nav a:not(.btn-social) { 
    padding-top:    var(--blog-spacer-sml);
    padding-bottom: var(--blog-spacer-sml);
}
#bbqblog *:not(a, input, button, .btn) { transition: all 0.218s cubic-bezier(0.42, 0, 0.58, 1); }

#bbqblog .article-main .section + .section { padding-top: var(--blog-spacer-xlg); }

/* Blog Hub Featured 1-up Cards */
#bbqblog.hub .cards.cards-1up > .card { padding: 0; }
#bbqblog.hub .cards.cards-1up > .card .card-title {
    font-size: var(--card-title-fontsize);
}
#bbqblog.hub .cards.cards-1up > .card .card-body {
    -webkit-align-self: center;
            align-self: center;
    padding: 0 clamp(.25rem, .5vw, .375rem);
}
@media (min-width: 37.438em) {
    #bbqblog.hub .cards.cards-1up > .card .card-body {
        padding: 0 clamp(1rem, 2vw, 1.5rem);
    }
}
#bbqblog.hub .cards.cards-1up > .card .card-body .card-text { 
    font-size: var(--card-descr-fontsize);
    line-height: 1.5;
    /*margin-bottom: var(--blog-spacer-sml);*/
    display: block;
    display: -webkit-box;
    height: 2.4em;
    line-height: 1.2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: break-spaces;
}

/* Separator for all article meta text blocks */
#bbqblog .article-meta { color: #63676d; }
#bbqblog small.article-meta {
    font-size: .8125rem;
    letter-spacing: .0375em;
    line-height: 1.25;
}
/*#bbqblog.hub .cards.cards-1up > .card .article-meta,*/
#bbqblog .article-meta > * { white-space: nowrap; }
#bbqblog .article-meta > * + *::before {
    display: inline-block;
    /* purely decorative middot separator */
    content: "·" / "";
    margin-left:  var(--blog-spacer-xsl);
    margin-right: var(--blog-spacer-sml);
}
#bbqblog .article-header .article-meta > *:empty { display: none; }

/* For mobile and tablet, break the 3rd meta item to a new line and hide separator  */
@media (min-width: 768px) and (max-width: 899px) {
    #bbqblog.hub .cards.cards-1up > .card .article-meta > * + *::before { 
        content: "";
        display: block;
        margin-left:  0;
        margin-right: 0;
    }
}
/* For desktop, break the 3rd meta item to a new line and show separator  */
@media (min-width: 900px) {
    #bbqblog.hub .cards.cards-1up > .card .article-meta > * + *::before { 
        content: "·" / ""; 
        display: inline;
        margin-left:  var(--blog-spacer-xsl);
        margin-right: var(--blog-spacer-sml);
    }
}

/* For mobile and tablet, break the 3rd meta item to a new line and hide separator  */
#bbqblog.article .article-header .article-meta > * + *:nth-child(2)::before { 
    content: "";
    display: block;
    margin-left:  0;
    margin-right: 0;
}
/* For desktop, break the 3rd meta item to a new line and show separator  */
@media (min-width: 900px) {
    #bbqblog.article .article-header .article-meta > * + *:nth-child(2)::before { 
        content: "·" / ""; 
        display: inline;
        margin-left:  var(--blog-spacer-xsl);
        margin-right: var(--blog-spacer-sml);
    }
}

/* Aside/Sidebar Learning Center Banners */
#bbqblog .learningcenter-cards { padding: clamp(.5rem, 1vw, 1rem) 0; } 
#bbqblog .learningcenter-cards a.card + a.card { margin-top: clamp(1rem, 2.5vw, 2rem); }
#bbqblog .learningcenter-cards a.card img { box-shadow: 0 0 0 .1875rem rgba(0, 0, 0, .8); }
#bbqblog .learningcenter-cards a.card:hover img,
#bbqblog .learningcenter-cards a.card:focus-visible img { box-shadow: 0 0 0 .25rem #cc4d02; }
#bbqblog .learningcenter-cards a.card:focus-visible { outline-offset: 0.1875rem; }
#bbqblog .learningcenter-cards a.card img:not(.img-circle) { border-radius: .0625rem; }

/* Blog Article Styles */
/* All floated elements in article */
#bbqblog.hub .article-main *:is(.float-left, .float-right) { float: none; margin-top: 0; }
@media (min-width: 600px) {
    #bbqblog.hub .article-main *:is(.float-left, .float-right) { 
        --article-float-margin: var(--blog-spacer-lrg);
    }
    #bbqblog.hub .article-main *:is(.float-left) {  float: left; margin-right: var(--article-float-margin); }
    #bbqblog.hub .article-main *:is(.float-right) { float: right; margin-left: var(--article-float-margin); }
}
@media (min-width: 60em) {
    #bbqblog.hub .article-main *:is(.float-left, .float-right) { 
        --article-float-margin: var(--blog-spacer-xlg);
    }
}
/* Article Figure and Figcaption */
#bbqblog .article-main figure:is(.float-left, .float-right) {
    /* float: left; OR float: right; */
    display: table; /* Forces the figure width to match the image width */
}
#bbqblog .article-main figure:is(.float-left, .float-right) img {
    display: block;  /* Removes default baseline inline spacing gap */
    max-width: 100%; /* Ensures responsiveness */
    height: auto;
}
#bbqblog .article-main figure:is(.float-left, .float-right) figcaption {
    display: table-caption; /* Treats figcaption as a table caption row */
    caption-side: bottom;   /* Can be set to top or bottom */
}
#bbqblog .article-main figcaption { font-size: .875rem; letter-spacing: .01875em; padding: .375em; text-wrap: pretty; }

/* Typography adjustments */
#bbqblog .article-main *:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { clear: both; }
#bbqblog .article-main *:is(* + h2, h3, h4, h5, h6, * + .h2, .h3, .h4, .h5, .h6) { padding-top: .6em; }
#bbqblog .article-main .section > p, 
#bbqblog .article-main .section > ol > li, 
#bbqblog .article-main .section > ul > li { 
    letter-spacing: .009375em; 
    line-height: 1.618; 
}