/* P008 — public Portfolio: one aligned content rail, GAS-like work/training/album/skill visuals. */
/* Keep the scenic cover edge-to-edge, while every content panel matches the profile card. */
body.e3-portfolio-fulltheme main.e3-profile-page {
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  justify-items:center!important;
  gap:25px!important;
  overflow:visible!important;
}
body.e3-portfolio-fulltheme main.e3-profile-page>.e005-profile-top {
  width:100%!important;
  max-width:100%!important;
  justify-self:center!important;
}
body.e3-portfolio-fulltheme main.e3-profile-page .e005-profile-card,
body.e3-portfolio-fulltheme main.e3-profile-page #evidence,
body.e3-portfolio-fulltheme main.e3-profile-page>.e3-panel,
body.e3-portfolio-fulltheme main.e3-profile-page>.e008-section {
  box-sizing:border-box!important;
  width:min(100%,1100px)!important;
  min-width:0!important;
  max-width:1100px!important;
  margin-inline:auto!important;
  justify-self:center!important;
}
body.e3-portfolio-fulltheme main.e3-profile-page>.e005-profile-top .e005-profile-card {
  width:min(100%,1100px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.e3-portfolio-fulltheme main.e3-profile-page>.e005-profile-top .e005-cover-banner {
  width:100vw!important;
  max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
}
/* Dashed ring rotates; face/photo stay still. */
body.e3-portfolio-fulltheme .e005-avatar-wrap .e005-avatar-ring {
  animation:e008-ring-spin 15s linear infinite;
  border-width:3px;
  will-change:transform;
  transform-origin:center center;
}
@keyframes e008-ring-spin {to{transform:rotate(360deg)}}
/* Calm, consistent section headers with distinct category accents. */
body.e3-portfolio-fulltheme .e008-section {
  --e008-tone:#087ec0;
  --e008-soft:#e8f6ff;
  --e008-line:#b6e0f8;
  border:1px solid #d4e4f1!important;
  border-top:3px solid var(--e008-line)!important;
  border-radius:23px!important;
  background:#fff!important;
  padding:26px 30px 30px!important;
  box-shadow:0 10px 30px rgba(32,73,103,.065)!important;
}
body.e3-portfolio-fulltheme #works {--e008-tone:#0a82c5;--e008-soft:#e3f4ff;--e008-line:#8fd0f4}
body.e3-portfolio-fulltheme #training {--e008-tone:#0e84c8;--e008-soft:#e4f4ff;--e008-line:#a9d8f5}
body.e3-portfolio-fulltheme #albums {--e008-tone:#7b50bf;--e008-soft:#f2eafe;--e008-line:#d8c6f5}
body.e3-portfolio-fulltheme #skills {--e008-tone:var(--e3-accent,#0e83c5);--e008-soft:var(--e3-accent-soft,#eaf6ff);--e008-line:var(--e3-accent-border,#c1dff0)}
body.e3-portfolio-fulltheme .e008-section .e3-section-heading{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  border-bottom:2px solid var(--e008-line)!important;
  margin-bottom:22px!important;
  padding-bottom:18px!important;
  gap:12px!important;
}
body.e3-portfolio-fulltheme .e008-section .e3-section-heading h2 {
  font-size:clamp(21px,2vw,27px)!important;
  line-height:1.35!important;
  font-weight:800!important;
  color:#173b59!important;
  margin:0!important;
}
body.e3-portfolio-fulltheme .e008-section .e3-section-heading h2>i {
  background:var(--e008-soft)!important;
  color:var(--e008-tone)!important;
  width:48px!important;
  height:48px!important;
  border-radius:15px!important;
  display:inline-grid!important;
  place-items:center!important;
  font-size:21px!important;
  margin-right:10px!important;
  vertical-align:middle!important;
}
body.e3-portfolio-fulltheme .e008-section .e3-directory-total{
  color:var(--e008-tone)!important;
  background:var(--e008-soft)!important;
  border:1px solid var(--e008-line)!important;
  border-radius:999px!important;
  padding:7px 13px!important;
  font-size:14px!important;
  font-weight:800!important;
  white-space:nowrap;
}
/* Works resemble the original GAS award cards, without masking real documents. */
body.e3-portfolio-fulltheme #works .e3-work-cards {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;
  align-items:stretch!important;
}
body.e3-portfolio-fulltheme #works .e005-work-card{
  display:flex!important;
  flex-direction:column!important;
  border:1px solid #b8d8ee!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:#fff!important;
  box-shadow:0 5px 15px rgba(33,81,120,.06)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
body.e3-portfolio-fulltheme #works .e005-work-card:hover{
  transform:translateY(-5px)!important;
  box-shadow:0 17px 30px rgba(29,83,135,.14)!important;
  border-color:#80bee9!important;
}
body.e3-portfolio-fulltheme #works .e005-work-cover{height:194px!important;flex:0 0 194px!important;background:#e8f4fd!important}
body.e3-portfolio-fulltheme #works .e005-work-card .e3-work-body{
  flex:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  padding:24px 18px 20px!important;
  min-height:0!important;
  gap:7px!important;
}
body.e3-portfolio-fulltheme #works .e005-work-card h3{font-size:18px!important;line-height:1.48!important;margin:0 0 7px!important;color:#087dc0!important}
body.e3-portfolio-fulltheme #works .e006-work-meta-grid{gap:9px!important;margin:0 0 10px!important}
body.e3-portfolio-fulltheme #works .e006-work-meta-label{font-size:12px!important;color:#6b8297!important}
body.e3-portfolio-fulltheme #works .e006-work-meta-value{font-size:14px!important;color:#334b61!important}
body.e3-portfolio-fulltheme #works .e005-tags {margin-top:8px!important}
body.e3-portfolio-fulltheme #works .e005-tags span{background:#fff2e7!important;border-color:#f6d0ac!important;color:#b9540c!important}
body.e3-portfolio-fulltheme #works .e3-work-link{border-radius:12px!important;text-decoration:none!important;transition:background .16s ease!important}
body.e3-portfolio-fulltheme #works .e005-work-card .e006-share-btn{background:#fff!important;color:#097ebd!important}
/* Training timeline: visible by default, alternating colorful milestones, no disappearing cards. */
body.e3-portfolio-fulltheme #training .e006-training-timeline{
  display:flex!important;
  flex-direction:column!important;
  gap:19px!important;
  padding-left:48px!important;
  margin:0!important;
  border:0!important;
  position:relative!important;
}
body.e3-portfolio-fulltheme #training .e006-training-timeline::before{
  content:"";position:absolute;left:19px;top:20px;bottom:22px;
  width:3px;background:#c6d9e7;border-radius:999px;
}
body.e3-portfolio-fulltheme #training .e006-train-item{
  position:relative!important;display:block!important;
  opacity:1!important;visibility:visible!important;
  transform:none!important;min-height:0!important;height:auto!important;
}
body.e3-portfolio-fulltheme #training .e006-train-dot{
  display:grid!important;place-items:center!important;
  position:absolute!important;left:-48px!important;top:21px!important;
  width:38px!important;height:38px!important;border-radius:50%!important;
  background:#0889c9!important;color:#fff!important;font-size:15px!important;
  box-shadow:0 0 0 4px #fff,0 0 0 6px #b7dcef!important;
}
body.e3-portfolio-fulltheme #training .e006-train-item:nth-child(3n+2) .e006-train-dot{background:#f39a16!important;box-shadow:0 0 0 4px #fff,0 0 0 6px #f9dca6!important}
body.e3-portfolio-fulltheme #training .e006-train-item:nth-child(3n) .e006-train-dot{background:#8853d8!important;box-shadow:0 0 0 4px #fff,0 0 0 6px #d9c9fa!important}
body.e3-portfolio-fulltheme #training .e006-train-card{
  display:block!important;opacity:1!important;visibility:visible!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  background:#fff!important;border:1px solid #d6e5f0!important;
  border-radius:17px!important;padding:18px 21px!important;
  box-shadow:0 4px 16px rgba(29,80,120,.065)!important;
  transition:transform .2s ease,box-shadow .2s ease!important;
}
body.e3-portfolio-fulltheme #training .e006-train-card:hover{transform:translateY(-3px)!important;box-shadow:0 12px 24px rgba(30,73,107,.11)!important}
body.e3-portfolio-fulltheme #training .e006-train-card h3{font-size:18px!important;line-height:1.45!important;color:#087bc2!important;margin:0 0 10px!important}
body.e3-portfolio-fulltheme #training .e006-train-head{margin-bottom:9px!important}
body.e3-portfolio-fulltheme #training .e006-train-pills{gap:7px!important;margin-bottom:10px!important}
body.e3-portfolio-fulltheme #training .e006-train-pill{font-size:13px!important;line-height:1.45!important}
body.e3-portfolio-fulltheme #training .e006-train-desc{font-size:14px!important;color:#526b80!important}
/* Albums: the cover, accessible album action, thumbnails and count read as one gallery. */
body.e3-portfolio-fulltheme #albums .e3-showcase-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;
  align-items:stretch!important;
}
body.e3-portfolio-fulltheme #albums .e006-gallery-card{
  display:flex!important;flex-direction:column!important;
  border-radius:20px!important;overflow:hidden!important;
  border:1px solid #d7cdf2!important;background:#fff!important;
  box-shadow:0 5px 16px rgba(65,61,123,.075)!important;
  transition:transform .22s ease,box-shadow .22s ease!important;
}
body.e3-portfolio-fulltheme #albums .e006-gallery-card:hover{transform:translateY(-5px)!important;box-shadow:0 16px 28px rgba(65,61,123,.13)!important}
body.e3-portfolio-fulltheme #albums .e008-showcase-cover{height:190px!important;min-height:190px!important;flex:0 0 190px!important;background:#eee8fa!important}
body.e3-portfolio-fulltheme #albums .e008-showcase-cover img{object-fit:cover!important;display:block;width:100%;height:100%;transition:transform .3s ease!important}
body.e3-portfolio-fulltheme #albums .e006-gallery-card:hover .e008-showcase-cover img{transform:scale(1.045)!important}
body.e3-portfolio-fulltheme #albums .e005-showcase-image-fallback{color:#8660c8!important;background:#f0eafb!important}
body.e3-portfolio-fulltheme #albums .e008-showcase-cover img:not([hidden])+.e005-showcase-image-fallback{display:none!important}
body.e3-portfolio-fulltheme #albums .e008-showcase-cover.e005-image-unavailable .e005-showcase-image-fallback{display:grid!important}
body.e3-portfolio-fulltheme #albums .e008-album-count{
  position:absolute;bottom:10px;right:11px;z-index:5;display:inline-flex;align-items:center;gap:6px;
  background:rgba(28,39,61,.85);color:white;padding:6px 10px;border-radius:999px;
  font:800 13px 'Sarabun',sans-serif;
}
body.e3-portfolio-fulltheme #albums .e3-showcase-body{flex:1!important;display:flex!important;flex-direction:column!important;gap:9px!important;padding:18px!important}
body.e3-portfolio-fulltheme #albums .e3-showcase-body h3{font-size:18px!important;color:#7046b4!important}
body.e3-portfolio-fulltheme #albums .e3-person-media-link{margin-top:auto!important;color:#7046b4!important;border-color:#dbcff1!important;background:#f3edfd!important}
body.e3-portfolio-fulltheme #albums .e004-media-gallery{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
body.e3-portfolio-fulltheme #albums .e004-media-gallery a{height:62px!important;width:62px!important;border-radius:9px!important;overflow:hidden!important}
body.e3-portfolio-fulltheme #albums .e004-media-gallery img{width:100%;height:100%;object-fit:cover}
/* Theme-driven skill chips: gentle hover, no extra buttons. */
body.e3-portfolio-fulltheme #skills .e006-skills-wrap{gap:11px 15px!important;display:flex!important;flex-wrap:wrap!important}
body.e3-portfolio-fulltheme #skills .e006-skill-card{
  opacity:1!important;visibility:visible!important;transform:none!important;
  display:inline-flex!important;align-items:center!important;
  padding:0!important;margin:0!important;
  position:relative!important;
}
body.e3-portfolio-fulltheme #skills .e006-skill-chip{
  background:var(--e3-accent-soft,#e5f4fc)!important;
  color:var(--e3-accent-deep,#135c8c)!important;
  border:1px solid var(--e3-accent-border,#bcdbee)!important;
  border-radius:999px!important;padding:10px 16px!important;
  font-size:15px!important;line-height:1.4!important;font-weight:800!important;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important;
}
body.e3-portfolio-fulltheme #skills .e006-skill-chip:hover{transform:translateY(-3px)!important;box-shadow:0 7px 16px rgba(26,64,99,.11)!important}
body.e3-portfolio-fulltheme #skills .e006-skill-chip i{color:#edb034!important}
/* Ensure old reveal classes never cause invisible content during scrolling or reduced motion. */
body.e3-portfolio-fulltheme .e008-section .e006-reveal,
body.e3-portfolio-fulltheme .e008-section .e3-showcase-card,
body.e3-portfolio-fulltheme .e008-section .e005-work-card,
body.e3-portfolio-fulltheme .e008-section .e006-train-card,
body.e3-portfolio-fulltheme .e008-section .e006-skill-card{
  opacity:1!important;visibility:visible!important;
}
html[data-e3-display-mode="dark"] body.e3-portfolio-fulltheme .e008-section {background:#172c40!important;border-color:#35536c!important}
html[data-e3-display-mode="dark"] body.e3-portfolio-fulltheme .e008-section .e3-section-heading h2 {color:#e5f3fc!important}
html[data-e3-display-mode="dark"] body.e3-portfolio-fulltheme #works .e005-work-card,
html[data-e3-display-mode="dark"] body.e3-portfolio-fulltheme #albums .e006-gallery-card,
html[data-e3-display-mode="dark"] body.e3-portfolio-fulltheme #training .e006-train-card{background:#20374c!important;border-color:#49647c!important}
html[data-e3-display-mode="dark"] body.e3-portfolio-fulltheme #works .e006-work-meta-value,
html[data-e3-display-mode="dark"] body.e3-portfolio-fulltheme #training .e006-train-desc{color:#c9deeb!important}
@media(max-width:1020px){
  body.e3-portfolio-fulltheme #works .e3-work-cards,
  body.e3-portfolio-fulltheme #albums .e3-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:670px){
  body.e3-portfolio-fulltheme main.e3-profile-page{gap:16px!important}
  body.e3-portfolio-fulltheme main.e3-profile-page .e005-profile-card,
  body.e3-portfolio-fulltheme main.e3-profile-page #evidence,
  body.e3-portfolio-fulltheme main.e3-profile-page>.e3-panel,
  body.e3-portfolio-fulltheme main.e3-profile-page>.e008-section{width:100%!important;max-width:100%!important}
  body.e3-portfolio-fulltheme .e008-section{padding:18px 15px 22px!important;border-radius:17px!important}
  body.e3-portfolio-fulltheme .e008-section .e3-section-heading h2{font-size:20px!important}
  body.e3-portfolio-fulltheme .e008-section .e3-section-heading h2>i{width:42px!important;height:42px!important;margin-right:5px!important}
  body.e3-portfolio-fulltheme #works .e3-work-cards,
  body.e3-portfolio-fulltheme #albums .e3-showcase-grid{grid-template-columns:minmax(0,1fr)!important}
  body.e3-portfolio-fulltheme #training .e006-training-timeline{padding-left:36px!important}
  body.e3-portfolio-fulltheme #training .e006-training-timeline::before{left:13px!important}
  body.e3-portfolio-fulltheme #training .e006-train-dot{left:-36px!important;width:28px!important;height:28px!important;font-size:12px!important}
  body.e3-portfolio-fulltheme #training .e006-train-card{padding:15px!important}
  body.e3-portfolio-fulltheme #training .e006-train-card h3{font-size:17px!important}
  body.e3-portfolio-fulltheme #skills .e006-skill-chip{font-size:14px!important}
}
@media(prefers-reduced-motion:reduce){
  body.e3-portfolio-fulltheme .e005-avatar-wrap .e005-avatar-ring{animation:none!important;will-change:auto}
  body.e3-portfolio-fulltheme .e008-section *,body.e3-portfolio-fulltheme .e008-section *::before,body.e3-portfolio-fulltheme .e008-section *::after{transition:none!important}
}