/*
 * Books page for python-kurs.eu
 * Isolated styles so the generated book section cannot be affected by old
 * image/layout rules from the historical site CSS.
 */

.books-page {
  --books-green-dark: var(--pk-green-dark, #476042);
  --books-green: var(--pk-green, #6A9662);
  --books-green-pale: var(--pk-green-pale, #ddffdd);
  --books-orange: var(--pk-orange, #F17C0B);
  --books-orange-text: var(--pk-orange-text, #A94E00);
  --books-text: var(--pk-text, #29342d);
  --books-muted: var(--pk-muted, #647068);
  --books-border: var(--pk-border, #dce4da);
  --books-radius: var(--pk-radius, 10px);
  --book-cover-width: 190px;
  width: 100%;
}

.books-page .books-intro {
  max-width: 960px;
  margin-bottom: 1.8rem;
}

.books-page .books-lead {
  font-size: 1.08rem;
  color: var(--books-text);
}

.books-page .book-format-note,
.books-page .book-copyright-box,
.books-page .hanser-recommendation {
  margin: 1.5rem 0 2rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--books-radius);
  border: 1px solid var(--books-border);
  background: #fff;
  box-shadow: 0 4px 18px rgba(31, 49, 35, .05);
}

.books-page .book-format-note {
  border-left: 5px solid var(--books-green);
  background: linear-gradient(90deg, var(--books-green-pale), #fff 24%);
}

.books-page .book-copyright-box {
  border-left: 5px solid var(--books-orange);
  background: linear-gradient(90deg, #fff5e9, #fff 30%);
}

.books-page .hanser-recommendation {
  border-top: 3px solid var(--books-green-dark);
  border-bottom: 3px solid var(--books-orange);
  background: linear-gradient(135deg, #f7faf6, #fffaf3);
}

.books-page .book-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  margin: 1rem 0 2rem;
}

.books-page .book-card,
.books-page .hanser-card {
  display: grid;
  grid-template-columns: var(--book-cover-width) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid var(--books-border);
  border-radius: var(--books-radius);
  background: #fff;
  box-shadow: 0 6px 22px rgba(31, 49, 35, .07);
}

.books-page .book-card h3,
.books-page .hanser-card h3 {
  margin: 0 0 .35rem;
  color: var(--books-green-dark);
  line-height: 1.22;
}

.books-page .book-subtitle {
  margin: 0 0 .7rem;
  color: var(--books-muted);
  font-style: italic;
}

/*
 * Important: old python-kurs.eu CSS contains many generic image rules.  These
 * selectors are deliberately more specific and force the whole cover to stay
 * visible at its natural aspect ratio.
 */
.books-page .book-cover-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.books-page .book-cover-wrap > a {
  display: block;
  width: 100%;
  max-width: var(--book-cover-width);
  line-height: 0;
}

.books-page img.book-cover {
  display: block !important;
  float: none !important;
  position: static !important;
  width: 100% !important;
  max-width: var(--book-cover-width) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center top !important;
  border: 1px solid #d7ddd5;
  box-shadow: 0 8px 22px rgba(27, 46, 32, .15);
  background: #fff;
}

.books-page .book-cover-placeholder {
  display: flex;
  width: 100%;
  max-width: var(--book-cover-width);
  aspect-ratio: 210 / 297;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(150deg, var(--books-green-dark) 0 43%, var(--books-orange) 43% 47%, #fff 47% 100%);
  border: 1px solid var(--books-border);
  box-shadow: 0 8px 22px rgba(27, 46, 32, .12);
}

.books-page .book-meta {
  margin: .75rem 0;
  color: var(--books-muted);
  font-size: .92rem;
}

.books-page .book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .9rem;
}

.books-page .book-button {
  display: inline-block;
  padding: .56rem .82rem;
  border-radius: 6px;
  text-decoration: none !important;
  font-weight: 650;
  line-height: 1.25;
}

.books-page .book-button-primary {
  color: #fff !important;
  background: var(--books-green-dark);
}

.books-page .book-button-secondary {
  color: #fff !important;
  background: var(--books-orange-text);
}

.books-page .book-button-muted {
  color: var(--books-muted) !important;
  background: #eef1ed;
  cursor: default;
}

.books-page .books-section-title {
  margin-top: 2.2rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--books-green);
}

.books-page .hanser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 1rem 0 2rem;
}

.books-page .hanser-card {
  --book-cover-width: 230px;
  grid-template-columns: 230px minmax(0, 1fr);
}

.books-page .hanser-badge {
  display: inline-block;
  margin-bottom: .55rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  color: #fff;
  background: var(--books-orange-text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.books-page .book-smallprint {
  font-size: .9rem;
  color: var(--books-muted);
}

@media (max-width: 1100px) {
  .books-page .book-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .books-page .book-card,
  .books-page .hanser-card {
    grid-template-columns: 1fr;
  }

  .books-page .book-cover-wrap {
    justify-content: flex-start;
  }

  .books-page .book-cover-wrap > a,
  .books-page img.book-cover,
  .books-page .book-cover-placeholder {
    max-width: 210px !important;
  }
}

/* Short support note on each Hanser book card. */
.books-page .hanser-support-note {
  margin: .9rem 0 .2rem;
  padding: .7rem .8rem;
  border-left: 4px solid var(--books-orange);
  background: #fff8ef;
  color: var(--books-text);
  font-size: .93rem;
  line-height: 1.5;
}