/* Inner Pursuit of Happiness - secondary pages (articles, book details,
   Spirituality, legal, 404) in the approved site design.
   Shared header, footer, palette, fonts and --u unit come from styles.css.
   Content markup is the original page content; this file only styles it. */

.page-main {
  --pg-w: min(calc(100vw - 48px), calc(790 * var(--u)));
  --pg-read: min(100%, calc(470 * var(--u)));
  background: var(--ivory);
  padding: calc(12 * var(--u)) 0 calc(16 * var(--u));
}

.page-main .wrap {
  width: var(--pg-w);
  margin-inline: auto;
  padding: 0;
}

.page-main .section + .section {
  margin-top: calc(10 * var(--u));
}

/* -- Type -- */
.page-main h1,
.page-main h2,
.page-main h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
}

.page-main h1 {
  font-size: calc(22 * var(--u));
}

.page-main h2 {
  margin-top: calc(10 * var(--u));
  font-size: calc(14 * var(--u));
}

.page-main h3 {
  margin: calc(7 * var(--u)) 0 0;
  font-size: calc(11 * var(--u));
}

.page-main p,
.page-main li {
  font-family: var(--serif);
  font-weight: 500;
  font-size: max(17px, calc(10 * var(--u)));
  line-height: 1.6;
  color: var(--ink);
}

.page-main p {
  margin-top: calc(6 * var(--u));
}

.page-main ul,
.page-main ol {
  margin: calc(6 * var(--u)) 0 0;
  padding-left: 1.4em;
}

.page-main ul {
  list-style: disc;
}

.page-main ol {
  list-style: decimal;
}

.page-main li + li {
  margin-top: calc(2 * var(--u));
}

.page-main li::marker {
  color: var(--gold);
}

.page-main a {
  color: var(--gold-text);
  text-underline-offset: 3px;
}

.page-main strong {
  font-weight: 700;
  color: var(--navy);
}

.page-main blockquote {
  margin: calc(8 * var(--u)) 0 0;
  padding: calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(9 * var(--u));
  border-left: 2px solid var(--gold);
}

.page-main blockquote p {
  margin-top: 0;
  font-style: italic;
  color: var(--navy);
}

.page-main .muted {
  font-family: var(--sans);
  font-size: max(13px, calc(7 * var(--u)));
  color: #5a6478;
}

.page-main .icon-inline {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* -- Breadcrumbs -- */
.page-main .breadcrumbs {
  margin-bottom: calc(5 * var(--u));
  font-family: var(--sans);
  font-size: max(12px, calc(6.6 * var(--u)));
  color: #5a6478;
}

.page-main .breadcrumbs a {
  color: var(--gold-text);
  text-decoration: none;
}

.page-main .breadcrumbs a:hover {
  text-decoration: underline;
}

/* -- Buttons (same pills as the approved Books page) -- */
.page-main .modal-actions,
.page-main .spirit-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(5 * var(--u));
  margin-top: calc(9 * var(--u));
}

.page-main .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: max(36px, calc(20 * var(--u)));
  width: auto;
  padding: 0 calc(9 * var(--u));
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: max(12px, calc(6.8 * var(--u)));
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(19, 34, 59, 0.2);
  transition: filter 0.2s ease;
}

.page-main .btn-gold {
  background: linear-gradient(180deg, var(--gold-btn-top), var(--gold-btn-bottom));
}

.page-main .btn:hover {
  filter: brightness(1.12);
}

/* -- Blog article -- */
.page-main .post-body {
  width: var(--pg-read);
  margin-inline: auto;
}

.page-main .post-body > h1 + p {
  margin-top: calc(4 * var(--u));
  font-family: var(--sans);
  font-size: max(13px, calc(7 * var(--u)));
  color: #3a4660;
}

.page-main .post-hero {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(70vh, calc(330 * var(--u)));
  margin: calc(8 * var(--u)) auto calc(2 * var(--u));
  border-radius: calc(4 * var(--u));
  filter: sepia(0.06) saturate(1.03);
}

.page-main .post-body figure {
  margin: calc(8 * var(--u)) 0 0;
}

.page-main .post-body figure img {
  margin-inline: auto;
  height: auto;
  border-radius: calc(3 * var(--u));
}

.page-main .post-body figcaption {
  margin-top: calc(3 * var(--u));
  font-family: var(--sans);
  font-size: max(12px, calc(6.6 * var(--u)));
  color: #5a6478;
  text-align: center;
}

.page-main .related-posts {
  margin-top: calc(14 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid var(--line);
}

.page-main .related-posts > h2 {
  margin-top: 0;
}

.page-main .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: calc(7 * var(--u));
  margin-top: calc(7 * var(--u));
}

.page-main .blog-card {
  display: flex;
  flex-direction: column;
  padding: calc(5 * var(--u)) calc(5 * var(--u)) calc(7 * var(--u));
  background: #fdf9f2;
  border: 1px solid #eadfc9;
  border-radius: calc(5 * var(--u));
  color: var(--navy);
  text-decoration: none;
}

