/* The professor's profile page at /people/professor: the People card's
   full-page counterpart (docs/super.md, "People Page"). The contact rows,
   SNS circles, and blue entry bars come from css/people-identity.css, the
   palette from css/global.css; this file keeps only what is unique to the
   page: the identity ramp, the header spacer, and the media gallery. */

.page__people-professor {
  .notion-link {
    text-decoration: none;
  }

  /* the coverless header ships a 140px spacer above the title */
  .notion-header__cover.no-cover {
    height: 40px;
  }

  /* ---- the identity columns: portrait left, titles and contacts right ---- */

  .notion-root > .notion-column-list {
    align-items: center;
    margin-bottom: 8px;

    .notion-image {
      margin: 0;

      img {
        width: 100%;
        height: auto;
        border-radius: var(--photo-radius);
      }
    }

    .notion-text {
      margin: 0;
      font-size: 15px;
      line-height: 1.6;
      color: var(--muted);
    }

    /* the bold line is the role label, the italic one the department */
    .notion-text:has(> strong) {
      font-size: 16px;
      letter-spacing: 0.04em;
      color: var(--kaist-blue);
    }

    .notion-text:has(> em) {
      margin-bottom: 12px;
      color: var(--muted);
    }

  }

  /* ---- the sections: headings over Notion-bulleted entries ---- */

  .notion-root > .notion-heading {
    margin: 36px 0 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
  }

  /* ---- the media gallery: a linked view of the Professor Media database
     (docs/notion.md), styled after ascent.super.site's team gallery: the
     card rests as a clean cover photo, and hovering slides a translucent
     bar up from the bottom carrying the title over a date-and-outlet line
     (the bar stays out where hover does not exist). Every card clicks
     through its Source URL property -- the article or video for credited
     items, the original photo file for uncredited press photos -- and the
     row page stays unreachable. A media-video-* cover earns the play
     badge. Card preview must be clicked to Page cover in Notion; the DSL
     cannot set it ---- */

  .collection-df40c2482fc04c66aaa5f5bb22623d65 {
    --media-card-h: 200px;
    --media-bar-h: 96px;
    --media-bar-bg: rgb(8 12 18 / 55%);

    /* the cover-size minimum is what yields four columns at full width */
    --collection-card-cover-size-small: 190px;
    --collection-card-cover-size-medium: 190px;
    --collection-card-cover-size-large: 190px;
    --collection-card-gap: 10px;

    .notion-collection__header-wrapper {
      display: none;
    }

    .notion-collection-card {
      position: relative;
      isolation: isolate;
      height: var(--media-card-h);
      border-radius: var(--photo-radius);
      overflow: hidden;
      background: #151a21;

      img.notion-collection-card__cover {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100% !important;
        min-height: 100%;
        /* the cover's object-fit arrives as an inline style */
        object-fit: cover !important;
        transition: scale 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      /* the empty row-page anchor doubles as the badge layer; its own
         title text stays collapsed */
      .notion-collection-card__anchor {
        position: absolute;
        inset: 0;
        z-index: 2;
        font-size: 0;
        pointer-events: none;
      }

      /* the hover bar: a fixed-height grid whose 1fr title row absorbs
         the slack, so every card's bar matches, the title always takes
         the first line, and the outlet and date anchor to the bar's
         foot instead of floating over a void.
         Super's own stylesheet fights this bar three ways -- a 24px
         min-height on every property, overflow:hidden on the property
         list, and position:relative on the url wrapper -- so each is
         unwound right where it interferes. */
      .notion-collection-card__content {
        position: absolute;
        inset: auto 0 0;
        z-index: 3;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto auto;
        box-sizing: border-box;
        height: var(--media-bar-h);
        overflow: visible;
        margin: 0;
        padding: 10px 12px 11px;
        background: var(--media-bar-bg);
        backdrop-filter: blur(6px);
        opacity: 0;
        translate: 0 8px;
        transition: opacity 0.3s, translate 0.3s;
      }

      .notion-collection-card__property {
        min-height: 0;
      }

      .notion-property__title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 0;
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.35;
        color: #fff;
      }

      /* under the title, the outlet and then the date, each centered on
         its own line: the DOM already runs title, outlet, date, so the
         single-column grid needs no placement. Block display unwinds
         Super's flex on these cells; a long outlet trims to an ellipsis */
      .notion-property__text,
      .notion-property__date {
        display: block;
        justify-self: center;
        font-size: 11.5px;
        line-height: 1.3;
        color: rgb(255 255 255 / 82%);
      }

      .notion-property__text {
        margin: 4px 0 0;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .notion-property__date {
        margin: 2px 0 0;

        /* Super paints the span dark via .notion-semantic-string .date */
        .date {
          color: inherit;
        }
      }

      /* the source link invites the click from the whole card: the anchor
         climbs from the bar's box back up to the card's top edge. Its
         wrapper drops Super's position:relative, or the anchor would
         collapse onto the zero-width wrapper instead of the bar. */
      .notion-property__url {
        position: static;
        margin: 0;
      }

      .notion-property__url a {
        position: absolute;
        inset: calc(var(--media-bar-h) - var(--media-card-h)) 0 0;
        z-index: 6;
        font-size: 0;
        pointer-events: auto;
      }

      &:hover {
        img.notion-collection-card__cover {
          scale: 1.05;
        }

        .notion-collection-card__content {
          opacity: 1;
          translate: 0 0;
        }
      }

      &:has(img[src*="/media-video-"]) .notion-collection-card__anchor::before {
        content: '\f04b';
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font: var(--fa-font-solid);
        font-size: 13px;
        color: #fff;
        background: radial-gradient(circle at center, rgb(0 0 0 / 45%) 22px, transparent 23px);
      }
    }

    /* no hover on touch: the bar stays out */
    @media (hover: none), (pointer: coarse) {
      .notion-collection-card .notion-collection-card__content {
        opacity: 1;
        translate: 0 0;
      }
    }
  }
}