/* ═══════════════════════════════════════════
   TAVO ŠAMPŪNAS — Content Pages CSS
   blog listing · single post · archive · page
   Depends on base.css (tokens, reset, buttons)
   ═══════════════════════════════════════════ */

/* ─── SHOPTIMIZER: container resets for all content pages ─── */
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) {
  background: var(--cream) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
}
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) .col-full,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) #page,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) #content,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) .site-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) #primary,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) .content-area {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) .site-main,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) main#main,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) article,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
/* Heading fonts */
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) h1,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) h2,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) h3,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) h4,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) h5,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) h6 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Body-copy fonts */
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) p,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) span,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) a,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) li,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) div,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) td,
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) button {
  font-family: var(--sans) !important;
}

/* page-top spacer: on content pages no ticker → only nav height */
body:is(.ts-blog-page, .ts-archive-page, .ts-single-page, .ts-wp-page) .page-top {
  height: var(--nv);
}

/* ═══════════════════════════════════════════
   BLOG LISTING  (.ts-blog-page)
   ═══════════════════════════════════════════ */

/* ─── Blog header ─── */
.ts-blog-header {
  padding: 72px 60px 56px;
  border-bottom: 1px solid var(--line);
}
.ts-blog-kicker {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--terra); font-weight: 300;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
}
.ts-blog-kicker::before { content: ''; width: 32px; height: 1px; background: var(--terra); opacity: .5; }
.ts-blog-header h1 {
  font-family: var(--serif) !important;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
}
.ts-blog-header h1 em { font-style: italic; color: var(--terra); }

/* ─── Posts grid ─── */
.ts-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
  padding: 64px 60px;
  max-width: 1240px;
  margin: 0 auto;
}

/* ─── Post card ─── */
.ts-post-card { display: flex; flex-direction: column; }
.ts-card-link { display: flex; flex-direction: column; flex: 1; }
.ts-card-img-wrap {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 24px;
  background: var(--cream2);
}
.ts-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.ts-post-card:hover .ts-card-img-wrap img { transform: scale(1.05); }
.ts-card-img-ph { width: 100%; height: 100%; background: var(--stone); }

.ts-card-cat {
  font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--forest); font-weight: 400;
  margin-bottom: 12px; display: block;
}
.ts-card-title {
  font-family: var(--serif) !important;
  font-size: 22px; font-weight: 400;
  line-height: 1.22; letter-spacing: -.01em;
  color: var(--ink); margin-bottom: 14px;
  transition: color .2s;
}
.ts-post-card:hover .ts-card-title { color: var(--terra); }
.ts-card-excerpt {
  font-size: 14px; line-height: 1.75;
  color: var(--ink2); margin-bottom: 20px;
  flex: 1;
}
.ts-card-meta {
  font-size: 11px; color: var(--ink3); letter-spacing: .04em;
  display: flex; align-items: center; gap: 10px;
}
.ts-card-meta::before { content: ''; width: 20px; height: 1px; background: var(--stone); }

/* ─── Pagination ─── */
.ts-pagination {
  padding: 0 60px 88px;
  max-width: 1240px;
  margin: 0 auto;
}
.ts-pagination .nav-links { display: flex; align-items: center; gap: 8px; }
.ts-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 8px;
  border-radius: 100px;
  font-size: 12px; letter-spacing: .04em;
  color: var(--ink2); border: 1px solid var(--stone);
  transition: all .2s var(--ease);
}
.ts-pagination .page-numbers:hover,
.ts-pagination .page-numbers.current {
  background: var(--forest); color: var(--cream); border-color: var(--forest);
}
.ts-pagination .page-numbers.dots { border: none; }

/* ─── No posts ─── */
.ts-no-posts { padding: 80px 60px; font-size: 16px; color: var(--ink2); }

/* ═══════════════════════════════════════════
   ARCHIVE  (.ts-archive-page)
   ═══════════════════════════════════════════ */

.ts-archive-header {
  padding: 72px 60px 56px;
  border-bottom: 1px solid var(--line);
}
.ts-archive-kicker {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--terra); font-weight: 300;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px;
}
.ts-archive-kicker::before { content: ''; width: 32px; height: 1px; background: var(--terra); opacity: .5; }
.ts-archive-header h1 {
  font-family: var(--serif) !important;
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 400; line-height: 1.1; letter-spacing: -.02em;
}
.ts-archive-desc {
  margin-top: 16px; font-size: 15px;
  color: var(--ink2); line-height: 1.75; max-width: 600px;
}

/* ═══════════════════════════════════════════
   SINGLE POST  (.ts-single-page)
   ═══════════════════════════════════════════ */

