/* ================================================================
   THOREVIS PORTFOLIO — SEO EXPANSION CSS
   Inner page layouts: services, projects, blog, about
   ================================================================ */

/* ── INNER HERO ── */
.tw-inner-main { padding-top: 72px; }
.tw-inner-hero {
  padding: clamp(3rem,8vw,6rem) var(--tw-gap) clamp(2.5rem,6vw,5rem);
  background: var(--tw-paper);
  border-bottom: 1px solid rgba(10,10,10,0.07);
}
.tw-inner-hero--dark { background: var(--tw-ink); }
.tw-inner-hero--service { background: var(--tw-paper-warm); }
.tw-inner-hero-content { max-width: 900px; }
.tw-inner-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem,6vw,5.5rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--tw-ink);
  margin-bottom: 1rem;
}
.tw-inner-title em { color: var(--tw-accent); font-style: normal; }
.tw-inner-title.tw-light { color: var(--tw-paper); }
.tw-inner-lead { font-size: clamp(1rem,1.6vw,1.2rem); color: var(--tw-ink-soft); max-width: 55ch; line-height: 1.75; margin-bottom: 1.5rem; }
.tw-inner-hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; padding: 0 var(--tw-gap) 1rem; }

/* ── SERVICE ICON ── */
.tw-service-icon-large { font-size: 3.5rem; margin-bottom: 1rem; line-height: 1; }
.tw-hero-tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tw-hero-tag { font-family:'DM Mono',monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; background:rgba(232,93,38,0.1); color:var(--tw-accent); border:1px solid rgba(232,93,38,0.2); padding:0.3rem 0.7rem; border-radius:2px; }
.tw-hero-tag--dark { background:rgba(232,93,38,0.15); color:var(--tw-paper); }

/* ── SERVICES ARCHIVE ── */
.tw-services-archive-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.tw-service-archive-card {
  display:block; text-decoration:none;
  background:var(--tw-white); border:1px solid rgba(10,10,10,0.08);
  border-radius:4px; padding:2rem;
  border-top:4px solid var(--tw-accent);
  transition:transform 0.2s, box-shadow 0.2s;
}
.tw-service-archive-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(10,10,10,0.1); }
.tw-sac-icon { font-size:2.2rem; margin-bottom:1rem; }
.tw-sac-title { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; letter-spacing:0.04em; color:var(--tw-ink); margin-bottom:0.6rem; }
.tw-sac-excerpt { font-size:0.88rem; color:var(--tw-ink-soft); line-height:1.7; margin-bottom:1rem; }
.tw-sac-tags { display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:1rem; }
.tw-sac-tags span { font-family:'DM Mono',monospace; font-size:0.62rem; text-transform:uppercase; background:var(--tw-paper); color:var(--tw-teal); border:1px solid rgba(26,122,110,0.2); padding:0.2rem 0.5rem; border-radius:2px; }
.tw-sac-arrow { font-size:0.8rem; font-weight:600; color:var(--tw-accent); letter-spacing:0.05em; }

/* ── SERVICE / PROJECT BODY ── */
.tw-service-body-grid,
.tw-project-body-grid { display:grid; grid-template-columns:1fr 340px; gap:4rem; align-items:start; }

