/* TECH MEDIA CORPORATION V5.6 — Selected Experience display correction.
   The V5.4 viewport rules gave the featured card's artwork and copy both
   height:100%, while the parent had a fixed height + overflow:hidden.
   This placed the copy below the clipped card. Keep all three experiences
   complete, legible and aligned without hiding text at any viewport. */
.experience-grid{align-items:stretch}
.experience-grid .experience-card{
  display:flex;
  flex-direction:column;
  height:auto;
  min-height:0;
}
.experience-grid .experience-card .experience-art{
  height:clamp(205px,26svh,255px);
  min-height:0;
  flex:0 0 auto;
}
.experience-grid .experience-card .experience-copy{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  height:auto;
  min-height:275px;
  overflow:visible;
}
.experience-grid .experience-card .experience-copy h3{
  overflow-wrap:break-word;
}
/* On medium screens, the featured story is a full-width editorial case,
   with image and copy side by side and no height-dependent clipping. */
@media (min-width:701px) and (max-width:1150px){
  .experience-grid .experience-feature{
    display:grid;
    grid-column:1/-1;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    min-height:315px;
  }
  .experience-grid .experience-feature .experience-art{
    height:100%;
    min-height:315px;
  }
  .experience-grid .experience-feature .experience-copy{
    height:auto;
    min-height:315px;
    justify-content:center;
  }
  .experience-grid .experience-feature .experience-art{
    border-radius:var(--ui-radius-lg) 0 0 var(--ui-radius-lg);
  }
}
/* Small screens: a single readable, naturally tall card per story. */
@media (max-width:700px){
  .experience-grid .experience-feature{
    display:flex;
    grid-column:auto;
    height:auto;
  }
  .experience-grid .experience-card .experience-art{
    height:clamp(145px,23svh,200px);
    min-height:0;
  }
  .experience-grid .experience-card .experience-copy{
    min-height:0;
    padding:20px;
  }
}