/* DT Puppy Journey — public development wall. Self-contained, theme-agnostic. */

.dtpw {
    /* Fade length lives here so it can be tuned without hunting through the
       rules. Keep it well under the dwell time set by the shortcode's `speed`
       attribute — a fade longer than about half the dwell means the photo
       never actually settles. */
    --dtpw-fade: 1.4s;

    /* The wall is a standalone shortcode on marketing pages, so it can't
       inherit the tracker's variables — same values, declared here. */
    --dtpj-accent:      #6a4c89;
    --dtpj-accent-deep: #533a6b;
    --dtpj-accent-soft: #f0ebf5;
    --dtpj-accent-line: #e0d4eb;

    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 1.4em;
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
}

/* --- the puppies --- */
.dtpw-list {
    display: flex; flex-direction: column; gap: .5em;
    max-height: 520px; overflow-y: auto; padding-right: .3em;
}
.dtpw-pup {
    display: flex; align-items: center; gap: .7em; width: 100%;
    padding: .4em .7em .4em .4em; border: 1px solid #e4e0ea; border-radius: 2em;
    background: #fff; cursor: pointer; text-align: left; font: inherit;
    transition: border-color .15s, background .15s;
}
.dtpw-pup:hover, .dtpw-pup:focus-visible { border-color: var(--dtpj-accent); }
.dtpw-pup.is-on { background: var(--dtpj-accent-soft); border-color: var(--dtpj-accent); }
.dtpw-pup img {
    width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
    flex: 0 0 auto; background: #efecf4;
}
.dtpw-pup-name { font-weight: 600; font-size: .95em; }
.dtpw-pup-count { margin-left: auto; font-size: .75em; color: #857e8c; white-space: nowrap; }

/* --- the stage --- */
.dtpw-stage { position: relative; }

/* Two layers, cross-fading. The frame owns the size so neither image can
   collapse the box while it loads. */
.dtpw-frame {
    position: relative; width: 100%; aspect-ratio: 4 / 3;
    border-radius: 14px; overflow: hidden; background: #efecf4;
}
.dtpw-shot {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    opacity: 0; transition: opacity var(--dtpw-fade) ease-in-out;
}
.dtpw-shot.is-on { opacity: 1; }
.dtpw-meta {
    display: flex; align-items: baseline; gap: .7em; flex-wrap: wrap;
    margin-top: .7em;
}
.dtpw-name  { font-size: 1.3em; font-weight: 700; }
.dtpw-label { font-size: .95em; color: var(--dtpj-accent-deep); font-weight: 600; }

.dtpw-steps { display: flex; gap: .35em; flex-wrap: wrap; margin-top: .7em; }
.dtpw-step {
    width: 26px; height: 6px; border-radius: 3px; padding: 0;
    border: 0; background: #e4e0ea; cursor: pointer;
    transition: background .15s;
}
.dtpw-step:hover { background: #c9c2d3; }
.dtpw-step.is-on { background: var(--dtpj-accent); }

@media (max-width: 640px) {
    .dtpw { grid-template-columns: 1fr; }
    /* Puppies become a filmstrip above the stage rather than a tall column
       that pushes the photo off the screen. */
    .dtpw-list { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: .3em; }
    .dtpw-pup { width: auto; flex: 0 0 auto; }
    .dtpw-pup-name, .dtpw-pup-count { display: none; }
    .dtpw-pup { padding: .3em; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
    /* No cycling happens in this mode anyway; make the manual steps snap
       rather than drift. */
    .dtpw-shot { transition: none; }
}

@media (prefers-color-scheme: dark) {
    .dtpw {
        --dtpj-accent:      #8f6fb5;
        --dtpj-accent-deep: #b9a3d6;
        --dtpj-accent-soft: #2a2337;
        --dtpj-accent-line: #463d59;
    }
    .dtpw-pup { background: #1c1a21; border-color: #332f3a; }
    .dtpw-pup.is-on { background: var(--dtpj-accent-soft); border-color: var(--dtpj-accent); }
    .dtpw-pup img, .dtpw-shot { background: #26232d; }
    .dtpw-pup-count { color: #948d9e; }
    .dtpw-label { color: var(--dtpj-accent-deep); }
    .dtpw-step { background: #332f3a; }
    .dtpw-step.is-on { background: var(--dtpj-accent); }
}