/* =========================================================================
   AVAILABLE DOGS PAGE
   ========================================================================= */

/* ---- PAGE INTRO ------------------------------------------------------- */
.dogs-intro {
  padding-block: var(--space-xl) var(--space-lg);
}

.dogs-intro__heading {
  font-size: var(--text-xl);
  max-width: 20ch;
}

.dogs-intro__copy {
  max-width: 62ch;
  color: var(--colour-ink-soft);
}

/* ---- DOG GRID ----------------------------------------------------------- */
.dogs-grid-section {
  padding-bottom: var(--space-xl);
}

.dogs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-md);
}

.dog-listing {
  display: flex;
  flex-direction: column;
  background: var(--colour-paper-raised);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}

.dog-listing:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.dog-listing__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex-grow: 1;
}

.dog-listing__name {
  font-size: var(--text-md);
}

.dog-listing__meta {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--colour-field-deep);
}

.dog-listing__bio {
  color: var(--colour-ink-soft);
  font-size: var(--text-sm);
  flex-grow: 1;
}

.dog-listing__rbu {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--colour-leash-deep);
}

.dog-listing__cta {
  margin-top: var(--space-2xs);
  align-self: flex-start;
}

/* ---- BOTTOM CTA --------------------------------------------------------- */
.dogs-cta {
  padding-block: var(--space-xl);
}

.dogs-cta__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  grid-template-areas:
    "dogs-cta-heading"
    "dogs-cta-copy"
    "dogs-cta-button";
  background: var(--colour-field-pale);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.dogs-cta__heading {
  font-size: var(--text-lg);
}

.dogs-cta__copy {
  color: var(--colour-ink-soft);
  max-width: 46ch;
}

.dogs-cta__grid .btn {
  justify-self: center;
}

@media (min-width: 64rem) {
  .dogs-cta__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "dogs-cta-heading dogs-cta-heading dogs-cta-heading dogs-cta-heading dogs-cta-copy dogs-cta-copy dogs-cta-copy dogs-cta-copy . dogs-cta-button dogs-cta-button dogs-cta-button";
    align-items: center;
  }
}