@import url('./home-v4.css');

/* Four complete stories per section; preserve V4's blue visual system. */
.stories--four{grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.stories--four .story-card__image{height:205px}
.stories--four .story-card__body{padding:21px 1px 0}
.stories--four .story-card__kind{font-size:9px}
.stories--four .story-card h3{font-size:clamp(18px,1.55vw,22px);line-height:1.3;margin:11px 0}
.stories--four .story-card p{font-size:12px;line-height:1.6;margin-bottom:20px}
.stories--four .story-card .text-link{font-size:9px;letter-spacing:.1em}

#cases .stories--four .story-card{position:relative;isolation:isolate;overflow:hidden;height:430px;background:#0b2f68}
#cases .stories--four .story-card__image{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
#cases .stories--four .story-card__image::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#061935f5 0%,#082754b8 45%,#12386613 88%)}
#cases .stories--four .story-card__body{padding:25px 22px;justify-content:flex-end;color:#fff}
#cases .stories--four .story-card__kind{color:#cde3ff}
#cases .stories--four .story-card h3{font-size:clamp(20px,1.6vw,24px);margin:10px 0}
#cases .stories--four .story-card p{color:#e1eaf7;line-height:1.5;margin:0 0 15px}
#cases .stories--four .text-link{color:#fff;border-color:#fff;margin-top:0}
#cases .stories--four .text-link span{color:#fff}
#cases .section-head .text-link{color:#fff;border-color:#fff}
#cases .section-head .text-link span{color:#fff}

.people__collage{grid-template-columns:repeat(4,minmax(0,1fr));height:345px}
.people__image--main{grid-column:auto}

@media(max-width:1120px){
  .stories--four{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 20px}
  .stories--four .story-card__image{height:275px}
  .stories--four .story-card h3{font-size:25px}
  #cases .stories--four .story-card{height:460px}
  .people__collage{grid-template-columns:repeat(2,minmax(0,1fr));height:auto}
  .people__image{height:300px}
}

@media(max-width:720px){
  .stories--four{grid-template-columns:1fr;gap:36px}
  .stories--four .story-card__image{height:245px}
  .stories--four .story-card h3{font-size:23px}
  .stories--four .story-card p{font-size:13px}
  #cases .stories--four .story-card{height:420px}
  #cases .stories--four .story-card__image{height:100%}
  #cases .stories--four .story-card h3{font-size:23px}
  .people__collage{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .people__image,.people__image--main{grid-column:auto;height:170px}
}