/* SPACEGO portfolio detail page — isolated stylesheet 2026-09-18 */

.project-seo-page{background:#fff}
.project-seo-page .site-header{position:sticky;top:0;z-index:120}

.project-detail-seo{overflow:hidden;background:#fff}

/* HERO */
.project-seo-hero{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr);
  min-height:600px;
  background:#081a2b;
  color:#fff;
}
.project-seo-visual{
  min-width:0;
  min-height:600px;
  overflow:hidden;
  background:#0b2237;
}
.project-seo-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.project-seo-copy{
  min-width:0;
  padding:70px clamp(34px,5vw,82px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.project-seo-copy .eyebrow{color:#55a9ff}
.project-seo-copy h1{
  margin:10px 0 20px;
  font-size:clamp(38px,4.7vw,68px);
  line-height:1.05;
  letter-spacing:-.055em;
  color:#fff;
}
.project-seo-summary{
  max-width:680px;
  margin:0;
  font-size:17px;
  line-height:1.75;
  color:#b8c8d9;
}
.project-seo-copy .chips{margin-top:22px}
.project-seo-copy .chips span{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#dbe9f6;
}
.project-seo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
.project-seo-actions .btn{min-height:46px}
.project-seo-actions .btn.ghost.dark{
  border-color:#44627d;
  color:#edf6ff;
  background:transparent;
}

/* OVERVIEW */
.project-seo-overview{
  max-width:1320px;
  margin:0 auto;
  padding-top:82px;
  padding-bottom:82px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:72px;
  align-items:start;
}
.project-seo-main{min-width:0}
.project-seo-main>.eyebrow{margin-bottom:10px}
.project-seo-main>h2{
  margin:0 0 48px;
  font-size:clamp(32px,3.6vw,50px);
  line-height:1.12;
  letter-spacing:-.045em;
}
.project-seo-block{
  padding:30px 0;
  border-top:1px solid #e2e8ef;
}
.project-seo-block h3{
  margin:0 0 14px;
  font-size:21px;
}
.project-seo-block p{
  margin:0;
  max-width:900px;
  font-size:16px;
  line-height:1.9;
  color:#405166;
}
.project-feature-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 28px;
  padding:0;
  margin:0;
  list-style:none;
}
.project-feature-list li{
  position:relative;
  padding:13px 0 13px 22px;
  border-bottom:1px solid #edf1f5;
  color:#344357;
}
.project-feature-list li:before{
  content:"";
  position:absolute;
  left:0; top:20px;
  width:7px; height:7px;
  border-radius:50%;
  background:#2e86df;
}
.project-app-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.project-app-tags span{
  padding:9px 12px;
  border-radius:999px;
  background:#edf5ff;
  color:#1e5c9d;
  font-size:13px;
  font-weight:800;
}

/* SIDE CARDS */
.project-seo-side{
  position:sticky;
  top:94px;
  display:grid;
  gap:10px;
}
.project-side-card{
  padding:20px;
  border:1px solid #dce5ef;
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 24px rgba(20,50,80,.035);
}
.project-side-card small{
  display:block;
  margin-bottom:10px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.1em;
  color:#6c8299;
}
.project-side-card>b{
  display:block;
  font-size:18px;
  color:#11283d;
}
.project-side-card p{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:#5b6c80;
}
.project-side-card .chips{margin-top:5px}
.project-side-url{word-break:break-all}
.project-side-card .btn.full{
  display:flex;
  width:100%;
  margin-top:14px;
  justify-content:center;
  box-sizing:border-box;
}

/* GALLERY */
.project-seo-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:34px;
}
.project-seo-gallery figure{
  margin:0;
  overflow:hidden;
  border-radius:12px;
  background:#e9eef3;
}
.project-seo-gallery img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}

/* CONVERSION */
.project-conversion{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:44px;
  padding:68px max(calc((100vw - 1320px)/2),40px);
  background:#091a2a;
  color:#fff;
}
.project-conversion .eyebrow{color:#5eb0ff}
.project-conversion h2{
  margin:8px 0 12px;
  font-size:clamp(30px,3.5vw,48px);
  line-height:1.12;
  color:#fff;
}
.project-conversion p{
  max-width:800px;
  margin:0;
  line-height:1.75;
  color:#afc0d1;
}
.project-conversion .btn{flex:0 0 auto}

/* RELATED PROJECTS */
.project-related{
  max-width:1320px;
  margin:0 auto;
  padding-top:72px;
  padding-bottom:90px;
}
.project-related .section-intro{margin-bottom:26px}
.project-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.project-related-grid a{
  min-width:0;
  display:block;
  overflow:hidden;
  border:1px solid #e0e7ee;
  border-radius:12px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:.2s ease;
}
.project-related-grid a:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(18,45,70,.09);
}
.project-related-grid img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.project-related-grid a div{padding:18px}
.project-related-grid small{
  display:block;
  margin-bottom:7px;
  color:#2e82d7;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}
.project-related-grid b{
  display:block;
  font-size:17px;
  line-height:1.4;
}

/* TABLET */
@media(max-width:1100px){
  .project-seo-hero{
    grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);
    min-height:520px;
  }
  .project-seo-visual{min-height:520px}
  .project-seo-copy{padding:52px 32px}
  .project-seo-overview{
    padding-left:30px;
    padding-right:30px;
    grid-template-columns:minmax(0,1fr) 285px;
    gap:38px;
  }
  .project-related{padding-left:30px;padding-right:30px}
}

/* MOBILE */
@media(max-width:820px){
  .project-seo-hero{
    grid-template-columns:1fr;
    min-height:0;
  }
  .project-seo-visual{min-height:0}
  .project-seo-visual img{
    height:auto;
    aspect-ratio:16/10;
  }
  .project-seo-copy{padding:42px 22px 48px}
  .project-seo-copy h1{font-size:clamp(34px,10vw,50px)}
  .project-seo-overview{
    padding:54px 20px;
    grid-template-columns:1fr;
    gap:32px;
  }
  .project-seo-main>h2{margin-bottom:32px}
  .project-seo-side{position:static}
  .project-feature-list,
  .project-seo-gallery{grid-template-columns:1fr}
  .project-conversion{
    display:block;
    padding:48px 22px;
  }
  .project-conversion .btn{
    display:inline-flex;
    margin-top:24px;
  }
  .project-related{
    padding:54px 20px 70px;
  }
  .project-related-grid{grid-template-columns:1fr}
}