/* ===== News Detail OVERRIDE =====
   Scope: /news/<id>/ (detail pages)
   Goal : press-release-ish layout with auto portrait/landscape/square blocks
*/

body.news-detail-page #news-detail.news-detail-wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px clamp(24px, 4vw, 40px) 56px;
  box-sizing: border-box;
}

/* News detail is a reading page: hide list/grid view controls */
body.news-detail-page #btn-news-list,
body.news-detail-page #btn-news-grid{
  display: none !important;
}

body.news-detail-page .news-detail-close{
  position: fixed;
  top: calc(var(--header-h, 60px) + 12px);
  left: 12px;
  z-index: 1200;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;

  color: currentColor;
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 0.4;
}

body.news-detail-page .news-detail-close:hover{
  opacity: 1;
}

body.news-detail-page .news-detail-close-icon{
  display: block;
  width: 20px;
  height: 20px;
}

body.news-detail-page #news-detail .news-kicker{
  opacity: .75;
  font-size: 12px;
  margin-bottom: 10px;
}

body.news-detail-page #news-detail .news-headline{
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}

body.news-detail-page #news-detail .news-body{
  line-height: 1.75;
  font-size: 13px;
}

body.news-detail-page #news-detail .news-body p{
  margin: 0 0 14px;
}

body.news-detail-page #news-detail .news-aa{
  margin: 0 0 16px;
  padding: 0;
  max-width: 100%;
  overflow: visible;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: clamp(9px, 1.15vw, 15px);
  line-height: 1.05;
  white-space: pre;
  tab-size: 2;
}

body.news-detail-page #news-detail .news-aa code{
  display: block;
  font: inherit;
  white-space: inherit;
  overflow: visible;
}

body.news-detail-page #news-detail .news-links{
  margin-top: 16px;
  font-size: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

body.news-detail-page #news-detail .news-back{
  margin-top: 22px;
  opacity: .8;
}

body.news-detail-page #news-detail .news-back a{
  color: currentColor;
  text-decoration: none;
}

body.news-detail-page #news-detail .news-image-story{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
}

body.news-detail-page #news-detail .news-image-story__media{
  margin: 0 0 18px;
  width: 100%;
}

body.news-detail-page #news-detail .news-image-story__media img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
}

body.news-detail-page #news-detail .news-image-story .news-headline{
  margin: 0 0 2px;
  text-align: left;
}

body.news-detail-page #news-detail .news-image-story .news-kicker{
  margin: 0 0 8px;
  text-align: left;
  font-size: 11px;
  opacity: .65;
}

body.news-detail-page #news-detail .news-image-story .news-body{
  text-align: left;
}

body.news-detail-page #news-detail .news-blocks{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.news-detail-page #news-detail .news-block{
  display: grid;
  gap: 14px;
  align-items: start;
}

body.news-detail-page #news-detail .news-block__media img{
  width: 100%;
  height: auto;
  display: block;

  /* ドラッグ無効 */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;

  /* 安全柵：縦に伸びすぎてページを壊さない */
  max-height: 72vh;

  /* 比率維持。横長想定なら cover が一番「記事っぽい」 */
  object-fit: cover;
  object-position: 50% 50%;
}

/* hero only: cap height to avoid huge square images */
body.news-detail-page #news-detail .news-blocks > .news-block:first-child .news-block__media img{
  width: 100%;
  height: var(--news-detail-hero-h, 520px);
  object-fit: cover;
  object-position: 50% 50%;
}

/* landscape: image top */
body.news-detail-page #news-detail .news-block.is-landscape{
  grid-template-columns: 1fr;
}

/* portrait/square: left image, right text */
body.news-detail-page #news-detail .news-block.is-portrait,
body.news-detail-page #news-detail .news-block.is-square{
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  column-gap: 22px;
}

@media (max-width: 820px){
  body.news-detail-page #news-detail .news-block.is-portrait,
  body.news-detail-page #news-detail .news-block.is-square{
    grid-template-columns: 1fr;
  }
}

body.news-detail-page #news-detail .news-caption{
  font-size: 12px;
  opacity: 0.8;
  margin: 0 0 10px;
  line-height: 1.4;
}

body.news-detail-page #news-detail .news-block-body p{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.75;
}

/* ===== /News Detail OVERRIDE ===== */