/* ── SIDEBAR ── */
.tw-sidebar-card { background:var(--tw-paper-warm); border-radius:4px; padding:1.5rem; margin-bottom:1.2rem; }
.tw-sidebar-card--cta { background:var(--tw-ink); }
.tw-sidebar-card--cta .tw-sidebar-label { color:var(--tw-accent); }
.tw-sidebar-card--cta p { color:rgba(245,242,235,0.65); font-size:0.85rem; line-height:1.65; }
.tw-sidebar-label { font-family:'DM Mono',monospace; font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--tw-ink-muted); margin-bottom:0.8rem; }
.tw-sidebar-bio { font-size:0.88rem; color:var(--tw-ink-soft); line-height:1.7; margin-bottom:0.8rem; }
.tw-sidebar-link { font-size:0.82rem; font-weight:600; color:var(--tw-accent); text-decoration:none; }
.tw-sidebar-link:hover { text-decoration:underline; }
.tw-sidebar-list { list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
.tw-sidebar-list li { font-size:0.88rem; color:var(--tw-ink-soft); padding-left:1rem; position:relative; }
.tw-sidebar-list li::before { content:'→'; position:absolute; left:0; color:var(--tw-accent); font-size:0.8rem; }
.tw-sidebar-list--detail li::before { content:''; padding-left:0; }
.tw-sidebar-list--detail li { padding-left:0; }

/* ── PROSE (article body) ── */
.tw-prose { font-size:1.05rem; color:var(--tw-ink-soft); line-height:1.85; max-width:72ch; }
.tw-prose h2 { font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:0.04em; color:var(--tw-ink); margin:2.5rem 0 1rem; }
.tw-prose h3 { font-size:1.15rem; font-weight:600; color:var(--tw-ink); margin:2rem 0 0.8rem; }
.tw-prose p { margin-bottom:1.2rem; }
.tw-prose ul,
.tw-prose ol { padding-left:1.5rem; margin-bottom:1.2rem; display:flex; flex-direction:column; gap:0.5rem; }
.tw-prose li { line-height:1.7; }
.tw-prose strong { color:var(--tw-ink); font-weight:600; }
.tw-prose a { color:var(--tw-accent); }
.tw-prose code { font-family:'DM Mono',monospace; font-size:0.85em; background:var(--tw-paper-warm); padding:0.15em 0.4em; border-radius:2px; }
.tw-prose pre { background:var(--tw-ink); color:var(--tw-paper); padding:1.5rem; border-radius:4px; overflow-x:auto; margin-bottom:1.5rem; }
.tw-prose blockquote { border-left:4px solid var(--tw-accent); padding-left:1.5rem; color:var(--tw-ink-muted); font-style:italic; margin:2rem 0; }
.tw-prose img { max-width:100%; border-radius:4px; margin:1.5rem 0; }

/* ── OUTCOME BANNER ── */
.tw-outcome-banner { background:var(--tw-ink); border-left:4px solid var(--tw-accent); border-radius:0 4px 4px 0; padding:1.5rem 2rem; margin-bottom:2.5rem; }
.tw-outcome-label { font-family:'DM Mono',monospace; font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--tw-accent); margin-bottom:0.5rem; }
.tw-outcome-text { font-size:1.05rem; color:var(--tw-paper); line-height:1.7; }

/* ── BLOG ── */
.tw-blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
.tw-blog-card { background:var(--tw-white); border:1px solid rgba(10,10,10,0.08); border-radius:4px; overflow:hidden; transition:transform 0.2s,box-shadow 0.2s; }
.tw-blog-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(10,10,10,0.1); }
.tw-blog-thumb { display:block; overflow:hidden; height:200px; }
.tw-blog-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.tw-blog-card:hover .tw-blog-thumb img { transform:scale(1.03); }
.tw-blog-card-body { padding:1.5rem; }
.tw-blog-meta { display:flex; gap:1rem; align-items:center; margin-bottom:0.7rem; }
.tw-blog-date { font-family:'DM Mono',monospace; font-size:0.7rem; color:var(--tw-ink-muted); letter-spacing:0.08em; }
.tw-blog-cat { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--tw-accent); background:rgba(232,93,38,0.08); padding:0.2rem 0.5rem; border-radius:2px; }
.tw-blog-title { font-family:'Bebas Neue',sans-serif; font-size:1.4rem; letter-spacing:0.03em; line-height:1.1; margin-bottom:0.7rem; }
.tw-blog-title a { color:var(--tw-ink); text-decoration:none; }
.tw-blog-title a:hover { color:var(--tw-accent); }
.tw-blog-excerpt { font-size:0.88rem; color:var(--tw-ink-soft); line-height:1.7; margin-bottom:1rem; }
.tw-blog-read-more { font-size:0.8rem; font-weight:600; color:var(--tw-accent); text-decoration:none; letter-spacing:0.05em; }

