/* ============================================================================
   CAREERS — page-specific styles for /careers/.
   "Grown here" success stories: two equal-height testimonial cards side by
   side (photo + quote up top, story body, attribution + stat rail pinned to
   the bottom). Cards speak the .dc-pillar surface language from landing-3.css
   (#dbe6fb border, white→ice gradient wash, gradient top bar) so the section
   reads as one family with the "Life at DesiCrew" band above it.
   ========================================================================== */

.dc-story-list{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:1024px){ .dc-story-list{ grid-template-columns:1fr 1fr; gap:1.75rem; } }

.dc-story{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:1.15rem;
  padding:2rem 1.75rem 1.75rem; border:1px solid #dbe6fb; border-radius:14px;
  background:linear-gradient(160deg,#ffffff 0%,#f4f8ff 62%,#eef4ff 100%);
  box-shadow:0 16px 32px -24px rgba(11,68,207,.55);
}
.dc-story::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--dc-gradient); }

/* top row — portrait beside the pull quote */
.dc-story__top{ display:flex; flex-direction:column; gap:1.15rem; }
@media (min-width:560px){ .dc-story__top{ flex-direction:row; align-items:center; gap:1.6rem; } }

.dc-story__media{ position:relative; margin:0; width:min(200px,70%); flex-shrink:0; }
/* Below 560px .dc-story__top is a COLUMN, so the fixed-width portrait sits flush left
   with a gap of dead space beside it. Centre it on the cross axis there. From 560px the
   row layout puts it beside the quote, where flush-left is correct. */
@media (max-width:559px){ .dc-story__media{ align-self:center; } }
@media (min-width:560px){ .dc-story__media{ width:172px; } }
@media (min-width:1024px) and (max-width:1339px){ .dc-story__media{ width:148px; } }
.dc-story__media img{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top;
  border-radius:10px; outline:1px solid rgba(1,28,70,.08); outline-offset:-1px;
  background:#eef4ff;
}

/* deck-mosaic pixel cluster stepping off the photo corner */
.dc-story__px i{ position:absolute; width:.7rem; height:.7rem; border-radius:2px; }
.dc-story__px i:nth-child(1){ background:#22d2a2; right:-.35rem; bottom:2.2rem; }
.dc-story__px i:nth-child(2){ background:#1892e5; right:-.8rem; bottom:1.25rem; opacity:.85; }
.dc-story__px i:nth-child(3){ background:#ffd23f; right:-.35rem; bottom:.3rem; }

/* hanging-punctuation pull quote */
.dc-story__quote{
  position:relative; font-family:var(--font-main); font-weight:600;
  font-size:clamp(1.15rem, 1.02rem + .5vw, 1.4rem); line-height:1.4; color:#011c46;
  text-wrap:balance;
}
.dc-story__quote::before{ content:"\201C"; position:absolute; transform:translateX(-100%); }
.dc-story__quote::after{ content:"\201D"; }

.dc-story__text{ display:flex; flex-direction:column; gap:.8rem; }
.dc-story__text p{ font-size:1rem; line-height:1.6; color:#2e3a52; max-width:70ch; text-wrap:pretty; }

/* footer — attribution + stat rail pinned to the card bottom so the pair
   stays aligned across both cards regardless of story length */
.dc-story__foot{
  margin-top:auto; display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:1rem 2rem;
  border-top:1px solid rgba(1,28,70,.08); padding-top:1.2rem;
}
.dc-story__who{ display:flex; flex-direction:column; gap:.2rem; }
.dc-story__name{ font-family:var(--font-main); font-weight:600; font-size:1rem; color:#011c46; }
.dc-story__role{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#55617a; }

/* gradient numerals in the fame-wall register, hairline dividers */
.dc-story__stats{ display:flex; flex-wrap:wrap; row-gap:.9rem; }
.dc-story__stats li{ display:flex; flex-direction:column; gap:.15rem; padding:0 1.25rem; border-left:1px solid rgba(1,28,70,.1); }
.dc-story__stats li:first-child{ padding-left:0; border-left:0; }
.dc-story__stats li:last-child{ padding-right:0; }
.dc-story__stats .n{
  font-family:var(--font-mono); font-weight:700; font-size:1.3rem; line-height:1.1;
  background:var(--dc-gradient); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.dc-story__stats .l{ font-size:.78rem; line-height:1.35; color:#55617a; }

/* narrow screens — tighter card padding; three equal stat tracks so the rail
   never wraps mid-row (labels wrap inside their own column instead) */
@media (max-width:600px){
  .dc-story{ padding:1.5rem 1.25rem 1.35rem; }
  .dc-story__stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
  .dc-story__stats li{ padding:0 .85rem; }
  .dc-story__stats li:first-child{ padding-left:0; }
  .dc-story__stats li:last-child{ padding-right:0; }
  .dc-story__stats .n{ font-size:1.2rem; }
  .dc-story__stats .l{ font-size:.75rem; }
}