/*
 * Colouring playground + lightbox. Themed by CSS variables so the same
 * component reads "comic" on the family page and "atelier" on the adults page.
 *
 *   --cp-ink, --cp-paper, --cp-surface, --cp-accent, --cp-muted,
 *   --cp-border-w, --cp-radius, --cp-shadow, --cp-font
 */
.ia-colour {
  --cp-ink: #2a1e10;
  --cp-paper: #ffffff;
  --cp-surface: #fff8ec;
  --cp-accent: #e76f51;
  --cp-muted: #9a7354;
  --cp-border-w: 2.5px;
  --cp-radius: 18px;
  --cp-shadow: 7px 7px 0 var(--cp-ink);
  --cp-font: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  font-family: var(--cp-font);
}
.ia-colour__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cp-paper);
  border: var(--cp-border-w) solid var(--cp-ink);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='14' r='9' fill='%23e76f51' stroke='%232a1e10' stroke-width='2.5'/></svg>") 14 14, crosshair;
}
.ia-colour__paint,
.ia-colour__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.ia-colour__lines { object-fit: contain; }
.ia-colour__hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 8px 14px;
  border: 2px solid var(--cp-ink);
  border-radius: 999px;
  background: var(--cp-surface);
  color: var(--cp-ink);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  animation: ia-bob 2.2s ease-in-out infinite;
}
.ia-colour__hint[hidden] { display: none; }
.ia-colour__loading {
  position: absolute;
  inset: 0;
  background: var(--cp-surface);
  display: grid;
  place-items: center;
  transition: opacity 0.3s ease;
}
.ia-colour__loading::after {
  content: "";
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid var(--cp-ink);
  border-right-color: var(--cp-accent);
  animation: ia-spin-slow 0.9s linear infinite;
}
.ia-colour.is-ready .ia-colour__loading { opacity: 0; pointer-events: none; }
.ia-colour__splash {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid var(--cp-ink);
  pointer-events: none;
  animation: ia-pulse-ring 0.5s ease-out forwards;
}

.ia-colour__side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--cp-surface);
  border: var(--cp-border-w) solid var(--cp-ink);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
}
.ia-colour__palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 10px;
}
.ia-colour__swatch {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  border: var(--cp-border-w) solid var(--cp-ink);
  background: var(--swatch);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--cp-ink);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}
