/* Salon Blog Function — Single Post Widget Styles
   Structural layout only. All colors/typography via Elementor controls.
   ------------------------------------------------------------------ */

/* ── Shared ─────────────────────────────────────────────────────────── */
.sbf-author-wrap *,
.sbf-related-posts *,
.sbf-post-intro,
.sbf-breadcrumb * { box-sizing: border-box; }

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.sbf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    font-size: 13px;
}

.sbf-breadcrumb a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.sbf-breadcrumb .sbf-bc-sep {
    margin: 0 2px;
    user-select: none;
}

/* Yoast breadcrumb spans */
.sbf-breadcrumb span > span { display: contents; }

/* ── Author Box ─────────────────────────────────────────────────────── */
.sbf-author-wrap { width: 100%; }

.sbf-author-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sbf-avatar {
    display: block;
    flex-shrink: 0;
    object-fit: cover;
}

.sbf-author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sbf-author-name {
    display: block;
    font-weight: 600;
}

.sbf-author-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.sbf-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sbf-meta-item svg {
    flex-shrink: 0;
}

.sbf-author-divider {
    border: none;
    border-top: 1px solid #e8e0dc;
    margin-top: 16px;
    margin-bottom: 0;
}

/* ── Post Introduction ──────────────────────────────────────────────── */
.sbf-post-intro {
    margin: 0;
    line-height: 1.7;
}

/* ── Related Posts ──────────────────────────────────────────────────── */
.sbf-related-posts { width: 100%; }

.sbf-rp-title {
    margin: 0 0 24px 0;
}

.sbf-rp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
}

.sbf-rp-grid.sbf-rp-cols-1 { grid-template-columns: 1fr; }
.sbf-rp-grid.sbf-rp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sbf-rp-grid.sbf-rp-cols-3 { grid-template-columns: repeat(3, 1fr); }

.sbf-rp-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sbf-rp-img-wrap {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.sbf-rp-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sbf-no-image {
    width: 100%;
    height: 100%;
    min-height: 160px;
    background: #d9d0cc;
}

.sbf-rp-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sbf-rp-date {
    display: block;
    font-size: 12px;
}

.sbf-rp-card-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.sbf-rp-card-title a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.sbf-rp-excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.sbf-rp-empty {
    color: #999;
    font-size: 14px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sbf-rp-grid,
    .sbf-rp-grid.sbf-rp-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .sbf-rp-grid,
    .sbf-rp-grid.sbf-rp-cols-2,
    .sbf-rp-grid.sbf-rp-cols-3 { grid-template-columns: 1fr; }
}