/* Frames follow the work. Never fill a frame by cropping its image. */
.discipline-section .discipline-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.discipline-section .discipline-image img,
.discipline-section .discipline-panel:hover .discipline-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transform: none;
  scale: 1;
  border-radius: 0;
}

/* Complete photographs and spreads sit on quiet mats, with room at every edge. */
#category-view .project-card-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  height: auto;
  min-height: 280px;
  padding: 24px;
  gap: 20px;
  overflow: visible;
}
#category-view .project-card-art.has-support {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
}
#category-view .project-card-art img,
#category-view .portfolio-project:hover .project-card-art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 470px;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  align-self: center;
  transform: none;
  scale: 1;
}
#category-view .portfolio-project.elderly-care .project-card-art {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#category-view .portfolio-project.hand-sketches .project-card-art {
  min-height: 0;
}
#category-view .portfolio-project.bank-of-baroda .project-card-art {
  background: #d1b9a5;
}

/* The hero is a complete artwork, and opens the same full-image viewer. */
#project-view[class] .project-hero-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  padding: 28px;
  gap: 22px;
  min-height: 0;
  transform: none;
  overflow: visible;
}
#project-view[class] .project-hero-image.has-companion {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr);
}
#project-view[class] .project-hero-image .image-button {
  position: relative;
  inset: auto;
  rotate: none;
  transform: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  align-self: center;
  background: transparent;
  padding: 0;
}
#project-view[class] .project-hero-image .image-button img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-width: 100%;
  max-height: 640px;
  margin: 0;
  object-fit: contain;
  object-position: center;
  rotate: none;
  filter: none;
  border-radius: 0;
}

/* Preserve page edges, including during hover. Motion belongs to the frame. */
#project-view .image-button {
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
#project-view .image-button img,
#project-view .image-button:hover img,
#project-view .image-button:focus-visible img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  transform: none;
  scale: 1;
}
#project-view .image-button:focus-visible {
  outline: 2px solid #9c624d;
  outline-offset: 6px;
}
#project-view .image-button:after { bottom: 12px; right: 12px; }
#project-view .lookbook {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
#project-view .lookbook figure,
#project-view .lookbook figure:first-child,
#project-view .lookbook figure:nth-child(2),
#project-view .lookbook figure:nth-child(3) {
  width: 100%;
  margin: 0;
}
#project-view .lookbook .image-button {
  padding: 14px;
  background: #d1b9a5;
  border-radius: 18px;
}
#project-view .lookbook figcaption { margin-top: 16px; }
#project-view .chapter figure .image-button img,
#project-view .planet-pair .image-button img,
#project-view .demo-visual .image-button img {
  max-height: none;
  background: transparent;
}
#project-view .chapter figure {
  padding: 28px;
  gap: 16px;
}
#project-view .demo-visual { padding: 16px; }
#project-view .phone-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 680px;
  margin: auto;
  gap: 32px;
  align-items: start;
}
#project-view .phone-pair .image-button img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  rotate: none;
}
#project-view .website-study {
  max-width: 1000px;
  margin: auto;
  padding: 24px;
  border-radius: 18px;
  background: #d1b9a5;
}
#project-view .website-study img { max-height: none; }
#project-view .website-study figcaption { margin-top: 18px; }
#viewer-images img { border-radius: 0; }

@media (min-width: 801px) {
  #project-view.case-ecoride .chapter,
  #project-view.case-elderly-care .chapter,
  #project-view.case-bank-of-baroda .chapter { align-items: start; }
  #project-view.case-ecoride .chapter .chapter-copy,
  #project-view.case-elderly-care .chapter .chapter-copy,
  #project-view.case-bank-of-baroda .chapter .chapter-copy {
    position: sticky;
    top: 28px;
  }
}

@media (max-width: 800px) {
  #category-view .project-card-art { min-height: 220px; padding: 18px; gap: 14px; }
  #project-view[class] .project-hero-image { padding: 24px; }
  #project-view[class] .project-hero-image .image-button img { max-height: 580px; }
  #project-view .lookbook { gap: 16px; }
  #project-view .lookbook .image-button { padding: 10px; border-radius: 14px; }
}
@media (max-width: 600px) {
  .discipline-section .discipline-image { padding: 14px; }
  #category-view .project-card-art { min-height: 0; padding: 18px; }
  #category-view .project-card-art img { max-height: 410px; }
  #project-view[class] .project-hero-image { padding: 20px; gap: 16px; }
  #project-view[class] .project-hero-image .image-button img { max-height: 490px; }
  #project-view[class] .project-hero-image.has-companion { grid-template-columns: minmax(0, 1fr); }
  #project-view[class] .project-hero-image .hero-secondary { display: none; }
  #project-view .lookbook { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  #project-view .lookbook figure:first-child { grid-column: auto; }
  #project-view .lookbook .image-button { padding: 14px; }
  #project-view .chapter figure { padding: 18px; gap: 14px; }
  #project-view .phone-pair { gap: 18px; }
  #project-view .demo-visual { padding: 0; }
  #project-view .website-study { padding: 12px; }
}