/* School detail desktop presentation. Data, source order and mobile styles stay shared.
 * 960px allows readable paired sheets; smaller screens retain the editorial flow.
 * Loaded with media="screen and (min-width:960px)", so nothing here may be needed below that width:
 * the wrappers' display:contents and the hidden spread wave live in school-editorial.css.
 */

@media screen and (min-width:960px) {
  .single.cbs-modern #cb-main { --cbs-desk-width:1280px; --cbs-desk-gutter:40px; }
  .single.cbs-modern #cb-main .cb-sec { padding-block:60px!important; }
  .single.cbs-modern #cb-main .cb-schsec-head { margin-bottom:30px!important; }
  /* 見出しの大きな文は h2 の外の段落(.cb-h2-display)に出し、h2 は従来の文言の小さな見出し(.cb-h2-label)にしている(2026-09-30) */
  .single.cbs-modern #cb-main .cb-schsec-head :is(h2,p):where(:not(.cb-h2-label)):where(h2,.cb-h2-display) { font-size:32px; }
  .single.cbs-modern #cb-main .school-table :is(th,td) { word-break:normal; overflow-wrap:anywhere; }

  /* Tendencies and facts form one spread; the feature story follows across the full width.
   * Source order stays 傾向 → 特徴 → 学び方 (→ バギオの案内), as in the legacy outline.
   * The outer columns are the page gutters, so the story and Baguio's guide can run edge to edge. */
  .single.cbs-modern #cb-main .cbs-study-spread {
    display:grid;
    grid-template-columns:minmax(var(--cbs-desk-gutter),1fr) repeat(2,minmax(0,calc(var(--cbs-desk-width)/2))) minmax(var(--cbs-desk-gutter),1fr);
    background:#fff;
  }
  /* :where() keeps this below the two rules that follow, which add the inner gutter with the same !important. */
  .single.cbs-modern #cb-main .cbs-study-spread>:where(#honest,.cbs-school-profile) {
    grid-row:1; min-width:0; padding:60px 0!important; background:transparent;
  }
  .single.cbs-modern #cb-main .cbs-study-spread>#honest { grid-column:2; padding-right:18px!important; overflow:visible; }
  .single.cbs-modern #cb-main .cbs-study-spread>.cbs-school-profile { grid-column:3; padding-left:18px!important; }
  .single.cbs-modern #cb-main .cbs-study-spread>.cbs-school-profile>.cb-wave { display:none; }
  .single.cbs-modern #cb-main .cbs-study-spread>:is(#honest,.cbs-school-profile)>div:last-child {
    width:100%; max-width:none!important;
  }
  .single.cbs-modern #cb-main .cbs-study-spread>#why_baguio { grid-column:1/-1; grid-row:2; padding-top:0!important; }
  .single.cbs-modern #cb-main .cbs-study-spread>#school_features { grid-column:1/-1; grid-row:3; }
  .single.cbs-modern #cb-main .cbs-study-spread #honest .cb-schsec-head { text-align:left; }
  .single.cbs-modern #cb-main .cbs-study-spread #honest .cb-script { transform-origin:left; }
  .single.cbs-modern #cb-main .cbs-study-spread #honest .cb-sch-hashtags { justify-content:flex-start; }

  /* School information and the overview sheet form the second spread on white.
   * Source order stays 学校情報 → キャンペーン → 学校概要; a running campaign sits below the pair. */
  .single.cbs-modern #cb-main .cbs-about-spread {
    display:grid; grid-template-columns:minmax(0,1fr); gap:0 36px; position:relative;
    padding:60px max(var(--cbs-desk-gutter),calc((100% - var(--cbs-desk-width))/2));
    background:#fff;
  }
  .single.cbs-modern #cb-main .cbs-about-spread.has-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .single.cbs-modern #cb-main .cbs-about-spread>.cbs-spread-wave { display:block; }
  .single.cbs-modern #cb-main .cbs-about-spread>.cb-sec { min-width:0; padding:0!important; background:transparent; }
  .single.cbs-modern #cb-main .cbs-about-spread>.cb-sec>.cb-wave { display:none; }
  .single.cbs-modern #cb-main .cbs-about-spread>#school_info { grid-column:1; grid-row:1; }
  .single.cbs-modern #cb-main .cbs-about-spread>#school_overview { grid-column:2; grid-row:1; }
  .single.cbs-modern #cb-main .cbs-about-spread>#school_campaign { grid-column:1/-1; grid-row:2; padding-top:44px!important; }
  .single.cbs-modern #cb-main .cbs-about-spread>:is(#school_info,#school_overview)>div:last-child {
    width:100%; max-width:none!important;
  }
  .single.cbs-modern #cb-main .cbs-about-spread:not(.has-overview)>#school_info { width:min(880px,100%); margin-inline:auto; }
  /* 学校情報の見出しにだけ説明文が付くので、左右で見出しの高さが違う。
   * 見開きの行(見出し/カード 3 つ/表の余り)を左右で共有して、左のカードと右の表の上端をそろえる。
   * 表がカードより長いぶんは最後の行が受けるので、カードの間隔は広がらない。キャンペーンはその下の行に置く。 */
  @supports (grid-template-rows:subgrid) {
    .single.cbs-modern #cb-main .cbs-about-spread.has-overview { grid-template-rows:repeat(4,auto) 1fr; }
    .single.cbs-modern #cb-main .cbs-about-spread.has-overview>:is(#school_info,#school_overview),
    .single.cbs-modern #cb-main .cbs-about-spread.has-overview>:is(#school_info,#school_overview)>div:last-child {
      display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:1/span 5;
    }
    .single.cbs-modern #cb-main .cbs-about-spread.has-overview>#school_overview .cb-sch-table { grid-row:2/-1; align-self:start; }
    .single.cbs-modern #cb-main .cbs-about-spread.has-overview>#school_campaign { grid-row:6; }
  }
  /* The rules below size both halves for the spread; outside it, school-editorial.css applies unchanged. */
  .single.cbs-modern #cb-main .cbs-study-spread .cbs-profile-heading { display:block; margin-bottom:24px; }
  .single.cbs-modern #cb-main .cbs-study-spread .cbs-profile-heading :is(h2,p):where(:not(.cb-h2-label)):where(h2,.cb-h2-display) { font-size:30px; line-height:1.55; }
  .single.cbs-modern #cb-main .cbs-study-spread .cbs-profile-heading>a { margin-top:12px; }
  .single.cbs-modern #cb-main .cbs-study-spread .cbs-profile-facts { display:grid; grid-template-columns:1fr; gap:12px; }
  .single.cbs-modern #cb-main .cbs-study-spread .cbs-profile-fact {
    display:grid; grid-template-columns:132px minmax(0,1fr); gap:20px;
    padding:22px 26px; border-radius:20px; align-items:baseline;
  }
  .single.cbs-modern #cb-main .cbs-study-spread .cbs-profile-fact dt { margin:0; }
  .single.cbs-modern #cb-main .cbs-study-spread .cbs-profile-fact dd { gap:7px; }
  .single.cbs-modern #cb-main .cbs-study-spread .cbs-profile-fact strong { font-size:27px; }
  .single.cbs-modern #cb-main .cbs-study-spread .cb-sch-meters { padding:28px; gap:16px; }
  .single.cbs-modern #cb-main .cbs-study-spread .cb-sch-meters__row { grid-template-columns:100px auto 1fr auto; gap:10px; }
  /* The last row needs room for its shadow, including the raised hover state. */
  .single.cbs-modern #cb-main .cb-sch-hashtags { margin-top:22px; gap:8px; padding-block:3px 16px; }
  .single.cbs-modern #cb-main .cb-sch-hashtags a { font-size:12px; line-height:1.75; padding:7px 14px; }

  /* The explanatory cards and the factual sheet remain visibly separate groups. */
  .single.cbs-modern #cb-main .cbs-about-spread.has-overview>:is(#school_info,#school_overview) .cb-schsec-head { text-align:left; }
  .single.cbs-modern #cb-main .cbs-about-spread.has-overview>:is(#school_info,#school_overview) .cb-script { transform-origin:left; }
  .single.cbs-modern #cb-main .cbs-about-spread .cb-sch-info { padding:26px 30px; margin-block:0 20px; background:#f1f6fc; border-radius:24px; }
  .single.cbs-modern #cb-main .cbs-about-spread .cb-sch-info:last-child { margin-bottom:0; }
  .single.cbs-modern #cb-main .cbs-about-spread .cb-sch-info__head { margin-bottom:18px; grid-template-columns:60px 1fr; }
  .single.cbs-modern #cb-main .cbs-about-spread .cbs-info-icon { width:60px; height:60px; }
  .single.cbs-modern #cb-main .cbs-about-spread .cb-sch-info__body { padding-left:0; line-height:1.95; }
  .single.cbs-modern #cb-main .cbs-about-spread #school_overview .school-table :is(th,td) { padding:18px 22px!important; }
  .single.cbs-modern #cb-main .cbs-about-spread #school_overview .school-table th { width:29%; }

  /* Show the dorm and meal photographs beside the corresponding conditions. */
  .single.cbs-modern #cb-main :is(#school_accomo,#school_other_fee,#school_course,#school_gallery)>div:last-child {
    width:min(var(--cbs-desk-width),calc(100% - 40px)); max-width:none!important;
  }
  .single.cbs-modern #cb-main .cbs-living-spread { display:block; max-width:960px; margin:auto; }
  .single.cbs-modern #cb-main .cbs-living-spread.has-preview { display:grid; grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr); gap:36px; align-items:start; max-width:none; }
  /* .cb-sec clips its waves with overflow:hidden, which would also pin the sticky photographs to the section. */
  .single.cbs-modern #cb-main #school_accomo { overflow:clip; }
  .single.cbs-modern #cb-main .cbs-life-preview { grid-template-columns:1fr; gap:28px; margin:0; position:sticky; top:185px; }
  .single.cbs-modern #cb-main .cbs-life-preview img { height:auto; aspect-ratio:1.8; object-fit:cover; }
  .single.cbs-modern #cb-main #school_accomo .school-table :is(th,td) { padding:18px 24px!important; }

  /* Course choices form a compact index. An opened course always takes full width
   * so its description and period-by-room matrix are never squeezed into a column.
   * Both the approved fee renderer and the original ACF renderer use this layout.
   */
  .single.cbs-modern #cb-main :is(.cbs-course-content,.cbf-wrap,.cbf-course-list) {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px;
  }
  .single.cbs-modern #cb-main :is(.cbs-course-content,.cbf-wrap,.cbf-course-list)>* { grid-column:1/-1; min-width:0; }
  .single.cbs-modern #cb-main :is(.cbs-course-content,.cbf-wrap,.cbf-course-list)>details { margin:0; align-self:start; }
  .single.cbs-modern #cb-main :is(.cbs-course-content,.cbf-wrap,.cbf-course-list)>details:not([open]) { grid-column:auto; }
  .single.cbs-modern #cb-main .cbf-wrap>.cbf-estimate { justify-self:start; }
  .single.cbs-modern #cb-main :is(.cbf-course,.cb-course)>summary { padding:20px 25px; }
  .single.cbs-modern #cb-main :is(.cbf-course,.cb-course)>summary h3 { font-size:21px; }

  /* Dense reference material is a two-column sheet, not a second hidden view.
   * Only regular key/value tables with 10+ rows receive the JS hook (school-tables.js).
   * A complete row always stays together; DOM and assistive reading order are unchanged.
   * The label column is 40%: about 12% of labels wrap from 960px to 1100px, 3% at 1280px, none at 1440px
   * (at 34%: 30% at 960px, 11% at 1280px). The single column wraps none but is twice as tall.
   */
  .single.cbs-modern #cb-main #school_basicdata .cb-inner { max-width:var(--cbs-desk-width); width:calc(100% - 40px); }
  .single.cbs-modern #cb-main #school_basicdata .cb-inner>div { max-width:none!important; }
  .single.cbs-modern #cb-main #school_basicdata .cbs-data-columns { display:block; }
  .single.cbs-modern #cb-main #school_basicdata .cbs-data-columns>caption { display:block; }
  .single.cbs-modern #cb-main #school_basicdata .cbs-data-columns>tbody { display:block; columns:2; column-gap:24px; column-rule:1px solid #dce6f1; }
  .single.cbs-modern #cb-main #school_basicdata .cbs-data-columns tr {
    display:grid; grid-template-columns:40% minmax(0,1fr); break-inside:avoid; page-break-inside:avoid;
  }
  .single.cbs-modern #cb-main #school_basicdata .cbs-data-columns :is(th,td) {
    display:block; width:auto; padding:18px 22px!important; min-width:0;
  }
  .single.cbs-modern #cb-main #school_basicdata .cbs-data-columns th { font-size:13px; }
  .single.cbs-modern #cb-main #school_basicdata .cbs-data-columns td { font-size:16px; }
  .single.cbs-modern #cb-main .cb-sch-table--fees>h3:not(:first-child) { margin-top:28px; }
}

