/*
 * Instructor archive: hero, card grid and the profile modal.
 *
 * Loaded on: the instructor post type archive
 * Enqueued by Stylchen\Frontend\Assets.
 */


.instructors-archive { background: #f8f8f8; }
.instructors-intro { max-width: 970px; margin: 0 auto 42px; text-align: center; }
.instructors-intro h2 { margin: 0 0 28px; color: var(--sc-ink); font-family: "Playfair Display", Georgia, serif; font-size: 2rem; font-weight: 400; line-height: 1.25; }
.instructors-intro h2::after { display: block; width: 45px; height: 2px; margin: 16px auto 0; background: var(--sc-red); content: ""; }
.instructors-intro__copy { color: var(--sc-muted); text-align: left; }
.instructor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.instructor-card { min-width: 0; }
.instructor-card__trigger { display: block; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; text-align: center; }
.instructor-card__image { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #c8c8c8; }
.instructor-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.instructor-card__trigger:hover .instructor-card__image img, .instructor-card__trigger:focus-visible .instructor-card__image img { transform: scale(1.04); }
.instructor-card__image-empty { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #ddd, #aaa); }
.instructor-card__caption { display: block; min-height: 104px; padding: 17px 12px 14px; background: var(--sc-red); color: #fff; }
.instructor-card__caption strong { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 1.3125rem; font-weight: 400; line-height: 1.25; }
.instructor-card__caption span { display: block; margin-top: 7px; font-size: 0.8125rem; }
.instructor-modal[hidden] { display: none; }
.instructor-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 25px; }
.instructor-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.instructor-modal__dialog { position: relative; z-index: 1; width: min(760px, 100%); max-height: min(760px, calc(100vh - 50px)); overflow: auto; padding: 38px 42px 32px; background: #fff; box-shadow: 0 15px 45px rgba(0,0,0,.3); }
.instructor-modal__dialog h2 { margin: 0 0 20px; color: var(--sc-ink); font-family: "Playfair Display", Georgia, serif; font-size: 1.875rem; font-weight: 400; }
.instructor-modal__content { color: var(--sc-muted); }
.instructor-modal__close { position: absolute; top: 10px; right: 12px; border: 0; padding: 0 8px; background: transparent; color: #777; font-size: 1.875rem; line-height: 1; }
.instructor-modal__close:hover, .instructor-modal__close:focus { background: transparent; color: var(--sc-red); }
.instructor-modal-open { overflow: hidden; }

@media (max-width: 900px) {
  .instructor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .instructor-grid { grid-template-columns: 1fr; gap: 24px; }
  .instructor-card { max-width: 360px; margin-inline: auto; width: 100%; }
  .instructor-modal__dialog { padding: 34px 24px 24px; }
}