/* Fluid containment for the illustrated Currently Reading card. */
.home-current-card-art-layout {
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.home-current-card-art-layout :is(.home-current-art-heading, .home-current-overlay, .home-current-copy) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.home-current-card-art-layout .currently-reading-card-image {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(260px, 34cqi, 410px) !important;
  /* The approved light/dark artwork already contains the complete shelf. */
  object-fit: contain !important;
  object-position: center bottom !important;
  background: var(--panel) !important;
}

.home-current-card-art-layout .home-current-overlay {
  grid-template-columns: clamp(92px, 15cqi, 160px) minmax(260px, 1fr) !important;
  gap: clamp(14px, 2.2cqi, 30px) !important;
  align-items: center !important;
  padding: clamp(68px, 7cqi, 96px) clamp(29%, 31cqi, 34%) clamp(50px, 6.4cqi, 78px) clamp(18px, 3cqi, 42px) !important;
}

.app-shell.home-app-mode .home-current-card-art-layout .home-current-overlay .home-feature-cover {
  position: absolute !important;
  bottom: clamp(14px, 4.8cqi, 60px) !important;
  left: clamp(18px, 3cqi, 42px) !important;
  align-self: auto !important;
  justify-self: auto !important;
  width: 100% !important;
  max-width: 160px !important;
  margin: 0 !important;
  transform: none !important;
}

.app-shell.home-app-mode .home-current-card-art-layout::after {
  display: none !important;
}

.app-shell.home-app-mode .home-current-card-art-layout :is(.home-current-art-heading, .home-current-overlay) {
  z-index: 4 !important;
}

.home-current-card-art-layout .home-current-overlay .home-feature-cover .book-cover-card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: .68 !important;
  object-fit: cover !important;
}

.home-current-card-art-layout .home-current-overlay .home-current-copy {
  grid-column: 2 !important;
  align-self: center !important;
  width: 100% !important;
  max-width: 520px !important;
  padding: 0 !important;
  transform: none !important;
}

.home-current-card-art-layout .home-current-overlay .home-current-copy h2 {
  display: -webkit-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(1.15rem, 2.8cqi, 2.15rem) !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.home-current-card-art-layout .home-current-overlay .home-current-copy :is(p, small) {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(.72rem, 1.45cqi, 1rem) !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
  text-overflow: ellipsis !important;
}

.home-current-card-art-layout .home-current-overlay :is(.home-progress-line, .home-progress-track) {
  width: 100% !important;
  max-width: 430px !important;
}

.home-current-card-art-layout .home-current-overlay .home-current-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
}

.home-current-card-art-layout .home-current-overlay .home-current-actions button {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
}

@container (max-width: 720px) {
  .home-current-card-art-layout .currently-reading-card-image {
    height: 300px !important;
  }

  .home-current-card-art-layout .home-current-overlay {
    grid-template-columns: clamp(68px, 16cqi, 96px) minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 74px 25% 34px 16px !important;
  }

  .app-shell.home-app-mode .home-current-card-art-layout .home-current-overlay .home-feature-cover {
    width: clamp(68px, 16cqi, 96px) !important;
    max-width: 96px !important;
  }

  .home-current-card-art-layout .home-current-overlay .home-current-copy h2 {
    font-size: clamp(1rem, 4cqi, 1.4rem) !important;
  }

  .home-current-card-art-layout .home-current-overlay .home-current-actions {
    gap: 6px !important;
    margin-top: 10px !important;
  }

  .home-current-card-art-layout .home-current-overlay .home-current-actions button {
    min-height: 44px !important;
    padding-inline: 9px !important;
    font-size: .72rem !important;
  }
}

@container (max-width: 440px) {
  .app-shell.home-app-mode .home-current-card-art-layout .currently-reading-card-image {
    height: 340px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .home-current-card-art-layout .home-current-art-heading {
    top: 14px !important;
    right: 14px !important;
    left: 14px !important;
  }

  .home-current-card-art-layout .home-current-art-heading span {
    max-width: calc(100% - 84px) !important;
    overflow: hidden !important;
    font-size: .9rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .home-current-card-art-layout .home-current-overlay {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    padding: 68px 14px 23px !important;
  }

  .home-current-card-art-layout .home-current-overlay .home-current-copy {
    padding-right: 0 !important;
  }

  .app-shell.home-app-mode .home-current-card-art-layout .home-current-overlay .home-feature-cover {
    bottom: 14px !important;
    left: 14px !important;
    width: 72px !important;
    align-self: auto !important;
    transform: none !important;
  }

  .home-current-card-art-layout .home-current-overlay .home-current-copy :is(p, small) {
    font-size: .68rem !important;
  }

  .home-current-card-art-layout .home-current-overlay .home-progress-line {
    margin-top: 8px !important;
    font-size: .68rem !important;
  }

  .app-shell.home-app-mode .home-current-card-art-layout .home-current-overlay .home-current-actions {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}