.ia-colour__swatch:hover { transform: translateY(-3px) rotate(-3deg); }
.ia-colour__swatch.is-active {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--cp-paper), 0 0 0 5px var(--cp-ink);
  z-index: 1;
}
.ia-colour__swatch:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 2px; }
.ia-colour__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ia-colour__tool {
  flex: 1 1 auto;
  padding: 10px 14px;
  border: var(--cp-border-w) solid var(--cp-ink);
  border-radius: 10px;
  background: var(--cp-paper);
  color: var(--cp-ink);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--cp-ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ia-colour__tool:hover { transform: translateY(-2px); }
.ia-colour__tool:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--cp-ink); }
.ia-colour__tool--primary { background: var(--cp-accent); color: #fff; flex-basis: 100%; }
.ia-colour__pages {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ia-colour__page {
  width: 56px;
  height: 56px;
  padding: 3px;
  border: 2px solid var(--cp-ink);
  border-radius: 10px;
  background: var(--cp-paper);
  cursor: pointer;
  opacity: 0.75;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.ia-colour__page img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ia-colour__page:hover { opacity: 1; transform: translateY(-2px); }
.ia-colour__page.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--cp-paper), 0 0 0 4px var(--cp-accent); }

@media (max-width: 820px) {
  .ia-colour { grid-template-columns: 1fr; }
  .ia-colour__stage { box-shadow: 5px 5px 0 var(--cp-ink); }
  .ia-colour__palette { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
}

/* Atelier theme */
.ia-colour--atelier {
  --cp-ink: #1a1410;
  --cp-paper: #ffffff;
  --cp-surface: #ffffff;
  --cp-accent: #c05530;
  --cp-muted: #6a5c48;
  --cp-border-w: 1px;
  --cp-radius: 20px;
  --cp-shadow: 0 8px 32px rgba(26, 20, 16, 0.14);
}
.ia-colour--atelier .ia-colour__stage {
  border-color: #eae3d2;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='14' r='8' fill='%23c05530' stroke='%231a1410' stroke-width='1.5'/></svg>") 14 14, crosshair;
}
.ia-colour--atelier .ia-colour__side { border-color: #eae3d2; }
.ia-colour--atelier .ia-colour__swatch { border-radius: 50%; box-shadow: none; border-color: rgba(26,20,16,0.12); }
.ia-colour--atelier .ia-colour__swatch:hover { transform: translateY(-2px); }
.ia-colour--atelier .ia-colour__swatch.is-active { box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #1a1410; }
.ia-colour--atelier .ia-colour__tool {
  box-shadow: 0 2px 8px rgba(26,20,16,0.08);
  border-color: #c4b398;
  font-weight: 500;
  border-radius: 12px;
}
.ia-colour--atelier .ia-colour__tool:active { box-shadow: none; }
.ia-colour--atelier .ia-colour__tool--primary { border-color: transparent; box-shadow: 0 4px 14px rgba(184,94,58,0.3); }
.ia-colour--atelier .ia-colour__hint {
  border: 1px solid #eae3d2;
  background: #fff;
  font-weight: 500;
  color: #6a5c48;
  box-shadow: 0 2px 8px rgba(26,20,16,0.10);
}
.ia-colour--atelier .ia-colour__page { border-color: #eae3d2; }
.ia-colour--atelier .ia-colour__page.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #c05530; }
.ia-colour--atelier .ia-colour__loading::after { border-width: 2px; }

/* ── Lightbox ──────────────────────────────────────────────────────── */
.ia-lightbox {
  --lb-ink: #2a1e10;
  --lb-surface: #fff8ec;
  --lb-accent: #e76f51;
  --lb-border-w: 2.5px;
  --lb-radius: 18px;
  --lb-shadow: 8px 8px 0 var(--lb-ink);
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.ia-lightbox.is-open { opacity: 1; }
.ia-lightbox[hidden] { display: none; }
.ia-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 30, 16, 0.62);
  backdrop-filter: blur(4px);
}
.ia-lightbox__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  width: min(920px, 100%);
  max-height: 92vh;
  margin: 0;
  background: var(--lb-surface);
  border: var(--lb-border-w) solid var(--lb-ink);
  border-radius: var(--lb-radius);
  box-shadow: var(--lb-shadow);
  overflow: hidden;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.ia-lightbox.is-open .ia-lightbox__panel { transform: none; }
.ia-lightbox__image { background: #fff; display: grid; place-items: center; }
.ia-lightbox__image img { width: 100%; height: 100%; max-height: 92vh; object-fit: contain; display: block; }
.ia-lightbox__meta { padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; color: var(--lb-ink); }
.ia-lightbox__title { margin: 0; font-size: 1.5rem; font-weight: 700; }
.ia-lightbox__prompt { margin: 0; font-style: italic; opacity: 0.75; }
.ia-lightbox__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0.8rem; }
.ia-lightbox__btn {
  padding: 11px 18px;
  border: var(--lb-border-w) solid var(--lb-ink);
  border-radius: 10px;
  background: #fff;
  color: var(--lb-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--lb-ink);
  transition: transform 0.15s ease;
}
.ia-lightbox__btn:hover { transform: translateY(-2px); }
.ia-lightbox__btn--primary { background: var(--lb-accent); color: #fff; }
.ia-lightbox__btn[hidden] { display: none; }
.ia-lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: var(--lb-border-w) solid var(--lb-ink);
  background: #fff;
  color: var(--lb-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--lb-ink);
}
body.ia-lightbox-open { overflow: hidden; }
@media (max-width: 720px) {
  .ia-lightbox__panel { grid-template-columns: 1fr; max-height: 94vh; overflow: auto; }
  .ia-lightbox__image img { max-height: 55vh; }
}

.ia-lightbox--atelier {
  --lb-ink: #1a1410;
  --lb-surface: #ffffff;
  --lb-accent: #c05530;
  --lb-border-w: 1px;
  --lb-radius: 20px;
  --lb-shadow: 0 24px 64px rgba(26, 20, 16, 0.28);
}
.ia-lightbox--atelier .ia-lightbox__panel { border-color: #eae3d2; }
.ia-lightbox--atelier .ia-lightbox__btn { box-shadow: 0 2px 8px rgba(26,20,16,0.08); border-color: #c4b398; font-weight: 500; border-radius: 12px; }
.ia-lightbox--atelier .ia-lightbox__btn--primary { border-color: transparent; box-shadow: 0 4px 14px rgba(184,94,58,0.3); }
.ia-lightbox--atelier .ia-lightbox__close { box-shadow: 0 2px 8px rgba(26,20,16,0.12); border-color: #eae3d2; }
.ia-lightbox--atelier .ia-lightbox__title { font-family: "Fraunces", serif; font-weight: 600; letter-spacing: -0.3px; }
.ia-lightbox--atelier .ia-lightbox__backdrop { background: rgba(26, 20, 16, 0.7); }