/**
 * @file
 * Book node full page — styles the markup from
 * itp_views/templates/node--books--full.html.twig.
 *
 *   .book-hero            cover (left) + title block (right)
 *   .book-extra           leftover {{ content }} (flags, reviews, price, …)
 *   .book-related         the "More by author" / "Similar books" slider sections
 *
 * Attached only on book nodes from itp_css_fix_page_attachments().
 */
div.contextual-region {
  display: none;
}

form:not(.layout-builder-configure-block) .select-wrapper:after {
  display: none;
}

section.layout--with-complementary {
  display: block;
}

section.layout--with-complementary > .region--content {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}

.region--complementary {
  display: none;
}

.node--books-full {
  /* Hero cover column width + grid gap — shared by the hero grid and the
   * meta-band indent below so they stay aligned. */
  --book-cover-width: 400px;
  --book-hero-gap: 1.5rem;
  max-width: 100%;
}

/* ===========================================================================
 * HERO
 * ======================================================================== */
.book-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--book-hero-gap);
  margin-bottom: 1.5rem;
}

@media (min-width: 700px) {
  .book-hero {
    grid-template-columns: var(--book-cover-width) minmax(0, 1fr);
    align-items: start;
  }
}
/*
@media (min-width: 700px) {
  .book-hero {
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
  }
}
*/
/* Field labels are noise in the hero — the template gives each field its own
 * heading/context. */
.book-hero .field__label {
  display: none;
}

/* Cover: full image, never cropped (dev note on the mock-up). */
.book-hero__cover img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.book-hero__title {
  margin: 0 0 0.25rem;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.book-hero__subtitle {
  margin-bottom: 0.35rem;
  font-size: 1.15rem;
  color: #555;
}

.book-hero__author {
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  color: #333;
}

.book-hero__by {
  color: #777;
}

.book-hero__author-link {
  color: #1a6e6e;
  font-weight: 600;
  text-decoration: none;
}

.book-hero__author-link:hover {
  text-decoration: underline;
}

.book-hero__tagline {
  margin: 0.25rem 0 0.75rem;
  font-style: italic;
  color: #666;
}

/* Reviews + rating + follow + views on one row, split by vertical-bar
 * dividers (same treatment as the book_by_user action bar). */
.book-hero__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.875rem;
  color: #555;
}

.book-hero__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

/* Vertical bar between adjacent stats. */
.book-hero__stat:not(:first-child) {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}

/* Speech-bubble icon before the review count. */
.book-hero__reviews::before {
  content: "";
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

/* Follow flag link: bell icon + teal text to match the mock-up. */
.book-hero__follow a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #1a6e6e;
  text-decoration: none;
}

.book-hero__follow a:hover {
  text-decoration: underline;
}

.book-hero__follow a::before {
  content: "";
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a6e6e'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5S10.5 3.17 10.5 4v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");
}

.book-hero__views {
  color: #777;
}

/* Eye icon before the view count. */
.book-hero__views::before {
  content: "";
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'%3E%3Cpath d='M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5zm0 12a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-7a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E");
}

.book-hero__views-count {
  font-weight: 600;
  color: #333;
}

.book-hero__meta-label {
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #888;
}

/* Genre + tropes, each on its own inline row (label + pills). Sits in the
 * hero main column, between the stats row and the tagline. */
.book-hero__taxonomy {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.25rem 0 0.75rem;
}

.book-hero__terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
}

.book-hero__terms .book-hero__meta-label {
  margin: 0 0.25rem 0 0;
}

/* Pill-block matching the all-authors directory .card__link look. */
.book-hero__term {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.3rem 0.85rem;
  border: 1px solid currentColor;
  border-radius: 10px;
  background-color: #fff;
  font-size: 0.8125rem;
  color: #1a6e6e;
  text-decoration: none;
}

.book-hero__term:hover,
.book-hero__term:focus {
  text-decoration: none;
  background: rgba(26, 110, 110, 0.08);
}