/* ─── Featured image ─── */
.ts-single-hero {
  width: 100%; max-height: 540px; overflow: hidden;
  background: var(--cream2);
}
.ts-single-hero img {
  width: 100%; height: 540px; object-fit: cover;
  display: block;
}

/* ─── Post header ─── */
.ts-single-header {
  max-width: 800px;
  margin: 0 auto;
  padding: 64px 40px 48px;
}
.ts-single-meta-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px; margin-bottom: 32px;
  font-size: 11px; letter-spacing: .04em; color: var(--ink3);
}
.ts-single-cat {
  font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cream); background: var(--forest);
  padding: 5px 14px; border-radius: 100px; font-weight: 400;
}
.ts-single-sep { color: var(--stone); }
.ts-single-title {
  font-family: var(--serif) !important;
  font-size: clamp(30px, 4.5vw, 56px);
  font-weight: 400; line-height: 1.1; letter-spacing: -.025em;
}

/* ─── Post body content ─── */
.ts-single-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 40px 100px;
}

/* Content typography */
.ts-single-body p,
.ts-single-body li     { font-size: 16px; line-height: 1.9; color: var(--ink2); margin-bottom: 24px; }
.ts-single-body li     { margin-bottom: 10px; }
.ts-single-body ul,
.ts-single-body ol     { padding-left: 28px; margin-bottom: 28px; }
.ts-single-body strong { font-weight: 500; color: var(--ink); }
.ts-single-body em     { font-style: italic; }
.ts-single-body a      { color: var(--terra); border-bottom: 1px solid rgba(122,74,40,.25); transition: border-color .2s; }
.ts-single-body a:hover{ border-color: var(--terra); }
.ts-single-body img    { border-radius: 3px; margin: 40px auto; }
.ts-single-body figure { margin: 40px 0; }
.ts-single-body figcaption {
  font-size: 12px; letter-spacing: .04em; color: var(--ink3);
  text-align: center; margin-top: 12px;
}

/* Headings inside content */
.ts-single-body h2 {
  font-family: var(--serif) !important;
  font-size: 28px; font-weight: 400;
  line-height: 1.2; letter-spacing: -.01em;
  color: var(--ink); margin: 52px 0 20px !important;
}
.ts-single-body h3 {
  font-family: var(--serif) !important;
  font-size: 22px; font-weight: 400;
  color: var(--ink); margin: 40px 0 16px !important;
}
.ts-single-body h4 {
  font-family: var(--serif) !important;
  font-size: 18px; font-weight: 400;
  color: var(--ink); margin: 32px 0 12px !important;
}

/* Blockquote */
.ts-single-body blockquote {
  border-left: 2px solid var(--terra);
  padding: 4px 0 4px 28px;
  margin: 40px 0;
  font-family: var(--serif) !important;
  font-size: 21px; line-height: 1.55;
  color: var(--ink); font-style: italic;
}
.ts-single-body blockquote p { font-size: inherit !important; line-height: inherit !important; color: inherit !important; margin-bottom: 0 !important; }

/* Horizontal rule */
.ts-single-body hr {
  border: none; border-top: 1px solid var(--line);
  margin: 48px 0;
}

/* ─── Post navigation ─── */
.ts-post-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.ts-post-nav-item {
  padding: 44px 60px;
  background: var(--cream);
  display: flex; flex-direction: column; gap: 10px;
  border-right: 1px solid var(--line);
  transition: background .25s;
}
.ts-post-nav-item:last-child { border-right: none; }
.ts-post-nav-item:hover { background: var(--cream2); }
.ts-post-nav-item.ts-post-nav-right { text-align: right; }
.ts-post-nav-item.ts-post-nav-empty { pointer-events: none; }
.ts-post-nav-label {
  font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink3);
}
.ts-post-nav-title {
  font-family: var(--serif) !important;
  font-size: 18px; font-weight: 400; color: var(--ink);
  line-height: 1.3; transition: color .2s;
}
.ts-post-nav-item:hover .ts-post-nav-title { color: var(--terra); }

