/* Farsisaz blog — archive + single post.
   Only what output.css doesn't already provide; values copied from existing
   theme components (tab buttons, hero slide, product-description-content).
   Loaded site-wide because the header mini menu shows the latest posts. */

.fs-blog-ico { color: #fff; }
.dark .fs-blog-ico { color: #000; }

/* search field inside the sort/filter pill */
.fs-blog-search {
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    color: #000;
    width: 210px;
}
.fs-blog-search::placeholder { color: #00000066; }
.dark .fs-blog-search { color: #fff; }
.dark .fs-blog-search::placeholder { color: #FFFFFF66; }
.fs-blog-search::-webkit-search-cancel-button { display: none; }

/* category chips = product page .tab-button */
.fs-blog-cats {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: 40px;
    padding-bottom: 4px;
}
.fs-blog-cats::-webkit-scrollbar { display: none; }
.fs-blog-cat {
    flex-shrink: 0;
    border-radius: 0.875rem;
    border: 1px solid #000;
    box-shadow: 0 2px 0 0 #000;
    padding: 0.5rem 1rem;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}
.fs-blog-cat:hover,
.fs-blog-cat.is-active { background: #000; color: #fff; }
.dark .fs-blog-cat { border-color: #fff; box-shadow: 0 2px 0 0 #fff; color: #fff; }
.dark .fs-blog-cat:hover,
.dark .fs-blog-cat.is-active { background: #fff; color: #000; }

/* featured post = home hero slide */
.fs-blog-featured {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 50px;
    margin-top: 40px;
    padding: 14px 14px 14px 14px;
}
.fs-blog-featured-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 30px 46px 30px 0;
    order: -1;
}
.fs-blog-featured-title {
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.45;
    font-weight: 800;
    color: #000;
}
.dark .fs-blog-featured-title { color: #fff; }
.fs-blog-featured-title a:hover { text-decoration: underline; text-decoration-color: #E1FF00; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.fs-blog-featured-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-top: 26px;
    flex-wrap: wrap;
}
.fs-blog-featured-img {
    display: block;
    border-radius: 30px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}
.fs-blog-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fs-blog-featured-img:hover img { transform: scale(1.03); }

/* post grid */
.fs-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px 32px;
    margin-top: 56px;
    padding-bottom: 46px;
}

/* post card */
.fs-post-card { display: flex; flex-direction: column; min-width: 0; }
.fs-post-thumb {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #F4F4F4;
}
.dark .fs-post-thumb { background: #121212; }
.fs-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fs-post-card:hover .fs-post-thumb img { transform: scale(1.04); }
.fs-post-cat {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #E1FF00;
    color: #000;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.fs-post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 12px;
    font-weight: 600;
    color: #000;
}
.dark .fs-post-meta { color: #FFFFFF80; }
.fs-post-meta i { width: 1px; height: 12px; background: #D8D8D8; }
.fs-post-title {
    margin-top: 8px;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 800;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(18px * 1.6 * 2);
}
.dark .fs-post-title { color: #fff; }
.fs-post-excerpt {
    margin: 8px 0 18px;
    font-size: 13px;
    line-height: 1.9;
    font-weight: 400;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(13px * 1.9 * 2);
}
.dark .fs-post-excerpt { color: #fff; }
.fs-post-foot {
    margin-top: auto !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #EBEBEB;
}
.dark .fs-post-foot { border-top-color: #2A2A2A; }
.fs-post-author { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #000; }
.dark .fs-post-author { color: #fff; }
.fs-post-author img { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; }
.fs-post-go {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #000;
    display: grid;
    place-items: center;
    box-shadow: 6px 7px 14px 0 rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}
.dark .fs-post-go { background: #191919; box-shadow: none; }

/* ---------- single post ---------- */
.fs-blog-h1 { line-height: 1.5; }
.fs-blog-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fs-blog-layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-top: 40px;
}
.fs-blog-main { flex: 1; min-width: 0; }
.fs-blog-side {
    width: 27%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 110px;
}
.fs-blog-cover { width: 100%; height: auto; border-radius: 30px; display: block; }
.fs-blog-box {
    border: 1px solid #EBEBEB99;
    border-radius: 20px;
    padding: 22px;
}
.dark .fs-blog-box { border-color: transparent; background: #191919; }
.fs-blog-box-product > .flex { gap: 20px !important; }

.fs-blog-toc { list-style: none; padding: 0; margin: 0; counter-reset: toc; display: flex; flex-direction: column; gap: 12px; }
.fs-blog-toc li { counter-increment: toc; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: #000; }
.dark .fs-blog-toc li { color: #fff; }
.fs-blog-toc li::before {
    content: counter(toc);
    width: 26px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.dark .fs-blog-toc li::before { background: #E1FF00; color: #000; }
.fs-blog-toc a:hover { text-decoration: underline; text-underline-offset: 4px; }

.fs-blog-copy {
    height: 3rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 0.75rem;
    border: 1px solid #000;
    box-shadow: 0 2px 0 0 #000;
    color: #000;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.dark .fs-blog-copy { border-color: #fff; box-shadow: 0 2px 0 0 #fff; color: #fff; }

.fs-blog-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
/* minmax(0, …) + min-width:0: the one-line (ellipsis) titles must not set the
   column's min-content width — on phones that widened the whole post to
   ~500px and pushed the text off-screen. */
.fs-blog-prevnext { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 30px; }
.fs-blog-prevnext > a { min-width: 0; }
.fs-blog-prevnext > a span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-blog-grid-3 { margin-top: 0; }

/* article body
   - No text-align: justify. Chromium justifies Persian lines by stretching
     the gaps after non-joining letters and at every ZWNJ, so mixed
     Persian/English lines came out as "ماجرا ی گروه ی".
   - Spacing rhythm: headings get the space ABOVE them and stay close to
     their own paragraph. Values here are only defaults — margins, font
     sizes and alignment set in the block editor are inline styles / preset
     classes and win over these rules. */
.fs-post-content { padding: 40px 0 10px; color: #000; overflow-wrap: break-word; }
.dark .fs-post-content { color: #fff; }
.fs-post-content p { font-size: 16px; font-weight: 600; line-height: 1.95; margin-bottom: 24px; }
.fs-post-content p:empty { display: none; }
.fs-post-content strong { font-weight: 700; }
/* The editor's text color is a <mark class="has-inline-color …">; its inline
   transparent background gets stripped on save, so the browser's yellow
   <mark> default showed. A real highlight keeps its inline background-color.
   The white backgrounds were added by hand to hide the yellow — they are
   boxes in dark mode, so neutralise them too. */
.fs-post-content mark { background-color: transparent; color: inherit; }
.fs-post-content mark[style*="background-color"] { color: #000; }
.fs-post-content mark[style*="background-color:#ffffff" i] { background-color: transparent !important; color: inherit; }
.fs-post-content h2 { font-size: 25px; font-weight: 800; line-height: 1.5; margin: 48px 0 16px; scroll-margin-top: 110px; }
.fs-post-content h3 { font-size: 21px; font-weight: 800; line-height: 1.55; margin: 36px 0 12px; }
.fs-post-content ul { list-style: disc; padding: 0 22px 0 0; margin-bottom: 24px; font-size: 15px; font-weight: 600; line-height: 1.9; }
.fs-post-content ul li + li { margin-top: 10px; }
.fs-post-content ul ul { list-style: circle; }
/* "تیک" list style (block editor → List → Styles) */
.fs-post-content ul.is-style-check { list-style: none; padding-right: 0; }
.fs-post-content ul.is-style-check > li { position: relative; padding-right: 24px; }
.fs-post-content ul.is-style-check > li::before { content: "✓"; position: absolute; right: 0; top: 0; font-weight: 700; }
.fs-post-content ol { position: relative; margin-bottom: 24px; counter-reset: item; list-style: none; padding: 0; }
.fs-post-content ol li { position: relative; margin-bottom: 16px; margin-right: 64px; font-size: 14px; font-weight: 600; line-height: 36px; counter-increment: item; }
.fs-post-content ol li::before { content: counter(item); position: absolute; right: -64px; width: 32px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; background: #000; border-radius: 9px; }
.dark .fs-post-content ol li::before { color: #000; background: #E1FF00; }
.fs-post-content img { width: 100%; height: auto; object-fit: cover; border-radius: 30px; margin-top: 0; margin-bottom: 28px; }
.fs-post-content blockquote { position: relative; padding: 0 60px; font-size: 14px; font-weight: 600; line-height: 31px; margin-bottom: 32px; }
.fs-post-content blockquote::before { content: ""; position: absolute; right: 30px; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: #E1FF00; }
.fs-post-content blockquote p:last-child { margin-bottom: 0; }
.fs-post-content hr { margin: 40px 0; }
/* columns: same gap as the rest of the article, no stacked bottom margins */
.fs-post-content .wp-block-columns { margin-bottom: 24px; }
.fs-post-content .wp-block-column > :first-child { margin-top: 0; }
.fs-post-content .wp-block-column > :last-child { margin-bottom: 0; }
.fs-post-content > :first-child { margin-top: 0; }

/* product mention inside the article */
.fs-post-product {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #EBEBEB99;
    border-radius: 20px;
    padding: 14px 14px 14px 20px;
    margin-bottom: 28px;
}
.dark .fs-post-product { border-color: transparent; background: #191919; }
.fs-post-content .fs-post-product img { width: 64px; height: 90px; border-radius: 12px; margin: 0; flex-shrink: 0; }
.fs-post-product-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* WordPress editor output inside the article */
.fs-post-content h4 { font-size: 18px; font-weight: 800; line-height: 1.6; margin: 28px 0 10px; }
.fs-post-content :is(p, li, blockquote, td) a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fs-post-content :is(p, li, blockquote, td) a:hover { text-decoration-color: #E1FF00; text-decoration-thickness: 3px; }
.fs-post-content figure { margin: 0 0 28px; }
.fs-post-content figure img { margin-bottom: 0; }
.fs-post-content figcaption { margin-top: 12px; font-size: 12px; font-weight: 600; text-align: center; opacity: .7; }
.fs-post-content .wp-block-embed iframe,
.fs-post-content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 30px; margin-bottom: 28px; }
.fs-post-content table { width: 100%; border-collapse: collapse; margin-bottom: 28px; font-size: 14px; font-weight: 600; }
.fs-post-content th,
.fs-post-content td { border: 1px solid #EBEBEB; padding: 10px 14px; text-align: right; }
.fs-post-content th { font-weight: 800; background: #F4F4F4; }
.dark .fs-post-content th,
.dark .fs-post-content td { border-color: #2A2A2A; }
.dark .fs-post-content th { background: #121212; }

/* Dark mode for colors picked in the editor. They are inline styles chosen
   against the light page, so the dark ones vanish on black — remap them. */
.dark .fs-post-content :is([style^="color:#000" i], [style*=";color:#000" i], [style^="color:#111" i], [style*=";color:#111" i],
    [style^="color:#171717" i], [style*=";color:#171717" i], [style^="color:#1e1e1e" i], [style*=";color:#1e1e1e" i],
    [style^="color:#222" i], [style*=";color:#222" i]),
.dark .fs-post-content .has-black-color { color: #fff !important; }
.dark .fs-post-content :is([style^="color:#313131" i], [style*=";color:#313131" i], [style^="color:#333" i], [style*=";color:#333" i],
    [style^="color:#363636" i], [style*=";color:#363636" i], [style^="color:#444" i], [style*=";color:#444" i]) { color: #BDBDBD !important; }
/* Light-background quotes (white text on a pale box) → theme's dark tint. */
.dark .fs-post-content .wp-block-quote.has-background { background-color: rgba(225, 255, 0, .07) !important; }
/* Separators with a picked color: light gray is a glaring line on black. */
.dark .fs-post-content hr.has-background { background-color: #2A2A2A !important; color: #2A2A2A !important; border-color: #2A2A2A !important; }
/* Score bars (Custom HTML): #eee track + #171717 fill read inverted on black. */
.dark .fs-post-content div[style*="background:#eee" i] { background: #2A2A2A !important; }
.dark .fs-post-content div[style*="background:#171717" i] { background: #E1FF00 !important; }
.fs-post-content ul ul,
.fs-post-content ol ol { margin: 16px 0 0; }
.fs-post-content > *:last-child { margin-bottom: 0; }
.fs-blog-prevnext > span:empty { display: none; }
.fs-blog-prevnext > a:only-child { grid-column: 1 / -1; }
.fs-blog-empty { margin-top: 56px; }

/* review-thread mobile fixes (same as the product page) */
#comments .fs-comment > .flex-1 { min-width: 0; }
#comments .fs-cmt-body { overflow-wrap: anywhere; text-align: right; }
@media (max-width: 767px) {
    #comments .fs-comment { gap: 0.75rem; }
    #comments .fs-comment .fs-comment { padding-right: 0.75rem; }
    #comments .fs-comment .fs-cmt-avatar { width: 2.25rem; height: 2.25rem; border-radius: 0.875rem; }
    #comments .fs-cmt-head { flex-wrap: wrap; row-gap: 0.25rem; }
    #comments .fs-cmt-head .fs-cmt-name { font-size: 16px; }
    #comments .fs-cmt-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
    #comments .fs-cmt-actions > button { padding-top: 0.375rem; padding-bottom: 0.375rem; }
    #comments .comment-line::before { display: none; }
}

/* ---------- header mini menu: latest posts ---------- */
.fs-menu-blog {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid #D1D5DB;
    text-align: right;
}
.dark .fs-menu-blog { border-bottom-color: #374151; }
.fs-menu-blog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.fs-menu-blog-head span { font-size: 15px; font-weight: 700; color: #000; }
.fs-menu-blog-head a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #000;
    color: #fff;
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
}
.dark .fs-menu-blog-head span { color: #fff; }
.dark .fs-menu-blog-head a { background: #232323; }
.fs-menu-blog-head a svg { width: 5px; height: auto; }
.fs-menu-blog-item { display: flex; align-items: center; gap: 12px; }
.fs-menu-blog-thumb {
    width: 64px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #F4F4F4;
}
.dark .fs-menu-blog-thumb { background: #1A1A1A; }
.fs-menu-blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.fs-menu-blog-item:hover .fs-menu-blog-thumb img { transform: scale(1.06); }
.fs-menu-blog-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-menu-blog-text strong {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fs-menu-blog-text small { font-size: 11px; font-weight: 600; color: #000; opacity: .6; }
.dark .fs-menu-blog-text strong,
.dark .fs-menu-blog-text small { color: #fff; }
.fs-menu-blog-item:hover strong { text-decoration: underline; text-decoration-color: #E1FF00; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
    .fs-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
    .fs-blog-featured { grid-template-columns: 1fr; gap: 0; }
    .fs-blog-featured-body { order: 0; padding: 24px 12px 12px; }
    .fs-blog-layout { flex-direction: column; align-items: stretch; }
    .fs-blog-side { width: 100%; position: static; }
}
@media (max-width: 767px) {
    .fs-blog-grid { grid-template-columns: 1fr; }
    .fs-post-title, .fs-post-excerpt { min-height: 0; }
    .fs-blog-search { width: 100%; }
    .fs-blog-featured { border-radius: 30px; }
    .fs-blog-featured-img { border-radius: 22px; }
    .fs-blog-featured-foot > .flex:last-child { width: 100%; justify-content: space-between; }
    .fs-blog-prevnext { grid-template-columns: 1fr; }
    .fs-post-content p { font-size: 15px; line-height: 1.95; margin-bottom: 20px; }
    .fs-post-content h2 { font-size: 21px; margin: 36px 0 12px; }
    .fs-post-content h3 { font-size: 18px; margin: 28px 0 10px; }
    .fs-post-content blockquote { padding: 0 24px; }
    .fs-post-content blockquote::before { right: 6px; }
    .fs-post-content img, .fs-blog-cover { border-radius: 22px; }
    .fs-post-product { flex-wrap: wrap; }
    .fs-post-product > a { width: 100%; justify-content: space-between; }
}

/* ---------- homepage section (template-parts/blog-home.php) ----------
   Brand-yellow band in light mode so it stands apart from the black/grey
   homepage blocks; dark mode keeps the dark surface with yellow accents. */
.fs-hblog {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 40px;
    padding: 56px 60px 60px;
    color: #000;
    background:
        radial-gradient(900px 420px at 100% 0%, rgba(255, 255, 255, .55), transparent 62%),
        #E1FF00;
}
.dark .fs-hblog {
    color: #fff;
    background:
        radial-gradient(760px 380px at 0% 0%, rgba(225, 255, 0, .13), transparent 62%),
        #191919;
}
.fs-hblog-mark {
    position: absolute;
    left: 28px;
    top: -34px;
    z-index: -1;
    font-family: Arial, sans-serif;
    font-size: 210px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -6px;
    color: transparent;
    -webkit-text-stroke: 2px rgba(0, 0, 0, .09);
    pointer-events: none;
    user-select: none;
}
.dark .fs-hblog-mark { -webkit-text-stroke-color: rgba(225, 255, 0, .09); }

/* header */
.fs-hblog-head { display: flex; align-items: center; gap: 40px; margin-bottom: 44px; }
.fs-hblog-heading { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.fs-hblog-ico {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #000;
    color: #E1FF00;
    box-shadow: 6px 7px 14px 0 rgba(0, 0, 0, .15);
    transform: rotate(-6deg);
}
.dark .fs-hblog-ico { background: #E1FF00; color: #000; box-shadow: none; }
.fs-hblog-titles { display: flex; flex-direction: column; }
.fs-hblog-kicker { font-size: 13px; font-weight: 700; letter-spacing: .5px; opacity: .55; direction: ltr; text-align: right; }
.fs-hblog-title { font-family: croissant, yekanbakh, sans-serif; font-size: clamp(30px, 3.4vw, 50px); font-weight: 800; line-height: 1.25; }
.fs-hblog-sub { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.9; opacity: .75; max-width: 420px; }
.fs-hblog-all {
    margin-inline-start: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #000;
    color: #fff;
    border-radius: 16px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 6px 7px 14px 0 rgba(0, 0, 0, .15);
    transition: transform .2s;
}
.fs-hblog-all svg { color: #E1FF00; }
.fs-hblog-all:hover { transform: translateY(-2px); }
.dark .fs-hblog-all { background: #E1FF00; color: #000; box-shadow: none; }
.dark .fs-hblog-all svg { color: #000; }
.fs-hblog-all--foot { display: none; }

/* lead story + list */
.fs-hblog-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.fs-hblog--solo .fs-hblog-grid { grid-template-columns: 1fr; }
.fs-hblog--solo .fs-hblog-lead-body { max-width: 760px; }

.fs-hblog-lead {
    position: relative;
    min-height: 480px;
    border-radius: 30px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55);
}
.dark .fs-hblog-lead { box-shadow: none; }
.fs-hblog-lead-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.fs-hblog-lead:hover .fs-hblog-lead-img { transform: scale(1.04); }
.fs-hblog-lead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, .97) 0%, rgba(0, 0, 0, .86) 34%, rgba(0, 0, 0, .35) 58%, rgba(0, 0, 0, 0) 78%);
    pointer-events: none;
}
.fs-hblog-lead-body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 34px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.fs-hblog-chip {
    background: #E1FF00;
    color: #000;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.fs-hblog-lead-title {
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.55;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* whole card is the title's link */
.fs-hblog-lead-title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.fs-hblog-lead-title a:focus-visible { outline: none; }
.fs-hblog-lead:focus-within { outline: 3px solid #000; outline-offset: 4px; }
.dark .fs-hblog-lead:focus-within { outline-color: #E1FF00; }
.fs-hblog-lead:hover .fs-hblog-lead-title a { text-decoration: underline; text-decoration-color: #E1FF00; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.fs-hblog-lead-ex {
    font-size: 13px;
    line-height: 1.9;
    font-weight: 400;
    opacity: .8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fs-hblog-lead-foot { display: flex; align-items: center; gap: 18px; width: 100%; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
.fs-hblog-author { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.fs-hblog-author img { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; }
.fs-hblog-meta,
.fs-hblog-item small { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; }
.fs-hblog-meta { opacity: .75; }
.fs-hblog-meta i,
.fs-hblog-item small i { width: 1px; height: 12px; background: currentColor; opacity: .35; }
.fs-hblog-go {
    margin-inline-start: auto;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #E1FF00;
    color: #000;
    display: grid;
    place-items: center;
    transition: transform .25s;
}
.fs-hblog-lead:hover .fs-hblog-go { transform: translateX(-4px); }

.fs-hblog-list { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.fs-hblog-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px;
    border-radius: 24px;
    transition: background-color .25s;
}
.fs-hblog-item + .fs-hblog-item::before {
    content: "";
    position: absolute;
    top: -4px;
    right: 14px;
    left: 14px;
    height: 1px;
    background: rgba(0, 0, 0, .12);
}
.dark .fs-hblog-item + .fs-hblog-item::before { background: rgba(255, 255, 255, .08); }
.fs-hblog-item:hover { background: rgba(0, 0, 0, .07); }
.dark .fs-hblog-item:hover { background: rgba(255, 255, 255, .05); }
.fs-hblog-thumb {
    width: 180px;
    aspect-ratio: 16 / 11;
    flex-shrink: 0;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0, 0, 0, .12);
}
.dark .fs-hblog-thumb { background: #121212; }
.fs-hblog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fs-hblog-item:hover .fs-hblog-thumb img { transform: scale(1.06); }
.fs-hblog-item-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.fs-hblog-item-cat {
    background: #000;
    color: #E1FF00;
    border-radius: 8px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}
.dark .fs-hblog-item-cat { background: #E1FF00; color: #000; }
.fs-hblog-item strong {
    font-size: 16px;
    line-height: 1.65;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fs-hblog-item:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.dark .fs-hblog-item:hover strong { text-decoration-color: #E1FF00; }
.fs-hblog-item small { opacity: .65; }

@media (max-width: 1279px) {
    .fs-hblog-sub { display: none; }
}
@media (max-width: 1023px) {
    .fs-hblog { padding: 40px 32px 32px; }
    .fs-hblog-grid { grid-template-columns: 1fr; }
    .fs-hblog-lead { min-height: 420px; }
}
@media (max-width: 767px) {
    .fs-hblog { border-radius: 30px; padding: 28px 16px 16px; }
    .fs-hblog-mark { font-size: 120px; top: -18px; left: 10px; letter-spacing: -3px; }
    .fs-hblog-head { margin-bottom: 24px; gap: 16px; }
    .fs-hblog-heading { gap: 16px; }
    .fs-hblog-ico { width: 50px; height: 50px; border-radius: 15px; }
    .fs-hblog-ico svg { width: 27px; height: auto; }
    .fs-hblog-kicker { font-size: 11px; }
    .fs-hblog-head .fs-hblog-all { display: none; }
    .fs-hblog-all--foot { display: flex; width: 100%; margin-top: 14px; }
    .fs-hblog-grid { gap: 12px; }
    .fs-hblog-lead { min-height: 400px; border-radius: 24px; }
    .fs-hblog-lead-body { padding: 20px; gap: 10px; }
    .fs-hblog-lead-ex { display: none; }
    .fs-hblog-lead-foot { gap: 12px; padding-top: 14px; }
    .fs-hblog-lead-foot .fs-hblog-meta > i,
    .fs-hblog-lead-foot .fs-hblog-meta > span:last-child { display: none; }
    .fs-hblog-go { width: 40px; height: 40px; border-radius: 12px; }
    .fs-hblog-list { gap: 4px; }
    .fs-hblog-item { gap: 14px; padding: 10px 6px; border-radius: 18px; }
    .fs-hblog-item + .fs-hblog-item::before { right: 6px; left: 6px; top: -2px; }
    .fs-hblog-thumb { width: 112px; border-radius: 14px; }
    .fs-hblog-item-body { gap: 5px; }
    .fs-hblog-item strong { font-size: 14px; line-height: 1.6; }
    .fs-hblog-item small { font-size: 11px; gap: 8px; }
}

/* comment sort (template-parts/blog-comments.php) */
.fs-cmt-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fs-cmt-sort .fs-blog-cat { cursor: pointer; background: transparent; font-family: inherit; }
.fs-cmt-sort .fs-blog-cat.is-active { background: #000; color: #fff; }
.dark .fs-cmt-sort .fs-blog-cat.is-active { background: #fff; color: #000; }
@media (max-width: 480px) {
    .fs-cmt-sort > span { display: none; }
}