/* PHPと役割名を共有する。
 * クラスはBEMの c-insitu2-block__element。共有部品は独立したBlockとして使う。
 * 引用符の状態は data-quoted、字面の個別補正は data-quote-alignment で表す。
 * activity = 内容、session = 開催回、datetime = 日時、times = 時刻列、reservation = 予約。
 * #event-日付は外部リンク用のIDとして維持する。
 */
@layer pages {
  /* 書体定義 */
  @font-face {
    font-family: "Insitu2 Japanese Heading";
    src: local("HiraginoSans-W2");
    font-style: normal;
    font-weight: 300;
  }

  /* 共通トークンとページ全体の文字設定 */
  .c-insitu2 {
    --insitu-font-size-body: 10.666px;
    --insitu-font-size-datetime: 12px;
    --insitu-font-size-reservation-button: 14px;
    --insitu-font-size-activity-title: 22px;
    --insitu-font-family-title: "LouisVuitton";
    --insitu-line-height: calc(var(--insitu-font-size-body) * 2);

    --insitu-space-tight: 6px;
    --insitu-space-small: 8px;
    --insitu-space-medium: 12px;
    --insitu-space-large: 24px;
    --insitu-paragraph-gap: 16px;
    --insitu-first-section-gap: 40px;
    --insitu-section-gap: 60px;

    --insitu-layout-gap: 50px;
    --insitu-reservation-column-width: 150.3906px;

    --insitu-button-background: #e5e5e5;
    --insitu-button-hover-background: var(--color-black);
    --insitu-reservation-inline-padding: 0px;

    &:lang(ja) {
      --insitu-font-family-title: "LouisVuitton", "Insitu2 Japanese Heading", var(--font-family);
      --insitu-reservation-inline-padding: 16px;
      /* 日本語の予約列はラベル領域にボタン両側のpaddingを加える。 */
      --insitu-reservation-column-width: calc(74.662px + var(--insitu-reservation-inline-padding) * 2);
      --insitu-font-size-reservation-button: 12px;
      font-synthesis-weight: none;
    }

    @media (max-width: 960px) {
      --insitu-font-size-activity-title: 16px;
    }
  }

  /* ABOUT導入部 */
  .c-insitu2__introduction {
    column-gap: var(--insitu-layout-gap);
  }

  /* 共通の長文スタイルを導入文内だけ調整する。 */
  @scope (.c-insitu2__introduction) {
    :where(.c-long-text) {
      grid-area: right;
      column-count: 1;

      :where(a) {
        display: inline;
        width: auto;
      }

      @media (max-width: 960px) {
        margin-top: 30px;
        order: 3;
      }
    }

    :where(figure img) {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  /* 日時部品 */
  /* 公開値：font-size（CSS文字サイズ）とwhite-space（normal/nowrap等）。Blockに設定し、子へ継承する。 */
  :where(.c-insitu2-datetime) {
    --insitu-datetime-font-size: initial;
    --insitu-datetime-white-space: initial;
  }

  .c-insitu2-datetime {
    font-family: "LouisVuitton", var(--font-family);
    font-size: var(--insitu-datetime-font-size, inherit);
    font-weight: 400;
    line-height: var(--insitu-line-height);
    text-box: initial;
    white-space: var(--insitu-datetime-white-space, normal);
  }

  .c-insitu2-datetime__calendar {
    line-height: inherit;
    text-box: initial;
  }

  .c-insitu2-datetime__date {
    line-height: inherit;
    text-box: initial;
  }

  .c-insitu2-datetime__weekday {
    margin-left: var(--insitu-datetime-resolved-weekday-offset, 0px);
    line-height: inherit;
    text-box: initial;
  }

  .c-insitu2-datetime__times {
    line-height: inherit;
    text-box: initial;
  }

  .c-insitu2-datetime__time {
    display: block;
    margin: 0;
    line-height: inherit;
    text-box: initial;

    & + :where(.c-insitu2-datetime__time)::before {
      display: inline-block;
      margin-inline: var(--insitu-space-small);
    }

    :where(.c-insitu2-datetime__times--activity) > & {
      display: inline;
      min-width: 0;
      max-width: 100%;
      overflow-wrap: normal;
      white-space: nowrap;

      & + :where(.c-insitu2-datetime__time)::before {
        content: "/";
      }
    }
  }

  .c-insitu2-datetime__calendar--activity {
    display: flex;
    gap: var(--insitu-space-small);
    white-space: nowrap;
  }

  .c-insitu2-datetime__times--activity {
    display: flex;
    flex-wrap: wrap;
  }

  /* 人物名部品 */
  .c-insitu2-artist-name {
    display: inline-block;
    line-height: inherit;
    overflow-wrap: normal;
    white-space: nowrap;
    text-box: initial;
  }

  .c-insitu2-artist-name--activity {
    max-width: 100%;
    overflow-wrap: anywhere;
    vertical-align: top;
    white-space: normal;
  }

  /* 予約部品 */
  /* 公開値：ボタン高さ・位置、ラベル位置、状態の上余白は長さ、状態のline-heightはCSS行高値。Blockに設定し子へ継承する。 */
  :where(.c-insitu2-reservation) {
    --insitu-reservation-button-height: initial;
    --insitu-reservation-button-translate-y: initial;
    --insitu-reservation-label-offset: initial;
    --insitu-reservation-status-line-height: initial;
    --insitu-reservation-status-margin-top: initial;
  }

  .c-insitu2-reservation {
    line-height: var(--insitu-line-height);
    text-box: initial;
  }

  /* 予約ボタンの内部計算値は予約Block内で解決し、Mixには表示調整値だけを渡す。 */
  .c-insitu2-reservation__button {
    /* 狭幅では見出しの大文字高と共通行高に6pxを足し、本文行ボックス下側の半サイズ分を除く。 */
    --insitu-reservation-resolved-height: calc(1cap + var(--insitu-space-tight) + var(--insitu-line-height) - var(--insitu-font-size-body) / 2);
    --insitu-reservation-resolved-width-label: "*Booking required";

    display: inline-grid;
    justify-self: end;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--insitu-reservation-button-height, var(--insitu-reservation-resolved-height));
    width: max-content;
    max-width: 100%;
    padding-inline: var(--insitu-reservation-inline-padding, 0px);
    translate: 0 var(--insitu-reservation-button-translate-y, 0px);
    background: var(--insitu-button-background);
    color: var(--color-black);
    box-shadow: none;
    font-family: var(--insitu-font-family-title);
    font-size: var(--insitu-font-size-activity-title);
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
    text-box: initial;

    &:hover:not([aria-disabled="true"]) {
      background: var(--insitu-button-hover-background);
      color: var(--color-white);
    }

    &[aria-disabled="true"] {
      color: var(--color-gray);
      cursor: default;
    }

    &::before {
      content: var(--insitu-reservation-resolved-width-label);
      visibility: hidden;
      grid-area: 1 / 1;
      font-family: var(--font-family);
      font-size: var(--insitu-font-size-body);
      font-weight: 400;
    }

    &:where(:lang(ja)) {
      --insitu-reservation-resolved-width-label: "*予約推奨";
    }

    @media (min-width: 961px) {
      /* 横組のボタン高さは、日付と第一時刻の字面を収める共通行高に9pxを加える。 */
      --insitu-reservation-resolved-height: calc(var(--insitu-line-height) + 9px);
      font-family: "LouisVuitton", var(--font-family);
      font-size: var(--insitu-font-size-reservation-button);
    }
  }

  .c-insitu2-reservation__label {
    --insitu-reservation-resolved-label-offset: 2px;

    grid-area: 1 / 1;
    justify-self: center;
    font-family: var(--insitu-font-family-title);
    font-size: var(--insitu-font-size-body);
    font-weight: 400;
    line-height: 1;
    text-box: initial;
    translate: 0 var(--insitu-reservation-label-offset, var(--insitu-reservation-resolved-label-offset));

    &:where(:lang(ja)) {
      font-family: var(--font-family);
      --insitu-reservation-resolved-label-offset: 0px;
    }

    &:where(:lang(en)) {
      /* 英語の予約ラベルは本文より1px大きくして字面を合わせる。 */
      font-size: calc(var(--insitu-font-size-body) + 1px);

      @media (min-width: 961px) {
        font-family: "LouisVuitton", var(--font-family);
        --insitu-reservation-resolved-label-offset: 1px;
      }
    }
  }

  .c-insitu2-reservation__status {
    display: block;
    margin: 0;
    margin-top: var(--insitu-reservation-status-margin-top, 0px);
    line-height: var(--insitu-reservation-status-line-height, var(--insitu-line-height));
    text-align: right;
    /* タイトルと同じ基準で字面の上側を揃え、行ボックスの余白を除く。 */
    text-box: trim-both cap alphabetic;
  }

  /* アクティビティ解説 */
  .c-insitu2-activity-notes {
    margin-top: var(--insitu-section-gap);
  }

  @scope (.c-insitu2-activity-notes) {
    :where(p) {
      line-height: calc(var(--insitu-font-size-body) + var(--insitu-space-small));
    }

    :where(p + p) {
      margin-top: var(--insitu-space-medium);
    }
  }

  .c-insitu2-activity {
    position: relative;
    display: grid;
    margin: var(--insitu-first-section-gap) 0 0;
    scroll-margin-top: 40px;

    & + & {
      margin-top: var(--insitu-section-gap);
    }
  }

  .c-insitu2-activity__anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    scroll-margin-top: 40px;
  }

  .c-insitu2-activity__type {
    margin: 0 0 var(--insitu-space-small);
    font-size: var(--insitu-font-size-body);
    font-weight: 400;
    line-height: var(--insitu-line-height);
    text-box: initial;
  }

  .c-insitu2-activity__type--datetime {
    /* 日時欄の先頭を一行使い、日付との間は通常の改行として続ける。 */
    flex-basis: 100%;
    margin: 0;
  }

  .c-insitu2-activity__sessions {
    display: grid;
    gap: var(--insitu-space-large);
    font-size: var(--insitu-font-size-body);
    line-height: var(--insitu-line-height);
    text-box: initial;
  }

  .c-insitu2-activity__session {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: var(--insitu-space-large);
    margin: 0;
    line-height: var(--insitu-line-height);
    text-box: initial;

    @media (min-width: 641px) {
      grid-template-columns:
        calc(100% - var(--insitu-reservation-column-width) - var(--insitu-space-large))
        minmax(0, 1fr);
      align-items: start;
    }
  }

  .c-insitu2-activity__heading {
    display: grid;
    grid-area: 1 / 1;
    min-width: 0;
    /* タイトルと作家名を6pxの間隔でまとめる。 */
    gap: var(--insitu-space-tight);
    margin: 0;
    line-height: var(--insitu-line-height);
    text-box: initial;
  }

  .c-insitu2-activity__title {
    font-family: var(--insitu-font-family-title);
    font-size: var(--insitu-font-size-activity-title);
    line-height: var(--line-height-heading);
    overflow-wrap: anywhere;
    text-spacing-trim: trim-start;
    /* PHPの英字は小文字で保持し、表示だけCSSで大文字にする。 */
    text-transform: uppercase;
    text-box: trim-both cap alphabetic;

    &:where([data-quoted="true"]) {
      translate: -3px 0;
      text-spacing-trim: space-all;
      text-indent: -0.5em;
    }

    &[data-quote-alignment="flush"] {
      /* タイトルの字下げだけで左端が揃う場合は追加の3px補正を外す。 */
      translate: none;
    }
  }

  .c-insitu2-activity__artist {
    margin: 0;
    line-height: var(--insitu-line-height);
    letter-spacing: normal;
    white-space: normal;
    text-box: initial;
  }

  .c-insitu2-activity__artist--compact {
    &:lang(en) {
      @media (max-width: 640px) {
        line-height: calc(var(--insitu-font-size-body) + var(--insitu-space-tight));
      }
    }
  }

  .c-insitu2-activity__artist-break {
    display: none;
  }

  .c-insitu2-activity__datetime {
    --insitu-datetime-font-size: var(--insitu-font-size-datetime);

    display: flex;
    flex-wrap: wrap;
    column-gap: var(--insitu-space-small);
    grid-area: 2 / 1;
    align-items: start;
    margin-top: var(--insitu-space-small);
    text-box: initial;
  }

  .c-insitu2-activity__reservation {
    display: grid;
    grid-area: 1 / 2 / 3 / 3;
    width: max-content;
    justify-self: end;
    align-self: start;
    /* exhibition.cssのタイトル上余白4pxに合わせる。文字の余白はstatus側でトリムする。 */
    margin-top: 4px;
    text-align: right;
    white-space: nowrap;
  }

  .c-insitu2-activity__body {
    margin-top: var(--insitu-space-small);
    line-height: var(--insitu-line-height);
    text-box: initial;
  }

  .c-insitu2-activity__work-title {
    font-style: italic;
    font-weight: inherit;
  }

  @scope (.c-insitu2-activity__body) {
    :where(p) {
      line-height: var(--insitu-line-height);
      text-box: initial;
    }

    :where(p + p) {
      margin-top: var(--insitu-paragraph-gap);
    }
  }

}