/* =========================================================
   EXPERTISE FORCE PORTRAIT v114
   Hard override:
   each card = TOP landscape image + BOTTOM portrait content.
   ========================================================= */

/* Page shell */
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 20px !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;
}

/* 3 portrait cards centered as a group */
body[data-story-page="skills"] .story-chapters{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(280px, 320px)) !important;
  justify-content:center !important;
  align-items:start !important;
  gap:24px !important;
  margin:0 !important;
}

/* Hard portrait card structure */
body[data-story-page="skills"] .story-chapter{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !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;
}

body[data-story-page="skills"] .story-step,
body[data-story-page="skills"] .story-chapter-kicker{
  display:none !important;
}

/* YELLOW AREA in your markup = full-width landscape image ON TOP */
body[data-story-page="skills"] .story-chapter-media{
  order:1 !important;
  display:block !important;

  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;

  height:190px !important;
  min-height:190px !important;
  max-height:190px !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  background:var(--surface2) !important;
  overflow:hidden !important;
}

body[data-story-page="skills"] .story-chapter-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  margin:0 !important;
}

/* First card illustration should remain fully visible */
body[data-story-page="skills"] .story-chapter:nth-child(1) .story-chapter-media img{
  object-fit:contain !important;
  background:#fff !important;
  padding:12px !important;
}

/* RED AREA in your markup = portrait content block BELOW */
body[data-story-page="skills"] .story-chapter-body{
  order:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;

  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  flex:1 1 auto !important;

  padding:18px 18px 16px !important;
  margin:0 !important;
}

body[data-story-page="skills"] .story-chapter-main{
  width:100% !important;
  min-width:0 !important;
}

body[data-story-page="skills"] .story-chapter h2,
body[data-story-page="skills"] .story-chapter h3{
  margin:0 0 9px !important;
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:1.13rem !important;
  line-height:1.22 !important;
  color:var(--primary2) !important;
}

body[data-story-page="skills"] .story-summary,
body[data-story-page="skills"] .story-chapter-body > p{
  margin:0 !important;
  font-size:.78rem !important;
  line-height:1.58 !important;
  color:var(--muted) !important;
}

/* Compact focus items */
body[data-story-page="skills"] .story-skill-focus{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  margin:14px 0 0 !important;
  width:100% !important;
}

body[data-story-page="skills"] .story-skill-focus span{
  display:inline-flex !important;
  align-items:center !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;
}

body[data-story-page="skills"] .story-chapter-meta{
  width:100% !important;
  margin-top:auto !important;
  padding-top:15px !important;
  border-top:1px solid var(--line) !important;
}

body[data-story-page="skills"] .story-more{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  width:max-content !important;
  margin:0 !important;
  padding:8px 12px !important;
  border:1px solid var(--line) !important;
  border-radius:4px !important;
  background:var(--neutral-button) !important;
  color:var(--primary) !important;
  font-size:.7rem !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

body[data-story-page="skills"] .story-more:hover,
body[data-story-page="skills"] .story-more:focus-visible{
  background:var(--neutral-button-hover) !important;
  border-color:var(--accent) !important;
  color:var(--primary2) !important;
}

body[data-story-page="skills"] .story-chapter.is-active{
  border-color:var(--line) !important;
  box-shadow:none !important;
}

/* Tablet */
@media (max-width: 1180px){
  body[data-story-page="skills"] .story-chapters{
    grid-template-columns:repeat(2, minmax(280px, 340px)) !important;
    justify-content:center !important;
    gap:18px !important;
  }

  body[data-story-page="skills"] .story-chapter{
    max-width:340px !important;
    min-height:525px !important;
  }

  body[data-story-page="skills"] .story-chapter:nth-child(3){
    grid-column:1 / -1 !important;
    justify-self:center !important;
  }
}

/* Mobile */
@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{
    grid-template-columns:1fr !important;
    justify-content:stretch !important;
    gap:14px !important;
  }

  body[data-story-page="skills"] .story-chapter,
  body[data-story-page="skills"] .story-chapter:nth-child(3){
    max-width:none !important;
    width:100% !important;
    min-height:0 !important;
  }

  body[data-story-page="skills"] .story-chapter-media{
    height:170px !important;
    min-height:170px !important;
    max-height:170px !important;
  }

  body[data-story-page="skills"] .story-chapter-body{
    padding:15px 14px 14px !important;
  }
}