/* ===== News Page OVERRIDE: Grid overlay =====
   Scope: /news/ (Grid)
   Policy:
   - PC/Tablet only: keep News-specific grid presentation
   - SP: fall back to Works grid presentation from css/style.css
*/

/* Grid columns override for News only
   - 980px付近（= 900〜1199px）を 6列にする
*/
@media screen and (min-width: 900px) and (max-width: 1199px){
  body.news-page{
    --grid-cols: 6;
    --grid-columns: 6;
  }
}

@media screen and (min-width: 821px) {
  /* Card frame */
  body.news-page #gallery-container.grid-view .gallery-item{
    position: relative;
    overflow: hidden;            /* zoom stays inside card */
    background: #fff;            /* fallback behind logo */
  }

  body.news-page #gallery-container.grid-view .gallery-item .thumb-frame{
    z-index: 1;
  }

  /* ===== News no-thumb (fallback logo) : Grid ===== */
  body.news-page #gallery-container.grid-view .gallery-item.no-thumb{
    display: grid;
    place-items: center;
    overflow: hidden; /* hover zoom等の事故防止 */
  }

  body.news-page #gallery-container.grid-view .gallery-item.no-thumb::before{
    content: "";
    width: calc(100% * var(--news-fallback-logo-scale, 0.58));
    max-width: var(--news-fallback-logo-max-w, 140px);
    aspect-ratio: 3 / 1;
    background-image: url("/news/_fallback/logo_adesignerinc.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
  }
  /* ===== /News no-thumb (fallback logo) : Grid ===== */

  body.news-page #gallery-container.grid-view .gallery-item.no-thumb:hover::before{
    transform: scale(var(--news-card-zoom, 1.06));
    transition: transform 220ms ease;
  }

  /* Overlay band */
    body.news-page #gallery-container.grid-view .gallery-item .item-info{
      display: block;
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      min-height: 0;
      padding: 0;
      box-sizing: border-box;
      background: none;
      color: #111;
      text-shadow: none;
    }

    body.news-page #gallery-container.grid-view .gallery-item .item-info::after{
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 20%;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.40) 0%,
          rgba(255, 255, 255, 0) 100%
        );
    }

    body.news-page #gallery-container.grid-view .gallery-item .item-info h3{
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 10%;
      transform: translateY(50%);
      z-index: 1;

      margin: 0;
      padding: 0;

      color: #111;
      text-align: center;
      font-size: var(--news-grid-title-size, 12px);
      line-height: var(--news-grid-title-lh, 1.12);
      font-weight: var(--news-grid-title-weight, 500);
      letter-spacing: 0;
      text-shadow: none;

      white-space: normal;
      overflow: hidden;
      text-overflow: clip;

      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      max-height: calc(var(--news-grid-title-lh, 1.12) * 1em * 2);
    }

    body.news-page #gallery-container.grid-view .gallery-item .item-info .news-date{
      position: absolute;
      top: var(--news-grid-date-top, 8px);
      right: var(--news-grid-date-right, 9px);
      bottom: auto;
      transform: none;
      z-index: 1;

      margin: 0;
      padding: 0;

      color: #111;
      text-align: right;
      font-size: var(--news-grid-date-size, 9px);
      line-height: var(--news-grid-date-lh, 1);
      letter-spacing: 0;
      opacity: var(--news-grid-date-opacity, 0.72);

      background: transparent;
      border-radius: 0;
      text-shadow: none;

      white-space: nowrap;
    }

    body.news-page #gallery-container.grid-view .gallery-item .item-info .news-summary{
      display: none !important;
    }
}
/* ===== /News Page OVERRIDE: Grid (edge-to-edge) ===== */

/* ===== News Page OVERRIDE: List =====
   Scope: /news (List)
   Goal : keep current News List, only align date/title start positions
*/

body.news-page #gallery-container.list-view .gallery-item{
  display: flex;
  align-items: center;
  gap: 12px;
  height: auto;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* list thumb: force same box model as Works List */
body.news-page #gallery-container.list-view .gallery-item .thumb-frame{
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: block;
}

body.news-page #gallery-container.list-view .gallery-item img.thumb-img{
  width: 48px;
  height: 48px;
  object-fit: cover;
  object-position: center;
  flex: 0 0 auto;
  margin: 0;
  display: block;
}

/* ===== News no-thumb (fallback logo) : List ===== */
body.news-page #gallery-container.list-view .gallery-item.no-thumb{
  display: flex;           /* Works List と同じ骨格 */
  align-items: center;
}

