/**
 × canid2_css v2.38 × updated 2026-10-07 ×
 × created 2025-12-09 × raimundo p. solar ×
 × Canids archive: layout, cards, tooltips ×
 **/

/* --------------------------------------------------
   LAYOUT
-------------------------------------------------- */

.canids-page-container {
  display: flex;
  gap: var(--breche-m);

  margin: 2rem 0 0;
}


.canids-filter-column {
  position: relative;

  flex: 0 0 270px;
  align-self: stretch;

  min-width: 0;
}


.canids-filter-column
.canid-filter-controls {
  margin-top: 0;
}


/* --------------------------------------------------
   STICKY / SCROLLABLE FILTER PANEL
-------------------------------------------------- */

/*
 * Sticks just below the fixed header (--header-height,
 * set by header.js, plus the WordPress admin bar when
 * logged in), also when the page starts with a photo
 * under the header (--header-offset is 0 there).
 *
 * Same behaviour as the shared Feed filter:
 * the filter panel stays in view, can scroll internally
 * when all expandable groups are open, and releases the
 * wheel back to the page at its top/bottom boundary.
 */

.canids-filter-sticky {
  position: sticky;

  top:
    calc(
      var(
        --header-height,
        0px
      )
      +
      var(
        --wp-admin--admin-bar--height,
        0px
      )
      +
      var(--breche-s)
    );

  width: 100%;

  max-height:
    calc(
      100vh
      -
      var(
        --header-height,
        0px
      )
      -
      var(
        --wp-admin--admin-bar--height,
        0px
      )
      -
      calc(
        var(--breche-s) * 2
      )
    );

  max-height:
    calc(
      100dvh
      -
      var(
        --header-height,
        0px
      )
      -
      var(
        --wp-admin--admin-bar--height,
        0px
      )
      -
      calc(
        var(--breche-s) * 2
      )
    );

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior-y: auto;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(20, 20, 20, 0.35)
    transparent;
}


/*
 * Search sits above the sticky panel: it scrolls
 * away with the page instead of being pinned.
 */

.canids-filter-search-group {
  padding-bottom:
    var(--breche-s);
}


.canids-selection-flex {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        270px,
        1fr
      )
    );

  flex: 1;
  align-content: start;

  min-width: 0;
  min-height: 450px;

  gap: var(--breche-m);
}


#canidsContainer {
  padding-top: 0;
}


/* --------------------------------------------------
   SHOW NAMES
-------------------------------------------------- */

#canidsContainer.show-names
.canid-tooltip,
.canid-link:has(> .missing-picture)
.canid-tooltip {
  opacity: 1;

  transform:
    translateY(0);
}


/*
 * Cards without a photo always show their name
 * (same band as Show names). Lift the wolf and
 * text above the band; on narrow cards keep only
 * the wolf and the name.
 */
.canid-link > .missing-picture {
  padding-bottom: 1.45rem;
}

/* Smaller wolf so text above and below fit with the name band. */
.canid-link > .missing-picture > .missing-picture__art {
  width: 32%;
}

@container (max-width: 240px) {
  .canid-link > .missing-picture > .missing-picture__text {
    display: none;
  }

  /* Wolf to the top so a two-line name can't cover it. */
  .canid-link > .missing-picture > .missing-picture__art {
    width: 22%;
    margin: 3cqi 0 auto;
  }
}


/****
        Name exceptions: letters slightly tighter so a
        long name stays on one line (desktop 3 columns).
 ****/
.canid-item[data-canid="south-american-grey-fox"] .canid-tooltip {
  letter-spacing: -0.025em;
}


/* --------------------------------------------------
   CARDS
-------------------------------------------------- */

.canid-item {
  position: relative;

  overflow: hidden;

  transition:
    box-shadow 300ms ease-out;
}


.canid-link {
  display: block;

  transform:
    translateY(0);

  transform-origin:
    center;

  transition:
    transform
      350ms
      cubic-bezier(
        0.07,
        0.95,
        0,
        1
      );

  will-change:
    transform;

  animation:
    canidFadeInUp
      450ms
      ease-out
      forwards;
}


.canid-item img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio:
    16 / 9;

  object-fit: cover;

  /* Sepia (grayscale + tint) at rest, colours on hover / focus. */
  filter: grayscale(1);

  transition:
    filter 300ms ease-out;
}

.canid-item:hover img,
.canid-link:focus-visible img,
#canidsContainer.show-colors .canid-item img {
  filter: none;
}


/*
 * Subtle orange tint over the grayscale photo
 * ('color' blend: orange hue at the photo's own
 * brightness, so lively rather than brownish),
 * lifted on hover / focus with the name.
 * Missing-picture cards stay neutral.
 */
.canid-link::before {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: var(--color-s-orange);

  mix-blend-mode: color;

  opacity: 0.18;

  pointer-events: none;

  content: "";

  transition:
    opacity 300ms ease-out;
}

.canid-item:hover .canid-link::before,
.canid-link:focus-visible::before,
.canid-link:has(> .missing-picture)::before,
#canidsContainer.show-colors .canid-link::before {
  opacity: 0;
}


.canid-item:hover {
  z-index: 11;
}


/* --------------------------------------------------
   TOOLTIP
-------------------------------------------------- */

.canid-tooltip {
  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  z-index: 12;

  padding:
    0
    12px
    2.5px;

  background:
    rgb(
      0
      0
      0
      / 70%
    );

  color:
    var(--color-white);

  text-align: left;

  opacity: 0;

  transform:
    translateY(50px);

  pointer-events: none;

  transition:
    opacity 300ms ease-out,
    transform 300ms ease-out;
}


.canid-item:hover
.canid-tooltip,
.canid-link:hover
.canid-tooltip {
  opacity: 1;

  transform:
    translateY(0);
}


/* --------------------------------------------------
   ANIMATION
-------------------------------------------------- */

@keyframes canidFadeInUp {

  from {
    opacity: 0;

    transform:
      translateY(20px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */

@media (max-width: 639px) {

  .canids-page-container {
    flex-direction: column;

    gap:
      var(--breche-s);

    margin-top:
      1.5rem;
  }


  .canids-filter-column {
    flex: none;
    align-self: start;

    width: 100%;
  }


  /*
   * Mobile returns to normal document scrolling.
   */

  .canids-filter-sticky {
    position: static;

    max-height: none;

    overflow: visible;
  }


  .canids-filter-search-group {
    position: static;

    padding-bottom: 0;
  }


  .canids-selection-flex {
    grid-template-columns:
      repeat(
        auto-fill,
        minmax(
          160px,
          1fr
        )
      );

    gap:
      var(--breche-s);
  }

}