/*
 * Radimet blog styles (blog.html, blog_post.html and the blog sections on
 * search and category pages). Plain CSS; every selector is scoped to
 * #site.blog, #site.blogpost or a .blog- class.
 *
 * Type and colours follow the theme: text keeps the theme body size and
 * line-height (16px), body h2 the theme h2; links, buttons, borders and focus
 * rings use the theme blue #3774f3; prose links keep the theme `p a` style.
 * Panel #dce3ed, grey band #eef1f4 and card border #c6ced9 are the colours
 * of /om-radon and the FAQ.
 */

/* Shared: meta line, read-more link, intro, focus */

.blog-meta {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
}

.blog-meta > * + *::before {
    content: "\00b7";
    margin: 0 8px;
}

.blog-meta a {
    color: #3774f3;
}

.blog-meta a:hover,
.blog-meta a:focus {
    color: #3774f3;
    text-decoration: underline;
}

/* 44px tap target; the negative margin keeps the line box unchanged. */
.blog-read-more {
    color: #3774f3;
    display: inline-block;
    font-weight: bold;
    margin: -12px 0;
    padding: 12px 0;
}

.blog-read-more:hover,
.blog-read-more:focus {
    color: #3774f3;
    text-decoration: underline;
}

.blog-read-more .fa {
    margin-left: 5px;
}

.blog-intro {
    margin-bottom: 30px;
}

.blog-teaser a:focus-visible,
.blog-pager a:focus-visible,
.blog-categories a:focus-visible,
.blog-cta a:focus-visible,
.blog-meta a:focus-visible,
#site.blogpost .blog-back a:focus-visible {
    outline: 2px solid #3774f3;
    outline-offset: 2px;
}

/* Blog list (blog.html): grey band with white cards */

#site.blog #sitecontent {
    background-color: #eef1f4;
}

#site.blog #page-content {
    padding-bottom: 50px;
}

.blog-categories-nav {
    margin-bottom: 30px;
}

.blog-categories {
    margin: 0;
}

.blog-categories > li {
    padding: 0 10px 10px 0;
}

.blog-categories > li > a {
    background-color: #fff;
    border: 1px solid #3774f3;
    border-radius: 20px;
    color: #3774f3;
    display: inline-block;
    padding: 9px 15px;
}

.blog-categories > li > a:hover,
.blog-categories > li > a:focus,
.blog-categories > li.active > a {
    background-color: #3774f3;
    color: #fff;
}

.blog-list {
    margin: 0 0 30px;
}

.blog-list:empty {
    margin-bottom: 0;
}

.blog-list-item {
    background-color: #fff;
    border: 1px solid #c6ced9;
    padding: 30px;
}

.blog-list-item + .blog-list-item {
    margin-top: 24px;
}

.blog-list-item:hover,
.blog-list-item:focus-within {
    border-color: #3774f3;
}

.blog-teaser-list::after {
    clear: both;
    content: "";
    display: table;
}

.blog-teaser-list .blog-teaser-image {
    float: left;
    margin-right: 25px;
    width: 40%;
}

/* flow-root (not overflow: hidden) clears the floated image without
   clipping the read-more tap target or the focus ring. */
.blog-teaser-list .blog-teaser-content {
    display: flow-root;
}

.blog-teaser-title {
    margin-top: 0;
}

.blog-teaser-list .blog-teaser-title {
    font-size: 26px;
}

.blog-teaser-title a {
    color: #333;
}

.blog-teaser-title a:hover,
.blog-teaser-title a:focus {
    color: #3774f3;
}

.blog-teaser-image img {
    width: 100%;
}

.blog-pager {
    margin: 0 0 20px;
    text-align: center;
}

/* styles.css .btn-blue: 10px padding + 22px line + 2px border = 44px. */
.blog-pager .btn-blue {
    border-radius: 20px;
    line-height: 22px;
}

.blog-pager .btn-blue,
.blog-pager .btn-blue:hover,
.blog-pager .btn-blue:focus {
    color: #fff;
}

.blog-pager .btn-blue[aria-busy="true"] {
    cursor: progress;
    opacity: 0.7;
}

