/* ==========================================================================
   MYLADDER — configurator.css (loaded only on the Build Your Wall template)
   ========================================================================== */

.config-grid {
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .config-grid { grid-template-columns: 7fr 5fr; align-items: start; }
}

/* ---------- Stage ---------------------------------------------------------- */
.config-stage { border-radius: var(--radius-lg); }
.config-stage__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms ease;
}
.config-stage__img.is-visible { opacity: 1; }
.config-hint { margin-top: 0.75rem; font-size: 0.8rem; color: var(--color-text-faint); }

/* Shimmer placeholder — same frame, so zero layout jump while photos land. */
.config-stage__skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--color-raised) 35%,
    rgba(201, 162, 39, 0.10) 50%,
    var(--color-raised) 65%);
  background-size: 220% 100%;
  animation: ml-shimmer 1.3s ease-in-out infinite;
}
.config-stage__skeleton.is-done { display: none; }
@keyframes ml-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -80% 0; }
}

/* ---------- Thumbnail rail --------------------------------------------------
   Swipe-scroll below md, grid at/above (per spec). */
.config-rail {
  display: flex; gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: thin; scrollbar-color: var(--color-brass) transparent;
}
@media (min-width: 768px) {
  .config-rail {
    display: grid; grid-template-columns: repeat(3, 1fr);
    overflow: visible; padding-bottom: 0;
  }
}
.config-thumb {
  flex: none; width: 8.5rem; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.45rem;
  text-align: left;
  border-radius: var(--radius);
  padding: 0.35rem;
  border: 1px solid transparent;
  transition: border-color 200ms ease, background-color 200ms ease;
}
@media (min-width: 768px) { .config-thumb { width: auto; } }
.config-thumb__media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 10px;
  border: 1px solid var(--color-line);
  background: var(--color-raised);
}
.config-thumb__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 250ms ease;
}
.config-thumb__label {
  font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted);
  padding-inline: 0.15rem;
  transition: color 200ms ease;
}
.config-thumb:hover { border-color: var(--color-line); background: var(--color-surface); }
.config-thumb:hover .config-thumb__label { color: var(--color-text); }

/* Parallax-ish zoom only where hover is real (no touch devices). */
@media (hover: hover) and (pointer: fine) {
  .config-thumb:hover .config-thumb__media img { transform: scale(1.06); }
}

.config-thumb.is-active { border-color: var(--color-brass); background: var(--color-surface); }
.config-thumb.is-active .config-thumb__media { border-color: var(--color-brass); }
.config-thumb.is-active .config-thumb__label { color: var(--color-brass-bright); font-weight: 600; }

/* ---------- Info panel ------------------------------------------------------ */
.config-info { margin-top: 1.5rem; }
.config-blurb { color: var(--color-text-muted); min-height: 3.2em; }
.config-related { margin-top: 0.75rem; font-size: 0.9rem; color: var(--color-text-faint); }
.config-related a { color: var(--color-brass-bright); font-weight: 600; text-decoration: none; }
.config-related a:hover { text-decoration: underline; }
.config-cta { margin-top: 1.5rem; }