/* Single post — layout follows the Figma article page (node 479:5935):
   cover 800 × 1000 centred, then an 862 / 306 two-column grid. */

/* ── Cover ───────────────────────────────────────────────────────────────── */
/* 800px wide as in the design; the 40px of padding keeps the image itself at
   800 rather than shrinking it */
.entry__cover {
    width:     100%;
    max-width: 840px;
    margin:    40px auto 0;
    padding:   0 20px;
}
/* The design's cover is a portrait magazine shot; forcing 4:5 on the landscape
   photos this site actually uses crops them to nothing, so the ratio is left
   to the image and only the width is fixed */
.entry__cover-img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: var(--radius);
}

/* ── Two columns ─────────────────────────────────────────────────────────── */
.post-layout { padding: 60px 0 80px; }

.post-layout .container {
    display:               grid;
    grid-template-columns: minmax(0, 862fr) minmax(0, 306fr);
    gap:                   112px;
    align-items:           start;
}

/* ── Article ─────────────────────────────────────────────────────────────── */
.entry__title {
    margin:      0 0 32px;
    font-size:   48px;
    line-height: 58px;
    font-weight: 500;
}

.entry__content {
    font-size:   16px;
    line-height: 26px;
}
.entry__content > * + * { margin-top: 20px; }

/* Gutenberg tags its headings .wp-block-heading; the bare selectors cover
   classic-editor content written before the block editor */
.entry__content h2,
.entry__content .wp-block-heading {
    margin-top:  36px;
    font-size:   24px;
    line-height: 32px;
    font-weight: 700;
}
.entry__content h3,
.entry__content h3.wp-block-heading {
    margin-top:  28px;
    font-size:   20px;
    line-height: 28px;
    font-weight: 700;
}
.entry__content h4,
.entry__content h4.wp-block-heading {
    margin-top:  24px;
    font-size:   16px;
    line-height: 24px;
    font-weight: 700;
}

.entry__content ul,
.entry__content ol { padding-left: 22px; }
.entry__content li + li { margin-top: 6px; }
.entry__content ul { list-style: disc; }
.entry__content ol { list-style: decimal; }

.entry__content a {
    color:                 var(--color-primary-dark);
    text-decoration:       underline;
    text-underline-offset: 3px;
}
.entry__content a:hover { color: var(--color-primary); }

.entry__content strong { font-weight: 700; }

/* The design ends the article with a pink call-out */
.entry__content blockquote {
    margin-left:   0;
    padding:       20px 24px;
    border:        none;
    border-radius: var(--radius-box);
    background:    var(--color-pink-50);
    font-size:     16px;
    line-height:   26px;
    font-style:    italic;
    color:         var(--color-text);
}

.entry__content img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: var(--radius-img);
}
.entry__content figcaption {
    margin-top:  8px;
    font-size:   13px;
    line-height: 18px;
    text-align:  center;
    color:       var(--color-muted);
}

.entry__content table {
    width:           100%;
    border-collapse: collapse;
}
.entry__content th,
.entry__content td {
    padding:       10px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align:    left;
}

/* ── Article footer ──────────────────────────────────────────────────────── */
.entry__footer {
    margin-top:    40px;
    padding-top:   32px;
    border-top:    1px solid var(--color-border);
}

.entry__meta {
    margin:      0 0 24px;
    font-size:   13px;
    line-height: 20px;
    color:       #83858b;
}
.entry__meta-value { font-weight: 600; color: var(--color-text); }

.entry__tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
}

/* ── Tag pill — shared by the article footer and the sidebar cloud ───────── */
.entry__tags a,
.tag-pill {
    display:         inline-flex;
    align-items:     center;
    padding:         6px 8px;
    border-radius:   4px;
    background:      #f3f3f3;
    font-size:       14px;
    line-height:     19px;
    font-weight:     500;
    text-decoration: none;
    color:           #5e5e5e;
    transition:      background var(--transition), color var(--transition);
}
.entry__tags a:hover,
.tag-pill:hover { background: var(--color-primary); color: #ffffff; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.post-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    position:       sticky;
    top:            calc(var(--topbar-height) + var(--header-height) + var(--header-offset) + 20px);
}

.widget-card {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    padding:        30px 20px;
    border-radius:  var(--radius-img);
    background:     #fafafa;
}

