/* =========================================================
   CSC — ARTICLE SOLO
   ========================================================= */

.csc-single-post{
  background:#fff;
  font-family:var(--csc-font,Montserrat,Arial,sans-serif);
  overflow:hidden;
}

.csc-single-post *,
.csc-single-post *::before,
.csc-single-post *::after{box-sizing:border-box}

.csc-single-post svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.csc-single-post .csc-wrap--hero{
  width:min(100% - 48px,1380px);
  max-width:1380px;
  margin-inline:auto;
}

/* HERO */
.csc-single-post__hero{
  padding:54px 0 52px;
  background:linear-gradient(180deg,#f7fbfe 0%,#fff 94%);
}

.csc-single-post__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:28px;
  color:var(--csc-text-light);
  text-decoration:none;
  font-size:11px;
  font-weight:900;
}

.csc-single-post__back:hover{color:var(--csc-primary)}
.csc-single-post__back svg{width:16px;height:16px}

.csc-single-post__hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
  gap:54px;
  align-items:center;
}

.csc-single-post__category{
  color:var(--csc-primary);
  text-decoration:none;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.csc-single-post__hero h1{
  max-width:900px;
  margin:10px 0 18px;
  color:var(--csc-text);
  font-size:clamp(46px,5vw,72px);
  line-height:.99;
  letter-spacing:-.055em;
}

.csc-single-post__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px 16px;
  color:var(--csc-text-light);
  font-size:11px;
  font-weight:700;
}

.csc-single-post__meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.csc-single-post__meta svg{
  width:15px;
  height:15px;
  color:var(--csc-primary);
}

.csc-single-post__updated{
  margin:10px 0 0;
  color:var(--csc-text-light);
  font-size:10px;
}

.csc-single-post__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}

.csc-single-post__actions button,
.csc-single-post__aside-actions button{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  border:1px solid var(--csc-border);
  border-radius:12px;
  background:#fff;
  color:var(--csc-text);
  font:inherit;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.csc-single-post__actions button:hover,
.csc-single-post__aside-actions button:hover{
  border-color:#bdddeb;
  color:var(--csc-primary);
  background:var(--csc-primary-soft);
}

.csc-single-post__actions svg{
  width:15px;
  height:15px;
}

.csc-single-post__scene{
  color:var(--csc-primary);
}

.csc-single-post__scene svg{
  display:block;
  width:100%;
  height:auto;
}

.csc-single-post-cloud{
  fill:#fff;
  stroke:none;
  filter:drop-shadow(0 10px 18px rgba(74,147,200,.10));
}

.csc-single-post-cloud--one{
  animation:cscPostCloud 11s ease-in-out infinite alternate;
}

.csc-single-post-sheet path:first-child{
  fill:#fff;
}

.csc-single-post-heart{
  fill:#efbf93;
  stroke:none;
  transform-box:fill-box;
  transform-origin:center;
  animation:cscPostHeart 2.6s ease-in-out infinite;
}

.csc-single-post-ground{
  stroke:#c6dfea;
  stroke-width:3;
}

@keyframes cscPostCloud{
  from{transform:translateX(-5px)}
  to{transform:translateX(13px)}
}

@keyframes cscPostHeart{
  0%,100%{transform:scale(1)}
  15%{transform:scale(1.12)}
  28%{transform:scale(1)}
}

/* FEATURED IMAGE */
.csc-single-post__featured{
  padding:12px 0 10px;
}

.csc-single-post__featured img{
  display:block;
  width:100%;
  max-height:720px;
  object-fit:cover;
  border-radius:0;
}

/* CONTENT */
.csc-single-post__content{
  padding:58px 0 80px;
}

.csc-single-post__content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.45fr);
  gap:72px;
  align-items:start;
}

.csc-single-post__prose{
  min-width:0;
  color:var(--csc-text-light);
  font-size:16px;
  line-height:1.88;
}

.csc-single-post__prose>*:first-child{margin-top:0}

.csc-single-post__prose p{
  margin:0 0 20px;
}

.csc-single-post__prose h2,
.csc-single-post__prose h3,
.csc-single-post__prose h4{
  color:var(--csc-text);
  line-height:1.08;
  letter-spacing:-.04em;
}

.csc-single-post__prose h2{
  margin:44px 0 16px;
  font-size:clamp(31px,3.3vw,44px);
}

.csc-single-post__prose h3{
  margin:34px 0 13px;
  font-size:27px;
}

.csc-single-post__prose h4{
  margin:28px 0 11px;
  font-size:21px;
}