.page-main .blog-card img {
  width: 100%;
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: cover;
  border-radius: calc(3 * var(--u));
}

.page-main .blog-card .overlay {
  display: none;
}

.page-main .blog-card .meta {
  display: block;
  padding: 0 calc(3 * var(--u));
}

.page-main .blog-card .byline {
  display: block;
  margin-top: calc(6 * var(--u));
  font-family: var(--sans);
  font-size: max(12px, calc(6.6 * var(--u)));
  color: #3a4660;
}

.page-main .blog-card h2 {
  margin-top: calc(4 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: 1.2;
}

.page-main .blog-card:hover h2 {
  text-decoration: underline;
}

/* -- Book detail -- */
.page-main .split {
  display: grid;
  grid-template-columns: calc(150 * var(--u)) 1fr;
  column-gap: calc(16 * var(--u));
  align-items: start;
}

.page-main .book-cover {
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(30, 22, 8, 0.28);
}

.page-main .book-cover-crop {
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 100% 50%;
}

.page-main .split h1 {
  font-size: calc(18 * var(--u));
}

.page-main .book-back-links {
  margin-top: calc(9 * var(--u));
  font-family: var(--sans);
  font-size: max(13px, calc(7 * var(--u)));
}

/* -- Spirituality -- */
.page-main .spirit-top {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: calc(7 * var(--u));
  align-items: start;
}

.page-main .spirit-tile,
.page-main .spirit-feature {
  padding: calc(10 * var(--u)) calc(11 * var(--u));
  background: #fdf9f2;
  border: 1px solid #eadfc9;
  border-radius: calc(6 * var(--u));
}

.page-main .spirit-tile > h2 {
  margin-top: 0;
}

.page-main .spirituality-subtitle {
  font-style: italic;
  color: var(--gold-text);
}

.page-main .spirit-tile-list {
  padding: 0;
  list-style: none;
}

.page-main .spirit-tile-item {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
}

.page-main .spirit-tile-item + .spirit-tile-item {
  margin-top: calc(6 * var(--u));
}

.page-main .spirit-tile-item img {
  width: calc(32 * var(--u));
  min-width: 48px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(30, 22, 8, 0.22);
}

.page-main .spirit-tile-item h3,
.page-main .spirit-tile-item p {
  margin-top: 0;
}

.page-main .spirit-feature {
  display: grid;
  grid-template-columns: calc(84 * var(--u)) 1fr;
  column-gap: calc(12 * var(--u));
  align-items: start;
}

.page-main .spirit-feature + .spirit-feature {
  margin-top: calc(7 * var(--u));
}

.page-main .spirit-feature.reverse {
  grid-template-columns: 1fr calc(84 * var(--u));
}

.page-main .spirit-feature.reverse .spirit-feature-cover {
  order: 2;
}

.page-main .spirit-feature-cover img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(30, 22, 8, 0.28);
}

.page-main .spirit-feature h2 {
  margin-top: 0;
  font-size: calc(13 * var(--u));
}

/* -- Legal -- */
.page-main .legal-page {
  width: var(--pg-read);
  margin-inline: auto;
}

/* -- 404 -- */
.page-main .center-stack {
  text-align: center;
  padding: calc(20 * var(--u)) 0;
}

/* -- Tablet and phone -- */
@media (max-width: 960px) {
  .page-main {
    --pg-w: calc(100vw - 2.5rem);
    --pg-read: 100%;
    padding: 1.5rem 0 2.25rem;
  }

  .page-main h1,
  .page-main .split h1 {
    font-size: 2.1rem;
  }

  .page-main h2 {
    margin-top: 1.4rem;
    font-size: 1.55rem;
  }

  .page-main h3 {
    font-size: 1.3rem;
  }

  .page-main p,
  .page-main li {
    font-size: 1.1rem;
  }

  .page-main .split {
    grid-template-columns: minmax(0, 220px) 1fr;
    column-gap: 1.25rem;
  }

  .page-main .spirit-top {
    grid-template-columns: 1fr;
  }

  .page-main .spirit-tile,
  .page-main .spirit-feature {
    padding: 1.1rem;
    border-radius: 10px;
  }

  .page-main .spirit-feature,
  .page-main .spirit-feature.reverse {
    grid-template-columns: minmax(0, 140px) 1fr;
    column-gap: 1rem;
  }

  .page-main .spirit-feature.reverse .spirit-feature-cover {
    order: 0;
  }

  .page-main .spirit-feature h2 {
    font-size: 1.35rem;
  }

  .page-main .blog-card h2 {
    font-size: 1.25rem;
  }
}

@media (max-width: 640px) {
  .page-main .split,
  .page-main .spirit-feature,
  .page-main .spirit-feature.reverse {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .page-main .book-cover,
  .page-main .spirit-feature-cover img {
    width: min(100%, 220px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-main .btn {
    transition: none;
  }
}