.widget-card__title {
    margin:         0;
    font-size:      20px;
    line-height:    27px;
    font-weight:    700;
    text-transform: uppercase;
    color:          #000000;
}

.widget-card__more {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         10px 16px;
    border:          1px solid var(--color-primary);
    border-radius:   var(--radius-box);
    font-size:       14px;
    line-height:     18px;
    font-weight:     700;
    text-decoration: none;
    color:           var(--color-primary);
    transition:      background var(--transition), color var(--transition);
}
.widget-card__more:hover { background: var(--color-primary); color: #ffffff; }

/* ── Last posts ──────────────────────────────────────────────────────────── */
.last-posts {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin:         0;
    padding:        0;
    list-style:     none;
}
/* Each row is separated by a rule above it, as in the design */
.last-posts__item { padding-top: 10px; border-top: 1px solid var(--color-border); }

.last-posts__link {
    display:         flex;
    gap:             20px;
    text-decoration: none;
}

.last-posts__thumb {
    flex:          none;
    width:         60px;
    height:        50px;
    overflow:      hidden;
    border-radius: var(--radius-box);
}
.last-posts__thumb-img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.last-posts__body {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0;
}
.last-posts__title {
    font-size:   16px;
    line-height: 20px;
    font-weight: 800;
    color:       #000000;
    transition:  color var(--transition);
}
.last-posts__link:hover .last-posts__title { color: var(--color-primary); }
.last-posts__meta {
    font-size:   12px;
    line-height: 16px;
    color:       #83858b;
}

.tag-cloud {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
}

/* ── Similar blog posts ──────────────────────────────────────────────────── */
.related { padding: 0 0 100px; }

.related .container {
    display:        flex;
    flex-direction: column;
    gap:            32px;
}

.related__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
}
.related__title {
    margin:      0;
    font-size:   28px;
    line-height: 36px;
    font-weight: 700;
}

.related__nav {
    display: flex;
    gap:     12px;
}
.related__arrow {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    padding:         0;
    border:          1px solid var(--color-border);
    border-radius:   50%;
    background:      #ffffff;
    color:           var(--color-text);
    cursor:          pointer;
    transition:      background var(--transition), border-color var(--transition), color var(--transition);
}
.related__arrow:hover {
    border-color: var(--color-primary);
    background:   var(--color-primary);
    color:        #ffffff;
}

/* The cards themselves are the shared .post-card from css/main.css — the
   slider only has to lay them out and level their heights */
.related__slide { padding: 0 15px; }
.related__slider .slick-list  { margin: 0 -15px; }
.related__slider .slick-track { display: flex; align-items: stretch; }
/* Slick floats its slides and pins them to height:100%; both opt the slide out
   of the flex track's stretch, so cards with a longer excerpt end up taller */
.related__slider .slick-slide {
    display: flex;
    float:   none;
    height:  auto;
}
.related__slider .post-card { width: 100%; }

/* Before Slick initialises, keep the slides from stacking full-width */
.related__slider:not(.slick-initialized) { display: flex; overflow: hidden; }
.related__slider:not(.slick-initialized) .related__slide { flex: 0 0 25%; }

@media (max-width: 1024px) {
    .entry__cover { margin-top: 32px; }
    .post-layout { padding: 40px 0 60px; }
    /* No room for a column beside the text — the widgets move underneath */
    .post-layout .container {
        grid-template-columns: 1fr;
        gap:                   48px;
    }
    .post-sidebar { position: static; }

    .entry__title { font-size: 36px; line-height: 44px; margin-bottom: 24px; }

    .related { padding: 0 0 80px; }
    .related__title { font-size: 24px; line-height: 32px; }
    .related__slider:not(.slick-initialized) .related__slide { flex: 0 0 50%; }
}

@media (max-width: 767px) {
    .entry__cover { margin-top: 24px; }
    .post-layout { padding: 32px 0 48px; }
    .entry__title { font-size: 28px; line-height: 34px; }

    .related { padding: 0 0 60px; }
    .related__slide { padding: 0 8px; }
    .related__slider .slick-list { margin: 0 -8px; }
    .related__slider:not(.slick-initialized) .related__slide { flex: 0 0 100%; }
}