/* issue 193 場景 illumio-panels：範例站 Illumio 的靜態編排區塊。只讀官網 token 與 --accent*；深色帶（.pp-section--band）內改用深底文字色。純 CSS。 */

/* ---------- rows：大數字橫列（01 02 03／A B C） ---------- */
.page-blocks .ilp-rows { margin: clamp(2rem, 4vw, 3.5rem) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.page-blocks .ilp-row { display: grid; grid-template-columns: clamp(4.5rem, 10vw, 9.5rem) minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(1rem, 3vw, 3rem); align-items: baseline; padding: clamp(1.75rem, 3.5vw, 3rem) 0; border-bottom: 1px solid var(--line); transition: background-color var(--dur-fast, .2s) var(--ease, ease), padding var(--dur-fast, .2s) var(--ease, ease); }
.page-blocks .ilp-no { color: var(--accent); font-size: clamp(2.5rem, 6vw, 5.75rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.page-blocks .ilp-tag { display: block; margin-bottom: .25rem; color: var(--accent-ink); font-size: .875rem; font-weight: 700; letter-spacing: .06em; }
.page-blocks .ilp-row h3 { margin: 0; color: var(--ink); font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.3; }
.page-blocks .ilp-row p { max-width: 34em; margin: 0; color: var(--muted); line-height: 1.8; }
@media (hover: hover) { .page-blocks .ilp-row:hover { padding-left: 1rem; background: color-mix(in srgb, var(--accent) 8%, transparent); } }
.page-blocks :is(.pp-section--band, .pp-section--image) .ilp-rows { border-top-color: var(--paper); }
.page-blocks :is(.pp-section--band, .pp-section--image) .ilp-row { border-bottom-color: var(--on-dark-line); }
.page-blocks :is(.pp-section--band, .pp-section--image) .ilp-tag { color: var(--accent-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .ilp-row h3 { color: var(--paper); }
.page-blocks :is(.pp-section--band, .pp-section--image) .ilp-row p { color: var(--muted-on-dark); }
@media (max-width: 47.99rem) {
  .page-blocks .ilp-row { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .5rem 1rem; }
  .page-blocks .ilp-row p { grid-column: 2; }
}
@media (max-width: 29.99rem) {
  .page-blocks .ilp-row { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .ilp-row p { grid-column: 1; }
}

/* ---------- pillars：品牌色方格小圖示的三張深色卡 ---------- */
.page-blocks .ilp-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin: clamp(2rem, 4vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.page-blocks .ilp-pillar { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--on-dark-line); border-radius: 1.5rem; background: var(--deep); }
.page-blocks .ilp-pillar h3 { margin: 1.625rem 0 .875rem; color: var(--paper); font-size: clamp(1.5rem, 2.6vw, 2.375rem); line-height: 1.2; }
.page-blocks .ilp-pillar p { margin: 0; color: var(--muted-on-dark); line-height: 1.8; }
.page-blocks .ilp-glyph { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; width: 6rem; }
.page-blocks .ilp-glyph i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--on-dark-line); }
.page-blocks .ilp-glyph i.o { background: var(--accent); }
.page-blocks .ilp-g1 i:nth-child(4n + 3) { margin-left: 6px; }
.page-blocks .ilp-g2 i { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.page-blocks .ilp-g2 i.o { background: var(--accent); }
.page-blocks .ilp-g3 i.x { background: transparent; border: 2px dashed var(--muted-on-dark); }
@media (max-width: 61.99rem) { .page-blocks .ilp-pillars { grid-template-columns: minmax(0, 1fr); } }

/* ---------- cuts：圖在文字上方、帶品牌色角框、高低錯落、自動編號 ---------- */
.page-blocks .ilp-cuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.125rem, 2.5vw, 2rem); margin: clamp(2rem, 4vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.page-blocks .ilp-cut { display: flex; flex-direction: column; gap: .875rem; }
.page-blocks .ilp-cut:nth-child(2) { margin-top: clamp(0rem, 4vw, 3.5rem); }
.page-blocks .ilp-cut:nth-child(3) { margin-top: clamp(0rem, 8vw, 7rem); }
.page-blocks .ilp-win { position: relative; overflow: hidden; border-radius: 1.25rem; background: var(--deeper); box-shadow: var(--elevation-card); }
.page-blocks .ilp-win img { display: block; width: 100%; height: auto; }
.page-blocks .ilp-win::before, .page-blocks .ilp-win::after { content: ""; position: absolute; width: 2.125rem; height: 2.125rem; border: 3px solid var(--accent); pointer-events: none; }
.page-blocks .ilp-win::before { left: .875rem; top: .875rem; border-right: 0; border-bottom: 0; }
.page-blocks .ilp-win::after { right: .875rem; bottom: .875rem; border-left: 0; border-top: 0; }
.page-blocks .ilp-n { color: var(--accent-ink); font-size: .875rem; font-weight: 700; letter-spacing: .14em; }
.page-blocks .ilp-cut h3 { margin: 0; color: var(--ink); font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.3; }
.page-blocks .ilp-cut p { margin: 0; color: var(--muted); line-height: 1.8; }
@media (max-width: 61.99rem) {
  .page-blocks .ilp-cuts { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .ilp-cut:nth-child(n) { margin-top: 0; }
}

/* ---------- steps：圓章加連接線的橫向步驟 ---------- */
.page-blocks .ilp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(2rem, 4vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.page-blocks .ilp-step { padding-right: clamp(1rem, 2.5vw, 2.25rem); }
.page-blocks .ilp-dot { display: flex; align-items: center; margin-bottom: 1.75rem; }
.page-blocks .ilp-dot b { display: grid; flex: none; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--accent); color: var(--accent-on); font-size: 1.25rem; font-weight: 800; }
.page-blocks .ilp-dot s { flex: 1; height: 3px; margin: 0 .875rem; background: var(--accent); text-decoration: none; }
.page-blocks .ilp-step:last-child .ilp-dot s { visibility: hidden; }
.page-blocks .ilp-step h3 { margin: 0; color: var(--ink); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.35; }
.page-blocks .ilp-step p { margin: .75rem 0 0; color: var(--muted); line-height: 1.8; }
@media (max-width: 61.99rem) {
  .page-blocks .ilp-steps { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .ilp-step { padding: 0 0 2.25rem; }
  .page-blocks .ilp-dot s { display: none; }
}

/* ---------- qs：編號問題卡（兩欄） ---------- */
.page-blocks .ilp-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none; }
.page-blocks .ilp-q { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: 1.375rem; background: var(--paper); transition: transform var(--dur-fast, .2s) var(--ease, ease), border-color var(--dur-fast, .2s) var(--ease, ease), box-shadow var(--dur-fast, .2s) var(--ease, ease); }
@media (hover: hover) { .page-blocks .ilp-q:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--elevation-card); } }
.page-blocks .ilp-qn { display: block; color: var(--accent); font-size: 2.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.page-blocks .ilp-q h3 { margin: 1.125rem 0 .625rem; color: var(--ink); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.35; }
.page-blocks .ilp-q p { margin: 0; color: var(--muted); line-height: 1.8; }
@media (max-width: 47.99rem) { .page-blocks .ilp-qs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- split：文字在左、圖在右；條列、補充聲明、獨立強調句依序排在文字欄 ---------- */
.page-blocks .ilp-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .page-blocks .ilp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.page-blocks .ilp-list { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.page-blocks .ilp-list li { position: relative; padding: .75rem 0 .75rem 1.625rem; border-bottom: 1px solid var(--line); color: var(--ink); line-height: 1.7; }
.page-blocks .ilp-list li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: .625rem; height: .625rem; border-radius: 2px; background: var(--accent); }
.page-blocks .ilp-note { margin: 1.25rem 0 0; padding-left: .875rem; border-left: 3px solid var(--accent); color: var(--muted); font-size: .875rem; line-height: 1.7; }
.page-blocks .ilp-kicker { margin: 1rem 0 0; padding-left: .875rem; border-left: 3px solid var(--accent); color: var(--ink); font-weight: 700; line-height: 1.7; }
.page-blocks .ilp-fig { margin: 0; }
.page-blocks .ilp-fig figcaption { margin-top: .75rem; color: var(--muted); font-size: .875rem; line-height: 1.7; }
.page-blocks :is(.pp-section--band, .pp-section--image) .ilp-list li { border-bottom-color: var(--on-dark-line); color: var(--paper); }
.page-blocks :is(.pp-section--band, .pp-section--image) .ilp-note, .page-blocks :is(.pp-section--band, .pp-section--image) .ilp-fig figcaption { color: var(--muted-on-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .ilp-kicker { color: var(--paper); }

/* ---------- cta：深色結尾卡，右側 6×4 方格 ---------- */
.page-blocks .ilp-cta { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 6vw, 6rem); overflow: hidden; border-radius: clamp(1.5rem, 3vw, 2.25rem); background: var(--deeper); color: var(--paper); }
.page-blocks .ilp-cta-eyebrow { display: flex; align-items: center; gap: .875rem; margin: 0 0 1.25rem; color: var(--accent-dark); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.page-blocks .ilp-cta-eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; }
.page-blocks .ilp-cta h2 { margin: 0; color: var(--paper); font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 900; line-height: 1.08; }
.page-blocks .ilp-cta-text { max-width: 28em; margin: 1.375rem 0 0; color: var(--muted-on-dark); line-height: 1.8; }
.page-blocks .ilp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.125rem 1.625rem; margin-top: 2.25rem; }
.page-blocks .ilp-big { min-height: 3.5rem; padding-inline: 2.25rem; font-size: 1.0625rem; }
.page-blocks .ilp-tel { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--paper); font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; text-underline-offset: .375rem; }
.page-blocks .ilp-tel:focus-visible, .page-blocks .ilp-big:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.page-blocks .ilp-cells { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(5px, .8vw, 10px); }
.page-blocks .ilp-cells i { display: block; aspect-ratio: 1; border: 1px solid var(--on-dark-line); border-radius: clamp(6px, 1vw, 12px); background: var(--deep); }
.page-blocks .ilp-cells i.o { border-color: var(--accent); background: var(--accent); }
.page-blocks .ilp-cells b { position: absolute; border-radius: 3px; background: var(--paper); }
.page-blocks .ilp-cells .wv { left: calc(50% - 2px); top: -6px; bottom: -6px; width: 4px; }
.page-blocks .ilp-cells .wh { top: calc(50% - 2px); left: -6px; right: -6px; height: 4px; }
@media (max-width: 61.99rem) { .page-blocks .ilp-cta { grid-template-columns: minmax(0, 1fr); } .page-blocks .ilp-cells { max-width: 26rem; } }
.page-blocks .ilp-big span { margin-left: .5rem; }