/* ============================================================================
 * fec_blog.css  -  Casino Bonus Blog additions to fec-edition.css
 * Path: /css/fec_blog.css   (loaded by components/com_bonuses/helpers/fec_blog.php)
 * Version 1.0.0 (2026-10-12)
 *
 * Everything is scoped under .fecx.fec-blog. The blog reuses the editorial
 * design system as it is (hub hero, hub-meta panel, hub-longform + hub-toc,
 * blog-row cards, bd-author, fec-minirow, fec-pg); the rules below only
 * cover what those blocks did not need before: a card body wrapper, the
 * 3-column index grid with a lead card, the hero figure, and prose elements
 * (tables, ordered lists, quotes, inline images) that blog posts use.
 * ========================================================================== */

/* ---- cards ---- */
.fecx.fec-blog .blog-card .blog-body{display:flex;flex-direction:column;gap:11px;min-width:0}
.fecx.fec-blog .blog-card .blog-thumb img{display:block}

/* ---- index grid ---- */
.fecx.fec-blog .fec-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.fecx.fec-blog .fec-blog-grid .blog-card{display:flex;flex-direction:column;gap:11px}
.fecx.fec-blog .fec-blog-grid .blog-card.lead{
  grid-column:1/-1;
  display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;
  padding-bottom:28px;border-bottom:1px solid var(--rule)}
.fecx.fec-blog .fec-blog-grid .blog-card.lead .blog-title{font-size:28px;line-height:1.15}
.fecx.fec-blog .fec-blog-grid .blog-card.lead .blog-excerpt{font-size:15px}
.fecx.fec-blog .fec-blog-pager{margin-top:36px}
.fecx.fec-blog .fec-blog-pageno{font-size:.55em;color:var(--ink-3);font-weight:500;letter-spacing:0}
.fecx.fec-blog .fec-blog-desc p{color:var(--ink-3);font-size:14px;margin:0 0 6px}
.fecx.fec-blog .fec-blog-head .fec-minirow{margin-top:18px}

/* ---- article hero ---- */
.fecx.fec-blog .fec-blog-hero .hub-title{font-size:clamp(28px,3.4vw,40px)}
.fecx.fec-blog .fec-blog-byline{border-top:0;padding:4px 0 14px;gap:10px 24px;justify-content:flex-start}
.fecx.fec-blog .fec-blog-byline .updated{align-self:flex-end}
.fecx.fec-blog .fec-blog-byline .updated time{color:var(--ink-2);font-weight:600}
.fecx.fec-blog .hub-pill::before{content:"\2192"}            /* arrow, not a check: these are links, not claims */
.fecx.fec-blog .fec-blog-figure{margin:0}
.fecx.fec-blog .fec-blog-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-sm)}
.fecx.fec-blog .fec-blog-meta .eyebrow{display:block;margin-bottom:8px}

/* ---- article body ---- */
.fecx.fec-blog .hub-longform.fec-blog-notoc{grid-template-columns:1fr}
.fecx.fec-blog .hub-longform.fec-blog-notoc .hub-content{margin:0 auto}
.fecx.fec-blog .fec-blog-content>p:first-child{font-size:17px;color:var(--ink)}
.fecx.fec-blog .fec-blog-content h2{margin-top:30px}
.fecx.fec-blog .fec-blog-content h2:first-child{margin-top:0}
.fecx.fec-blog .fec-blog-content img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
.fecx.fec-blog .fec-blog-content figure{margin:0 0 18px}
.fecx.fec-blog .fec-blog-content figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:6px}
.fecx.fec-blog .fec-blog-content ol{margin:0 0 14px;padding-left:22px}
.fecx.fec-blog .fec-blog-content ol li{font-size:15px;line-height:1.6;color:var(--ink-2);margin-bottom:6px}
.fecx.fec-blog .fec-blog-content table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 18px}
.fecx.fec-blog .fec-blog-content th,.fecx.fec-blog .fec-blog-content td{padding:8px 10px;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:top}
.fecx.fec-blog .fec-blog-content th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fecx.fec-blog .fec-blog-content blockquote{margin:0 0 14px;padding:10px 0 10px 16px;border-left:2px solid var(--accent);color:var(--ink-2)}
.fecx.fec-blog .fec-blog-content iframe{max-width:100%}
.fecx.fec-blog .fec-blog-author{max-width:100ch;margin-top:28px}
.fecx.fec-blog .fec-blog-author .bd-author{margin:0}

/* ---- responsive ---- */
@media (max-width:960px){
  .fecx.fec-blog .fec-blog-grid{grid-template-columns:1fr 1fr}
  .fecx.fec-blog .fec-blog-grid .blog-card.lead{grid-template-columns:1fr;gap:16px}
  .fecx.fec-blog .fec-blog-grid .blog-card.lead .blog-title{font-size:23px}
}
@media (max-width:640px){
  .fecx.fec-blog .fec-blog-grid{grid-template-columns:1fr;gap:22px}
  .fecx.fec-blog .fec-blog-byline{flex-direction:column;align-items:flex-start}
  .fecx.fec-blog .fec-blog-byline .updated{align-self:flex-start}
}