/* =========================================================================
   Atlantis Strength, Build Yourself / Blogue
   Hub magazine + article long form. Reuses tokens, styles, industries
   (.ihero/.crumbs/.cta) and ressources.css (.prose).
   ========================================================================= */

.page-blog .ihero{ min-height:58vh; }
.page-blog .ihero__title{
  font-size:clamp(32px,4.6vw,68px);
  max-width:18ch;
}
.page-blog-article .ihero__title{
  font-size:clamp(26px,3.8vw,54px);
  max-width:22ch;
}

.blogmeta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--atl-ink-300); margin:0 0 18px;
}
.blogmeta__date{ color:var(--accent); }

/* ------------------------------ Hub featured ---------------------------- */
.blogfeat{
  background:var(--atl-ink-1000);
  padding-block:clamp(48px,6vw,88px);
  border-top:1px solid var(--atl-ink-800);
}
.blogfeat__grid{
  display:grid; grid-template-columns:1.15fr 0.95fr;
  gap:clamp(28px,4vw,64px); align-items:center;
}
.blogfeat__media{
  margin:0; overflow:hidden; border:1px solid var(--atl-ink-700);
  min-height:min(62vh,520px);
}
.blogfeat__media img{ display:block; width:100%; height:100%; object-fit:cover; min-height:min(62vh,520px); }
.blogfeat__kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin:0 0 10px;
}
.blogfeat__title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  color:#fff; font-size:clamp(26px,3.2vw,44px); line-height:0.96;
  letter-spacing:var(--track-display); margin:0 0 16px;
}
.blogfeat__title a{ color:inherit; }
.blogfeat__title a:hover{ color:var(--accent); }
.blogfeat__excerpt{
  font-size:16px; line-height:1.65; color:var(--atl-ink-200);
  margin:0 0 22px; max-width:58ch;
}

/* ------------------------------ Hub grid -------------------------------- */
.bloghub{
  background:#000;
  padding-block:clamp(48px,6vw,96px);
  border-top:1px solid var(--atl-ink-800);
}
.bloghub__head{ margin-bottom:28px; }
.bloggrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.blogcard{
  display:flex; flex-direction:column; min-width:0;
  background:var(--atl-ink-900); border:1px solid var(--atl-ink-700);
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.blogcard:hover{ transform:translateY(-3px); border-color:var(--accent); }
.blogcard__media{
  display:block; aspect-ratio:16/10; overflow:hidden; background:var(--atl-ink-800);
}
.blogcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blogcard__body{ display:flex; flex-direction:column; gap:10px; padding:20px 20px 18px; flex:1; }
.blogcard__date{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent);
}
.blogcard__title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  color:#fff; font-size:18px; line-height:1.12; letter-spacing:.01em;
}
.blogcard__excerpt{
  font-size:14px; line-height:1.6; color:var(--atl-ink-300); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blogcard__cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:8px;
  font-family:var(--font-sans); font-weight:700; font-size:12px;
  letter-spacing:var(--track-wide); text-transform:uppercase; color:#fff;
}
.blogcard__cta svg{ transition:transform var(--dur-base) var(--ease-out); }
.blogcard:hover .blogcard__cta svg{ transform:translateX(4px); }

/* ------------------------------ Article --------------------------------- */
.blogarticle{
  background:var(--atl-ink-1000);
  padding-block:clamp(48px,6vw,96px);
}
.blogprose{ max-width:74ch; overflow-wrap:break-word; }
.blogprose h2, .blogprose h3, .blogprose h4{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  color:#fff; letter-spacing:.01em; line-height:1.1; margin:36px 0 14px;
}
.blogprose h2{ font-size:clamp(22px,2.4vw,32px); }
.blogprose h3{ font-size:clamp(18px,1.8vw,24px); }
.blogprose h4{ font-size:16px; letter-spacing:.04em; }
.blogprose p, .blogprose ul, .blogprose ol{
  font-size:16px; line-height:1.75; color:var(--atl-ink-200); margin:0 0 18px;
}
.blogprose ul, .blogprose ol{ padding-left:1.2em; }
.blogprose table{ display:block; overflow-x:auto; }
.blogprose li{ margin:0 0 8px; }
.blogprose a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.blogprose a:hover{ color:var(--accent); }
.blogprose strong, .blogprose b{ color:#fff; font-weight:700; }
.blogprose figure{ margin:28px 0; }
.blogprose img{
  display:block; width:100%; height:auto; margin:24px 0;
  border:1px solid var(--atl-ink-700);
}
.blogprose figcaption{
  font-size:13px; color:var(--atl-ink-400); margin-top:8px;
}
.blogprose blockquote{
  margin:28px 0; padding:18px 22px; border-left:3px solid var(--accent);
  background:var(--atl-ink-900); color:#fff; font-size:18px; line-height:1.5;
}
.blogprose table{
  width:100%; border-collapse:collapse; margin:22px 0 28px;
  font-size:14px;
}
.blogprose th, .blogprose td{
  border:1px solid var(--atl-ink-700); padding:10px 12px; text-align:left;
  color:var(--atl-ink-200);
}
.blogprose th{ color:#fff; background:var(--atl-ink-900); font-weight:700; }

.blogrelated{
  background:#000;
  padding-block:clamp(48px,6vw,88px);
  border-top:1px solid var(--atl-ink-800);
}

@media (max-width:980px){
  .blogfeat__grid, .bloggrid{ grid-template-columns:1fr; }
  .blogfeat__media, .blogfeat__media img{ min-height:240px; }
}
@media (min-width:981px) and (max-width:1180px){
  .bloggrid{ grid-template-columns:repeat(2,1fr); }
}