/* ─── Comments ─── */
.ts-comments-wrap {
  max-width: 720px; margin: 0 auto;
  padding: 0 40px 80px;
  border-top: 1px solid var(--line);
}
.ts-comments-wrap .comment-respond,
.ts-comments-wrap .comments-title,
.ts-comments-wrap .comment-list { margin-top: 48px; }
.ts-comments-wrap .comments-title {
  font-family: var(--serif) !important;
  font-size: 24px; font-weight: 400; color: var(--ink); margin-bottom: 32px;
}
.ts-comments-wrap .comment-body { font-size: 15px; line-height: 1.8; color: var(--ink2); }
.ts-comments-wrap .comment-form label { font-size: 12px; letter-spacing: .04em; display: block; margin-bottom: 6px; color: var(--ink2); }
.ts-comments-wrap .comment-form input,
.ts-comments-wrap .comment-form textarea {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--stone); border-radius: 4px;
  background: transparent; font-family: var(--sans); font-size: 15px;
  color: var(--ink); transition: border-color .2s;
}
.ts-comments-wrap .comment-form input:focus,
.ts-comments-wrap .comment-form textarea:focus { outline: none; border-color: var(--forest); }
.ts-comments-wrap .form-submit input {
  background: var(--forest); color: var(--cream);
  border: none; width: auto;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 14px 32px; border-radius: 100px; cursor: pointer;
  transition: background .2s;
}
.ts-comments-wrap .form-submit input:hover { background: var(--terra); }

/* ═══════════════════════════════════════════
   REGULAR PAGE  (.ts-wp-page)
   ═══════════════════════════════════════════ */

.ts-wp-page-header {
  max-width: 900px;
  padding: 80px 60px 0;
}
.ts-wp-page-kicker {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--terra); font-weight: 300;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
}
.ts-wp-page-kicker::before { content: ''; width: 32px; height: 1px; background: var(--terra); opacity: .5; }
.ts-wp-page-header h1 {
  font-family: var(--serif) !important;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400; line-height: 1.08; letter-spacing: -.02em;
}

.ts-wp-page-body {
  max-width: 760px;
  padding: 56px 60px 100px;
}
/* Reuse single-body typography by applying same rules */
.ts-wp-page-body p,
.ts-wp-page-body li    { font-size: 16px; line-height: 1.9; color: var(--ink2); margin-bottom: 24px; }
.ts-wp-page-body li    { margin-bottom: 10px; }
.ts-wp-page-body ul,
.ts-wp-page-body ol    { padding-left: 28px; margin-bottom: 28px; }
.ts-wp-page-body strong{ font-weight: 500; color: var(--ink); }
.ts-wp-page-body a     { color: var(--terra); border-bottom: 1px solid rgba(122,74,40,.25); transition: border-color .2s; }
.ts-wp-page-body a:hover{ border-color: var(--terra); }
.ts-wp-page-body img   { border-radius: 3px; margin: 32px auto; }
.ts-wp-page-body h2    { font-family: var(--serif) !important; font-size: 26px; font-weight: 400; color: var(--ink); margin: 48px 0 18px !important; }
.ts-wp-page-body h3    { font-family: var(--serif) !important; font-size: 20px; font-weight: 400; color: var(--ink); margin: 36px 0 14px !important; }
.ts-wp-page-body blockquote {
  border-left: 2px solid var(--terra);
  padding: 4px 0 4px 24px; margin: 36px 0;
  font-family: var(--serif) !important;
  font-size: 20px; line-height: 1.55; font-style: italic; color: var(--ink);
}
.ts-wp-page-body hr { border: none; border-top: 1px solid var(--line); margin: 48px 0; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 1100px) {
  .ts-posts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .ts-posts-grid { padding: 48px 32px; gap: 40px 24px; }
  .ts-blog-header,
  .ts-archive-header { padding: 56px 32px 40px; }
  .ts-pagination { padding: 0 32px 64px; }
  .ts-no-posts { padding: 60px 32px; }

  .ts-single-hero img { height: 320px; }
  .ts-single-header { padding: 48px 24px 36px; }
  .ts-single-body { padding: 0 24px 72px; }
  .ts-single-body h2 { font-size: 24px; }
  .ts-post-nav-item { padding: 32px 24px; }

  .ts-wp-page-header { padding: 56px 24px 0; }
  .ts-wp-page-body { padding: 40px 24px 80px; }
}

@media (max-width: 640px) {
  .ts-posts-grid { grid-template-columns: 1fr; padding: 32px 20px; gap: 40px; }
  .ts-blog-header,
  .ts-archive-header { padding: 40px 20px 32px; }
  .ts-pagination { padding: 0 20px 56px; }

  .ts-single-hero img { height: 220px; }
  .ts-single-header { padding: 36px 20px 28px; }
  .ts-single-body { padding: 0 20px 56px; }
  .ts-post-nav { grid-template-columns: 1fr; }
  .ts-post-nav-item { padding: 28px 20px; }
  .ts-post-nav-item.ts-post-nav-right { text-align: left; }

  .ts-comments-wrap { padding: 0 20px 56px; }
  .ts-wp-page-header { padding: 40px 20px 0; }
  .ts-wp-page-body { padding: 32px 20px 64px; }
}