/* FitBlow — article + static page styles. Ported verbatim from design/FitBlow/Article. */

/* ── BREADCRUMB ── */
.breadcrumb-bar { border-bottom: var(--border); }
.breadcrumb-bar .inner {
  max-width: 1200px; margin: 0 auto; padding: 0 2rem;
  height: 38px; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.breadcrumb-bar a, .breadcrumb-bar span {
  font-family: var(--mono); font-size: 10px; font-weight: 300;
  letter-spacing: .7px; text-transform: uppercase; color: var(--ink-60);
}
.breadcrumb-bar .sep { color: var(--ink-20); }
.breadcrumb-bar .current { color: var(--ink); }

/* ── PAGE LAYOUT ── */
.page-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3.5rem;
}
.page-wrap--single {
  grid-template-columns: 1fr;
  max-width: 780px;
}

/* ── ARTICLE ── */
.article-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 300;
  letter-spacing: .88px; text-transform: uppercase;
  color: #fff; background: var(--ink);
  padding: 4px 10px; border-radius: var(--r-sm);
  display: inline-block; margin-bottom: 1.25rem;
}
.page-wrap h1 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem .75rem;
  padding-bottom: 1.5rem;
  border-bottom: var(--border);
  margin-bottom: 1.75rem;
}
.article-meta span {
  font-family: var(--mono); font-size: 11px; font-weight: 300;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink-60);
}
.article-meta .meta-dot { color: var(--ink-20); }
.meta-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 300;
  letter-spacing: .7px; text-transform: uppercase;
  border: 1px solid var(--ink-20); color: var(--ink-60);
  padding: 2px 8px; border-radius: var(--r-sm);
}
.author-row {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.25rem 0;
  border-top: var(--border); border-bottom: var(--border);
  margin-bottom: 1.75rem;
}
.author-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); display: flex; align-items: center;
  justify-content: center; font-family: var(--mono);
  font-size: 12px; font-weight: 500; color: var(--ink-60); flex-shrink: 0;
}
.author-info strong {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink); display: block;
}
.author-info span {
  font-family: var(--mono); font-size: 10px; font-weight: 300;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink-60);
}
.featured-img { width: 100%; margin-bottom: 2rem; border-radius: var(--r-sm); overflow: hidden; line-height: 0; }
.featured-img img { width: 100%; display: block; object-fit: cover; }
.article-lead {
  font-family: var(--sans); font-size: 20px; font-weight: 300;
  line-height: 1.65; color: var(--ink); font-style: italic;
  margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: var(--border);
}

/* Body */
.article-body p {
  font-family: var(--sans); font-size: 18px; font-weight: 400;
  line-height: 1.78; color: var(--ink); margin-bottom: 1.5rem;
}
.article-body h2,
.page-wrap h2 {
  font-family: var(--mono); font-weight: 500; font-size: 15px;
  letter-spacing: .88px; text-transform: uppercase; color: var(--ink);
  margin: 2.5rem 0 1rem;
}
.article-body h3 {
  font-family: var(--mono); font-weight: 500; font-size: 13px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--ink);
  margin: 2rem 0 .75rem;
}
.article-body ul,
.article-body ol { margin: 0 0 1.5rem 1.25rem; }
.article-body li {
  font-family: var(--sans); font-size: 17px; line-height: 1.7;
  color: var(--ink); margin-bottom: .5rem;
}
.article-body img { border-radius: var(--r-sm); margin: 1.5rem 0; }
.article-body a { color: var(--red); border-bottom: 1px solid rgba(234,38,38,.3); }

/* Pullquote */
.pullquote { border-left: 3px solid var(--ink); padding: .5rem 0 .5rem 1.5rem; margin: 2rem 0; }
.pullquote p {
  font-family: var(--sans); font-size: 22px; font-weight: 300;
  font-style: italic; line-height: 1.5; color: var(--ink); margin: 0;
}

/* Info box */
.info-box { background: var(--surface); border-radius: var(--r-sm); padding: 1.25rem 1.5rem; margin: 1.75rem 0; }
.info-box-label {
  font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: .88px; text-transform: uppercase; color: var(--ink-60); margin-bottom: .6rem;
}
.info-box p {
  font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0;
}

/* Ad block */
.ad-block {
  background: var(--surface); border: 1px dashed var(--ink-20);
  border-radius: var(--r-sm); min-height: 100px; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  margin: 2rem 0; gap: 4px;
}
.ad-block span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .7px;
  text-transform: uppercase; color: var(--ink-20);
}

/* Share bar */
.share-bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: 1.5rem 0; border-top: var(--border); border-bottom: var(--border);
  margin: 2rem 0;
}
.share-label {
  font-family: var(--mono); font-size: 10px; font-weight: 300;
  letter-spacing: .88px; text-transform: uppercase; color: var(--ink-60); margin-right: .5rem;
}
.share-btn {
  font-family: var(--mono); font-size: 10px; font-weight: 300;
  letter-spacing: .7px; text-transform: uppercase;
  background: none; border: 1px solid var(--ink-20); color: var(--ink-60);
  padding: 5px 12px; border-radius: var(--r-sm); cursor: pointer; transition: all .15s;
}
.share-btn:hover { border-color: rgba(26,26,24,.3); color: var(--ink); }

