/* =========================================================
 order_competition.css（FINAL / PCベース・SP上書き：ブロック直下配置）
   ---------------------------------------------------------
   [01] Subtitle / Time
   [02] Card Layout
   [03] Left (Order + Photo)
   [04] Main (Name)
   [05] Program Rows (A/B/C)
   [05.5] Program (PC: Always Open / SP: Accordion)
   [06] Right Meta
   [07] Responsive（Tablet）
========================================================= */


/* =========================================================
   [01] Subtitle / Time
========================================================= */
.order-subtitle{
  margin: 14px 0 0;
  color: rgba(233,238,246,.68);
  font-weight: 650;
  letter-spacing: .02em;
  font-size: 20px;
}

/* SP */
@media (max-width: 720px){
  .order-subtitle{
    font-size: 14px;
  }
}

.order{
  padding-top: 0px;
}

/* 時間（左ワンポイント＋枠） */
.order-time{
  grid-column: 1 / -1;
  position: relative;

  margin: 0;
  padding: 10px 16px 10px 16px;

  color: rgba(233,238,246,.85);
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 15px;
}

.order-time::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:4px;
  border-radius: 2px;
  background: var(--gold);
}


/* =========================================================
   [02] Card Layout（PCベース）
========================================================= */
.order-list{
  display: grid;
  gap: 14px;
}

.order-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, rgba(12,18,30,.62), rgba(5,7,11,.35)); /* ← results row と同系 */
  box-shadow: var(--shadow);
  overflow: hidden;

  display: grid;
  grid-template-columns: 170px 1fr 210px;
  grid-template-rows: auto auto; /* 右メタ高さで1段目が伸びにくい */
  align-items: stretch;
}

/* Tablet */
@media (max-width: 980px){
  .order-card{
    grid-template-columns: 108px 1fr 190px;
  }
}

/* SP：カードを2カラム＋3段構成へ */
@media (max-width: 720px){
  .order-card{
    grid-template-columns: 102px 1fr;
    grid-template-rows: auto auto auto; /* left+main / meta / program */
  }
}


/* =========================================================
   [03] Left（PCベース）
========================================================= */
.order-left{
  padding: 14px 14px;
  border-right: 1px solid rgba(255,255,255,.06);

  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  align-content: start;

  justify-items: center;
  text-align: center;

  grid-row: 1 / 3; /* 2段ぶち抜き */
}

