/* Hazard Paper: blog index media tiles, callouts, pagination.
   Written by the design system. Tokens mirror the active DESIGN.md. */

/* ---- Media tiles ------------------------------------------------------ */
/* Fixed ratios so the grid reserves space before the image loads.
   This site publishes CWV thresholds as canon, so CLS here is not optional. */
.ex-media{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  background-color:#ECEAE4;
}
.ex-media.ex-3x2{aspect-ratio:3/2;}
.ex-media.ex-16x9{aspect-ratio:16/9;}
.ex-media.ex-1x1{aspect-ratio:1/1;flex:0 0 92px;width:92px;}

/* The image widget fills the tile. When a post has no featured image the
   widget renders nothing and the category fill below is the finished state. */
.ex-media > .elementor-widget-image,
.ex-media > .elementor-widget-image > .elementor-widget-container,
.ex-media > .elementor-widget-image a{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
}
.ex-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:0;
}

/* ---- Format fills ---------------------------------------------------- */
/* One fill per format, so the grid reads as data with zero photography. */
.e-loop-item.category-teardown   .ex-media{background-color:#5200FF;}
.e-loop-item.category-stack      .ex-media{background-color:#0057FF;}
.e-loop-item.category-signal     .ex-media{background-color:#EAFF3C;}
.e-loop-item.category-experiment .ex-media{background-color:#FF6B2C;}
.e-loop-item.category-report     .ex-media{background-color:#FF6EC7;}
.e-loop-item.category-blogging   .ex-media{background-color:#131313;}

/* ---- Card typography ------------------------------------------------- */
.ex-card-title a{color:#131313;text-decoration:none;}
.ex-card-title a:hover{color:#3860BE;}
.ex-meta{
  font-family:"Space Mono","Courier New",monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#6E6E6E;
}
.ex-meta .ex-fmt{color:#309875;}

/* ---- Callouts -------------------------------------------------------- */
/* A callout occupies a whole grid cell and never impersonates an article. */
.ex-callout{border-radius:20px;}
.ex-disclosure{
  font-family:"Space Mono","Courier New",monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

/* ---- Pagination ------------------------------------------------------ */
.ex-pagination .elementor-pagination{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}
.ex-pagination .page-numbers{
  font-family:"Space Mono","Courier New",monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#131313;
  text-decoration:none;
  border:1px solid #D8D7D2;
  border-radius:40px;
  min-width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
}
.ex-pagination .page-numbers:hover{border-color:#131313;color:#131313;}
.ex-pagination .page-numbers.current{
  background:#3CFFD0;
  border-color:#131313;
  color:#000000;
}

/* ---- Topic pills ----------------------------------------------------- */
.ex-topic a{
  font-family:"Space Mono","Courier New",monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

/* ---- Responsive collapse -------------------------------------------- */
/* Declared, not assumed. Rails keep their horizontal layout everywhere. */
@media (max-width:1024px){
  .ex-lead-split{flex-direction:column !important;}
  .ex-lead-split > .e-con{width:100% !important;}
}
@media (max-width:767px){
  .ex-media.ex-1x1{flex:0 0 76px;width:76px;}
}