/*!
 * Helpblogger — Editorial Layout System
 * -----------------------------------------------------------------
 * Ported from the FastNaija theme's "Smart Feed" archive layout and
 * single-post layout. Every color here is derived from helpblogger's
 * OWN existing root variables (--primary, --text, --dark, --body-bg,
 * --nav-bg, --nav-text) via color-mix() — nothing new is introduced,
 * nothing here overrides the admin's color settings. Structural only:
 * spacing, grids, radii, typography scale, hover behavior.
 *
 * Used by: blog home/category, digital products home/category,
 * services listing (all via the .ed-archive layout), and blog
 * single, digital product single, service single, page single
 * (all via the .ed-single layout).
 * ----------------------------------------------------------------- */

:root {
    /* ---- derived tokens, bridged onto helpblogger's existing vars ---- */
    --ed-line:           var(--line, color-mix(in srgb, var(--text) 12%, var(--body-bg)));
    --ed-line-strong:    var(--line-strong, color-mix(in srgb, var(--text) 22%, var(--body-bg)));
    --ed-muted:          var(--muted, color-mix(in srgb, var(--text) 52%, var(--body-bg)));
    --ed-faint:          var(--faint, color-mix(in srgb, var(--text) 34%, var(--body-bg)));
    --ed-surface-sunken: var(--surface-sunken, color-mix(in srgb, var(--text) 3.5%, var(--body-bg)));
    --ed-primary-wash:   var(--primary-wash, color-mix(in srgb, var(--primary) 7%, var(--body-bg)));
    --ed-primary-line:   color-mix(in srgb, var(--primary) 30%, var(--body-bg));
    --ed-primary-strong: color-mix(in srgb, var(--primary) 82%, black);
    --ed-ink:            var(--ink, var(--text));
    --ed-ease: cubic-bezier(.2,.65,.3,1);
    --ed-fast: .16s var(--ed-ease);
}

/* =============================================================
   ARCHIVE / LISTING LAYOUT
   Used by: blog home, blog category, digital products home,
   digital products category, services listing.
   ============================================================= */
.ed-archive {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.25rem;
    align-items: start;
    padding: 0 0 2rem;
}
.ed-archive-main { min-width: 0; }
.ed-archive-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 1rem;
}

