/* Steppe essay list (steppe/essays-list.njk) and essay page (steppe/essay.njk).
   This file loads after steppe-pages.css. */

/* The list: a card grid that uses the full page width. */
.mo-essay-grid{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8) var(--space-7)}
.mo-essay-card{display:flex;flex-direction:column;gap:var(--space-4)}
.mo-essay-card__link{display:flex;flex-direction:column;gap:var(--space-5);color:inherit;border:0}
.mo-essay-card__plate{aspect-ratio:4 / 3;position:relative;transition:transform var(--duration-base) var(--ease-out)}
.mo-essay-card__plate img{position:absolute;bottom:0;left:0;right:0;margin-inline:auto;max-width:100%;max-height:100%;box-sizing:border-box;background:var(--paper-3);border:var(--border-width-frame) solid var(--paper-0);box-shadow:var(--shadow-2)}
.mo-essay-card__panel{justify-content:center}
.mo-essay-card__link:hover .mo-essay-card__plate,.mo-essay-card__link:focus-visible .mo-essay-card__plate{transform:translateY(-3px)}
.mo-essay-card__link:hover .mo-essays__title,.mo-essay-card__link:focus-visible .mo-essays__title{color:var(--flame-1)}

/* The essay page: rail, body, and a figure column when the essay has an image. */
.mo-post--essay{grid-template-columns:180px minmax(0,1fr) clamp(260px,32%,480px)}
.mo-post--essay-noimg{grid-template-columns:180px minmax(0,1fr)}
.mo-essay-figure{position:sticky;top:var(--mo-sticky-top);align-self:start}
.mo-essay-figure__frame{margin:0;border:var(--border-width-frame) solid var(--paper-0);box-shadow:var(--shadow-2);background:var(--paper-3)}
.mo-essay-figure__img{display:block;width:100%;height:auto}

@media (max-width:1000px){
  .mo-essay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mo-post--essay,.mo-post--essay-noimg{grid-template-columns:1fr}
  .mo-essay-figure{position:static;max-width:480px}
  .mo-post--essay .mo-post__rail{order:0}
  .mo-post--essay .mo-essay-figure{order:1}
  .mo-post--essay .mo-post__body{order:2}
}

@media (max-width:640px){
  .mo-essay-grid{grid-template-columns:1fr}
}