/* =========================================================
   RaidLine — TMD Blog restyle
   Scoped under #latestpost / #tmdcategorysearch / #blog-right
   on purpose: .product-thumb, .list-group-item etc. are shared
   Bootstrap/stock class names also used elsewhere on the site
   (regular product listings, account menus) -- these rules must
   never leak outside the blog page.
   ========================================================= */

#latestpost { padding: 32px 0 60px; }

#latestpost > .breadcrumb { background: transparent; padding: 0 0 18px; }

#latestpost h3 > .headingmain { font-size: clamp(1.5rem, 3vw, 2rem); }

/* ---- post cards (blog list) ---- */
#latestpost .product-layout { margin-bottom: 24px; }
#latestpost .product-thumb {
  position: relative;
  background: var(--rl-surface);
  border: 1px solid var(--rl-border);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#latestpost .product-thumb:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(23,20,18,0.16); }
#latestpost .product-thumb .image.listimg { margin: 0; position: relative; }
#latestpost .product-thumb .image.listimg img { width: 100%; height: 200px; object-fit: cover; object-position: top center; display: block; }
#latestpost .product-thumb .caption { padding: 14px 18px 16px; overflow: hidden; }
#latestpost .product-thumb .caption h4 { font-size: 16.5px; line-height: 1.3; margin: 0 0 6px; }
#latestpost .product-thumb .description { font-size: 13px; color: var(--rl-text-dim); line-height: 1.5; }

/* The stock tmdblog markup relies on Bootstrap 3-era float-start/float-end
   with no clearfix (plus a couple of bare <br><br> as a "spacer" that
   doesn't clear anything), which collapses .detail to 0 height and lets
   .feedbackrow/.description float out of flow -- producing a card with a
   huge blank gap. Rebuild that part of the card as normal flow. */
#latestpost .product-thumb .caption br { display: none; }
#latestpost .product-thumb .detail { overflow: hidden; }
#latestpost .product-thumb .detail .description { float: none !important; margin: 0 0 8px; }
#latestpost .product-thumb .col-sm-12.padd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0; margin: 0;
}
#latestpost .product-thumb .btnread { float: none !important; }

#latestpost .datebox {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: linear-gradient(160deg, var(--rl-crimson-300), var(--rl-crimson-700));
  color: #fff; text-align: center; font-style: normal;
  padding: 6px 12px; border-radius: 8px; font-family: 'Cinzel', serif; font-size: 12.5px;
  box-shadow: 0 8px 18px rgba(196,30,58,0.35);
}
#latestpost .datebox hr { display: none; }

#latestpost .feedback { float: none; margin: 0 0 4px; }
#latestpost .feedback .user { color: var(--rl-crimson-500); font-weight: 600; }
#latestpost .feedbackrow { float: none !important; display: flex; gap: 14px; font-size: 12px; color: var(--rl-text-faint); margin: 0 0 8px; }
#latestpost .feedbackrow li { margin-left: 0; }
#latestpost .feedbackrow i { margin-right: 4px; color: var(--rl-text-faint); }
/* Same Bootstrap 5 .list-inline gap as .social-icons below: the <ul> here
   needs its own flex, not just the wrapping .feedbackrow div, or its two
   <li> (comment count, view count) stack vertically instead of sitting
   side by side -- that alone was worth ~35px of dead height per card. */
#latestpost .feedbackrow ul.list-inline { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
#latestpost .feedbackrow ul.list-inline li { display: inline-flex; align-items: center; margin: 0; }

/* Bootstrap 5's .list-inline only zeroes list padding/markers -- it needs
   .list-inline-item on each <li> to actually go inline, which this
   markup never adds, so the 4 share icons stack in a tall vertical
   column instead of a row. */
#latestpost .product-thumb .social-icons ul.list-inline { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
#latestpost .product-thumb .social-icons ul.list-inline > li { display: inline-block; margin: 0; }

#latestpost .btnread {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; font-size: 12.5px; font-weight: 600;
  background: transparent; border: 1px solid var(--rl-border-strong); color: var(--rl-text);
  border-radius: 999px; text-decoration: none; transition: border-color .15s ease, color .15s ease;
}
#latestpost .btnread:hover { border-color: var(--rl-crimson-500); color: var(--rl-crimson-500); }

#latestpost .social-icons a { color: var(--rl-text-faint); margin-right: 8px; }
#latestpost .social-icons a:hover { color: var(--rl-crimson-500); }

/* ---- single article ---- */
#latestpost .image.listimg > img { border-radius: 10px; }
#latestpost .headtitle h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 10px 0; }
#latestpost .commentadta { color: var(--rl-text-faint); font-size: 13px; }
#latestpost .tagbox { margin-top: 24px; }
#latestpost .tagbox h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--rl-text-dim); }
#latestpost .tagbox .tag {
  display: inline-block; padding: 6px 14px; margin: 0 6px 6px 0;
  border-radius: 999px; background: var(--rl-page-alt); color: var(--rl-text-dim);
  font-size: 12.5px; text-decoration: none; border: 1px solid var(--rl-border);
}
#latestpost .tagbox .tag:hover { border-color: var(--rl-crimson-500); color: var(--rl-crimson-500); }

/* ---- sidebar: blog categories ---- */
#blog-right .backcolor {
  background: var(--rl-surface); border: 1px solid var(--rl-border); border-radius: 10px;
  padding: 20px; position: sticky; top: 20px;
}
#tmdcategorysearch h2 { font-size: 15px; margin: 0 0 14px; }
#tmdcategorysearch .list-group-item {
  border: none; border-left: 2px solid transparent; background: transparent;
  padding: 9px 4px 9px 14px; color: var(--rl-text-dim); font-size: 13.5px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
#tmdcategorysearch .list-group-item:hover { background: var(--rl-page-alt); color: var(--rl-text); }
#tmdcategorysearch .list-group-item.active {
  background: var(--rl-page-alt); border-left-color: var(--rl-crimson-500);
  color: var(--rl-crimson-500); font-weight: 600;
}

/* Raw promo banner injected as blog-category "topdescription" content
   (its own inline <style> block) animates a `box-shadow: 0 0 25px gold`
   glow that bleeds upward past its own box and visually smears onto the
   breadcrumb strip above it, making the breadcrumb bar look crooked.
   Kill the animation and cap the glow so it stays inside the banner. */
#latestpost .banner {
  animation: none !important;
  box-shadow: 0 0 10px gold !important;
  margin-top: 18px !important;
}