/* Final page-specific cascade for Moon Garden Thoughts. */

.thoughts-page .thoughts-hero-shade {
  z-index: 2;
  background: linear-gradient(90deg, rgba(26, 18, 12, 0.08) 0%, rgba(26, 18, 12, 0.12) 48%, rgba(18, 14, 11, 0.58) 100%);
}

.thoughts-page .thoughts-hero-copy {
  z-index: 3;
  left: 70%;
  width: min(540px, 46vw);
}

.thoughts-page .thoughts-hero-lead {
  margin-block: 3px;
}

.thoughts-page .thoughts-hero-english {
  margin-top: 20px;
  font-family: var(--font-en-serif);
  font-size: clamp(14px, 1.35vw, 18px);
  letter-spacing: 0.03em;
}

.thoughts-page .thoughts-hero-english p {
  margin: 1px 0;
}

.thoughts-page .thoughts-book-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  overflow: visible;
  padding: 0;
}

.thoughts-page .thoughts-book-group {
  min-width: 0;
  padding: 8px 12px 22px;
  text-align: center;
}

.thoughts-page .thoughts-book-group-title {
  display: inline-flex;
  min-width: 210px;
  flex-direction: column;
  margin-bottom: 24px;
  padding: 9px 24px;
  color: #765936;
  border: 1px solid rgba(169, 126, 66, 0.32);
  background: rgba(255, 248, 233, 0.75);
  box-shadow: 0 6px 16px rgba(99, 70, 35, 0.08);
}

.thoughts-page .thoughts-book-group-title strong {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.thoughts-page .thoughts-book-group-title span {
  color: #9a7c55;
  font-size: 12px;
}

.thoughts-page .thoughts-book-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}

.thoughts-page .thoughts-visual-book {
  display: block;
  width: 110px;
  height: 238px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 4px 8px 8px 3px;
  background-color: transparent;
  background-image: url("assets/images/thoughts-v3-reference.png");
  background-repeat: no-repeat;
  background-size: 1080px 2276px;
  box-shadow: -7px 9px 18px rgba(67, 43, 21, 0.2);
}

.thoughts-page .thoughts-visual-self { background-position: -150px -730px; }
.thoughts-page .thoughts-visual-healing { background-position: -298px -730px; }
.thoughts-page .thoughts-visual-love { background-position: -446px -730px; }
.thoughts-page .thoughts-visual-children { background-position: -592px -730px; }
.thoughts-page .thoughts-visual-astrology { background-position: -735px -730px; }
.thoughts-page .thoughts-visual-space { background-position: -882px -730px; }

.thoughts-page .thoughts-collection-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "head-self head-others head-world"
    "self love astrology"
    "healing children space";
}

.thoughts-page .thoughts-volume-heading {
  display: flex;
  min-height: 110px;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  padding: 22px 18px;
  color: #785a35;
  text-align: center;
  border-right: 1px solid var(--thoughts-line);
  border-bottom: 1px solid var(--thoughts-line);
  background: rgba(253, 247, 236, 0.76);
}

.thoughts-page .thoughts-volume-heading span {
  color: #af8b57;
  font-size: 15px;
}

