/* ============================================================================
   single-blog.css — JP-359 "Restyle module: Blog single"
   Figma: VSSY3wxlC31HrYDwwmHmrv node 382:15151 (Single-Post Desktop 1440)

   Rebuilds the blog single-post template: left filter sidebar (210 px) +
   100 px gutter + 600 px article column on a JTL-Light-Sand page background.
   Hero image is rounded with a floating "Jetzt teilen" pill; body uses the
   Inter type ramp; footer shows category + share row.

   Scoped under `.blog-single-redesign` (the wrapper section added in
   theme/jtl/single-blog.php) so rules cannot leak onto other pages.

   Enqueued by includes/general.php only on single 'blog' posts, depends on
   'app' so it loads after dist/app.css and wins specificity fights against
   the theme's global styles.

   Design tokens (read from Figma get_design_context):
     --jtl-light-sand  #eeeee7   page background
     --jtl-dark-blue   #0b1b45   headings, body copy
     --jtl-tech-blue   #2722f8   overline + active accents
     --jtl-light-blue  #89d2ff   CTA box background
     --jtl-orange      #fb581f   CTA primary button
     --jtl-white       #ffffff   surfaces
   ========================================================================== */

.blog-single-redesign {
    --bsr-sand:      #eeeee7;
    --bsr-dark-blue: #0b1b45;
    --bsr-tech-blue: #2722f8;
    --bsr-light-blue:#89d2ff;
    --bsr-orange:    #fb581f;
    --bsr-white:     #ffffff;
    --bsr-grey:      #767676;

    background-color: var(--bsr-sand);
    padding: 80px 64px;
    font-family: "Inter", "Proxima Nova", Arial, sans-serif;
    color: var(--bsr-dark-blue);
}

.blog-single-redesign *,
.blog-single-redesign *::before,
.blog-single-redesign *::after {
    box-sizing: border-box;
}

.blog-single-redesign svg {
    display: block;
    flex: 0 0 auto;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.blog-single-redesign__grid {
    max-width: 1312px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 304px 1fr;
    gap: 144px;
    align-items: start;
}

.blog-single-redesign__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 32px;
}

.blog-single-redesign__article {
    max-width: 864px;
}

/* ── Sidebar widget shell ───────────────────────────────────────────────── */
.bsr-widget {
    background-color: var(--bsr-white);
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bsr-widget__title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--bsr-dark-blue);
}

.bsr-widget__title svg {
    width: 18px;
    height: 18px;
    color: var(--bsr-dark-blue);
}

.bsr-widget__more {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--bsr-dark-blue);
    text-decoration: none;
}

.bsr-widget__more svg {
    width: 16px;
    height: 12px;
}

/* ── Author card ────────────────────────────────────────────────────────── */
.bsr-author__row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bsr-author__avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    flex: 0 0 auto;
}

.bsr-author__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bsr-author__name {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--bsr-dark-blue);
}

.bsr-author__role {
    font-size: 14px;
    line-height: 20px;
    color: var(--bsr-dark-blue);
}

.bsr-author__tags {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    padding-top: 4px;
}

.bsr-author__tags-icon {
    width: 18px;
    height: 18px;
    color: var(--bsr-tech-blue);
}

.bsr-author__tags-icon svg {
    width: 100%;
    height: 100%;
}

.bsr-author__tags-list {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--bsr-dark-blue);
}

.bsr-author__tags-list a {
    color: inherit;
    text-decoration: underline;
}

/* ── Pill controls (Kategorien dropdown + Suche box) ───────────────────── */
.bsr-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--bsr-dark-blue);
    border-radius: 24px;
    padding: 10px 18px;
    font-size: 14px;
    line-height: 20px;
    color: var(--bsr-dark-blue);
    text-decoration: none;
    background: transparent;
}

.bsr-pill svg {
    width: 12px;
    height: 12px;
    color: var(--bsr-dark-blue);
}

/* The theme does not define WordPress core's .screen-reader-text class, and
   archive-blog.css only defines it under .blog-archive-redesign — which does not
   apply here. Without this, the <label for="bsr-category-select"> that makes the
   dropdown accessible renders as visible body copy ("Select category") above the
   pill. Same rule, scoped to this template. */
.blog-single-redesign .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Kategorien: a native <select> wearing the pill.
   It replaced a dead <a class="bsr-pill"> that carried an inline chevron <svg>;
   a <select> can't have element children, so the chevron becomes a background
   image (same data-URI the archive sidebar's .bar-select uses) and the UA's own
   arrow is switched off with `appearance:none`.
   `width:100%` because .bsr-pill's `display:flex` does not stretch a select the
   way it stretches the <a>. */
.bsr-select {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230b1b45' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 40px;
    text-overflow: ellipsis;
}

.bsr-pill--search input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--bsr-dark-blue);
    font: inherit;
    outline: none;
    min-width: 0;
}

.bsr-pill--search input::placeholder {
    color: var(--bsr-dark-blue);
    opacity: .8;
}

.bsr-pill--search button {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--bsr-dark-blue);
    cursor: pointer;
}

.bsr-pill--search button svg {
    width: 16px;
    height: 16px;
}

/* ── Themen list ───────────────────────────────────────────────────────── */
.bsr-themen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bsr-themen a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--bsr-dark-blue);
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
}

.bsr-themen a:hover {
    background-color: var(--bsr-sand);
}