/* Other fees have long labels. As a two-column sheet at 34% almost half of them wrapped (18% in the single
 * 880px column). The sheet therefore starts at 1280px with a 46% label column: 23% wrap at 1280px and 18% from
 * 1360px. Starting at 1200px would wrap 37%. (Measured on four schools, 65 labels.) */
@media screen and (min-width:1280px) {
  .single.cbs-modern #cb-main #school_other_fee .cbs-data-columns { display:block; }
  .single.cbs-modern #cb-main #school_other_fee .cbs-data-columns>caption { display:block; }
  .single.cbs-modern #cb-main #school_other_fee .cbs-data-columns>tbody { display:block; columns:2; column-gap:24px; column-rule:1px solid #dce6f1; }
  .single.cbs-modern #cb-main #school_other_fee .cbs-data-columns tr {
    display:grid; grid-template-columns:46% minmax(0,1fr); break-inside:avoid; page-break-inside:avoid;
  }
  .single.cbs-modern #cb-main #school_other_fee .cbs-data-columns :is(th,td) {
    display:block; width:auto; padding:18px 22px!important; min-width:0;
  }
  .single.cbs-modern #cb-main #school_other_fee .cbs-data-columns th { font-size:13px; }
  .single.cbs-modern #cb-main #school_other_fee .cbs-data-columns td { font-size:16px; }
}

/* A short laptop window must not trap an oversized sticky photo panel. */
@media screen and (min-width:960px) and (max-height:820px) {
  .single.cbs-modern #cb-main .cbs-life-preview { position:static; }
}

@media screen and (min-width:960px) and (max-width:1099px) {
  .single.cbs-modern #cb-main { --cbs-desk-gutter:28px; }
  .single.cbs-modern #cb-main .cbs-about-spread { column-gap:24px; }
  .single.cbs-modern #cb-main .cbs-study-spread>#honest { padding-right:12px!important; }
  .single.cbs-modern #cb-main .cbs-study-spread>.cbs-school-profile { padding-left:12px!important; }
  .single.cbs-modern #cb-main .cbs-study-spread .cbs-profile-fact { grid-template-columns:116px minmax(0,1fr); gap:14px; padding:20px; }
  .single.cbs-modern #cb-main .cbs-study-spread .cb-sch-meters { padding:24px 20px; }
  .single.cbs-modern #cb-main .cbs-study-spread .cb-sch-meters__row { grid-template-columns:96px auto 1fr auto; gap:8px; }
  .single.cbs-modern #cb-main .cbs-about-spread .cb-sch-info { padding:25px; }
}