/**
 * Author - Figma 10:281
 *
 * Canvas (card origin 1013,1327, size 217x170 -> the rail is 234 wide, height is
 * content-driven):
 *   box     white, radius 13, shadow -2px 8px 24px -8px rgba(0,0,0,.3)
 *   title   1030,1344  -> inset 17;  Reckless Neue 16px / 21.047, -0.48px (-0.03em)
 *   rule    1030,1370  -> 28x2 #E60000, 26px below the title's box top
 *   disc    1077,1369  -> 90x90 #E60000, centred (card centre 1121.5, disc centre 1122),
 *                         its top flush with the rule
 *   photo   masked 1077,1332.5 90x126.5 - a cut-out that rises ABOVE the disc
 *   name    1040,1467  -> 8px below the disc;  10px / 13, Graphik Semibold, centred
 *   (measured against Figma's own render: rule ink y=41..42 x=17..44, disc x=64..154)
 *
 * DEVIATIONS:
 *   - name 13px, not the canvas's 10px - decisions D6/D7 in MODULES.md. Line-height keeps
 *     the design's 1.3 ratio (13/10).
 *   - padding 17 all round (the canvas's bottom inset is 17 too; the 170 height is fixed).
 *
 * THE CUT-OUT IS NOT REPRODUCED, and this is the one thing on this card a designer needs to
 * look at. The design's portrait is a transparent PNG cut-out sitting ON the red disc - the
 * blouse and background are knocked out so the red shows through, and the hair rises past
 * the disc's top edge. That only works if every site_leadership entry's photo is a cut-out
 * with an alpha channel, and they are ordinary rectangular headshots today. So the photo is
 * clipped to the disc instead:
 *
 *   - an ordinary photo   -> a circular portrait, the disc hidden behind it. Correct-looking.
 *   - a cut-out PNG       -> red shows through exactly as designed, minus the hair rising
 *                            above the disc (which needs the clip removed, and would show a
 *                            rectangle's corners for any photo that is not a cut-out).
 *
 * i.e. it renders the design as soon as the assets exist, and never renders broken until
 * they do. Removing the clip is a two-line change if cut-outs are confirmed.
 *
 * Specificity: two classes throughout - see iron-extensions/README.md.
 */

.iron-author {
	padding: 17px;
	background: #fff;
	border-radius: 13px;
	box-shadow: -2px 8px 24px -8px rgba(0, 0, 0, 0.3);
}

/* margin:0 is load-bearing - `.site-iron-main-generic p` (0,1,1) puts 1.5rem under it. */
.iron-author .iron-author__title {
	margin: 0;
	font-family: 'Reckless Neue', Georgia, serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.315; /* 21.047 / 16 */
	letter-spacing: -0.03em;
	color: #000;
}

/* The 28x2 red rule, drawn the same way as every other card in the rail. */
.iron-author .iron-author__title::after {
	content: '';
	display: block;
	width: 28px;
	height: 2px;
	margin-top: 5px;
	background: var(--iron-red, #e60000);
}

/*--------------------------------------------------------------
# The portrait
#
# The red disc is the figure's own background rather than a separate element: it is behind
# the photo and exactly its size, so anything else is a second box to keep in sync.
#
# margin-top:0 is the canvas value, not an omission - the disc's top (1369) sits flush with
# the rule's bottom (1370). In the design the cut-out's hair breaks that edge; here the
# clipped circle meets it squarely.
--------------------------------------------------------------*/
.iron-author .iron-author__figure {
	width: 90px;
	height: 90px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 50%;
	background: var(--iron-red, #e60000);
}

/* When the portrait is a link (a Leadership author), the anchor fills the disc so the whole
   circle is clickable, not just the pixels of the image. */
.iron-author .iron-author__photo-link {
	display: block;
	width: 100%;
	height: 100%;
}

.iron-author .iron-author__photo {
	display: block;
	width: 100%;
	height: 100%;
	/* Both axes are fixed above, so object-fit is what keeps any upload's proportions:
	   without it a portrait headshot is squashed into the square. `top`, not `center`,
	   because a headshot's face is in its upper half - centring a tall photo crops the
	   head off. */
	object-fit: cover;
	object-position: center top;
}

/*--------------------------------------------------------------
# The name
--------------------------------------------------------------*/
.iron-author .iron-author__name {
	/* Canvas: disc ends 1459, name box starts 1467. margin spelled out on all four sides -
	   the theme's <p> rule would otherwise add 1.5rem below it. */
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 600; /* Graphik Semibold, per canvas */
	line-height: 1.3; /* 13 / 10, the design's ratio */
	letter-spacing: 0;
	color: #000;
	text-align: center;
}

/* The link is additive: at rest it is exactly the design's plain black name, and it only
   announces itself on hover/focus. (single.php already links this same field to the same
   Leadership entry, so the destination is not new either.) */
.iron-author .iron-author__link {
	color: inherit;
	text-decoration: none;
}

.iron-author .iron-author__link:hover,
.iron-author .iron-author__link:focus-visible {
	text-decoration: underline;
}