/* collaborators.css — page-only rules, every selector prefixed .collaborators- (design-system.md §8.1).
   Seven alternating "portrait + gradient panel" sections (specs/collaborators.md §2).
   The panel is the shared .grad-panel; its geometry lives here: a ::before pseudo-element carries the
   gradient and stretches from the text column to the viewport edge (original: background-gradient.webp,
   65% wide, edge-aligned). Deviation from the original (DECISIONS 7): the panel has a min-height and grows
   with the bio (text height + 2×16px) so long bios (Shannon, Samantha) never overflow it.
   Breakpoints (design-system.md §0): 1366, 1200, 1024, 880, 767. */

.page-collaborators{
  --collaborators-gap:40px;            /* photo ↔ text column gap */
  --collaborators-panel-pad:16px;      /* vertical padding inside the panel (matches the original's ~16px text clearance) */
  --collaborators-panel-min:615px;     /* measured panel height at 1440 (≈42.7% of the viewport width) */
}

.collaborators-section{position:relative;overflow:hidden;padding-inline:20px;margin-bottom:var(--space-section-gap)}
.collaborators-row{display:flex;align-items:stretch;gap:var(--collaborators-gap);width:100%;max-width:var(--container-max);margin:0 auto}

/* photo column: natural aspect ratio, top of the column, drawn above the panel */
.collaborators-photo{position:relative;z-index:2;display:flex;flex-direction:column;min-width:0}
.collaborators-photo img{display:block;flex:0 0 auto;width:100%;height:auto}

/* text column: panel block vertically centred in the row */
.collaborators-text{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.collaborators-panel{display:flex;flex-direction:column;justify-content:center;isolation:isolate;background:none;
  min-height:clamp(375px, 42.7vw, var(--collaborators-panel-min));padding:var(--collaborators-panel-pad) 0}
.collaborators-panel::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;background:var(--grad-h)}
.collaborators-panel h2{margin:0 0 10px}
.collaborators-panel p{margin:0}
.collaborators-panel p + p{margin-top:1.6em}          /* one blank line, as the original <br><br> */

/* variant A: photo LEFT (45.042%), panel RIGHT flush with the viewport edge (text column 50.029%) */
.collaborators-section--photo-left .collaborators-photo{flex:0 0 45.042%}
.collaborators-section--photo-left .collaborators-text{flex:0 0 50.029%}
.collaborators-section--photo-left .collaborators-panel::before{
  left:calc(-1 * var(--collaborators-gap) - 3px);
  right:calc(-50px - max(0px, (100vw - var(--container-max)) / 2))}

/* variant B: text column LEFT (54.97%, no shrink), panel flush with the left viewport edge, photo takes the rest */
.collaborators-section--photo-right .collaborators-text{flex:0 0 54.97%}
.collaborators-section--photo-right .collaborators-photo{flex:1 1 auto}
.collaborators-section--photo-right .collaborators-panel::before{
  right:calc(-1 * var(--collaborators-gap) - 4px);
  left:calc(-20px - max(0px, (100vw - var(--container-max)) / 2))}

@media (max-width:1366px){
  .collaborators-section--photo-left{--collaborators-gap:20px}
  .collaborators-section--photo-left .collaborators-photo,
  .collaborators-section--photo-left .collaborators-text,
  .collaborators-section--photo-right .collaborators-text{flex:0 0 calc(50% - var(--collaborators-gap) / 2)}
  .collaborators-section--photo-right .collaborators-photo{flex:1 1 auto}
}

@media (max-width:1024px){
  .collaborators-section--photo-left .collaborators-photo{flex:0 0 40%}
  .collaborators-section--photo-left .collaborators-text{flex:1 1 auto}
  .collaborators-section--photo-right .collaborators-text{flex:0 0 60%}
  .collaborators-panel h2{margin-bottom:5px}
}

@media (max-width:880px){
  .collaborators-text{padding:20px 0}
  .collaborators-photo{justify-content:center}
}

/* mobile: stacked, photo first in every section, the whole section is one full-bleed gradient block.
   Photo-left sections show the indigo end of the brand ramp, photo-right sections the teal end. */
@media (max-width:767px){
  .collaborators-section{overflow:visible;padding:30px 20px 0}
  .collaborators-section--photo-left{background:linear-gradient(90deg, #32579c 0%, var(--c-indigo) 100%)}
  .collaborators-section--photo-right{padding-bottom:10px;background:linear-gradient(90deg, var(--c-teal) 0%, #28c3b5 100%)}
  .collaborators-row{flex-direction:column;gap:20px}
  .collaborators-section .collaborators-photo,
  .collaborators-section .collaborators-text{flex:0 0 auto;width:100%}
  .collaborators-photo{order:-1}
  .collaborators-panel{min-height:0;padding:0}
  .collaborators-panel::before{display:none}
  .collaborators-panel h2{margin-bottom:5px}
  .collaborators-panel p + p{margin-top:26px}
  .collaborators-section:last-child{margin-bottom:20px}   /* measured gap before the footer on the original */
}