.book-hero__description {
  color: #333;
  line-height: 1.55;
}

/* ===========================================================================
 * EXTRA CONTENT (flags, reviews/comments, price, publisher, buy link, …)
 * ======================================================================== */
.book-extra {
  margin-bottom: 2rem;
}

/* Reviews / comments section below the hero. */
.book-comments {
  margin: 2rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.book-comments__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Hide the comment field's own "Comments" heading so it doesn't duplicate
 * the "Reviews" title above. */
.book-comments .field--name-field-comments > h2:first-child,
.book-comments .comment-form__title,
.book-comments h2.title {
  display: none;
}

/* Review prompt: "Have you read this book?" card with a chat-bubble icon. */
.review-prompt {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fafafa;
}

.review-prompt::before {
  content: "";
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #1a6e6e center / 1.05rem no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/%3E%3C/svg%3E");
}

.review-prompt__title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 700;
}

.review-prompt__sub {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}

/* Incentive bar: trophy + message + leaderboard CTA, amber card. */
.review-incentive {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid #f0e0b8;
  border-radius: 10px;
  background: #fdf7e6;
  font-size: 0.875rem;
  color: #6b5a2e;
  text-decoration: none;
}

.review-incentive::before {
  content: "🏆";
  flex: 0 0 auto;
  font-size: 1.05rem;
}

.review-incentive__cta {
  margin-left: auto;
  font-weight: 600;
  color: #1a6e6e;
}

.review-incentive__cta::after {
  content: " →";
}

.review-incentive:hover .review-incentive__cta {
  text-decoration: underline;
}

/* ===========================================================================
 * RELATED-BOOKS SLIDER SECTIONS
 * ======================================================================== */
.book-related {
  margin: 2rem 0;
}

.book-related__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Title + "see all" links on one baseline-aligned row. */
.book-related__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  margin-bottom: 0.5rem;
}

.book-related__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.book-related__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.book-related__link {
  font-size: 0.875rem;
  color: #1a6e6e;
  text-decoration: none;
  white-space: nowrap;
}

.book-related__link:hover {
  text-decoration: underline;
}

/* Forward arrow appended after the link text (e.g. "More books by author →"). */
.book-related__link--arrow::after {
  content: "\2192";
  margin-left: 0.3em;
  display: inline-block;
}

/* The slider strip itself: a flex row that scrolls horizontally, scroll-snap,
 * no JS. */
.view-id-book_more_by_author .view-content,
.view-id-book_similar_by_genre .view-content {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.view-id-book_more_by_author .view-content::-webkit-scrollbar,
.view-id-book_similar_by_genre .view-content::-webkit-scrollbar {
  height: 8px;
}

.view-id-book_more_by_author .view-content::-webkit-scrollbar-thumb,
.view-id-book_similar_by_genre .view-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 4px;
}

/* Each card: fixed width so covers line up; snap to its start. */
.view-id-book_more_by_author .views-row,
.view-id-book_similar_by_genre .views-row {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
}

/* Cover image inside a card. */
.view-id-book_more_by_author .views-field-field-book-cover img,
.view-id-book_similar_by_genre .views-field-field-book-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* Title beneath the cover — clamp to two lines so cards stay aligned. */
.view-id-book_more_by_author .views-field-title,
.view-id-book_similar_by_genre .views-field-title {
  margin-top: 0.45rem;
  font-size: 0.85rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.view-id-book_more_by_author .views-field-title a,
.view-id-book_similar_by_genre .views-field-title a {
  color: inherit;
  text-decoration: none;
}

.view-id-book_more_by_author .views-field-title a:hover,
.view-id-book_similar_by_genre .views-field-title a:hover {
  text-decoration: underline;
}

@media (min-width: 700px) {
  .view-id-book_more_by_author .views-row,
  .view-id-book_similar_by_genre .views-row {
    width: 170px;
  }
}

.book-hero__terms {:
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  flex: 1 1 0;
  min-width: 0;
}

.book-hero__terms + .book-hero__terms {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}