/* Shared media component. Content photographs use this renderer and these tokens; heroes are separate.
   Variants: default 3:2; deliberate portrait rows 4:5. Orphans retain their sibling width.
   Set --media-focal on the picture (mirrored in data-focal for the review report). */
:root{--media-gap:24px;--media-caption-pad:20px;--media-caption-bg:#fff;--media-title:#18526a;--media-text:#343a3b;--media-border:#deded8}
html body .media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--media-gap);align-items:stretch;min-width:0;margin:0;padding:0}
html body .media-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
html body .media-grid--single{grid-template-columns:minmax(0,1fr)}
html body .media-card{position:relative;display:flex;flex-direction:column;align-self:stretch;min-width:0;max-width:100%;height:auto;min-height:0;margin:0;padding:0;border:1px solid var(--media-border);border-radius:0;overflow:hidden;box-shadow:none;background:var(--media-caption-bg);color:var(--media-text);grid-column:auto;grid-row:auto}
html body .media-card__frame{position:relative;display:block;flex:0 0 auto;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:var(--media-ratio,3 / 2)!important;overflow:hidden;margin:0!important;padding:0!important;border:0;background:transparent;transform:none;inset:auto}
html body .media-card__frame img{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;max-width:none!important;margin:0!important;padding:0!important;border:0;object-fit:cover!important;object-position:var(--media-focal,50% 50%)!important;transform:none!important;background:transparent}
html body .media-card__caption{position:static;display:flex;flex:1;flex-direction:column;gap:6px;min-height:0;margin:0;padding:var(--media-caption-pad);background:var(--media-caption-bg);color:var(--media-text);font-family:inherit;font-size:14px;line-height:1.55;letter-spacing:normal;text-transform:none;text-align:left}
html body .media-card__title{margin:0;padding:0;font-family:inherit;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--media-title)}
html body .media-card__title a{color:inherit;text-decoration:underline;text-underline-offset:3px}
html body .media-card__description{margin:0;padding:0;font-family:inherit;font-size:14px;font-weight:400;line-height:1.55;letter-spacing:normal;text-transform:none;color:var(--media-text)}
html body .media-card--portrait,
html body .media-grid--portrait{--media-ratio:4 / 5}
html body .media-section-note{margin:0 0 24px;padding:24px;border-left:3px solid var(--media-title);background:#f5f6f3}
html body .media-section-note h3{margin:0 0 8px;font-size:20px}
html body .media-section-note p{margin:0;max-width:80ch}
@media(max-width:1024px){
 html body .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 html body .media-grid--single{grid-template-columns:1fr}
}
@media(max-width:640px){
 html body .media-grid{grid-template-columns:minmax(0,1fr)}
 html body .media-grid>.media-card{grid-column:auto!important}
 html body .media-grid>.media-card{--media-ratio:3 / 2!important}
 html body .media-grid.media-grid--portrait>.media-card,html body .media-grid>.media-card--portrait{--media-ratio:4 / 5!important}
}

html body .media-card--portrait{width:100%;max-width:480px}

html body .media-stack{display:flex;flex-direction:column;gap:24px}
html body .media-grid--single>.media-card--portrait{max-width:600px;justify-self:center;width:100%}
html body .media-grid>.media-card--portrait{--media-ratio:4 / 5}
html body .media-card__frame{scroll-margin-top:110px}
html body .media-card__title a::after{content:"";position:absolute;inset:0}
html body .media-card:focus-within{outline:2px solid var(--media-title);outline-offset:3px}

/* A compact inline portrait can use the same 3:2 frame without filling a text column. */
html body .media-card--compact{width:100%;max-width:480px;align-self:start}
