/* Author profile pages (/about/<name>/) - photo to the right of the hero copy.
   Loaded only on pages with a news_author meta (ig-includes/bbb-author-profile-styles.php).
   The photo is never scaled above its native 260px, so it stays sharp. */

.news-hero-inner.has-author-photo { display: grid; grid-template-columns: minmax(0, 700px) auto; justify-content: start; column-gap: 64px; align-items: start; }
.author-hero-copy { min-width: 0; }
/* Top of the photo lines up with the top of the h1's capital letters, not the h1 box:
   the font-size mirrors .news-hero h1, Outfit's cap top sits 0.22em below the line box,
   and the -2px cancels the transparent rows at the top of the profile PNG. */
.author-photo { margin: 0; font-size: clamp(30px, 4vw, 44px); padding-top: calc(0.22em - 2px); }
.author-photo img { display: block; width: 220px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* Social links under the photo - same look as the footer's .ft-social X icon.
   Glyphs are CSS masks because post_content can't carry inline <svg> (KSES strips it). */
.author-social { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.author-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28); color: #fff; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.author-social a:hover, .author-social a:focus-visible { background: #fff; color: #252A31; border-color: #fff; }
.author-social a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.author-social span { display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; }
.author-social-instagram span { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.3' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.author-social-linkedin span { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3zM9.5 9.5h3.8v1.6h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.1c0-1.22-.02-2.78-1.7-2.78-1.7 0-1.96 1.33-1.96 2.7V21h-4z'/%3E%3C/svg%3E"); }
/* X glyph = the footer's .ft-social-x path (used on /about/rob-shepherd/). */
.author-social-x span { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); }
/* Wikipedia's serif "W": two overlapping Vs with top serifs, wider than the others so it gets 18px. */
.author-social-wikipedia span { width: 18px; height: 18px; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='square'%3E%3Cpath d='M2.8 5.5L7.3 19 12 5.5 16.7 19 21.2 5.5' stroke-width='1.9' stroke-linejoin='miter'/%3E%3Cpath d='M0.6 5.5H5M9.8 5.5h4.4M19 5.5h4.4' stroke-width='1.3'/%3E%3C/svg%3E"); }

@media (min-width: 768px) and (max-width: 1023px) {
    .news-hero-inner.has-author-photo { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; }
    .author-photo img { width: 180px; }
}

@media (max-width: 767px) {
    .news-hero-inner.has-author-photo { grid-template-columns: 1fr; }
    .author-photo { grid-row: 1; margin-bottom: 20px; padding-top: 0; justify-self: start; }
    .author-photo img { width: 140px; }
}