/* ---- The pedigree tree -------------------------------------------------
   A litter page has three rows and each is sized by its own id. A pedigree
   has as many rows as it has generations, and gains one whenever `depth`
   does, so per-id rules cannot work here — the ids are not known in advance.

   Instead each row is told how many dogs it holds, and sizes its bubbles from
   that. Eight great-grandparents on one line have to be smaller than two
   parents; the numbers below are the widths at which each row still fits on a
   1400px screen without wrapping, and wrapping is what the ancestor rows must
   not do — a generation split across two lines stops reading as a generation.

   `--bubble-basis` is set per row by js/initPedigreePage.js. */
.generation--pedigree .carousel-container {
    flex: 0 1 var(--bubble-basis, 220px);
    min-width: 0;
    width: auto;
}

/* .generation's column gap is 2vw, which at 1400px is 28px a side — eight
   great-grandparents plus seven of those gaps overflowed by a hair and the
   eighth dropped onto its own line. Ancestor rows are dense by nature, so
   they get a tighter one. */
.generation--pedigree {
    gap: 2.5rem 1rem;
}

/* Ancestors sit closer together than a litter does: they are context, and the
   tree is already tall enough with five rows in it. */
.generation--pedigree {
    min-height: 0;
    padding-top: 4vh;
    padding-bottom: 1vh;
}

/* The subject's own row is the point of the page. Give it room. */
#generation-subject {
    padding-top: 7vh;
    padding-bottom: 3vh;
}

#generation-puppies.generation--pedigree {
    padding-top: 6vh;
}

/* The caption that stands in for a bone tag on an unfilled slot. */
.carousel-caption {
    display: block;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--color-ink-soft);
    padding: 0 0.25rem;
    text-wrap: balance;
}

/* ---- Slots nobody has filled yet ---------------------------------------
   A placeholder is a position in a family, not a dog. It should read as an
   absence: no photograph, nothing to open, and quiet enough that the eye
   passes over it on the way to the dogs that are really there. */
.carousel-container.is-placeholder {
    opacity: 0.72;
}

.carousel-container.is-placeholder:hover {
    opacity: 0.9;
}

@media (max-width: 68.75rem) {
    /* On a phone an eight-wide generation cannot be eight across. Let the
       ancestor rows wrap rather than shrink the bubbles to nothing — a wrapped
       generation is readable; a row of 40px circles is not. */
    .generation--pedigree .carousel-container {
        flex: 0 1 max(var(--bubble-basis, 220px), 33%);
    }
}