/* Mobile graduates page v5:
   - stable 2x2 grid with no overlap
   - pager is lower, closer to the main bottom navigation, but not attached
   - cards become taller because the extra bottom padding was reduced
   - one-tap opening is handled by public-mobile-graduates.js
*/
@media (max-width: 680px) {
  .registry.eotf-mobile-graduates-active {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;

    /* Bottom padding is intentionally smaller than v4.
       This pushes the internal page switcher lower and gives more vertical space to cards. */
    padding: 16px 14px clamp(18px, 3.2vh, 28px) !important;
    overflow: hidden !important;
  }

  .registry.eotf-mobile-graduates-active > header {
    min-height: 0 !important;
    margin: 0 0 clamp(8px, 1.4vh, 12px) !important;
  }

  .registry.eotf-mobile-graduates-active > header h2 {
    margin-top: 7px !important;
    margin-bottom: clamp(8px, 1.3vh, 11px) !important;
    font-size: clamp(31px, 10vw, 44px) !important;
    line-height: .95 !important;
  }

  .registry.eotf-mobile-graduates-active > header .registry-lead {
    display: none !important;
  }

  .registry.eotf-mobile-graduates-active > header label {
    min-height: 40px !important;
  }

  .registry.eotf-mobile-graduates-active > .graduate-grid,
  .registry.eotf-mobile-graduates-active > .pager {
    display: none !important;
  }

  .eotf-mobile-grad-wrap {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;

    /* Grid receives the full remaining height; pager stays at the bottom. */
    grid-template-rows: minmax(0, 1fr) 48px !important;
    gap: clamp(10px, 1.8vh, 14px) !important;
    overflow: hidden !important;
  }

  .eotf-mobile-grad-grid {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1.4vh, 12px) !important;
    overflow: hidden !important;
  }

  .eotf-mobile-grad-card {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    background: rgba(8, 8, 8, .46) !important;
    color: var(--fg) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(255, 90, 31, .18) !important;
    touch-action: manipulation !important;
  }

  .eotf-mobile-grad-card:active {
    border-color: var(--acid) !important;
    background: rgba(255, 90, 31, .08) !important;
  }

  .public-shell[data-theme="light"] .eotf-mobile-grad-card {
    background: rgba(255, 255, 255, .64) !important;
    color: #111 !important;
  }

  .eotf-mobile-grad-photo {
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .04) !important;
  }

  .public-shell[data-theme="light"] .eotf-mobile-grad-photo {
    background: rgba(0, 0, 0, .035) !important;
  }

  .eotf-mobile-grad-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    filter: none !important;
  }

  .eotf-mobile-grad-photo span {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    font-family: var(--font-display) !important;
    font-size: clamp(44px, 16vw, 68px) !important;
    color: var(--acid) !important;
  }

  .eotf-mobile-grad-caption {
    min-height: clamp(54px, 7vh, 64px) !important;
    padding: 9px 10px 9px !important;
    border-top: 1px solid var(--line) !important;
    background: rgba(0, 0, 0, .30) !important;
  }

  .public-shell[data-theme="light"] .eotf-mobile-grad-caption {
    background: rgba(255, 255, 255, .72) !important;
  }

  .eotf-mobile-grad-caption h3 {
    margin: 0 0 6px !important;
    font-size: clamp(11.5px, 3.4vw, 15px) !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
    letter-spacing: -.02em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .eotf-mobile-grad-caption p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 10.5px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
  }

  .eotf-mobile-grad-pager {
    height: 48px !important;
    display: grid !important;
    grid-template-columns: 64px 1fr 64px !important;
    align-items: center !important;
    border: 1px solid var(--line) !important;
    background: rgba(8, 8, 8, .56) !important;
    overflow: hidden !important;
  }

  .public-shell[data-theme="light"] .eotf-mobile-grad-pager {
    background: rgba(255, 255, 255, .64) !important;
  }

  .eotf-mobile-grad-pager button {
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--fg) !important;
    font-size: 25px !important;
    cursor: pointer !important;
  }

  .public-shell[data-theme="light"] .eotf-mobile-grad-pager button {
    color: #111 !important;
  }

  .eotf-mobile-grad-pager span {
    text-align: center !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }

  .eotf-mobile-grad-empty {
    grid-column: 1 / -1 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--line) !important;
    color: var(--muted) !important;
    font-weight: 800 !important;
  }
}

/* Short-height phones: keep all elements visible, still no overlap. */
@media (max-width: 680px) and (max-height: 740px) {
  .registry.eotf-mobile-graduates-active {
    padding-top: 12px !important;
    padding-bottom: 16px !important;
  }

  .registry.eotf-mobile-graduates-active > header {
    margin-bottom: 7px !important;
  }

  .registry.eotf-mobile-graduates-active > header h2 {
    font-size: clamp(28px, 9vw, 38px) !important;
    margin-bottom: 7px !important;
  }

  .registry.eotf-mobile-graduates-active > header label {
    min-height: 36px !important;
  }

  .eotf-mobile-grad-wrap {
    grid-template-rows: minmax(0, 1fr) 44px !important;
    gap: 8px !important;
  }

  .eotf-mobile-grad-grid {
    gap: 8px !important;
  }

  .eotf-mobile-grad-caption {
    min-height: 50px !important;
    padding: 7px 8px !important;
  }

  .eotf-mobile-grad-caption h3 {
    margin-bottom: 4px !important;
    font-size: 11px !important;
  }

  .eotf-mobile-grad-caption p {
    font-size: 9px !important;
  }
}

@media (max-width: 390px) {
  .registry.eotf-mobile-graduates-active {
    padding-top: 13px !important;
    padding-bottom: clamp(16px, 2.5vh, 22px) !important;
  }

  .registry.eotf-mobile-graduates-active > header h2 {
    font-size: 33px !important;
  }

  .registry.eotf-mobile-graduates-active > header label {
    min-height: 38px !important;
  }

  .eotf-mobile-grad-wrap {
    grid-template-rows: minmax(0, 1fr) 46px !important;
    gap: 9px !important;
  }

  .eotf-mobile-grad-grid {
    gap: 8px !important;
  }

  .eotf-mobile-grad-caption {
    min-height: 54px !important;
    padding: 7px 8px !important;
  }

  .eotf-mobile-grad-caption h3 {
    font-size: 11.5px !important;
  }

  .eotf-mobile-grad-caption p {
    font-size: 9.5px !important;
  }
}


/* v10 safety: ensure mobile graduate photos are visible and cards remain clickable. */
/* v13: keep graduate photos full-color on mobile/tablet instead of grayscale. */
@media (max-width: 680px) {
  .eotf-mobile-grad-card {
    pointer-events: auto !important;
    user-select: none !important;
  }

  .eotf-mobile-grad-photo,
  .eotf-mobile-grad-caption {
    pointer-events: none !important;
  }

  .eotf-mobile-grad-photo img {
    opacity: 1 !important;
    visibility: visible !important;
  }
}