/* 44px tap target; margin + padding = the old 10px margin. */
.blog-pager-prev {
    color: #3774f3;
    display: inline-block;
    margin: -2px 15px;
    padding: 12px 0;
    text-decoration: underline;
}

.blog-status {
    margin-bottom: 40px;
    text-align: center;
}

/* Kept rendered (not display: none) so the aria-live region announces. */
.blog-status:empty {
    margin-bottom: 0;
}

/* Server-rendered empty and past-end messages, in the card style. */
#site.blog #blog-list-footer > .blog-status {
    background-color: #fff;
    border: 1px solid #c6ced9;
    padding: 30px;
}

/* 44px tap target; the negative margin keeps the line box unchanged. */
#site.blog #blog-list-footer > .blog-status a {
    color: #3774f3;
    display: inline-block;
    margin: -12px 0;
    padding: 12px 0;
}

@media (max-width: 767px) {
    .blog-categories > li > a {
        padding: 11px 15px;
    }

    .blog-teaser-list .blog-teaser-image {
        float: none;
        display: block;
        margin: 0 0 15px;
        width: 100%;
    }

    .blog-teaser-list .blog-teaser-title {
        font-size: 23px;
    }

    .blog-list-item {
        padding: 20px;
    }

    #site.blog #blog-list-footer > .blog-status {
        padding: 20px;
    }
}

/* Card grid (related posts, search results, category block) */

.blog-section {
    padding: 30px 0 40px;
}

.blog-section-title {
    margin-bottom: 30px;
    text-align: left;
}

.blog-cards {
    margin-bottom: 0;
}

.blog-card {
    margin-bottom: 30px;
}

/* One card: up to 750px wide (plus the 15px column gutters), left aligned. */
.blog-cards-1 > .blog-card {
    max-width: 780px;
    width: 100%;
}

/* On the post page one related card uses the post's grid
   (col-md-8 col-md-offset-2): full row below 992px, see the 992px block. */
@media (min-width: 992px) {
    #site.blogpost .blog-cards-1 > .blog-card {
        margin-left: 16.66666667%;
        max-width: none;
        width: 66.66666667%;
    }

    /* The title sits in the container, not the row: same left edge as the column. */
    #site.blogpost .blog-section-1 .blog-section-title {
        margin-left: calc((100% + 30px) / 6);
    }
}

.blog-teaser-card {
    background-color: #fff;
    border: 1px solid #c6ced9;
    padding: 20px;
    width: 100%;
}

.blog-teaser-card:hover,
.blog-teaser-card:focus-within {
    border-color: #3774f3;
}

.blog-teaser-card .blog-teaser-image {
    display: block;
    margin: -20px -20px 15px;
}

.blog-teaser-card .blog-teaser-title {
    font-size: 20px;
}

@media (min-width: 768px) {
    /* Cards in a row share one height; "Læs mere" sits at the bottom. */
    .blog-teaser-card {
        display: flex;
        flex-direction: column;
    }

    .blog-teaser-card .blog-teaser-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .blog-teaser-card .blog-read-more {
        align-self: flex-start;
        margin-top: auto;
    }

    /* One card: image beside the text instead of a tall image on top. */
    .blog-cards-1 .blog-teaser-card {
        display: flex;
        flex-direction: row;
    }

    .blog-cards-1 .blog-teaser-card .blog-teaser-image {
        flex: 0 0 40%;
        margin: -20px 20px -20px -20px;
    }

    .blog-cards-1 .blog-teaser-card .blog-teaser-image img {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    .blog-cards-1 .blog-teaser-card .blog-teaser-content {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Equal card heights per row. */
    .blog-cards {
        display: flex;
        flex-wrap: wrap;
    }

    .blog-cards::before,
    .blog-cards::after {
        display: none;
    }

    .blog-card {
        display: flex;
    }

    .blog-cards-2 > .blog-card {
        width: 50%;
    }

    .blog-cards-3 > .blog-card:nth-child(3n+1) {
        clear: left;
    }
}

/* Three cards are too narrow below 992px: two per row there. */
@media (min-width: 768px) and (max-width: 991px) {
    .blog-cards-3 > .blog-card {
        width: 50%;
    }
}

/* Post page (blog_post.html) */

#site.blogpost .blog-post > .blog-meta {
    margin-bottom: 24px;
}

#site.blogpost .blog-post-hero {
    margin: 0 0 30px;
}

