/* graduation-photos.css
   Shared styles for the 2026 graduation photo pages
   (graduation-photos-adn / -art / -cte / -wd).
   Brand colors are defined in addins2.css (loaded first).
*/

.graduation-main {
  min-height: 70vh;
  /* Softer than the original #5B8726 -> #162447 gradient.
     Uses brand variables; swap to color-mix(... 60%, white)
     wrappers if an even lighter wash is wanted. */
  background: linear-gradient(
    135deg,
    var(--print-green) 0%,
    var(--sidebar-blue) 100%
  );
}

.graduation-main h1 {
  color: #fff;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  justify-items: center;
  padding: 2rem;
  border-radius: 12px;
}

.image-grid img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 2px solid #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.15);
}

.nav-pills .nav-link {
  background-color: #fff;
  color: var(--main-blue);
  border: 1px solid var(--main-blue);
  border-radius: 0.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-pills .nav-link:hover {
  background-color: var(--main-blue);
  color: #fff;
}

.nav-pills .nav-link.active {
  background-color: var(--main-green);
  color: #fff;
  border-color: var(--main-green);
}

/* Front panels (graduation-photos.php landing page).
   Desktop-only hover: brighten the quarter under the cursor.
   No scale/translate — the four quarters meet flush, so any
   transform would break the seamless logo composition. */
@media (min-width: 992px) {
  .front-panel-link {
    display: block;
    overflow: hidden;
  }
  .front-panel-link img {
    transition: filter 0.25s ease;
  }
  .front-panel-link:hover img,
  .front-panel-link:focus-visible img {
    filter: brightness(1.12);
  }
  .front-panel-link:focus-visible {
    outline: 3px solid var(--bright-blue);
    outline-offset: -3px;
  }
}