/* =========================================================
   EXPERTISE VERIFIED PORTRAIT v115
   Dedicated HTML classes:
   card = top landscape image + lower portrait content.
   ========================================================= */

body.footer-layout[data-story-page="skills"] > main{
  display:block!important;
  min-height:0!important;
}

body.footer-layout[data-story-page="skills"] .spatial-story{
  padding:28px 0 30px!important;
  min-height:0!important;
}

body[data-story-page="skills"] .story-layout{
  width:min(calc(100% - 48px), var(--max))!important;
  margin:0 auto!important;
  display:block!important;
}

body[data-story-page="skills"] .compact-story-records{
  display:block!important;
}

body[data-story-page="skills"] .story-intro{
  margin:0 0 22px!important;
  padding:0 0 14px!important;
  border-bottom:1px solid var(--line)!important;
}

body[data-story-page="skills"] .story-intro h1{
  margin:0 0 6px!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(2rem,3vw,2.45rem)!important;
  line-height:1.08!important;
  color:var(--primary2)!important;
}

body[data-story-page="skills"] .story-intro p{
  margin:0!important;
  max-width:760px!important;
  font-size:.9rem!important;
  line-height:1.55!important;
  color:var(--muted)!important;
}

/* The real final card layout. */
body[data-story-page="skills"] #story-chapters.story-chapters{
  display:grid!important;
  grid-template-columns:repeat(3, minmax(0, 320px))!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:24px!important;
  width:100%!important;
  margin:0!important;
}

.expertise-portrait-card{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  max-width:320px!important;
  min-height:540px!important;
  margin:0!important;
  padding:0!important;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:8px!important;
  overflow:hidden!important;
  box-shadow:none!important;
}

/* TOP SECTION: full-width landscape image */
.expertise-portrait-media{
  display:block!important;
  width:100%!important;
  height:190px!important;
  min-height:190px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  background:var(--surface2)!important;
  overflow:hidden!important;
}

.expertise-portrait-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

.expertise-portrait-card:first-child .expertise-portrait-media img{
  object-fit:contain!important;
  background:#fff!important;
  padding:12px!important;
}

/* BOTTOM SECTION: portrait content block */
.expertise-portrait-content{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  width:100%!important;
  padding:18px 18px 16px!important;
}

.expertise-portrait-content h2{
  margin:0 0 9px!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.14rem!important;
  line-height:1.22!important;
  color:var(--primary2)!important;
}

.expertise-portrait-content p{
  margin:0!important;
  font-size:.78rem!important;
  line-height:1.58!important;
  color:var(--muted)!important;
}

.expertise-portrait-focus{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin:14px 0 0!important;
}

.expertise-portrait-focus span{
  display:inline-flex!important;
  padding:5px 8px!important;
  border:1px solid var(--line)!important;
  border-radius:4px!important;
  background:var(--surface2)!important;
  color:var(--text)!important;
  font-size:.64rem!important;
  line-height:1.25!important;
  font-weight:700!important;
}

.expertise-portrait-link{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  width:max-content!important;
  margin-top:auto!important;
  padding:15px 0 0!important;
  border-top:1px solid var(--line)!important;
  color:var(--primary)!important;
  font-size:.72rem!important;
  line-height:1.2!important;
  font-weight:800!important;
  text-decoration:none!important;
}

.expertise-portrait-link span{
  transition:transform .18s ease;
}

.expertise-portrait-link:hover span{
  transform:translateX(3px);
}

@media(max-width:1180px){
  body[data-story-page="skills"] #story-chapters.story-chapters{
    grid-template-columns:repeat(2, minmax(0, 330px))!important;
    gap:18px!important;
  }

  .expertise-portrait-card{
    max-width:330px!important;
  }

  .expertise-portrait-card:nth-child(3){
    grid-column:1 / -1!important;
    justify-self:center!important;
  }
}

@media(max-width:760px){
  body.footer-layout[data-story-page="skills"] .spatial-story{
    padding:22px 0 26px!important;
  }

  body[data-story-page="skills"] .story-layout{
    width:calc(100% - 32px)!important;
  }

  body[data-story-page="skills"] #story-chapters.story-chapters{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .expertise-portrait-card,
  .expertise-portrait-card:nth-child(3){
    max-width:none!important;
    min-height:0!important;
  }

  .expertise-portrait-media{
    height:170px!important;
    min-height:170px!important;
  }

  .expertise-portrait-content{
    padding:15px 14px 14px!important;
  }
}