/* MC Related — component styles
   Source: related-box-inline-und-end.html (SHARED BASE → end of media queries)
   No demo chrome, no Google Font imports. */

:root{
  --mc-ink:#14213D;
  --mc-text:#1A1A1A;
  --mc-muted:#6B7280;
  --mc-band:#F4F6F8;
  --mc-rule:#E2E6EB;
  --mc-thumb:96px;
}

/* ================= SHARED BASE ================= */
.mc-related{
  background:var(--mc-band);
  border-top:2px solid var(--mc-ink);
  border-radius:0 0 14px 14px;
  padding:24px 22px 24px;
  margin:40px 0 44px;
}
.mc-related__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin:0 0 18px;
}
.mc-related__title{
  font:500 25px/1.2 "EB Garamond",Georgia,serif;color:var(--mc-ink);margin:0;
}
.mc-related__label{
  font:500 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mc-muted);white-space:nowrap;
}

.mc-related__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin:0;padding:0;list-style:none;
}
.mc-related__item{position:relative;margin:0;min-width:0;}

.mc-card__frame{
  display:block;width:100%;aspect-ratio:2/3;
  overflow:hidden;border-radius:10px;background:#DFE3E8;margin:0;
}
.mc-card__img{
  display:block;width:100%;height:100% !important;
  object-fit:cover;object-position:center 25%;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.mc-related__item:hover .mc-card__img{transform:scale(1.045);}

.mc-card__credit{
  display:block;position:relative;z-index:2;width:fit-content;
  font:400 10.5px/1.4 Inter,sans-serif;color:var(--mc-muted);
  margin:7px 0 9px;
}
.mc-card__credit a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

.mc-card__body{display:block;min-width:0;}
.mc-card__frame + .mc-card__body{margin-top:11px;}
.mc-card__hook{
  display:block;font:400 12.5px/1.4 Inter,sans-serif;
  color:var(--mc-muted);margin:0 0 3px;
}
.mc-card__payload{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-decoration:none;
  font:500 19px/1.28 "EB Garamond",Georgia,serif;color:var(--mc-ink);
  background-image:linear-gradient(var(--mc-ink),var(--mc-ink));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .35s cubic-bezier(.2,.6,.2,1);padding-bottom:2px;
}
.mc-card__payload::after{content:"";position:absolute;inset:0;z-index:1;}
.mc-related__item:hover .mc-card__payload{background-size:100% 1px;}
.mc-card__payload:focus-visible{outline:2px solid var(--mc-ink);outline-offset:3px;}

/* ========== INLINE — mid-article (Box 1) ==========
   Job: offer an exit without stopping the scroll. Stays small. */
@media (max-width:640px){
  .mc-related--inline .mc-related__grid{grid-template-columns:1fr;gap:0;}
  .mc-related--inline .mc-related__item{
    display:grid;
    grid-template-columns:var(--mc-thumb) 1fr;
    grid-template-rows:auto auto;
    column-gap:15px;align-items:center;
  }
  .mc-related--inline .mc-related__item + .mc-related__item{
    border-top:1px solid var(--mc-rule);margin-top:14px;padding-top:14px;
  }
  .mc-related--inline .mc-card__frame{
    grid-column:1;grid-row:1;width:var(--mc-thumb);aspect-ratio:3/4;border-radius:8px;
  }
  .mc-related--inline .mc-card__credit{grid-column:1;grid-row:2;margin:6px 0 0;}
  .mc-related--inline .mc-card__body{grid-column:2;grid-row:1;margin-top:0;}
  .mc-related--inline .mc-card__payload{font-size:19.5px;line-height:1.25;}
}

/* ========== END — after last image (Box 2) ==========
   Job: the article's visual payload is over. This competes with leaving,
   so it gets four options and full-size portraits instead of thumbnails. */
.mc-related--end{border-top-width:4px;padding-top:26px;margin-top:46px;}
.mc-related--end .mc-related__head{
  display:block;border-bottom:1px solid var(--mc-rule);
  padding-bottom:14px;margin-bottom:20px;
}
.mc-related--end .mc-related__title{font-size:30px;}
.mc-related--end .mc-related__label{display:block;margin-top:5px;}
.mc-related--end .mc-related__grid{grid-template-columns:repeat(4,1fr);gap:15px;}
.mc-related--end .mc-card__payload{font-size:17px;}
.mc-related--end .mc-card__hook{font-size:11.5px;}

@media (max-width:640px){
  .mc-related--end .mc-related__grid{grid-template-columns:1fr 1fr;gap:18px 14px;}
  .mc-related--end .mc-related__title{font-size:25px;}
  .mc-related--end .mc-card__payload{font-size:17.5px;}
}

@media (prefers-reduced-motion:reduce){
  .mc-card__img,.mc-card__payload{transition:none;}
  .mc-related__item:hover .mc-card__img{transform:none;}
}