/* V20 - name order, photo framing and gallery layouts. Loaded after site-integrations.css on every page. */

/* Nickname first: "Surge Innovates" (small gold italic) above "Sergio R. Vazquez"; screen readers read
   "Surge Innovates · Sergio R. Vazquez". */
.si-nick.si-nick--first{margin:0 0 .2em}

/* Homepage team card: Sergio's editorial arena portrait - head down to the camera in his hands, little headroom */
.team-person__main img[src$="sergio-card-v20.webp"]{object-position:22% 0}

/* $850 package photo: keep the trainer's whole hat in frame at every width */
.investment-photo{background-position:0 0,50% 0}

/* Minimal headroom on the new portrait crops (they are already cut close above the hat) */
.profile-hero__image img[src*="-hero-v20."]{object-position:50% 0}
.profile-gallery img[src*="-v20."]{object-position:50% 12%}
.team-person__montage img[src*="-v20."]{object-position:50% 0}
/* V20b - Sergio's two editorial montage photos: same slot size as the other team cards (the V16 taller
   slots were for portrait photos) and anchored at the top - the crops start just above his hair. */
.team-person__card[href="people/sergio/"] .team-person__montage figure{height:clamp(120px,12vw,160px)}
@media(max-width:700px){.team-person__card[href="people/sergio/"] .team-person__montage figure{height:clamp(125px,35vw,180px)}}
.team-person__card[href="people/sergio/"] .team-person__montage figure img[src*="-v20b."]{object-position:50% 0}

/* Profile galleries with two photos: two equal tiles, no empty grid cells */
.profile-gallery.profile-gallery--pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.profile-gallery.profile-gallery--pair figure:first-child{grid-column:auto;grid-row:auto}
.profile-gallery.profile-gallery--pair img,.profile-gallery.profile-gallery--pair figure:first-child img{height:clamp(300px,36vw,560px)}
@media(max-width:620px){
  .profile-gallery.profile-gallery--pair{grid-template-columns:1fr}
  .profile-gallery.profile-gallery--pair img,.profile-gallery.profile-gallery--pair figure:first-child img{height:clamp(300px,85vw,450px)}
}

/* V20b - Sergio's gallery (7): desktop [Peluche Peluche VIDEO] x2 rows, then [gear setup TRIPOD] [takes review TRIPOD];
   tablet (2 cols): Peluche full row, [VIDEO gear] [VIDEO setup] [TRIPOD takes] [TRIPOD review]; phone: one column.
   The tall tripod photo (512x910) spans two rows like the video - no empty grid cells at any width. */
.profile-gallery--sergio .profile-gallery__video+figure{grid-column:auto}
.profile-gallery--sergio .profile-gallery__tall{grid-row:span 2;display:flex;flex-direction:column}
.profile-gallery--sergio .profile-gallery__tall img{flex:1 1 0;height:0;min-height:0;object-fit:cover;object-position:70% 50%}
.profile-gallery--sergio img[src$="sergio-team-review-v16.jpg"]{object-position:50% 6%}
@media(max-width:620px){.profile-gallery--sergio .profile-gallery__tall{grid-row:auto;display:block}.profile-gallery--sergio .profile-gallery__tall img{flex:none;height:auto;aspect-ratio:512/910}}
/* Tablet (2 columns, large photo on its own row): an odd number of remaining photos -> the last one spans both columns */
@media(min-width:621px) and (max-width:950px){.profile-gallery:not(.profile-gallery--pair):not(.profile-gallery--sergio) figure:first-child:nth-last-child(even)~figure:last-child{grid-column:span 2}}

/* v20c: nickname readable in the daytime theme */
html[data-theme="day"] .profile-hero .si-nick{color:#7a4f10}

/* v20e-seo: width/height attributes on <img> only reserve space (aspect ratio) before load; they never size an image.
   Zero specificity, so every existing sizing rule still wins exactly as before. */
:where(img[width][height]){width:auto;height:auto}