body.news-page #gallery-container.list-view .gallery-item.no-thumb::before{
  content: "";
  width: 48px;
  height: 48px;
  margin: 0;
  background-image: url("/news/_fallback/logo_adesignerinc.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
  flex: 0 0 auto;
}
/* ===== /News no-thumb (fallback logo) : List ===== */

/* info: keep current one-line layout */
body.news-page #gallery-container.list-view .gallery-item .item-info{
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  padding: 0;
}

/* title */
body.news-page #gallery-container.list-view .gallery-item .item-info h3{
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 14px;
  font-weight: 600;
}

/* Works Listに倣って：title 1行のみ */
body.news-page #gallery-container.list-view .gallery-item .item-info p{
  display: block;
  margin: 0;
}

body.news-page #gallery-container.list-view .gallery-item .item-info p:nth-of-type(2){
  display: none;
}

@media screen and (min-width: 821px) {
  body.news-page{
    --grid-columns: 6;
  }
}

@media screen and (max-width: 820px) {
  body.news-page{
    --grid-columns: 3;
    --news-grid-ov-min-h: 40px;
    --news-grid-ov-pad-t: 8px;
    --news-grid-ov-pad-r: 8px;
    --news-grid-ov-pad-b: 8px;
    --news-grid-ov-pad-l: 8px;
    --news-grid-title-size: 10px;
    --news-grid-title-lh: 1.15;
    --news-grid-title-weight: 600;
    --news-grid-date-size: 8px;
    --news-grid-date-lh: 1;
    --news-grid-date-right: 6px;
    --news-grid-date-bottom: 6px;
    --news-grid-date-chip-pad-y: 1px;
    --news-grid-date-chip-pad-x: 3px;
    --news-grid-date-chip-radius: 999px;
  }

  body.news-page #gallery-container.grid-view .gallery-item{
    position: relative;
    overflow: hidden;
    background: #fff;
  }

  body.news-page #gallery-container.grid-view .gallery-item.no-thumb{
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  body.news-page #gallery-container.grid-view .gallery-item.no-thumb::before{
    content: "";
    width: calc(100% * var(--news-fallback-logo-scale, 0.58));
    max-width: var(--news-fallback-logo-max-w, 140px);
    aspect-ratio: 3 / 1;
    background-image: url("/news/_fallback/logo_adesignerinc.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
  }

  body.news-page #gallery-container.grid-view .gallery-item.no-thumb:hover::before{
    transform: scale(var(--news-card-zoom, 1.06));
    transition: transform 220ms ease;
  }

    body.news-page #gallery-container.grid-view .gallery-item .item-info{
      display: block;
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      min-height: 0;
      padding: 0;
      box-sizing: border-box;
      background: none;
      color: #111;
      text-shadow: none;
    }

    body.news-page #gallery-container.grid-view .gallery-item .item-info::after{
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 20%;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.40) 0%,
          rgba(255, 255, 255, 0) 100%
        );
    }

    body.news-page #gallery-container.grid-view .gallery-item .item-info h3{
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 10%;
      transform: translateY(50%);
      z-index: 1;

      margin: 0;
      padding: 0;

      color: #111;
      text-align: center;
      font-size: var(--news-grid-title-size, 10px);
      line-height: var(--news-grid-title-lh, 1.12);
      font-weight: var(--news-grid-title-weight, 500);
      letter-spacing: 0;
      text-shadow: none;

      white-space: normal;
      overflow: hidden;
      text-overflow: clip;

      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      max-height: calc(var(--news-grid-title-lh, 1.12) * 1em * 2);
    }

    body.news-page #gallery-container.grid-view .gallery-item .item-info .news-date{
      position: absolute;
      top: var(--news-grid-date-top, 6px);
      right: var(--news-grid-date-right, 6px);
      bottom: auto;
      z-index: 1;

      margin: 0;
      padding: 0;

      color: #111;
      text-align: right;
      font-size: var(--news-grid-date-size, 8px);
      line-height: var(--news-grid-date-lh, 1);
      letter-spacing: 0;
      opacity: var(--news-grid-date-opacity, 0.72);

      background: transparent;
      border-radius: 0;
      text-shadow: none;

      white-space: nowrap;
    }

    body.news-page #gallery-container.grid-view .gallery-item .item-info .news-summary{
      display: none !important;
    }
}

/* ===== /News Page OVERRIDE: List ===== */