/* ------------------------------------------------------------------
   Single post, Podover layout
   Article left, sidebar right. Reference is orange; the house palette
   is black, red and white, so every accent here is the brand red.
   ------------------------------------------------------------------ */

.tcp-sp{background:var(--tcp-bg);padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,96px)}
.tcp-sp-wrap{
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(24px,3vw,40px);align-items:start;
}

/* ---------- main ---------- */
.tcp-sp-main{min-width:0}
.tcp-sp-hero{position:relative;border-radius:4px;overflow:hidden;background:var(--tcp-bg-alt)}
.tcp-sp-hero img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.tcp-sp-date{
  position:absolute;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:58px;padding:9px 10px;
  background:var(--tcp-red);color:#fff;
  font-family:var(--tcp-display);line-height:1;
}
.tcp-sp-date strong{font-weight:700;font-size:17px}
.tcp-sp-date em{font-style:normal;font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}

.tcp-sp-meta{
  display:flex;flex-wrap:wrap;gap:22px;margin:18px 0 0;
  font-size:14px;color:var(--tcp-muted);
}
.tcp-sp-meta span{display:inline-flex;align-items:center;gap:8px}
.tcp-sp-meta svg{width:18px;height:18px;color:var(--tcp-red);flex:0 0 auto}

.tcp-sp-title{
  margin:12px 0 0;font-family:var(--tcp-display);font-weight:700;
  font-size:clamp(26px,3vw,34px);line-height:1.2;color:var(--tcp-ink);
  letter-spacing:-.02em;
}
.tcp-sp-body{margin-top:18px;font-size:15.5px;line-height:1.8;color:var(--tcp-muted)}
.tcp-sp-body p{margin:0 0 20px}
.tcp-sp-body p:last-child{margin-bottom:0}
.tcp-sp-body h2,.tcp-sp-body h3{
  font-family:var(--tcp-display);color:var(--tcp-ink);
  margin:28px 0 12px;line-height:1.25;
}
.tcp-sp-body a{color:var(--tcp-red)}