/* ---------- Featured / trending strip ---------- */
.ed-trending {
    border: 1px solid var(--ed-line);
    border-radius: 14px;
    background: var(--ed-surface-sunken);
    padding: 1.1rem 1.2rem 1.2rem;
    margin: 0 0 1.5rem;
}
.ed-trending-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.ed-trending-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: 0 0 auto; }
.ed-trending-title {
    font-size: .82rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ed-ink);
}
.ed-trend-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; }
.ed-trend-item { border-top: 1px solid var(--ed-line); }
.ed-trend-item:nth-child(1), .ed-trend-item:nth-child(2) { border-top: none; }
.ed-trend-link { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; text-decoration: none; }
.ed-trend-rank { font-size: .78rem; font-weight: 800; color: var(--ed-faint); flex: 0 0 auto; }
.ed-trend-title {
    font-size: .87rem; font-weight: 600; color: var(--ed-ink); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ed-trend-link:hover .ed-trend-title { color: var(--primary); }

/* ---------- Feed ---------- */
.ed-feed { display: flex; flex-direction: column; }

.ed-featured {
    position: relative; display: flex; flex-direction: row; align-items: stretch;
    gap: 1.5rem; margin: 0 0 1.75rem; padding: 0 0 1.75rem; border-bottom: 1px solid var(--ed-line);
}
.ed-featured-thumb {
    display: block; flex: 0 0 42%; max-width: 360px; aspect-ratio: 4 / 3;
    overflow: hidden; border-radius: 14px; border: 1px solid var(--ed-line); margin: 0; background: var(--ed-primary-wash);
}
.ed-featured-thumb img, .ed-row-thumb img, .ed-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-featured-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ed-featured-title {
    display: block; font-family: var(--font-heading); font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    font-weight: 800; line-height: 1.25; margin: 0 0 .4rem;
}
.ed-featured-title a, .ed-row-title a { color: var(--ed-ink); text-decoration: none; }
.ed-featured:hover .ed-featured-title a { color: var(--primary); }

.ed-stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ed-kicker-link { position: relative; z-index: 2; }
.ed-excerpt {
    font-size: .95rem; color: var(--ed-muted); line-height: 1.5; margin: 0 0 .6rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ed-row { position: relative; display: flex; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--ed-line); }
.ed-row-thumb {
    flex: 0 0 128px; width: 128px; height: 88px; border-radius: 12px;
    border: 1px solid var(--ed-line); overflow: hidden; background: var(--ed-primary-wash);
}
.ed-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ed-row-title { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.32; margin: 0 0 .3rem; }
.ed-row-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ed-row:hover .ed-row-title a { color: var(--primary); }

.ed-kicker { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; margin: 0 0 .3rem; }
.ed-kicker a { color: var(--primary); text-decoration: none; }

.ed-meta { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--ed-faint); margin-top: auto; flex-wrap: wrap; }
.ed-avatar { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.ed-author { color: var(--ed-muted); font-weight: 600; }
.ed-meta-sep { color: var(--ed-line-strong); }
.ed-stats { display: inline-flex; align-items: center; gap: .25rem; margin-left: .15rem; }
.ed-stats svg { display: block; }

.ed-no-posts { padding: 3rem 1rem; text-align: center; color: var(--ed-muted); }
.ed-no-posts i { font-size: 2rem; display: block; margin-bottom: .75rem; color: var(--ed-faint); }

/* ---------- Sidebar cards ---------- */
.ed-card { border: 1px solid var(--ed-line); border-radius: 14px; background: var(--ed-surface-sunken); padding: 1.1rem 1.15rem 1.2rem; }
.ed-card-head { margin: 0 0 .85rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ed-card-title { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ed-ink); }
.ed-card-link { font-size: .76rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.ed-card-link:hover { text-decoration: underline; }

.ed-nl-note { font-size: .84rem; color: var(--ed-muted); line-height: 1.45; margin: 0 0 .9rem; }
.ed-nl-form { display: flex; flex-direction: column; gap: .6rem; }
.ed-nl-input {
    border: 1px solid var(--ed-line-strong); border-radius: 10px; background: var(--body-bg);
    color: var(--text); padding: .7rem .85rem; font-size: .9rem; outline: none;
}
.ed-nl-input:focus { border-color: var(--primary); }
.ed-nl-btn {
    border: none; border-radius: 10px; background: var(--primary); color: #fff;
    padding: .7rem .85rem; font-size: .88rem; font-weight: 700; cursor: pointer; transition: background var(--ed-fast);
}
.ed-nl-btn:hover { background: var(--ed-primary-strong); }
.ed-nl-btn:disabled { opacity: .6; cursor: default; }
.ed-nl-msg { font-size: .8rem; color: var(--ed-muted); margin: .6rem 0 0; min-height: 1em; }
.ed-nl-msg.is-error { color: var(--primary); }

.ed-list { list-style: none; margin: 0; padding: 0; }
.ed-list-item { display: flex; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--ed-line); }
.ed-list-item:first-child { padding-top: 0; border-top: none; }
.ed-list-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--ed-line); overflow: hidden; background: var(--ed-primary-wash); }
.ed-list-body { flex: 1 1 auto; min-width: 0; }
.ed-list-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .87rem; font-weight: 700; line-height: 1.3; color: var(--ed-ink); text-decoration: none;
}
.ed-list-title:hover { color: var(--primary); }
.ed-list-meta { font-size: .74rem; color: var(--ed-faint); margin-top: .25rem; }

.ed-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ed-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem;
    border: 1px solid var(--ed-line); border-radius: 999px; background: var(--body-bg);
    font-size: .8rem; font-weight: 700; color: var(--ed-muted); text-decoration: none;
    transition: border-color var(--ed-fast), color var(--ed-fast);
}
.ed-chip:hover { border-color: var(--ed-primary-line); color: var(--ed-ink); }
.ed-chip-count { color: var(--ed-faint); font-weight: 600; }
.ed-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ed-chip.active .ed-chip-count { color: rgba(255,255,255,.8); }

