/**
 × caniks_css v2.04 × updated 2026-10-07 ×
 × created 2026-04-15 × raimundo p. solar ×
 × Home canid carousel + species labels ×
 **/

/* --------------------------------------------------
   NEWS
-------------------------------------------------- */

/*
 * The other home sections start 0.25rem under their
 * line (.separator margin); News starts under the hero
 * photo instead, with the same step.
 */
#news {
  padding-top: 0.25rem;
}


/* --------------------------------------------------
   SPECIES
-------------------------------------------------- */

.species {
  color: var(--color-black);
}


/* --------------------------------------------------
   SCROLL HEADER
-------------------------------------------------- */

.scroll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scroll-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.scroll-arrow {
  display: flex;
  width: var(--breche-x);
  height: var(--breche-y);

  align-items: center;
  justify-content: center;

  padding: 0;
  border: 0;

  color: var(--color-black);
  background: var(--color-white);

  cursor: pointer;

  transition:
    color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 300ms ease;
}

.scroll-arrow:hover {
  color: var(--color-s-orange);
}

.scroll-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}


/* --------------------------------------------------
   HORIZONTAL SCROLLER
-------------------------------------------------- */

.scroll-section {
  display: flex;
  flex-wrap: nowrap;

  gap: var(--breche-s);

  padding: 0;

  overflow-x: auto;

  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-section::-webkit-scrollbar {
  display: none;
}

.scroll-dog {
  display: flex;
  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  color: var(--color-white);
  background: var(--color-white);

  font-family: var(--font-sans);
}

.scroll-dog img {
  display: block;

  width: 405px;
  height: 235.5px;

  object-fit: cover;
}

.scroll-dog .missing-picture {
  width: 405px;
  height: 235.5px;

  aspect-ratio: auto;

  padding-bottom: 1.45rem;
}


/*
 * Name band on cards without a photo, matching
 * the Canids archive "Show names" band.
 */
.scroll-dog > a {
  position: relative;

  display: block;
}

.scroll-dog__name {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  padding:
    0
    12px
    2.5px;

  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;

  color: var(--color-white);
  background: rgb(0 0 0 / 70%);
}