#site.blogpost .blog-post-body {
    margin-bottom: 30px;
    overflow-wrap: break-word;
}

/* Prose (p, ul, ol) keeps the theme type and full column width. Heading
   rules apply to direct children only; shortcode output (products, tiles,
   video, figures) keeps its own type. h2 uses the theme size (28px); the
   theme h3 is also 28px, so the blog h3 is smaller. */
#site.blogpost .blog-post-body > h2 {
    line-height: 1.25;
    margin: 34px 0 12px;
}

#site.blogpost .blog-post-body > h3 {
    font-size: 21px;
    line-height: 1.3;
    margin: 28px 0 10px;
}

#site.blogpost .blog-post-body > :first-child {
    margin-top: 0;
}

#site.blogpost .blog-post-body img {
    height: auto;
    max-width: 100%;
}

#site.blogpost .blog-post-body p:empty {
    display: none;
}

#site.blogpost .blog-post-body table {
    max-width: 100%;
}

#site.blogpost .blog-figure {
    margin: 20px 0;
}

#site.blogpost .blog-figure figcaption {
    color: #666;
    font-size: 14px;
    padding-top: 8px;
}

#site.blogpost .blog-video {
    margin: 20px 0;
}

#site.blogpost .blog-products-inline {
    margin-bottom: 20px;
    margin-top: 20px;
}

#site.blogpost .blog-post-gallery {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px 30px;
}

#site.blogpost .blog-post-gallery > li {
    padding: 5px;
    width: 25%;
}

#site.blogpost .blog-post-gallery a {
    display: block;
}

#site.blogpost .blog-post-gallery a:hover img,
#site.blogpost .blog-post-gallery a:focus img {
    opacity: 0.85;
}

/* Call to action after the post */

.blog-cta {
    background-color: #dce3ed;
    margin: 36px 0 30px;
    padding: 30px;
}

.blog-cta-title {
    font-size: 24px;
    margin: 0 0 10px;
}

.blog-cta-text {
    margin: 0 0 16px;
}

.blog-cta-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
}

/* radimet-styles.css underlines `p a`; the actions sit in a <p>. */
.blog-cta .btn-blue {
    border-radius: 20px;
    line-height: 22px;
    text-decoration: none;
}

.blog-cta .btn-blue,
.blog-cta .btn-blue:hover,
.blog-cta .btn-blue:focus {
    color: #fff;
}

.blog-cta-link,
.blog-cta-phone a {
    color: #3774f3;
    display: inline-block;
    font-weight: bold;
    padding: 12px 0;
    text-decoration: none;
}

.blog-cta-link:hover,
.blog-cta-link:focus,
.blog-cta-phone a:hover,
.blog-cta-phone a:focus {
    color: #3774f3;
    text-decoration: underline;
}

#site.blogpost .blog-post-edit,
#site.blogpost .blog-back {
    margin-bottom: 20px;
}

/* 44px tap target; the negative margin keeps the line box unchanged. */
/* Space above the footer, like the list page. */
#site.blogpost #page-content {
    padding-bottom: 50px;
}

#site.blogpost .blog-back a {
    color: #3774f3;
    display: inline-block;
    font-weight: bold;
    margin: -12px 0;
    padding: 12px 0;
    text-decoration: none;
}

#site.blogpost .blog-back a:hover,
#site.blogpost .blog-back a:focus {
    color: #3774f3;
    text-decoration: underline;
}

/* Route back above the h1 on mobile, where breadcrumbs are hidden. */
#site.blogpost .blog-back-top {
    display: none;
}

#site.blogpost #blog-post-products {
    background-color: #eef1f4;
}

@media (max-width: 767px) {
    #site.blogpost .blog-back-top {
        display: block;
    }

    #site.blogpost .blog-post-body > h2 {
        margin-top: 28px;
    }

    #site.blogpost .blog-post-body > h3 {
        font-size: 19px;
    }

    #site.blogpost .blog-post-gallery > li {
        width: 50%;
    }

    .blog-cta {
        padding: 20px;
    }

    .blog-cta-title {
        font-size: 21px;
    }

    .blog-cta-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}