/* Public theme: shared presentation for public pages. Loaded after foundation. */
.public-page .intro {
  position: relative;
  overflow: hidden;
  margin-bottom: 34px;
  padding: 34px;
  color: #ffffff;
  background: linear-gradient(135deg, #111111, #222831);
  border-radius: 15px;
}

.public-page .intro::after {
  content: "";
  position: absolute;
  inset: auto -40px -90px auto;
  width: 260px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 190, 51, 0.18), rgba(255, 190, 51, 0));
  pointer-events: none;
}

.public-page .intro > * {
  position: relative;
  z-index: 1;
}

.public-page .intro .eyebrow,
.public-page .intro .eyebrow a {
  color: #ffbe33;
}

.public-page .intro h1 {
  color: #ffffff;
  text-transform: uppercase;
}

.public-page .intro p:not(.eyebrow) {
  max-width: 760px;
  color: #f1f2f3;
}

.public-page .section {
  margin-top: 34px;
  padding-top: 0;
  border-top: 0;
}

.public-page .section-heading {
  margin-bottom: 18px;
}

.public-page .section-heading h2 {
  font-size: 30px;
}

.public-page .section-heading a,
.public-page .admin-edit-link,
.public-page .form-actions a,
.public-page .availability-filter-actions button {
  display: inline-block;
  padding: 9px 20px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  background: #ffbe33;
  border: 1px solid #ffbe33;
  border-radius: 45px;
}

.public-page .section-heading a:hover,
.public-page .admin-edit-link:hover,
.public-page .form-actions a:hover,
.public-page .availability-filter-actions button:hover {
  color: #ffbe33;
  background: transparent;
}

.public-page .species-card,
.public-page .guide-card,
.public-page .clade-browser-card,
.public-page .availability-animal-card,
.public-page .user-guide-card {
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(to bottom, #f1f2f3 25px, #222831 25px);
  border: 0;
  border-radius: 15px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.public-page .species-card:hover,
.public-page .guide-card:hover,
.public-page .clade-browser-card:hover,
.public-page .availability-animal-card:hover,
.public-page .user-guide-card:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
}

.public-page .species-card {
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 190px;
}

.public-page .species-card-image,
.public-page .guide-card-image,
.public-page .clade-browser-image,
.public-page .availability-animal-image,
.public-page .user-guide-image {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  background: #f1f2f3;
  border: 0;
  border-radius: 0 0 0 45px;
}

.public-page .species-card-image-placeholder,
.public-page .guide-card-image-placeholder,
.public-page .clade-browser-image-placeholder,
.public-page .availability-animal-image-placeholder,
.public-page .user-guide-image-placeholder {
  display: block;
  background: linear-gradient(135deg, #dfe5d8, #f3f0e6);
}

.public-page .species-card-body,
.public-page .guide-card-body {
  padding: 25px;
}

.public-page .species-card-body strong,
.public-page .guide-card-body strong,
.public-page .clade-browser-card strong,
.public-page .availability-animal-card strong,
.public-page .user-guide-card strong,
.public-page .species-link strong,
.public-page .clade-link strong,
.public-page .guide-species-link strong {
  color: #ffffff;
}

.public-page .species-card-body em,
.public-page .species-card-body span,
.public-page .guide-card-body span,
.public-page .guide-card-body small,
.public-page .clade-browser-card small,
.public-page .clade-browser-card em,
.public-page .availability-animal-card em,
.public-page .availability-animal-card small,
.public-page .user-guide-card em,
.public-page .user-guide-card small {
  color: #d7d7d7;
}

.public-page .species-link,
.public-page .clade-link,
.public-page .guide-species-link,
.public-page .user-event-link {
  color: #ffffff;
  text-decoration: none;
  background: #222831;
  border: 0;
  border-radius: 15px;
}

.public-page .species-link em,
.public-page .species-link span,
.public-page .clade-link span,
.public-page .clade-link small,
.public-page .guide-species-link em,
.public-page .user-event-link em,
.public-page .user-event-link span {
  color: #d7d7d7;
}

.public-page .guide-card {
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 210px;
}

.public-page .guide-card-image {
  min-height: 210px;
}

.public-page .clade-browser-grid,
.public-page .availability-animal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.public-page .clade-browser-card,
.public-page .availability-animal-card {
  display: block;
  padding: 0;
}

.public-page .clade-browser-image,
.public-page .availability-animal-image {
  height: 210px;
}

.public-page .clade-browser-card > span,
.public-page .availability-animal-card > span {
  display: block;
  padding: 22px;
}

.public-page .grouped-index-section {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e5e5df;
  border-radius: 15px;
}

.public-page .availability-filter,
.public-page .content-panel,
.public-page .author-card,
.public-page .data-table,
.public-page .guide-meta div,
.public-page .user-profile-hero,
.public-page .user-profile-stats div,
.public-page .user-collapsible {
  background: #ffffff;
  border: 1px solid #e5e5df;
  border-radius: 15px;
}

.public-page .data-table {
  overflow: hidden;
}

.public-page .data-table th {
  color: #ffffff;
  background: #222831;
}

.public-page .data-table th,
.public-page .data-table td {
  border-color: #e5e5df;
}

.public-page .book-cover-image,
.public-page .clade-cover,
.public-page .gallery-image {
  border: 0;
  border-radius: 15px;
}

.public-page .book-cover-image,
.public-page .clade-cover {
  max-height: 560px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
}

.public-page .availability-filter-groups fieldset {
  background: #f7f7f4;
  border-color: #e5e5df;
  border-radius: 15px;
}

.public-page .availability-filter-groups legend,
.public-page .guide-meta dt,
.public-page .user-profile-stats dt {
  color: #9b6d00;
}

.public-page .user-profile-hero {
  color: #ffffff;
  background: linear-gradient(135deg, #111111, #222831);
}

.public-page .user-profile-main h1 {
  color: #ffffff;
}

.public-page .user-profile-summary {
  color: #f1f2f3;
}

.public-page .user-profile-stats div {
  color: #222222;
}

.public-page .user-profile-stats dd {
  color: #222222;
}

@media (max-width: 980px) {
  .public-page .clade-browser-grid,
  .public-page .availability-animal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .author-card {
    grid-template-columns: 1fr;
  }

  .user-profile-hero,
  .user-profile-stats,
  .user-guide-card {
    grid-template-columns: 1fr;
  }

  .user-profile-picture,
  .user-guide-image {
    width: 100%;
  }

  .user-profile-picture {
    max-width: 180px;
  }

  .data-table th,
  .data-table td {
    display: block;
    width: auto;
  }

  .data-table th {
    border-bottom: 0;
  }

  .calendar-grid {
    grid-template-columns: repeat(7, minmax(78px, 1fr));
  }

  .calendar-day {
    min-height: 92px;
    padding: 7px;
  }

  .calendar-weekdays strong {
    padding: 7px;
    font-size: 12px;
  }

  .public-page .intro {
    padding: 24px;
  }

  .public-page .intro h1 {
    font-size: 36px;
  }

  .public-page .species-card,
  .public-page .guide-card,
  .public-page .clade-browser-grid,
  .public-page .availability-animal-grid {
    grid-template-columns: 1fr;
  }

.public-page .species-card-image,
.public-page .guide-card-image,
.public-page .clade-browser-image,
.public-page .availability-animal-image {
    height: 210px;
  }
}