.csc-single-post__prose a{
  color:var(--csc-primary);
  font-weight:800;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.csc-single-post__prose ul,
.csc-single-post__prose ol{
  margin:0 0 22px;
  padding-left:22px;
}

.csc-single-post__prose li{
  margin-bottom:8px;
}

.csc-single-post__prose blockquote{
  margin:34px 0;
  padding:6px 0 6px 22px;
  border-left:3px solid var(--csc-primary);
  color:var(--csc-text);
  font-size:19px;
  line-height:1.65;
}

.csc-single-post__prose img{
  max-width:100%;
  height:auto;
  margin:24px 0;
}

.csc-single-post__prose figure{
  margin:28px 0;
}

.csc-single-post__prose figcaption{
  margin-top:8px;
  color:var(--csc-text-light);
  font-size:10px;
  text-align:center;
}

.csc-single-post__prose table{
  width:100%;
  border-collapse:collapse;
  margin:26px 0;
  border:1px solid var(--csc-border);
}

.csc-single-post__prose th,
.csc-single-post__prose td{
  padding:12px 14px;
  border-bottom:1px solid var(--csc-border);
  text-align:left;
  font-size:13px;
}

.csc-single-post__prose th{
  background:#f7fafc;
  color:var(--csc-text);
}

/* ASIDE */
.csc-single-post__aside-sticky{
  position:sticky;
  top:110px;
  display:grid;
  gap:18px;
  padding:20px 0;
  border-top:1px solid var(--csc-border);
  border-bottom:1px solid var(--csc-border);
}

.csc-single-post__author{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:11px;
  align-items:center;
}

.csc-single-post__author-avatar{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--csc-primary-soft);
  color:var(--csc-primary);
  font-size:15px;
  font-weight:900;
}

.csc-single-post__author>div{
  display:grid;
  gap:2px;
}

.csc-single-post__author small,
.csc-single-post__aside-meta small{
  color:var(--csc-text-light);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.csc-single-post__author strong,
.csc-single-post__aside-meta strong{
  color:var(--csc-text);
  font-size:12px;
}

.csc-single-post__aside-meta{
  display:grid;
  gap:12px;
}

.csc-single-post__aside-meta>span{
  display:grid;
  gap:3px;
}

.csc-single-post__aside-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

/* RELATED */
.csc-single-post__related{
  padding:70px 0 84px;
  background:#f7fafc;
}

.csc-single-post__related-head{
  margin-bottom:24px;
}

.csc-single-post__related-head h2{
  margin:7px 0 0;
  color:var(--csc-text);
  font-size:clamp(32px,3.5vw,46px);
  letter-spacing:-.045em;
}

.csc-single-post__related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.csc-single-post-card{
  min-width:0;
}

.csc-single-post-card__visual{
  display:block;
  aspect-ratio:1.35/1;
  overflow:hidden;
  border-radius:20px;
  background:linear-gradient(135deg,#eaf5fb,#fff);
  color:var(--csc-primary);
}

.csc-single-post-card__visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.csc-single-post-card:hover .csc-single-post-card__visual img{
  transform:scale(1.025);
}

.csc-single-post-card__visual>span{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}

.csc-single-post-card__visual svg{
  width:56px;
  height:56px;
}

.csc-single-post-card__body{
  padding:14px 3px 0;
}

.csc-single-post-card__body small{
  color:var(--csc-primary);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.csc-single-post-card h3{
  margin:7px 0 11px;
  font-size:18px;
  line-height:1.25;
  letter-spacing:-.025em;
}

.csc-single-post-card h3 a{
  color:var(--csc-text);
  text-decoration:none;
}

.csc-single-post-card__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--csc-primary);
  text-decoration:none;
  font-size:10px;
  font-weight:900;
}

.csc-single-post-card__link svg{
  width:14px;
  height:14px;
}

/* FOOTER */
.csc-single-post__footer{
  padding:46px 0 86px;
}

.csc-single-post__back-button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  border-radius:13px;
  background:var(--csc-primary);
  color:#fff;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
}

.csc-single-post__back-button:hover{
  background:var(--csc-primary-hover);
}

.csc-single-post__back-button svg{
  width:16px;
  height:16px;
}

/* REVEAL */
[data-csc-post-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease;
}

[data-csc-post-reveal].is-visible{
  opacity:1;
  transform:none;
}

@media(max-width:980px){
  .csc-single-post__hero-grid,
  .csc-single-post__content-grid{
    grid-template-columns:1fr;
  }

  .csc-single-post__scene{
    max-width:620px;
    margin:0 auto;
  }

  .csc-single-post__aside-sticky{
    position:static;
  }

  .csc-single-post__related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:650px){
  .csc-single-post .csc-wrap--hero{
    width:min(100% - 28px,1380px);
  }

  .csc-single-post__hero{
    padding:38px 0 38px;
  }

  .csc-single-post__hero h1{
    font-size:44px;
  }

  .csc-single-post__meta{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .csc-single-post__featured{
    padding-top:0;
  }

  .csc-single-post__featured .csc-wrap--hero{
    width:100%;
  }

  .csc-single-post__featured img{
    max-height:520px;
  }

  .csc-single-post__content{
    padding:42px 0 60px;
  }

  .csc-single-post__prose{
    font-size:15px;
  }

  .csc-single-post__related-grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .csc-single-post__related-grid::-webkit-scrollbar{
    display:none;
  }

  .csc-single-post-card{
    flex:0 0 82%;
    scroll-snap-align:start;
  }
}

@media(prefers-reduced-motion:reduce){
  .csc-single-post-cloud--one,
  .csc-single-post-heart{
    animation:none!important;
  }

  [data-csc-post-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
}