/*
 * Library page styles for happynectar.
 *
 * Extracted from the legacy withministries2023 theme.css. Covers:
 *   - `.content_grid` (responsive grid of tiles)
 *   - `.content_grid.library` (4-up at desktop / 3-up tablet / 2-up phone)
 *   - tile internals (img, .label, h3, hover color)
 *   - `.account-management` (title row w/ "Manage my account" link)
 *   - `.back_to_library` (breadcrumb on category sub-pages)
 *
 * Rendered by template-library.php; the same `.content_grid` markup also
 * shows up wherever the "content" CPT is grid-listed.
 */

.content_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

.content_grid.library {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom:60px;
}

@media screen and (max-width: 1023px) {
  .content_grid.library {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 599px) {
  .content_grid.library {
    grid-template-columns: repeat(2, 1fr);
  }
}

.content_grid img {
  border-radius: 1em;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.13);
}

.content_grid .label {
  margin: 0.5em 0 0;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.content_grid a {
  cursor: pointer;
  display: block;
  text-decoration: none !important;
  transition: color .25s cubic-bezier(0.25, 1, 0.33, 1);
}

.content_grid a h3 {
  margin-top: 0;
}

.content_grid a:hover,
.content_grid a:hover h3 {
  color: var(--nectar-accent-color, #FF9433);
}

.content_grid a img {
  width: 100%;
  display: block;
}

/* Title row: "My Library  →  Manage my account" */
.account-management {
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
  margin-top:60px;
}

.account-management a {
  font-size: 1rem;
  font-family: "Satoshi", sans-serif;
  text-decoration: none !important;
}

.account-management a:hover {
  text-decoration: underline;
}

/* Category sub-page breadcrumb */
.back_to_library {
  margin: 5vh auto;
  width: 100%;
  display: flex;
  gap: 0.5em;
}

.back_to_library a {
  text-decoration: none !important;
}

.back_to_library a:hover {
  text-decoration: underline !important;
}