/* =========================================================================
   MAKTONIC — Blog listing
   Loaded after main.css, which supplies the tokens, nav, footer and buttons.
   Everything here is scoped to sections that only exist on this page.
   ========================================================================= */

.blog-main{padding-top:var(--s-140);padding-bottom:var(--s-120)}
.blog-heading{margin:0}
.blog-standfirst{
  margin:var(--s-16) 0 0;max-width:38rem;
  color:var(--gray-600);font-size:var(--f-text-l);line-height:var(--lh-140);
}

/* ============================================================== FILTERS */
.blog-filters{
  display:flex;flex-wrap:wrap;gap:var(--s-10);
  margin:var(--s-32) 0 var(--s-32);
}
/* The pill is a plain outline until its own --tag colour fills in behind the
   label, so hover, focus and the active state are all one mechanism. */
.blog-filter{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;
  height:2.25rem;padding-inline:var(--s-16);
  border:1px solid var(--gray-100);border-radius:var(--btn-radius);
  background-color:var(--white);color:var(--gray-700);
  font-family:inherit;font-size:.875rem;letter-spacing:var(--ls-2);
  cursor:pointer;white-space:nowrap;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.blog-filter_bg{
  position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background-color:var(--tag,var(--gray-800));
  opacity:0;transition:opacity .3s var(--ease);
}
.blog-filter:hover .blog-filter_bg{opacity:.5}
.blog-filter:hover{border-color:transparent;color:var(--white)}
.blog-filter.is--active .blog-filter_bg{opacity:1}
.blog-filter.is--active{border-color:transparent;color:var(--white)}
.blog-filter:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}

/* ================================================================= GRID */
.blog-list{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s-24);align-items:stretch;
}
.blog-item{display:flex;min-width:0}
/* display:flex above outranks the [hidden] attribute, so a filtered-out card
   would keep its grid cell and tear a hole in the layout */
.blog-item[hidden]{display:none}
/* the newest post takes the full row and lays out side by side */
.blog-item.is--featured{grid-column:1 / -1}

.blog-card{
  position:relative;display:flex;flex-direction:column;width:100%;
  padding:var(--s-12);gap:var(--s-16);
  border-radius:1.125rem;
  background-color:var(--white);border:1px solid var(--gray-100);
  text-decoration:none;color:inherit;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.blog-card:hover{
  transform:translateY(-4px);
  border-color:var(--gray-200);
  box-shadow:0 18px 40px rgba(21,23,26,.10);
}
.blog-card:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px}

.blog-card_cover{
  position:relative;display:block;overflow:hidden;
  border-radius:.75rem;background-color:var(--gray-100);
}
.blog-card_cover img{
  width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;
  transition:transform .55s var(--ease);
}
.blog-card:hover .blog-card_cover img{transform:scale(1.045)}

/* the "Latest post" chip, with the shadow the reference gives it */
.blog-card_chip{
  position:absolute;left:var(--s-16);top:var(--s-16);z-index:1;
  display:inline-flex;align-items:center;gap:var(--s-8);
  padding:var(--s-8) var(--s-14);border-radius:var(--btn-radius);
  background-color:var(--white);color:var(--black);
  font-size:.8125rem;letter-spacing:var(--ls-2);
  box-shadow:0 8px 18px rgba(43,77,96,.10),0 33px 33px rgba(43,77,96,.09),
             0 75px 45px rgba(43,77,96,.05);
}
.blog-card_bullet{
  width:.5rem;height:.5rem;flex:none;border-radius:50%;
  background-color:var(--green-500);
}

.blog-card_content{
  display:flex;flex-direction:column;gap:var(--s-12);flex:1;
  padding:0 var(--s-8) var(--s-8);
}
.blog-card_meta{display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap}
.blog-tag{
  display:inline-flex;align-items:center;
  padding:.3rem var(--s-12);border-radius:var(--btn-radius);
  background-color:var(--tag,var(--gray-800));color:var(--white);
  font-size:.75rem;letter-spacing:var(--ls-1);
}
.blog-card_date{
  font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gray-500);
}

.blog-card_body{display:flex;flex-direction:column;gap:var(--s-8);flex:1}
/* both clamps come straight from the reference, so a long headline can never
   push the cards in a row out of alignment */
.blog-card_title{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;color:var(--black);
}
.blog-card_excerpt{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
  color:var(--gray-600);line-height:var(--lh-140);
}

.blog-card_author{
  display:flex;align-items:center;gap:var(--s-10);margin-top:auto;
  font-size:.9375rem;font-weight:500;letter-spacing:var(--ls-3);
}
.blog-card_author img{
  width:2rem;height:2rem;border-radius:50%;display:block;
  background-color:var(--gray-50);
}

/* ------------------------------------------------------- featured layout */
.blog-item.is--featured .blog-card{
  flex-direction:row;align-items:stretch;gap:var(--s-32);
  padding:var(--s-16);
}
.blog-item.is--featured .blog-card_cover{flex:0 0 42%;align-self:stretch}
.blog-item.is--featured .blog-card_cover img{height:100%;aspect-ratio:auto;min-height:17rem}
.blog-item.is--featured .blog-card_content{
  justify-content:center;gap:var(--s-16);padding:var(--s-24) var(--s-24) var(--s-24) 0;
}
.blog-item.is--featured .blog-card_body{flex:0 1 auto}
.blog-item.is--featured .blog-card_title{-webkit-line-clamp:2}
.blog-item.is--featured .blog-card_excerpt{max-width:34rem}
.blog-item.is--featured .blog-card_author{margin-top:var(--s-8)}

/* ----------------------------------------------------------- empty state */
.blog-empty{
  margin:var(--s-64) 0 0;text-align:center;
  color:var(--gray-500);font-size:var(--f-text-l);
}

/* ============================================================= RESPONSIVE */
@media (max-width:1279px){
  .blog-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .blog-main{padding-top:var(--s-120);padding-bottom:var(--s-90)}
  .blog-item.is--featured .blog-card{flex-direction:column;gap:var(--s-16);padding:var(--s-12)}
  .blog-item.is--featured .blog-card_cover{flex:none}
  .blog-item.is--featured .blog-card_cover img{aspect-ratio:16/9;min-height:0}
  .blog-item.is--featured .blog-card_content{padding:0 var(--s-8) var(--s-8)}
  .blog-item.is--featured .blog-card_title{-webkit-line-clamp:3}

  /* the pill row scrolls sideways rather than wrapping to three lines */
  .blog-filters{
    flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  }
  .blog-filters::-webkit-scrollbar{display:none}
}
@media (max-width:767px){
  .blog-main{padding-top:var(--s-105)}
  .blog-list{grid-template-columns:1fr;gap:var(--s-20)}
  .blog-filters{margin-block:var(--s-32) var(--s-24)}
}

/* Anyone who asked for less motion gets the list, not the arrival. */
@media (prefers-reduced-motion: reduce){
  .blog-card_bullet{animation:none}
}