.dbc-blog__title {
    margin-bottom: 1rem;
}

.dbc-blog__categories {
    margin-bottom: 1.5rem;
}

.dbc-blog__category-link {
    display: inline-block;
    margin-right: 1rem;
    font-weight: 600;
}

.dbc-blog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 1.5rem;
}

.dbc-post-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dbc-post-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.dbc-post-card__body {
    padding: 15px;
}

.dbc-post-card__title {
    font-size: 1.1rem;
    margin: 0 0 8px;
}

.dbc-post-card__excerpt {
    color: #555;
    font-size: 0.9rem;
}

/* Phase 9.3: ONE shared article content rail — title, date, hero, body, related
   products, and related posts are all direct children of .dbc-post with no max-width
   of their own, so they all inherit exactly the same left/right edges instead of the
   three separate widths from Phase 9.2 (1120/1050/850) that caused visual misalignment.
   Scoped entirely to .dbc-post (this module's own article page); does not touch the
   theme container or the blog-index grid above. */
.dbc-post {
    max-width: 940px;
    margin: 0 auto;
}

.dbc-post__hero {
    margin: 1.5rem auto;
}

.dbc-post__hero img,
.dbc-post__cover {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0 auto;
}

.dbc-post__date {
    color: #777;
    font-size: 0.9rem;
}

.dbc-post__body {
    line-height: 1.7;
}

/* Phase 9.1: Sedestral-migrated bodies embed images with hardcoded width/height
   attributes (e.g. width="1280" height="720") — this overrides that presentation safely
   without touching the stored HTML or the image files themselves. Phase 9.2: any image
   still inside the body (i.e. not the extracted leading hero) stays within the readable
   text column rather than escaping into the wider outer container. */
.dbc-post__body img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 1.25rem auto;
    border-radius: 6px;
}

/* Phase 9.4: Sedestral-migrated bodies rely on the theme's global list reset
   (list-style-type: none; padding-left: 0), which strips all bullets/numbering and
   indentation and made lists read as plain stacked lines. Restore standard native
   markers and comfortable spacing, scoped to article content only. */
.dbc-post__body ul,
.dbc-post__body ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.dbc-post__body ul {
    list-style-type: disc;
}

.dbc-post__body ol {
    list-style-type: decimal;
}

.dbc-post__body li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.dbc-post__body li:last-child {
    margin-bottom: 0;
}

.dbc-post__body li > ul,
.dbc-post__body li > ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.dbc-post__body ul ul {
    list-style-type: circle;
}

/* Phase 10.5: article tables had no dedicated styling at all, so they fell back to the
   browser's 1px default cell padding — long label text collided directly against the
   value column with no visible separation (e.g. "installation project10–12, where
   appropriate" reading as one merged run). table-layout: fixed + explicit column
   percentages force long text to wrap within its own cell instead of expanding the
   table or crowding the next column, which also makes horizontal scrolling unnecessary
   at any viewport width. Scoped to article content only; kept deliberately plain
   (no heavy borders/shading) to match the existing clean article style. */
.dbc-post__body table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.dbc-post__body th,
.dbc-post__body td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border-bottom: 1px solid #eee;
}

.dbc-post__body th:first-child,
.dbc-post__body td:first-child {
    width: 62%;
}

.dbc-post__body th:last-child,
.dbc-post__body td:last-child {
    width: 38%;
}

.dbc-post__body th {
    font-weight: 600;
    border-bottom: 2px solid #ddd;
}

/* Phase 9.4: a little more breathing room before headings that appear mid-flow.
   :not(:first-child) protects the Phase 9.2 body-split boundary — when the
   mid-article related-products block splits the body at an H2, that H2 becomes the
   first element of the second .dbc-post__body chunk and must keep relying on the
   Phase 9.3-tuned section spacing rather than stacking an extra top margin on it. */
.dbc-post__body h2:not(:first-child) {
    margin-top: 2.5rem;
}

.dbc-post__body h3:not(:first-child),
.dbc-post__body h4:not(:first-child) {
    margin-top: 2rem;
}

/* Phase 9.3: clear whitespace separation so these sections read as distinct blocks
   rather than feeling attached to the surrounding article text. */
.dbc-post__related-products {
    margin-top: 56px;
    margin-bottom: 64px;
}

.dbc-post__related-posts {
    margin-top: 72px;
    padding-top: 32px;
    border-top: 1px solid #eee;
}

/* Phase 9.2: fixed 3/2/1-column grids (rather than auto-fill) so a row of up to 3 cards
   always fills the full available width instead of leaving unused space on the right —
   auto-fill reserves as many minmax-width tracks as fit the container and leaves any
   beyond the actual item count blank, which is what produced the narrow-cards-plus-empty-
   space layout on both blocks. */
.dbc-post__related-products-grid,
.dbc-post__related-posts .dbc-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 1rem;
}

@media (max-width: 1024px) {
    .dbc-post__related-products-grid,
    .dbc-post__related-posts .dbc-blog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .dbc-post__related-products-grid,
    .dbc-post__related-posts .dbc-blog__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dbc-related-product {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.dbc-related-product__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    margin-bottom: 10px;
}

.dbc-related-product__name {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 10px;
    flex-grow: 1;
}

.dbc-related-product__price {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #1d4ed8;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}