/* Tags */
.tags-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.tag-pill {
  font-family: var(--mono); font-size: 10px; font-weight: 300;
  letter-spacing: .7px; text-transform: uppercase;
  background: var(--surface); color: var(--ink-60);
  padding: 5px 12px; border-radius: var(--r-sm);
}

/* Related section */
.related-section { border-top: 2px solid var(--ink); padding-top: 2rem; margin: 0 0 3rem; }
.related-section-title {
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  letter-spacing: .88px; text-transform: uppercase; color: var(--ink); margin-bottom: 1.5rem;
}
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.related-card-img {
  width: 100%; aspect-ratio: 16/9; border-radius: var(--r-sm);
  margin-bottom: .75rem; overflow: hidden; background: var(--surface);
}
.related-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-card-cat {
  font-family: var(--mono); font-size: 9px; font-weight: 300;
  letter-spacing: .88px; text-transform: uppercase; color: var(--ink-60); margin-bottom: .4rem;
}
.related-card-title {
  font-family: var(--mono); font-weight: 500; font-size: 13px;
  line-height: 1.4; letter-spacing: .2px; text-transform: uppercase;
  color: var(--ink); margin-bottom: .5rem;
}
.related-card-meta {
  font-family: var(--mono); font-size: 9px; font-weight: 300;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink-20);
}

/* ── SIDEBAR ── */
.sidebar { padding-top: 0; }
.sidebar-widget { margin-bottom: 2.5rem; }
.widget-title {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .88px; text-transform: uppercase; color: var(--ink);
  padding-bottom: .75rem; border-bottom: 2px solid var(--ink); margin-bottom: 1.25rem;
}
.sidebar-ad {
  background: var(--surface); border: 1px dashed var(--ink-20);
  border-radius: var(--r-sm); min-height: 250px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.sidebar-ad span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .7px;
  text-transform: uppercase; color: var(--ink-20);
}
.popular-post {
  display: flex; gap: .75rem; padding: .75rem 0; border-bottom: var(--border);
}
.popular-post:last-child { border-bottom: none; }
.popular-thumb {
  width: 60px; height: 60px; border-radius: var(--r-sm);
  background: var(--surface); flex-shrink: 0; overflow: hidden;
}
.popular-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-sm); }
.popular-post-info { flex: 1; }
.popular-post-cat {
  font-family: var(--mono); font-size: 9px; font-weight: 300;
  letter-spacing: .7px; text-transform: uppercase; color: var(--ink-60); margin-bottom: 4px;
}
.popular-post-title {
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  line-height: 1.4; color: var(--ink); margin-bottom: 4px;
}
.popular-post-date {
  font-family: var(--mono); font-size: 9px; font-weight: 300;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink-20);
}
.newsletter-widget { background: var(--ink); border-radius: var(--r-sm); padding: 1.5rem; }
.newsletter-widget .widget-title { color: rgba(255,255,255,.9); border-bottom-color: rgba(255,255,255,.2); }
.newsletter-widget p {
  font-family: var(--sans); font-size: 13px; font-weight: 300;
  line-height: 1.6; color: rgba(255,255,255,.6); margin-bottom: 1rem;
}
.newsletter-input {
  width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm); padding: 9px 12px; font-family: var(--mono);
  font-size: 11px; letter-spacing: .5px; color: #fff; margin-bottom: .75rem; outline: none;
}
.newsletter-input::placeholder { color: rgba(255,255,255,.3); }
.newsletter-btn {
  width: 100%; font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: .88px; text-transform: uppercase;
  background: #fff; color: var(--ink); border: none;
  padding: 10px; border-radius: var(--r-sm); cursor: pointer; transition: background .15s;
}
.newsletter-btn:hover { background: var(--red); color: #fff; }
.cat-list { list-style: none; }
.cat-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 0; border-bottom: var(--border);
}
.cat-list li:last-child { border-bottom: none; }
.cat-list a {
  font-family: var(--mono); font-size: 11px; font-weight: 300;
  letter-spacing: .6px; text-transform: uppercase; color: var(--ink);
}
.cat-count {
  font-family: var(--mono); font-size: 10px; font-weight: 300;
  color: var(--ink-60); background: var(--surface); padding: 2px 7px; border-radius: var(--r-sm);
}

/* Status line for forms */
.form-status { font-family: var(--mono); font-size: 12px; color: var(--ink-60); margin-top: .75rem; }

/* ── FORMS (contact / report) ── */
.fb-form { margin: 1.5rem 0; }
.fb-form label {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: .7px; text-transform: uppercase; color: var(--ink-60); margin-bottom: .4rem;
}
.fb-form-row { margin-bottom: 1.1rem; }
.fb-form input,
.fb-form select,
.fb-form textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--ink-20); border-radius: var(--r-sm);
  padding: 10px 12px; outline: none; transition: border-color .15s;
}
.fb-form input:focus,
.fb-form select:focus,
.fb-form textarea:focus { border-color: var(--ink); }
.fb-form textarea { resize: vertical; min-height: 120px; }
.fb-form button {
  font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: .88px; text-transform: uppercase;
  background: var(--ink); color: #fff; border: none;
  padding: 11px 22px; border-radius: var(--r-sm); cursor: pointer; transition: background .15s;
}
.fb-form button:hover { background: var(--red); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .page-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .related-grid { grid-template-columns: 1fr; }
  .page-wrap h1 { font-size: 27px; }
}