/* /alfonso (BIO) and /es/bio, which share this file. Desktop positions from the Wix desktop layout
   (980px stage, stage left = 150 at 1280): title y228, social bar y276, portrait 782x1049 at x244 y377,
   biography 780 wide at x244 y1478, section ends y2291. Mobile (Wix 320 layout): title y143, biography y200.5.
   Deliberate deviations on mobile:
   - Wix hides the social bar and the portrait on phones. Alfonso wants both (October 2026), so the mobile layout
     keeps the desktop order: title, social bar, portrait across the full text column, biography.
   - On Wix the mobile biography is left aligned. Here it stays justified with hyphenation, as on desktop,
     following Alfonso's standing rule of justified text on every device (line breaks differ). */

.bio-stage { padding: 56px 0 69px; }

.bio-title {
  font: 400 24px/30px var(--font-body);
  text-align: center;
  animation: bio-fade .8s cubic-bezier(.445, .05, .55, .95) both;
}

.bio-social { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.bio-social a { display: block; width: 33px; height: 33px; }
.bio-social img { width: 33px; height: 33px; }

/* Portrait and text share Wix's 94px left offset inside the stage (they are not centred: 94 + 782 + 104). */
.bio-photo, .bio-text { margin-left: max(0px, calc((100% - 792px) / 2)); }
.bio-photo { display: block; width: 782px; max-width: 100%; margin-top: 68px; }
.bio-photo img { width: 100%; height: auto; aspect-ratio: 782 / 1049; object-fit: cover; }

.bio-text {
  width: 780px; max-width: 100%; margin-top: 52px;
  font: 400 20px/24px var(--font-body);
  letter-spacing: .0015em; /* Wix's Montserrat sets a hair wider: this keeps every line break identical */
  text-align: justify;
}
.bio-text p + p { margin-top: 24px; }
/* In-text links (a title pointing to its own page) look exactly like the copy around them; keyboard focus underlines them. */
.bio-text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bio-text a:focus-visible { text-decoration: underline; }

@keyframes bio-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 767px) {
  .bio-stage { width: calc(300 * var(--u)); padding: calc(37 * var(--u)) 0 calc(21 * var(--u)); }
  .bio-title { font-size: calc(22 * var(--u)); line-height: calc(27.5 * var(--u)); }
  .bio-social { gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); }
  .bio-social a, .bio-social img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  /* The portrait is the largest element on screen: no fade on it, so it paints (and counts as LCP) at once. */
  .bio-photo { width: 100%; margin: calc(26 * var(--u)) 0 0; }
  .bio-text {
    width: auto; margin: calc(26 * var(--u)) 0 0;
    font-size: calc(15 * var(--u)); line-height: calc(19 * var(--u));
    -webkit-hyphens: auto; hyphens: auto;
    animation: bio-fade 1.2s cubic-bezier(.445, .05, .55, .95) both;
  }
  /* Wix spaces the paragraphs with empty lines: 18 (a Work Sans line, before the awards and the closing
     paragraph) or 19 (a Montserrat line). */
  .bio-text p + p { margin-top: calc(19 * var(--u)); }
  .bio-text p:nth-child(2), .bio-text p:last-child { margin-top: calc(18 * var(--u)); }
}