.order-left__top{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.order-left__label{
  color: var(--gold);
  font-weight: 850;
  font-size: 13px;
  letter-spacing: .02em;
}

.order-left__no{
  font-size: 30px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 10px 26px rgba(0,0,0,.55);
}

.order-left__photo{
  margin-top: 6px; /* PC：写真を少し下げる */
  width: 85px;
  height: 100px;
  border-radius: 10px;
  object-fit: cover;
  filter: none;
  opacity: .94;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* SP */
@media (max-width: 720px){
  .order-left{
    grid-column: 1;
    grid-row: 1;

    padding: 18px 14px;
    gap: 12px;

    grid-row: auto; /* ぶち抜きを解除 */
    border-right: 0; /* 写真と名前の間の縦線だけ消す */
  }

  .order-left__photo{
    width: 68px;
    height: 68px;
  }
}


/* =========================================================
   [04] Main（PCベース）
========================================================= */
.order-main{
  padding: 22px 0 0 22px;
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  grid-row: 1;
}

.order-name{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: .02em;

  line-height: 1.25; /* ← 少し広げたい場合は 1.30〜1.35へ */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* SP：名前を「高さ方向」センター配置（写真と縦センターを揃える） */
@media (max-width: 720px){
  .order-main{
    grid-column: 2;
    grid-row: 1;

    padding: 0 10px 0 2px;       /* センターを崩さないよう上下paddingは消す */
    display: flex;
    align-items: center;
    justify-content: center; /* vertical center */
    height: 100%;
  }

  .order-name{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;

    line-height: 1.4;
    margin: 0;
    transform: translateY(4px); /* 視覚センター微調整 */
  }

  /* SP：名前の / を消して、その位置で改行（name-sepがある場合） */
  .order-name .name-sep{
    display: block;
    height: 0;
    overflow: hidden;
  }
}


/* =========================================================
   [05] Program Rows（PCベース）
========================================================= */
.order-program{
  display: grid;
  gap: 10px;
}

.order-piece{
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: start;
}

.order-piece__tag{
  color: rgba(233,238,246,.58);
  font-weight: 850;
  letter-spacing: .02em;
  font-size: 13px;
  padding-top: 2px;
  white-space: nowrap;
}

.order-piece__composer{
  color: rgba(233,238,246,.78);
  font-weight: 750;
  font-size: 13.5px;
  letter-spacing: .01em;
  margin-bottom: 3px;
}

.order-piece__title{
  color: rgba(233,238,246,.94);
  font-weight: 750;
  font-size: 16.5px;
  line-height: 1.45;
}

.order-piece__en{
  margin-bottom: 8px;
  color: rgba(233,238,246,.64);
  font-size: 13.5px;
  line-height: 1.45;
}

/* SP：タグ列を詰める */
@media (max-width: 720px){
  .order-piece{
    grid-template-columns: 28px 1fr;
    gap: 8px;
  }

  .order-piece__tag{
    font-size: 12px;
    padding-top: 1px;
    text-align: right;
  }
}


/* =========================================================
   [05.5] Program（PCベース：常時表示 / details無効）
========================================================= */
/* PC：箱を消して本文だけ見せる */
.program-acc{
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;

  grid-column: 2;
  grid-row: 2;
  align-self: start;

  margin-top: 6px;
  padding-left: 22px; /* Program左端を名前と揃える */
}

/* PC：summaryを殺す */
.program-acc > summary,
.program-acc__summary{
  display: none !important;
}

/* PC：中身を直出し（最下部に余白） */
.program-acc .order-program{
  padding: 0 0 14px;
  border-top: 0;
}

/* SP：アコーディオン表示に切り替え */
@media (max-width: 720px){
  .program-acc{
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: start;

    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;

    margin-top: 10px;
    padding-left: 0; /* PCの左揃えを解除 */
  }

  /* SP：summary復活 */
  .program-acc > summary{
    display: block !important;
    list-style: none;
    cursor: pointer;
  }
  .program-acc > summary::-webkit-details-marker{
    display: none;
  }

  .program-acc__summary{
    display:flex !important;
    align-items:center;

    /* ボタン文字を中央寄せ */
    justify-content: center;
    width: 100%;
    text-align: center;

    gap: 10px;
    padding: 12px 14px;
    user-select:none;
  }

  .program-acc__label{
    font-weight: 800;
    font-size: 14px;
    color: rgba(233,238,246,.92);
    letter-spacing: .01em;
  }

  .program-acc__chev{
    color: rgba(233,238,246,.75);
    font-weight: 900;
    transform: rotate(0deg);
    transition: transform .18s ease;
  }

  .program-acc[open] .program-acc__chev{
    transform: rotate(180deg);
  }

  /* SP：曲一覧（開いた先）上paddingを広げ、下と整合 */
  .program-acc .order-program{
    padding: 22px 14px 12px;
    border-top: 1px solid rgba(255,255,255,.06);

    display: none;
  }
  .program-acc[open] .order-program{
    display: grid;
  }
}


/* =========================================================
   [06] Right Meta（PCベース）
========================================================= */
.order-meta{
  padding: 22px 14px;
  border-left: 1px solid rgba(255,255,255,.06);

  display: grid;
  gap: 8px;
  align-content: start;
  text-align: right;

  grid-row: 1 / 3; /* 2段ぶち抜き */
}

.order-meta__row{
  display: grid;
  gap: 2px;
}

.order-meta__row--inline{
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
}

.order-meta__k{
  color: rgba(233,238,246,.55);
  font-weight: 750;
  font-size: 14px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.order-meta__v{
  color: rgba(233,238,246,.86);
  font-weight: 850;
  font-size: 14px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.order-meta__row--country .order-meta__k{
  color: rgba(233,238,246,.86);
}
.order-meta__row--country .order-meta__v{
  color: rgba(233,238,246,.55);
  font-weight: 750;
}

/* SP：Meta 2行レイアウト（左：Entry/Piano 右：国籍/Program） */
@media (max-width: 720px){
  .order-meta{
    grid-column: 1 / -1;
    grid-row: 2;

    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 14px 14px 10px;

    text-align: left;

    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-areas:
      "entry   country"
      "piano   program";
    column-gap: 12px;
    row-gap: 8px;
    align-items: baseline;

    grid-row: auto; /* ぶち抜きを解除 */
  }

  .order-meta > .order-meta__row:nth-child(1){
    grid-area: entry;
    justify-self: start;
  }
  .order-meta > .order-meta__row:nth-child(2){
    grid-area: country;
    justify-self: end;
    text-align: right;
  }
  .order-meta > .order-meta__row:nth-child(3){
    grid-area: piano;
    justify-self: start;
  }
  .order-meta > .order-meta__row:nth-child(4){
    grid-area: program;
    justify-self: end;
    text-align: right;
  }

  .order-meta__row--inline{
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    justify-content: flex-start;
  }

  .order-meta__row--country{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    white-space: normal;
  }
  .order-meta__row--country .order-meta__k,
  .order-meta__row--country .order-meta__v{
    white-space: nowrap;
  }

  .order-meta__k{
    font-size: 12.5px;
    font-weight: 750;
    letter-spacing: .01em;
    color: rgba(233,238,246,.62);
  }
  .order-meta__v{
    font-size: 12.5px;
    font-weight: 850;
    letter-spacing: .01em;
    color: rgba(233,238,246,.88);
  }

  .order-meta__row--country .order-meta__k{
    color: rgba(233,238,246,.88);
    font-weight: 850;
  }
  .order-meta__row--country .order-meta__v{
    color: rgba(233,238,246,.62);
    font-weight: 700;
  }
}

/* 超小型SP */
@media (max-width: 420px){
  .order-meta{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   [07] Responsive（Tablet：文字のみ）
========================================================= */
@media (max-width: 980px){
  .order-name{
    font-size: 19px;
  }
}