/* Page-only layout extensions; typography/colors come from the existing HC+ stylesheet. */
.interview-cover-heading { margin-bottom: 32px; }
.interview-cover-heading-no-image { margin-bottom: 0; }
.interview-cover-heading p { margin-bottom: 0; }
.interview-cover { display: block; width: 100%; height: 400px; object-fit: cover; }
.interview-list-item { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: center; padding: 40px 0; }
.interview-thumbnail { display: block; width: 100%; height: auto; background: transparent; }
.interview-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.interview-intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.interview-profile-row { display: flex; align-items: center; gap: 16px; }
.interview-profile-image { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; object-fit: cover; }
@media screen and (max-width: 767px) {
 .interview-cover { height: 220px; }
 .interview-list-item { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
 .interview-cover-heading br { display: none; }
}

/* Switch only this wrapper modifier to make the cover full bleed (B). */
.interview-cover-full { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
picture:has(> .interview-cover) { display: block; }

/* Quiet separators keep the article hierarchy clear without heavy rules. */
.interview-list-item + .divider-under-line { height: 1px; background-color: #dedede; }