/* ==========================================================================
   TYRONEHARRISON - INNER PAGES

   Loaded on everything except the front page.

   1. Page hero
   2. Entry layout
   3. Blog grid
   4. Sidebar & widgets
   5. Comments
   6. Search form
   7. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page hero

   The band that every inner template opens with. Its top padding is the
   header stack plus breathing room, which is what stops the transparent bar
   from covering the heading. Because the header text is white, this band is
   always dark.
   -------------------------------------------------------------------------- */
.th-page-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--th-header-stack) + 4.5rem);
  padding-bottom: 4.5rem;
  background-color: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.72);
}

.th-page-hero-compact {
  padding-top: calc(var(--th-header-stack) + 3.25rem);
  padding-bottom: 3.25rem;
}

/* A warm wash in the top-right, echoing the front page hero. */
.th-page-hero::after {
  content: "";
  position: absolute;
  top: -240px;
  right: -140px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(245, 142, 0, 0.16) 0%, transparent 68%);
  pointer-events: none;
}

/* Featured image backdrop, held behind a scrim dark enough for white text. */
.th-page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.32;
}

.th-page-hero-has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29, 29, 31, 0.82) 0%, rgba(29, 29, 31, 0.62) 100%);
}

.th-page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.th-page-hero-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.th-page-hero-title {
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.th-page-hero-subtitle {
  max-width: 62ch;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}

/* The single-post meta row sits on dark here, so it needs lighter ink. */
.th-page-hero .th-meta {
  margin-top: 1.5rem;
  color: rgba(255, 255, 255, 0.55);
}

.th-page-hero .th-meta a {
  color: rgba(255, 255, 255, 0.55);
}

.th-page-hero .th-meta a:hover {
  color: var(--color-primary);
}

/*
 * Safety net. If a template ever renders without the hero part, its first
 * section still clears the fixed bar instead of hiding under it.
 */
.th-main > .th-section:first-child {
  padding-top: calc(var(--th-header-stack) + 3rem);
}

/* --------------------------------------------------------------------------
   2. Entry layout
   -------------------------------------------------------------------------- */
.th-entry-wrap {
  display: grid;
  gap: 4rem;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

/*
 * Grid children default to min-width:auto, which lets a long URL or a wide
 * code block push the column past its track. Pinning it to 0 keeps the
 * overflow inside the element instead of stretching the layout.
 */
.th-entry-main {
  min-width: 0;
}

/* Full width when no sidebar widgets have been added. */
.th-no-sidebar .th-entry-wrap {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
  margin: 0 auto;
}

.th-entry-thumb {
  margin-bottom: 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.th-entry-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.th-entry-tags {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.th-entry-tags a {
  display: inline-block;
  margin: 0 0.25rem 0.35rem 0;
  padding: 0.25rem 0.7rem;
  font-size: 0.8125rem;
  color: var(--color-text-body);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.th-entry-tags a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Page-break links inside a multi-page post. */
.th-page-links {
  margin-top: 2rem;
  font-family: var(--font-heading);
  font-weight: 700;
}

.th-page-links a {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-right: 0.25rem;
}

/* --------------------------------------------------------------------------
   3. Blog grid
   -------------------------------------------------------------------------- */
.th-post-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.th-post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.75rem 2rem 2rem;
}

.th-post-card .th-meta {
  margin-bottom: 0.85rem;
}

.th-post-card .th-link-arrow {
  margin-top: auto;
}

/* Cards with no featured image would otherwise start flush against the top
   border with no breathing room. */
.th-post-card:not(:has(.th-thumb)) .th-post-card-body {
  padding-top: 2rem;
}

/* --------------------------------------------------------------------------
   4. Sidebar & widgets
   -------------------------------------------------------------------------- */
.th-sidebar {
  position: sticky;
  top: calc(var(--th-bar-h) + 1.5rem);
}

.th-widget {
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.th-widget-title {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.th-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}

.th-widget li {
  padding: 0.4rem 0;
}

.th-widget li + li {
  border-top: 1px solid var(--color-border);
}

.th-widget a {
  color: var(--color-text-body);
}

.th-widget a:hover {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   5. Comments
   -------------------------------------------------------------------------- */
.th-comments {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-border);
}

.th-comments-title {
  margin-bottom: 2rem;
}

.th-comment-list {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
}

.th-comment-list .children {
  list-style: none;
  margin: 1.5rem 0 0 1.5rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--color-border);
}

.th-comment-list li {
  margin-bottom: 1.5rem;
}

.th-comment-list .comment-body {
  padding: 1.5rem;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.th-comment-list .comment-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-heading);
}

.th-comment-list .comment-author img {
  border-radius: 50%;
}

.th-comment-list .comment-meta {
  margin-bottom: 0.85rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.th-comment-list .comment-meta a {
  color: var(--color-text-muted);
}

.th-comment-list .reply {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
}

/* A comment awaiting approval, and the post author's own replies. */
.th-comment-list .comment-awaiting-moderation {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-primary);
}

.th-comment-list .bypostauthor > .comment-body {
  border-color: var(--color-primary-ring);
}

.comment-respond {
  padding: 2rem;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.comment-reply-title {
  margin-bottom: 1.5rem;
}

.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.comment-form-cookies-consent label {
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-body);
}

.comment-form .submit {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.9rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-light);
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
}

.comment-form .submit:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* --------------------------------------------------------------------------
   6. Search form
   -------------------------------------------------------------------------- */
.th-search-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.th-search-form label {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.th-no-results {
  padding: 3rem 2rem;
  text-align: center;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.th-no-results-form {
  max-width: 420px;
  margin: 2rem auto 0;
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .th-entry-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .th-sidebar {
    position: static;
  }
}

@media (max-width: 782px) {
  .th-page-hero {
    padding-top: calc(var(--th-header-stack) + 3rem);
    padding-bottom: 3rem;
  }

  .th-page-hero-compact {
    padding-top: calc(var(--th-header-stack) + 2.25rem);
    padding-bottom: 2.25rem;
  }

  .th-comment-list .children {
    margin-left: 0.5rem;
    padding-left: 1rem;
  }

  .th-search-form {
    flex-direction: column;
    align-items: stretch;
  }
}