/* ===== 解説記事・調査レポート（INSIGHTS）— PL-03 list + TOP section (v1.3) =====
   The article card (user-approved v1.6, DESIGN CLOSED／LOCKED) is built only from existing tokens and existing component values:
     card frame   = TOP S02 card / S04 group card (--panel, 1px --panel-border, radius 22px, shadow 0 18px 40px rgba(20,14,40,.06))
     thumbnail    = 1200×630 image at the top of the card, full card width, corners follow the card (F-08)
     category     = S04 group tag (.group-cat: pill, 1px --orbit-strong, 13px/500, --text-2)
     date         = TOP お知らせ date (#news .news-date: 15px/500, .04em, tabular numerals, --text-2)
     title        = S02 card h3 role (Zen Old Mincho via --display, 700, .02em, --text) — always shown in full
     summary      = S02 card text role (Noto Sans JP via --body, 14.5px/500, line-height 2.1, .03em, --text-2) — 3 lines at most (F-09)
     read link    = existing .link-line (unchanged)
   TOP section frame = the TOP お知らせ section (same light tokens, --lt-a background, top rule, 96px padding).
   */

/* TOP: the same light token set as #s02 / #s04 / #news (copied verbatim from the TOP stylesheet) */
:root[data-l="2"][data-c="3"] #insights{
  --text:#062530; --text-2:#3C5C66; --panel:#FFFFFF; --panel-border:rgba(6,37,48,.12);
  --orbit:rgba(10,80,100,.12); --orbit-strong:rgba(10,80,100,.34); --glyph:#14917F; --dot-glow:rgba(20,145,127,.35);
  --link:#0A6B60; --cta2-ink:#062530; --cta2-border:rgba(6,37,48,.5); --cta2-hover:rgba(6,37,48,.05)}
#page-top section#insights{position:relative;padding-block:96px;background:var(--lt-a);border-top:1px solid var(--panel-border)}
#page-top #insights :focus-visible{outline-color:var(--link)}
#insights .ins-more-row{display:flex;justify-content:flex-end;margin-top:32px}

/* card grid (F-09): 1440px and wider 3 columns / 1024–1439px 2 columns / 768–1023px 2 columns while each card keeps 320px,
   otherwise 1 / 767px and narrower 1 column. Empty tracks are kept, so a single article keeps one column's width. */
.ins-grid{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.ins-grid:focus{outline:none}
@media (min-width:1440px){.ins-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1023px){.ins-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}}
@media (max-width:767px){.ins-grid{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:32px}}
#is-s02 .ins-grid{margin:0 auto;max-width:1100px}
/* the list page shell sets margins with !important; keep the list centred at the お知らせ一覧 list width (1100px) */
html body #page-insights #is-s02 .ins-grid{margin-left:auto!important;margin-right:auto!important;margin-top:0!important;max-width:1100px!important;width:100%!important}

.ins-card{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;overflow:hidden;background:var(--panel);border:1px solid var(--panel-border);
  border-radius:22px;box-shadow:0 18px 40px rgba(20,14,40,.06)}
.ins-thumb{display:block;aspect-ratio:1200/630;background:#03161E;border-bottom:1px solid var(--panel-border)}
.ins-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ins-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:22px 26px 22px}
.ins-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px}
.ins-cat{display:inline-block;padding:2px 12px;border:1px solid var(--orbit-strong);border-radius:999px;font:500 13px/1.9 var(--body);color:var(--text-2)}
.ins-date{font:500 15px/1.9 var(--body);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--text-2)}
.ins-title{margin:0 0 10px;font:700 19px/1.65 var(--display);letter-spacing:.02em;color:var(--text)}
.ins-title a{color:inherit;text-decoration:none}
.ins-title a:hover{text-decoration:underline;text-underline-offset:4px}
.ins-excerpt{margin:0 0 16px;font:500 14.5px/2.1 var(--body);letter-spacing:.03em;color:var(--text-2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.ins-read{margin-top:auto;align-self:flex-start}
@media (max-width:767px){
  .ins-body{padding:20px 20px 18px}
  .ins-title{font-size:18px}
  #insights .ins-more-row{justify-content:flex-start;margin-top:24px}
  #insights a.link-line{display:inline-flex;align-items:center;min-height:44px}
}

/* list page: the お知らせ一覧 shell sets display / p / a.link-line margins with !important — the card keeps the TOP layout */
html body #page-insights #is-s02 .ins-grid .ins-card{display:flex!important;flex-direction:column!important;padding:0!important}
html body #page-insights #is-s02 .ins-grid .ins-body{display:flex!important;flex-direction:column!important}
html body #page-insights #is-s02 .ins-grid .ins-meta{display:flex!important;margin:0 0 12px!important}
html body #page-insights #is-s02 .ins-grid .ins-title{margin:0 0 10px!important}
html body #page-insights #is-s02 .ins-grid .ins-excerpt{display:-webkit-box!important;margin:0 0 16px!important}
html body #page-insights #is-s02 .ins-grid .ins-read{margin:auto 0 0!important;align-self:flex-start!important}
html body #page-insights #is-s02 .ins-grid .ins-thumb,html body #page-insights #is-s02 .ins-grid .ins-thumb img{display:block!important}

/* ===== v1.5 ===== */
/* TOP: summary 2 lines at most (the list keeps 3) */
#insights .ins-excerpt{-webkit-line-clamp:2;line-clamp:2}
/* TOP, 1023px and narrower, 2 or more articles: a hand-swiped row (same pattern as TOP S02 on phones: one card + the edge of the
   next, scroll-snap, no autoplay). Card width: 768–1023px 62% of the row (one card + the edge of the next); 767px and
   narrower the row minus 44px (as TOP S02). With 1 article the grid above is kept. */
@media (max-width:1023px){
  #insights .ins-grid.is-slider{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:62%;gap:16px;align-items:stretch;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 14px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  #insights .ins-grid.is-slider::-webkit-scrollbar{display:none}
  @media (max-width:767px){#insights .ins-grid.is-slider{grid-auto-columns:calc(100% - 44px)}}
  #insights .ins-grid.is-slider > .ins-card{scroll-snap-align:start}
  #insights .ins-grid.is-slider:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
  /* previous / next + position: the values of TOP S02's phone carousel controls (#s02 .mb-car-nav) */
  #insights .ins-car-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px}
  #insights .ins-car-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--panel-border);background:transparent;color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  #insights .ins-car-nav button:disabled{opacity:.35;cursor:default}
  #insights .ins-car-nav button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
  #insights .ins-car-pos{min-width:4.5em;text-align:center;font-size:14px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--text-2)}
}

/* ===== v1.6 §2 (user-approved): PL-03 pagination centred in the article list area, at every width.
   Only the horizontal alignment changes; button size, colours, spacing, selected state and behaviour are unchanged.
   The pager stays hidden for 1–9 articles (insights.js). ===== */
html body #page-insights #is-s02 .pager:not([hidden]){justify-content:center!important}