.bsr-themen b {
    font-size: 12px;
    font-weight: 600;
    color: var(--bsr-tech-blue);
}

/* ── Social row ───────────────────────────────────────────────────────── */
.bsr-social {
    list-style: none;
    margin: 0;
    padding: 6px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bsr-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--bsr-dark-blue);
    font-size: 20px;
    text-decoration: none;
}

.bsr-social li + li {
    border-left: 1px solid #d6d6cf;
    padding-left: 8px;
    margin-left: 8px;
    flex: 1 1 0;
}

/* ── Hero image + floating share pill ─────────────────────────────────── */
.bsr-hero {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--bsr-tech-blue);
    aspect-ratio: 600 / 271;
}

.bsr-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bsr-share-pill {
    position: absolute;
    right: 16px;
    bottom: -20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    background-color: var(--bsr-white);
    border-radius: 24px;
    color: var(--bsr-dark-blue);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(11, 27, 69, .08);
}

.bsr-share-pill svg {
    width: 16px;
    height: 16px;
    color: var(--bsr-dark-blue);
}

/* ── Headline block ───────────────────────────────────────────────────── */
.bsr-head {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bsr-overline {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--bsr-tech-blue);
}

.bsr-title {
    margin: 0;
    font-family: "Kurdis Wide", "Kurdis", "Inter", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    color: var(--bsr-dark-blue);
}

/* ── Body content ─────────────────────────────────────────────────────── */
.bsr-body {
    margin-top: 32px;
    font-size: 18px;
    line-height: 28px;
    color: var(--bsr-dark-blue);
}

.bsr-body > * {
    margin: 0 0 24px;
}

.bsr-body h2 {
    margin-top: 48px;
    font-family: "Kurdis Wide", "Kurdis", "Inter", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: .4px;
    color: var(--bsr-dark-blue);
}

.bsr-body h3 {
    margin-top: 32px;
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    color: var(--bsr-dark-blue);
}

.bsr-body h4 {
    margin-top: 24px;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    color: var(--bsr-dark-blue);
}

.bsr-body p,
.bsr-body ul,
.bsr-body ol {
    color: var(--bsr-dark-blue);
}

.bsr-body strong {
    color: var(--bsr-dark-blue);
}

.bsr-body ul,
.bsr-body ol {
    padding-left: 24px;
}

.bsr-body li {
    margin-bottom: 8px;
}

.bsr-body a {
    color: var(--bsr-tech-blue);
    text-decoration: underline;
}

/* Inline images + WP figures: rounded, full column width */
.bsr-body img,
.bsr-body figure,
.bsr-body .wp-caption,
.bsr-body picture {
    max-width: 100%;
    height: auto;
    border-radius: 24px;
    margin: 32px 0;
    display: block;
}

.bsr-body figure img,
.bsr-body picture img {
    border-radius: 24px;
}

.bsr-body blockquote {
    margin: 32px 0;
    padding: 24px 32px;
    border-left: 4px solid var(--bsr-tech-blue);
    background-color: var(--bsr-white);
    border-radius: 0 16px 16px 0;
    font-style: italic;
}

/* WP/Bootstrap "btn-primary" used by the cleanup script's whitepaper stubs */
.bsr-body .btn,
.bsr-body .btn-primary {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--bsr-orange);
    color: var(--bsr-dark-blue);
    font-weight: 600;
    border-radius: 32px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.bsr-body .btn:hover,
.bsr-body .btn-primary:hover {
    color: var(--bsr-white);
    background-color: var(--bsr-dark-blue);
}

.bsr-body .lead {
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
}

/* ── Article footer (categories + share) ───────────────────────────────── */
.bsr-foot {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #d6d6cf;
}

.bsr-foot__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.bsr-foot__cats {
    font-size: 14px;
    line-height: 20px;
    color: var(--bsr-dark-blue);
}

.bsr-foot__cats a {
    color: var(--bsr-tech-blue);
    text-decoration: none;
}

.bsr-foot__cats a + a::before {
    content: ", ";
    color: var(--bsr-dark-blue);
}

.bsr-foot__label {
    font-weight: 600;
    margin-right: 8px;
}

.bsr-foot__share {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bsr-foot__share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bsr-white);
    color: var(--bsr-dark-blue);
    font-size: 16px;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.bsr-foot__share a:hover {
    background-color: var(--bsr-dark-blue);
    color: var(--bsr-white);
}

/* ── Responsive: stack at < 992 px, tighten padding < 768 px ──────────── */
@media (max-width: 991.98px) {
    .blog-single-redesign {
        padding: 48px 24px;
    }

    .blog-single-redesign__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .blog-single-redesign__sidebar {
        position: static;
        order: 2;
    }

    .blog-single-redesign__article {
        order: 1;
        max-width: none;
    }

    .bsr-title {
        font-size: 32px;
        line-height: 40px;
    }

    .bsr-body h2 {
        font-size: 24px;
        line-height: 32px;
    }
}

@media (max-width: 575.98px) {
    .blog-single-redesign {
        padding: 32px 16px;
    }

    .bsr-hero {
        border-radius: 16px;
    }

    .bsr-share-pill {
        right: 12px;
        bottom: -16px;
        padding: 6px 14px;
        font-size: 12px;
    }

    .bsr-title {
        font-size: 26px;
        line-height: 34px;
    }
}