/* ── ARTICLE LAYOUT ── */
.tw-article-hero { padding-bottom: 0; }
.tw-article-byline { font-family:'DM Mono',monospace; font-size:0.75rem; color:var(--tw-ink-muted); letter-spacing:0.08em; display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin-top:0.8rem; }
.tw-article-byline a { color:var(--tw-accent); text-decoration:none; }
.tw-sep { color:rgba(10,10,10,0.2); }
.tw-article-featured-img { max-height:480px; overflow:hidden; }
.tw-article-featured-img img { width:100%; height:100%; object-fit:cover; }
.tw-article-body-wrap { padding:clamp(2rem,6vw,5rem) var(--tw-gap); display:grid; grid-template-columns:1fr 300px; gap:4rem; align-items:start; max-width:1200px; margin:0 auto; }
.tw-article-content { min-width:0; }

/* ── ABOUT PAGE ── */
.tw-about-page-grid { display:grid; grid-template-columns:1fr 320px; gap:5rem; align-items:start; }
.tw-about-subhead { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:0.04em; color:var(--tw-ink); margin:2.5rem 0 0.8rem; }
.tw-about-subhead:first-child { margin-top:0; }
.tw-about-page-content p { font-size:1.02rem; color:var(--tw-ink-soft); line-height:1.85; margin-bottom:1.1rem; }
.tw-about-page-content p strong { color:var(--tw-ink); }
.tw-about-page-content em { color:var(--tw-accent); font-style:normal; font-weight:600; }

/* ── RELATED ── */
.tw-related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:2rem; }
.tw-related-card { display:flex; align-items:center; gap:1rem; background:var(--tw-white); border:1px solid rgba(10,10,10,0.08); border-radius:4px; padding:1.2rem 1.5rem; text-decoration:none; transition:border-color 0.2s,transform 0.15s; }
.tw-related-card:hover { border-color:var(--tw-accent); transform:translateY(-2px); }
.tw-related-icon { font-size:1.5rem; }
.tw-related-title { font-family:'Bebas Neue',sans-serif; font-size:1rem; letter-spacing:0.04em; color:var(--tw-ink); flex:1; }
.tw-related-arrow { color:var(--tw-accent); font-weight:700; }

/* ── CTA STRIP ── */
.tw-inner-cta-strip { background:var(--tw-accent); padding:4rem var(--tw-gap); text-align:center; }
.tw-inner-cta-strip h2 { font-family:'Bebas Neue',sans-serif; font-size:clamp(1.8rem,4vw,3rem); color:var(--tw-white); letter-spacing:0.05em; margin-bottom:0.8rem; }
.tw-inner-cta-strip p { color:rgba(255,255,255,0.85); font-size:1.05rem; margin-bottom:1.5rem; }

/* ── PAGINATION ── */
.tw-pagination { display:flex; justify-content:center; gap:0.5rem; padding:3rem 0 0; }
.tw-pagination .page-numbers { font-family:'DM Mono',monospace; font-size:0.8rem; padding:0.5rem 1rem; border:1px solid rgba(10,10,10,0.12); border-radius:2px; color:var(--tw-ink-soft); text-decoration:none; }
.tw-pagination .page-numbers.current { background:var(--tw-accent); color:var(--tw-white); border-color:var(--tw-accent); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .tw-service-body-grid,
  .tw-project-body-grid,
  .tw-about-page-grid,
  .tw-article-body-wrap { grid-template-columns:1fr; gap:2.5rem; }
  .tw-article-sidebar { display:none; }
}
@media (max-width:600px) {
  .tw-services-archive-grid,
  .tw-blog-grid,
  .tw-related-grid { grid-template-columns:1fr; }
}