/* tags left, share right */
.tcp-sp-tagrow{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--tcp-line);
}
.tcp-sp-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tcp-sp-tagl{font-family:var(--tcp-display);font-weight:600;font-size:14px;color:var(--tcp-ink)}
.tcp-sp-tag{
  display:inline-flex;align-items:center;padding:9px 18px;
  border-radius:var(--tcp-pill);background:var(--tcp-red);color:#fff;
  font-family:var(--tcp-display);font-weight:600;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  transition:background-color .2s var(--tcp-ease);
}
.tcp-sp-tag:hover{background:var(--tcp-red-h);color:#fff}
.tcp-sp-share{display:flex;align-items:center;gap:16px}
.tcp-sp-share a{color:var(--tcp-ink);display:inline-flex;transition:color .2s var(--tcp-ease)}
.tcp-sp-share a:hover{color:var(--tcp-red)}
.tcp-sp-share svg{width:19px;height:19px}

/* previous and next */
.tcp-sp-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.tcp-sp-navcard{
  display:block;padding:26px 24px;background:var(--tcp-bg-alt);
  text-decoration:none;border-radius:4px;
  transition:background-color .2s var(--tcp-ease);
}
.tcp-sp-navcard:hover{background:#ECECEC}
.tcp-sp-navcard span{
  display:block;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tcp-red);margin-bottom:8px;
}
.tcp-sp-navcard strong{
  display:block;font-family:var(--tcp-display);font-weight:700;
  font-size:19px;line-height:1.3;color:var(--tcp-ink);
}

/* ---------- comments ---------- */
.tcp-sp-comments{margin-top:48px}
.tcp-sp-comments .comments-title,
.tcp-sp-comments .comment-reply-title{
  font-family:var(--tcp-display);font-weight:700;
  font-size:clamp(22px,2.4vw,28px);line-height:1.2;
  color:var(--tcp-ink);margin:0 0 26px;
}
.tcp-sp-comments .comment-list{list-style:none;margin:0;padding:0}
.tcp-sp-comments .comment-list li{list-style:none}
.tcp-sp-comments .comment-body{
  display:grid;grid-template-columns:96px minmax(0,1fr);
  gap:22px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--tcp-line);position:relative;
}
.tcp-sp-comments .comment-author img,
.tcp-sp-comments .avatar{border-radius:50%;width:96px;height:96px;display:block}
.tcp-sp-comments .comment-author{display:block}
.tcp-sp-comments .comment-author .fn{
  font-family:var(--tcp-display);font-weight:700;font-size:17px;
  color:var(--tcp-ink);font-style:normal;
}
.tcp-sp-comments .says{display:none}
.tcp-sp-comments .comment-meta{font-size:12.5px;color:var(--tcp-muted);margin-top:2px}
.tcp-sp-comments .comment-content{margin-top:10px;font-size:14.5px;line-height:1.75;color:var(--tcp-muted)}
.tcp-sp-comments .reply{position:absolute;top:26px;right:0}
.tcp-sp-comments .comment-reply-link{
  display:inline-flex;align-items:center;padding:10px 22px;
  border-radius:var(--tcp-pill);background:var(--tcp-ink);color:#fff;
  font-family:var(--tcp-display);font-weight:600;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
}
.tcp-sp-comments .comment-reply-link:hover{background:var(--tcp-red);color:#fff}

/* comment form */
.tcp-sp-comments .comment-form{margin-top:34px;display:grid;gap:18px}
.tcp-sp-comments .comment-form p{margin:0}
.tcp-sp-comments .comment-form-author,
.tcp-sp-comments .comment-form-email{display:inline-block;width:calc(50% - 9px)}
.tcp-sp-comments .comment-form-author{margin-right:14px}
.tcp-sp-comments .comment-form label{display:none}
.tcp-sp-comments .comment-form input[type=text],
.tcp-sp-comments .comment-form input[type=email],
.tcp-sp-comments .comment-form input[type=url],
.tcp-sp-comments .comment-form textarea{
  width:100%;padding:16px 18px;border:0;background:var(--tcp-bg-alt);
  border-radius:4px;font-family:var(--tcp-body);font-size:15px;color:var(--tcp-ink);
}
.tcp-sp-comments .comment-form textarea{min-height:150px;resize:vertical}
.tcp-sp-comments .comment-form input:focus,
.tcp-sp-comments .comment-form textarea:focus{outline:2px solid var(--tcp-red);outline-offset:-2px}
.tcp-sp-comments .form-submit input[type=submit]{
  padding:16px 34px;border:0;border-radius:var(--tcp-pill);
  background:var(--tcp-red)!important;color:#fff!important;
  font-family:var(--tcp-display);font-weight:600;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
}
.tcp-sp-comments .form-submit input[type=submit]:hover{background:var(--tcp-red-h)!important}

/* ---------- sidebar ---------- */
.tcp-sp-side{display:grid;gap:22px;position:sticky;top:96px}
.tcp-sp-search{position:relative;display:block}
.tcp-sp-search input{
  width:100%;padding:19px 58px 19px 22px;border:0;border-radius:4px;
  background:var(--tcp-red);color:#fff;
  font-family:var(--tcp-body);font-size:15px;
}
.tcp-sp-search input::placeholder{color:rgba(255,255,255,.85)}
.tcp-sp-search input:focus{outline:2px solid var(--tcp-ink);outline-offset:2px}
.tcp-sp-search button{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border:0;background:transparent!important;
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:none!important;padding:0;
}
.tcp-sp-search button svg{width:19px;height:19px}
.tcp-sr{position:absolute!important;left:-9999px}

.tcp-sp-card{background:var(--tcp-bg-alt);border-radius:4px;padding:26px 24px}
.tcp-sp-cardh{
  margin:0 0 18px;font-family:var(--tcp-display);font-weight:700;
  font-size:19px;color:var(--tcp-ink);
}

.tcp-sp-latest{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tcp-sp-latest a{
  display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;
  align-items:center;padding:12px;border-radius:4px;
  background:transparent;text-decoration:none;
  transition:background-color .2s var(--tcp-ease);
}
.tcp-sp-latest a:hover{background:#fff}
.tcp-sp-lthumb img{width:78px;height:78px;object-fit:cover;border-radius:3px;display:block}
.tcp-sp-ltxt{min-width:0}
.tcp-sp-ltxt em{
  display:flex;align-items:center;gap:7px;font-style:normal;
  font-size:11.5px;color:var(--tcp-muted);margin-bottom:5px;
}
.tcp-sp-ltxt em svg{width:15px;height:15px;color:var(--tcp-red);flex:0 0 auto}
.tcp-sp-ltxt strong{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--tcp-display);font-weight:700;font-size:15px;
  line-height:1.32;color:var(--tcp-ink);
}
.tcp-sp-latest a:hover .tcp-sp-ltxt strong{color:var(--tcp-red)}

.tcp-sp-cats{list-style:none;margin:0;padding:0}
.tcp-sp-cats li{border-bottom:1px solid #E6E6E6}
.tcp-sp-cats li:last-child{border-bottom:0}
.tcp-sp-cats a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 2px;text-decoration:none;
  font-size:14.5px;color:var(--tcp-muted);
  transition:color .2s var(--tcp-ease);
}
.tcp-sp-cats a svg{width:17px;height:17px;opacity:0;transition:opacity .2s var(--tcp-ease)}
.tcp-sp-cats a:hover,
.tcp-sp-cats li.is-on a{color:var(--tcp-red)}
.tcp-sp-cats a:hover svg,
.tcp-sp-cats li.is-on a svg{opacity:1}

.tcp-sp-tagcloud{display:flex;flex-wrap:wrap;gap:10px}
.tcp-sp-tagcloud a{
  display:inline-flex;align-items:center;padding:10px 16px;
  background:#fff;border-radius:4px;text-decoration:none;
  font-family:var(--tcp-display);font-weight:600;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tcp-ink);
  transition:background-color .2s var(--tcp-ease),color .2s var(--tcp-ease);
}
.tcp-sp-tagcloud a:hover{background:var(--tcp-red);color:#fff}

@media (max-width:1000px){
  .tcp-sp-wrap{grid-template-columns:1fr}
  .tcp-sp-side{position:static;margin-top:16px}
}
@media (max-width:640px){
  .tcp-sp-wrap{padding:0 16px}
  .tcp-sp-nav{grid-template-columns:1fr}
  .tcp-sp-comments .comment-body{grid-template-columns:64px minmax(0,1fr);gap:16px}
  .tcp-sp-comments .avatar{width:64px;height:64px}
  .tcp-sp-comments .reply{position:static;margin-top:12px}
  .tcp-sp-comments .comment-form-author,
  .tcp-sp-comments .comment-form-email{width:100%;margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  .tcp-sp-navcard,.tcp-sp-latest a,.tcp-sp-tagcloud a{transition:none}
}

/* ---------- fix: article column collapsed ----------
   Astra wraps content in a .ast-container flex row for its sidebar layout.
   With one child the child sizes to its content, so the article column came
   out narrower than the sidebar. Drop the flex context on single posts, the
   same fix applied to the product and challenge templates. */
.single-post .ast-container{display:block!important}
.single-post .ast-article-single,
.single-post .ast-separate-container .ast-article-single{
  background:transparent!important;border:0!important;
  padding:0!important;margin:0!important;box-shadow:none!important;
}
.single-post .entry-header,
.single-post .post-navigation,
.single-post .ast-single-post-order{display:none!important}
.single-post .site-content,
.single-post .ast-separate-container{background:var(--tcp-bg)!important}
.tcp-sp{width:100%;flex:1 1 100%}
/* Astra also caps .ast-container at 750px on single posts (its blog content
   width). That left 282px for the article once the 340px sidebar was placed.
   Release the cap and let this template's own wrapper own the measure. */
.single-post .ast-container{max-width:none!important;padding-left:0!important;padding-right:0!important}