.thoughts-page .thoughts-volume-heading strong {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.thoughts-page .thoughts-volume-heading small {
  width: 100%;
  color: #9b805d;
  font-size: 12px;
}

.thoughts-page .thoughts-volume-self { grid-area: head-self; }
.thoughts-page .thoughts-volume-others { grid-area: head-others; }
.thoughts-page .thoughts-volume-world { grid-area: head-world; }
.thoughts-page #collection-self { grid-area: self; }
.thoughts-page #collection-healing { grid-area: healing; }
.thoughts-page #collection-love { grid-area: love; }
.thoughts-page #collection-children { grid-area: children; }
.thoughts-page #collection-astrology { grid-area: astrology; }
.thoughts-page #collection-time-space { grid-area: space; }

.thoughts-page .thoughts-collection summary {
  min-height: 360px;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 20px;
}

.thoughts-page .thoughts-mini-book.thoughts-visual-book {
  width: 110px;
  height: 238px;
  padding: 0;
  border: 0;
  border-radius: 4px 8px 8px 3px;
}

.thoughts-page .thoughts-mini-book.thoughts-visual-book::before,
.thoughts-page .thoughts-mini-book.thoughts-visual-book::after {
  display: none;
}

.thoughts-page .thoughts-collection-summary > strong {
  font-size: 28px;
}

.thoughts-page .thoughts-collection-preview {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.85;
}

.thoughts-page .thoughts-collection-preview li {
  position: relative;
  padding: 5px 0 5px 14px;
  border-bottom: 1px dotted rgba(169, 127, 68, 0.2);
}

.thoughts-page .thoughts-collection-preview li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #b18b55;
}

.thoughts-page .thoughts-more {
  align-self: center;
}

.thoughts-page .thoughts-shelf {
  position: relative;
  min-height: clamp(260px, 29vw, 420px);
  display: block;
  padding: 0;
  background: #3b291d;
}

.thoughts-page .thoughts-shelf::after,
.thoughts-page .thoughts-shelf-glow,
.thoughts-page .thoughts-spine-row {
  display: none;
}

.thoughts-page .thoughts-shelf-visual {
  position: absolute;
  inset: 0;
  background-image: url("assets/images/thoughts-v3-reference.png");
  background-repeat: no-repeat;
  background-position: center 94%;
  background-size: 100% auto;
}

@media (max-width: 960px) {
  .thoughts-page .thoughts-hero-copy {
    left: 66%;
    width: min(580px, 58vw);
  }

  .thoughts-page .thoughts-visual-book,
  .thoughts-page .thoughts-mini-book.thoughts-visual-book {
    width: 96px;
    height: 207px;
    background-size: 941px 1985px;
  }

  .thoughts-page .thoughts-visual-self { background-position: -131px -637px; }
  .thoughts-page .thoughts-visual-healing { background-position: -260px -637px; }
  .thoughts-page .thoughts-visual-love { background-position: -389px -637px; }
  .thoughts-page .thoughts-visual-children { background-position: -516px -637px; }
  .thoughts-page .thoughts-visual-astrology { background-position: -641px -637px; }
  .thoughts-page .thoughts-visual-space { background-position: -769px -637px; }

  .thoughts-page .thoughts-collection summary {
    grid-template-columns: 96px minmax(0, 1fr);
    padding-inline: 16px;
  }
}

@media (max-width: 760px) {
  .thoughts-page .thoughts-hero-copy {
    right: 18px;
    bottom: 42px;
    left: 18px;
    width: auto;
  }

  .thoughts-page .thoughts-hero-shade {
    background: linear-gradient(180deg, rgba(19, 14, 11, 0.02), rgba(19, 14, 11, 0.08) 38%, rgba(18, 13, 10, 0.68));
  }

  .thoughts-page .thoughts-hero-english {
    margin-top: 14px;
    font-size: 12px;
  }

  .thoughts-page .thoughts-book-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    overflow: visible;
    padding: 0;
  }

  .thoughts-page .thoughts-collection-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head-self"
      "self"
      "healing"
      "head-others"
      "love"
      "children"
      "head-world"
      "astrology"
      "space";
  }

  .thoughts-page .thoughts-volume-heading {
    min-height: 92px;
  }

  .thoughts-page .thoughts-collection summary {
    min-height: 285px;
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .thoughts-page .thoughts-shelf {
    min-height: 150px;
  }
}

/* Content pass: visual index, featured images, and vertical volumes. */

.thoughts-page .thoughts-feature-image-stars {
  background-image: url("assets/images/featured-time-space.png");
}

.thoughts-page .thoughts-feature-image-healing {
  background-image: url("assets/images/featured-new-love.jpg");
}

