/* ==========================================================================
   KOBIL — Resources/E-Books — Sektion: Browser (Figma 4165:34363)
   Weisse Karte (radius 12) mit Tab-Leiste (aktiver Tab blau), vertikaler
   E-Book-Liste (Cover 302x435 links, Meta/Titel/Beschreibung/Download rechts,
   1px-Trennlinien navy-40) und zentrierter Pagination (44px-Pfeil-Buttons,
   Zahlen 16/23 SemiBold — aktuelle Seite navy, restliche blau).
   Die Karten werden aus der CMS-Collection "ebooks" gerendert; die
   Pagination baut js/resources/e-books/browser.js clientseitig auf.
   ========================================================================== */

.sec-e-books-browser {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 40px;
}

/* ---- Tab-Leiste ---- */

.ebk-browser__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ebk-browser__tabs::-webkit-scrollbar {
  display: none;
}

.ebk-browser__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 8px 32px;
  border-radius: 4px;
  background: var(--navy-30);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--navy);
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}

.ebk-browser__tab:hover {
  background: var(--navy-40);
}

.ebk-browser__tab.is-active {
  background: var(--blue);
  color: var(--white);
}

.ebk-browser__tab[aria-disabled="true"] {
  cursor: default;
}

.ebk-browser__tab[aria-disabled="true"]:hover {
  background: var(--navy-30);
}

/* ---- E-Book-Liste: 1068px-Spalte, Trennlinien zwischen sichtbaren Zeilen ---- */

.ebk-browser__list {
  max-width: 1068px;
  margin: 48px auto 0;
}

/* Trennlinie nur zwischen sichtbaren Zeilen (Pagination blendet per [hidden] aus) */
.ebk-browser__item:not([hidden]) ~ .ebk-browser__item:not([hidden]) {
  margin-top: 48px;
  padding-top: 49px; /* 48px Abstand + 1px Linie */
  border-top: 1px solid var(--navy-40);
}

.ebk-browser__card {
  display: flex;
  align-items: center;
  gap: 40px;
}

.ebk-browser__cover {
  flex: 0 0 302px;
  width: 302px;
  height: 435px;
  object-fit: cover;
  border-radius: 6px;
}

.ebk-browser__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Meta-Zeile: Datum - Groesse • Seiten • Downloads ---- */

.ebk-browser__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--navy-70);
}

.ebk-browser__dash {
  color: var(--navy);
}

.ebk-browser__metrics {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ebk-browser__dot {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--navy-70);
}

/* ---- Titel + Beschreibung + Download-Link ---- */

.ebk-browser__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.ebk-browser__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ebk-browser__title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--navy);
}

.ebk-browser__desc {
  font-size: 16px;
  line-height: 23px;
  color: var(--navy-70);
}

.ebk-browser__download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--blue);
  transition: opacity var(--dur) var(--ease);
}

.ebk-browser__download:hover {
  opacity: 0.8;
}

.ebk-browser__download-icon {
  width: 18px;
  height: 18px;
}

/* ---- Pagination (Inhalt baut browser.js auf) ---- */

.ebk-browser__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 80px;
}

.ebk-browser__pagination[hidden] {
  display: none;
}

.ebk-browser__page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(41, 98, 246, 0.22);
  border-radius: 4px;
  background: var(--navy-20);
  transition: background var(--dur) var(--ease);
}

.ebk-browser__page-btn:disabled {
  background: var(--white);
  cursor: default;
}

.ebk-browser__page-arrow {
  width: 18px;
  height: 18px;
  background: var(--navy);
  -webkit-mask: url("/assets/resources/e-books/icon-arrow.svg") center / contain no-repeat;
  mask: url("/assets/resources/e-books/icon-arrow.svg") center / contain no-repeat;
}

.ebk-browser__page-btn--prev .ebk-browser__page-arrow {
  transform: scaleX(-1);
}

.ebk-browser__page-btn:disabled .ebk-browser__page-arrow {
  background: var(--blue);
  opacity: 0.32;
}

.ebk-browser__pages {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ebk-browser__page-num,
.ebk-browser__page-ellipsis {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
  color: var(--blue);
}

.ebk-browser__page-num.is-current {
  color: var(--navy);
  cursor: default;
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .sec-e-books-browser {
    padding: 32px 24px;
  }

  .ebk-browser__card {
    gap: 32px;
  }

  .ebk-browser__cover {
    flex-basis: 240px;
    width: 240px;
    height: 346px;
  }

  .ebk-browser__title {
    font-size: 24px;
    line-height: 32px;
  }
}

@media (max-width: 768px) {
  .sec-e-books-browser {
    padding: 24px 16px;
  }

  .ebk-browser__list {
    margin-top: 32px;
  }

  /* Liste einspaltig: Cover ueber dem Text */
  .ebk-browser__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ebk-browser__cover {
    flex-basis: auto;
  }

  .ebk-browser__item:not([hidden]) ~ .ebk-browser__item:not([hidden]) {
    margin-top: 32px;
    padding-top: 33px;
  }

  .ebk-browser__group {
    gap: 24px;
  }

  .ebk-browser__title {
    font-size: 20px;
    line-height: 26px;
  }

  .ebk-browser__pagination {
    margin-top: 48px;
    gap: 16px;
  }
}