/* ═══════════════════════════════════════════════════════════
   FLEXIBLE CONTENT BLOCK SYSTEM  (Directory Book Ch. 22)
   Enhanced profile page: hero header + 9 rows (2-col each) +
   up to 3 toggle-able full-width text spacers, freely ordered.
   Professional / Premium / Elite tiers only — not Basic.
   ═══════════════════════════════════════════════════════════ */

/* ── Hero photo header — static, half-page, no carousel ── */
.cb-hero {
    width: 100%;
    height: 50vh;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    background-color: var(--pc-dark-blue, #17324d);
    border-radius: 12px;
    margin-bottom: 28px;
    position: relative;
}

.cb-hero-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pc-dark-blue, #17324d), var(--pc-rust, #b5502f));
}

/* ── Reusable core component: 1 row, 2 columns ── */
.cb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
}

.cb-slot {
    flex: 1 1 calc(50% - 10px);
    min-width: 260px;
    border-radius: 10px;
    overflow: hidden;
}

.cb-slot--photo img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.cb-slot--text {
    padding: 18px 20px;
    background: #f8f9fb;
    border: 1px solid #e6e8ec;
    display: flex;
    align-items: center;
}

.cb-slot--text p {
    margin: 0;
    line-height: 1.6;
    color: #333;
}

.cb-slot--empty {
    border: 1px dashed #cfd4da;
    background: #fbfbfc;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa0a8;
    font-size: 0.85rem;
}

/* ── Full-width text spacer — toggle-able, adjustable height ── */
.cb-spacer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    margin-bottom: 24px;
    background: #fff7f2;
    border-radius: 10px;
}

.cb-spacer p {
    max-width: 760px;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.7;
    color: #2c2c2c;
}

/* Full-width photo spacer variant — added post-spec (Aug 30) */
.cb-spacer-photo {
    width: 100%;
    margin-bottom: 24px;
    border-radius: 10px;
    overflow: hidden;
}

.cb-spacer-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Admin editor list (row/spacer cards with slot controls) ── */
.cb-admin-block {
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
    background: #fff;
}

.cb-admin-block-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8f98;
    margin-bottom: 10px;
}

@media (max-width: 700px) {
    .cb-slot {
        flex: 1 1 100%;
    }
    .cb-hero {
        height: 40vh;
        min-height: 220px;
    }
}