.thoughts-page .thoughts-feature-image-garden {
  background-image: url("assets/images/featured-garden.png");
}

.thoughts-page .thoughts-feature-image-child {
  background-image: url("assets/images/featured-children.png");
}

.thoughts-page .thoughts-library + .thoughts-featured {
  padding-top: 46px;
}

.thoughts-page .thoughts-collection-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "head-self head-self"
    "self healing"
    "head-others head-others"
    "love children"
    "head-world head-world"
    "astrology space";
}

.thoughts-page .thoughts-volume-heading {
  min-height: 116px;
  background:
    linear-gradient(rgba(255, 250, 242, 0.93), rgba(255, 250, 242, 0.93)),
    radial-gradient(circle at center, rgba(203, 167, 109, 0.2), transparent 65%);
}

.thoughts-page .thoughts-collection summary {
  min-height: 340px;
  grid-template-columns: 130px minmax(0, 1fr);
  padding: 28px 34px;
}

.thoughts-page .thoughts-mini-book.thoughts-visual-book {
  width: 122px;
  height: 238px;
}

@media (max-width: 960px) and (min-width: 761px) {
  .thoughts-page .thoughts-collection summary {
    grid-template-columns: 96px minmax(0, 1fr);
    padding-inline: 20px;
  }

  .thoughts-page .thoughts-mini-book.thoughts-visual-book {
    width: 96px;
    height: 207px;
  }
}

@media (max-width: 760px) {
  .thoughts-page .thoughts-library {
    padding-top: 52px;
  }

  .thoughts-page .thoughts-library + .thoughts-featured {
    padding-top: 40px;
  }

  .thoughts-page .thoughts-collection-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head-self"
      "self"
      "healing"
      "head-others"
      "love"
      "children"
      "head-world"
      "astrology"
      "space";
  }
}

/* Thoughts v3 independent collection covers.
   The theme books now use standalone image assets instead of cropped sprites,
   so future cover swaps can be done by replacing these file paths. */
.thoughts-page .thoughts-visual-book,
.thoughts-page .thoughts-mini-book.thoughts-visual-book,
.thoughts-page .thoughts-theme-cover.thoughts-visual-book {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.thoughts-page .thoughts-visual-self {
  background-image: url("assets/images/thoughts-v3-who-am-i.png");
}

.thoughts-page .thoughts-visual-healing {
  background-image: url("assets/images/thoughts-v3-emotions-healing.png");
}

.thoughts-page .thoughts-visual-love {
  background-image: url("assets/images/thoughts-v3-about-love.png");
}

.thoughts-page .thoughts-visual-children {
  background-image: url("assets/images/thoughts-v3-children.png");
}

.thoughts-page .thoughts-visual-astrology {
  background-image: url("assets/images/thoughts-v3-astrology.png");
}

.thoughts-page .thoughts-visual-space {
  background-image: url("assets/images/thoughts-v3-time-space.png");
}

.thoughts-page .thoughts-shelf-visual {
  background-image: url("assets/images/thoughts-v3-bookshelf.png");
  background-position: center;
  background-size: cover;
}

/* Keep the collections entrance light: the detailed banner image is reserved
   as an optional future homepage asset instead of showing as a second hero. */
@media (min-width: 761px) {
  .thoughts-page .thoughts-library {
    min-height: auto;
    padding: 68px 0 78px;
    background:
      linear-gradient(rgba(255, 250, 241, 0.93), rgba(255, 250, 241, 0.96)),
      url("assets/images/home-companion-table.jpg") center 60% / cover;
  }

  .thoughts-page .thoughts-library .thoughts-heading {
    display: block;
  }

  .thoughts-page .thoughts-library .thoughts-book-grid {
    display: grid;
  }

  .thoughts-page .thoughts-library .thoughts-shell {
    min-height: auto;
  }

  .thoughts-page .thoughts-library .thoughts-all-link {
    position: static;
    display: inline-flex;
    margin: 34px auto 0;
    transform: none;
  }
}