@media (max-width: 900px) {
    .ed-archive { grid-template-columns: 1fr; }
    .ed-archive-sidebar { position: static; }
    .ed-trend-list { grid-template-columns: 1fr; }
    .ed-trend-item:nth-child(2) { border-top: 1px solid var(--ed-line); }
}
@media (max-width: 640px) {
    .ed-featured { flex-direction: column; }
    .ed-featured-thumb { max-width: none; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
    .ed-row-thumb { flex-basis: 92px; width: 92px; height: 68px; }
}

/* =============================================================
   SINGLE LAYOUT
   Used by: blog single, digital product single, service single,
   page single. 70/30 content + sidebar, stacking on mobile.
   ============================================================= */
.ed-single-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; align-items: start; }
.ed-single-main { min-width: 0; }
.ed-single-sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 1rem; }

.ed-breadcrumb { font-size: .8rem; color: var(--ed-faint); margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ed-breadcrumb a { color: var(--ed-muted); text-decoration: none; }
.ed-breadcrumb a:hover { color: var(--primary); }
.ed-breadcrumb .sep { color: var(--ed-line-strong); }

.ed-single-kicker { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--primary); text-decoration: none; margin: 0 0 .6rem; }
.ed-single-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.2; margin: 0 0 .8rem; color: var(--ed-ink); }
.ed-single-lead { font-size: 1.05rem; color: var(--ed-muted); line-height: 1.6; margin: 0 0 1rem; }
.ed-single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .82rem; color: var(--ed-faint); margin: 0 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ed-line); }
.ed-single-meta span { display: inline-flex; align-items: center; gap: .35rem; }

.ed-single-media { border-radius: 14px; overflow: hidden; border: 1px solid var(--ed-line); margin: 0 0 1.75rem; background: var(--ed-primary-wash); }
.ed-single-media img { width: 100%; height: auto; display: block; }

.ed-prose { font-size: 1.02rem; line-height: 1.8; color: var(--ed-ink); }
.ed-prose h2 { font-size: 1.5rem; font-weight: 800; margin: 2rem 0 1rem; }
.ed-prose h3 { font-size: 1.25rem; font-weight: 800; margin: 1.75rem 0 .85rem; }
.ed-prose p { margin: 0 0 1.2rem; }
.ed-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.25rem 0; }
.ed-prose ul, .ed-prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.ed-prose li { margin: 0 0 .5rem; }
.ed-prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--primary); background: var(--ed-surface-sunken); color: var(--ed-muted); font-style: italic; }
.ed-prose a { color: var(--primary); }

.ed-tags-block { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--ed-line); }
.ed-tags-label { font-size: .7rem; font-weight: 700; color: var(--ed-faint); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: .8rem; }
.ed-tag { display: inline-block; border: 1px solid var(--ed-line); border-radius: 999px; padding: .35rem .85rem; margin: 0 .4rem .4rem 0; font-size: .8rem; font-weight: 600; color: var(--ed-muted); text-decoration: none; transition: border-color var(--ed-fast), color var(--ed-fast); }
.ed-tag:hover { border-color: var(--ed-primary-line); color: var(--primary); }

.ed-related-block { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--ed-line); }
.ed-related-heading { font-size: 1.05rem; font-weight: 800; color: var(--ed-ink); margin: 0 0 1rem; }
.ed-plist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.15rem; }
.ed-plist-item {
    display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--ed-line);
    border-radius: 14px; overflow: hidden; background: var(--ed-surface-sunken); text-decoration: none;
    transition: border-color var(--ed-fast), transform var(--ed-fast);
}
.ed-plist-item:hover { border-color: var(--ed-primary-line); transform: translateY(-3px); }
.ed-plist-thumb { width: 100%; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--ed-line); overflow: hidden; background: var(--ed-primary-wash); }
.ed-plist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-plist-body { padding: .85rem .9rem .95rem; display: flex; flex-direction: column; gap: .5rem; }
.ed-plist-title { font-size: .95rem; font-weight: 700; line-height: 1.32; color: var(--ed-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ed-plist-item:hover .ed-plist-title { color: var(--primary); }
.ed-plist-meta { font-size: .74rem; color: var(--ed-faint); }

@media (max-width: 900px) {
    .ed-single-wrap { grid-template-columns: 1fr; }
    .ed-single-sidebar { position: static; }
}
@media (max-width: 560px) {
    .ed-plist-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
}