/* ── Page layout ── */
.illustrations-page-wrapper { width: 100%; margin: 0 auto; }
.illustrations-intro { max-width: 44rem; margin-inline: auto; }

/* ── View switching: exactly one section visible per state ── */
#illustrations-gallery-container-full { display: none; }

body[data-view="full"] #illustrations-gallery-container      { display: none !important; }
body[data-view="full"] #illustrations-gallery-container-full { display: grid !important; }

#toggle-view, #next-btn, #prev-btn {
    color: white;
    background-color: var(--card);        /* Removes default gray fill color */
    border: 1px solid var(--line); 
    border-radius: 999px; 
    text-decoration: none;
    padding: 0.4rem 0.9rem;              
    outline: none;           /* Removes default focus ring outline */
    box-shadow: none;        /* Clears any vendor-specific drop shadows */
    cursor: pointer;         /* Forces the standard hand cursor */
}

#toggle-view:hover, #next-btn:hover, #prev-btn:hover { 
    color: var(--ink);
    border-color: var(--petal);
    background-color: var(--petal);
}

/* ── Grid view: masonry via CSS columns ── */
#illustrations-gallery-container {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding: 5px;
  column-count: 4;
  column-gap: 5px;
}

.illustration-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 0;
  margin-bottom: 5px;
  break-inside: avoid;
  cursor: pointer;
}

.illustration-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg);
}

/* title slides down from behind the image on hover */
body[data-view="grid"] #illustrations-gallery-container .illustration-meta-text {
  position: relative;
  z-index: 0;
  padding: 0.25rem 0.25rem 0;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
body[data-view="grid"] #illustrations-gallery-container .illustration-card:hover .illustration-meta-text,
body[data-view="grid"] #illustrations-gallery-container .illustration-card:focus-within .illustration-meta-text {
  transform: translateY(0);
  opacity: 1;
}
body[data-view="grid"] #illustrations-gallery-container .illustration-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}
body[data-view="grid"] #illustrations-gallery-container .illustration-desc,
body[data-view="grid"] #illustrations-gallery-container .illustration-date { display: none; }

/* touch screens have no hover: just show the title */
@media (hover: none) {
  body[data-view="grid"] #illustrations-gallery-container .illustration-meta-text {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-view="grid"] #illustrations-gallery-container .illustration-meta-text { transition: none; }
}

@media (max-width: 1000px) {
  #illustrations-gallery-container { column-count: 3; }
}
@media (max-width: 700px) {
  #illustrations-gallery-container { column-count: 2; }
}

/* ── Full view ── */
#illustrations-gallery-container-full {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding: 5px;
  grid-template-columns: auto minmax(0, 1fr) auto;   /* prev | content | next */
  gap: 1rem;
  align-items: start;
}

/* prev / next buttons stay on screen while you scroll through versions */
#illustrations-gallery-container-full > div:first-child,
#illustrations-gallery-container-full > div:last-child {
  position: sticky;
  top: 45vh;
}

.illustration-card-full {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* versions stack vertically: scroll down to see alternates */
.illustration-media {
  display: grid;
  gap: 1rem;
}
.illustration-media img,
.illustration-media video {
  display: block;
  width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

/* title/description follow you down while you scroll */
.illustration-card-full .illustration-meta-text {
  position: sticky;
  top: 1rem;
}