/* site-pages.css — public HTML page shell + hero (board list parity) */
/* 2026-06-26: Tailwind-aligned tokens (complements site-tailwind.css) */
:root {
  --site-page-radius: 0.75rem;
  --site-page-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --site-page-shadow-hover: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.page-shell { width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; }
.page-shell:has(.is-hero-full-width),
.page-shell:has(.is-widget-full-width),
.page-shell:has(.is-page-hero-full-width) { overflow-x: visible; }
.page-shell:has(.page-grid > .is-hero-full-width:first-child),
.page-shell:has(.page-grid > .is-widget-full-width:first-child) { padding-top: 0; }
/* 2026-06-11: Align page content width with --site-content-max-width (header/footer/site-main) */
.page-shell--pixel { width: 100%; max-width: var(--site-content-max-width, 1200px); margin: 0 auto; padding-top: 0; padding-bottom: 24px; box-sizing: border-box; }
.board-shell { width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; }
.board-shell:has(.is-page-hero-full-width) { overflow-x: visible; }
.board-shell--pixel { width: 100%; max-width: var(--site-content-max-width, 1200px); margin: 0 auto; padding-top: 0; padding-bottom: 24px; box-sizing: border-box; }
.board-shell--pixel:has(.board-fab) { padding-bottom: 72px; }
.board-shell--pixel > .board-hero.page-hero--bar,
.board-shell--pixel > .board-hero.page-hero--bar:first-child { margin: 0; }
.board-shell--pixel > .board-hero.page-hero--bar + .board-toolbar { margin-top: 20px; }
.site-main:has(> .board-shell--pixel > .board-hero.page-hero--bar) { padding-top: 0; }
.site-main > .board-shell--pixel:first-child { margin-top: 0; padding-top: 0; }
.site-main:has(.board-shell .is-page-hero-full-width) { overflow-x: visible; }
.site-body:has(.board-shell .is-page-hero-full-width) { overflow-x: clip; }
/* site-pages.css — 2026-06-12: page hero title + right breadcrumb bar */
.page-hero.page-hero--bar { margin: 0; box-sizing: border-box; background: color-mix(in srgb, var(--site-accent) 5%, var(--site-surface)); border-bottom: 1px solid color-mix(in srgb, var(--site-border) 85%, transparent); }
.page-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: 100%; box-sizing: border-box; padding: 0 20px 18px; }
.page-hero-main { flex: 1 1 240px; min-width: 0; }
.page-hero.page-hero--bar .board-hero-title { margin: 0; font-size: clamp(1.2rem, 3.2vw, 1.55rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; word-break: break-word; }
.page-hero.page-hero--bar:not(.has-hero-text-color) .board-hero-title { color: var(--site-text); }
.page-hero.page-hero--bar.has-hero-text-color .board-hero-title { color: var(--hero-text-custom); }
.page-hero.page-hero--bar.has-hero-text-color .page-hero-kicker { color: color-mix(in srgb, var(--hero-text-custom) 86%, var(--site-accent)); }
.page-hero.page-hero--bar.has-hero-text-color .page-hero-desc { color: color-mix(in srgb, var(--hero-text-custom) 82%, #ffffff); }
.page-hero.has-hero-overlay { position: relative; overflow: hidden; }
.page-hero-breadcrumb { flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 0.82rem; line-height: 1.4; color: var(--site-muted); }
.page-hero-breadcrumb-link { display: inline-flex; align-items: center; gap: 5px; color: var(--site-muted); text-decoration: none; white-space: nowrap; }
.page-hero-breadcrumb-link i { font-size: 0.72rem; opacity: 0.82; line-height: 1; }
.page-hero-breadcrumb-link:hover { color: var(--site-accent); text-decoration: none; }
.page-hero-breadcrumb-link:hover span { text-decoration: underline; }
.page-hero-breadcrumb-link.is-current { color: var(--site-text); font-weight: 600; }
.page-hero-breadcrumb-link.is-current i { color: var(--site-accent); opacity: 1; }
.page-hero-breadcrumb-sep { color: var(--site-muted); opacity: 0.55; user-select: none; }
.page-hero-side { flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
/* site-pages.css — 2026-06-26: rich page hero (kicker + title + description, breadcrumb on right) */
.page-hero.page-hero--rich { position: relative; overflow: hidden; }
.page-hero.has-hero-min-height { min-height: var(--hero-min-height); box-sizing: border-box; }
.page-hero.has-hero-min-height .page-hero-inner { min-height: var(--hero-min-height); box-sizing: border-box; }
.page-hero.has-hero-min-height.page-hero--rich .page-hero-inner { align-items: center; }
.page-hero.has-hero-bg,
.page-hero.has-hero-overlay { background: transparent; border-bottom: 0; isolation: isolate; }
.page-hero.has-hero-bg::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var(--hero-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 0; }
.page-hero.has-hero-overlay::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--hero-overlay-bg, rgba(0,0,0,0.4)); pointer-events: none; border-radius: 0; }
.page-hero.has-hero-bg .page-hero-inner,
.page-hero.has-hero-overlay .page-hero-inner { position: relative; z-index: 2; }
/* site-pages.css — 2026-06-29: HTML subtitle content above bg/overlay layers */
.page-hero.has-hero-bg .page-hero-main,
.page-hero.has-hero-overlay .page-hero-main { position: relative; z-index: 3; }
.page-hero.has-hero-bg .page-hero-side,
.page-hero.has-hero-overlay .page-hero-side { position: relative; z-index: 3; }
.page-hero.has-hero-bg .page-hero-deco,
.page-hero.has-hero-overlay .page-hero-deco { z-index: 0; }
.page-hero.has-hero-bg .page-hero-kicker,
.page-hero.has-hero-overlay .page-hero-kicker { position: relative; z-index: 4; }
.page-hero.has-hero-bg .page-hero-desc,
.page-hero.has-hero-overlay .page-hero-desc { position: relative; z-index: 4; }
.page-hero.has-hero-bg .page-hero-desc--html,
.page-hero.has-hero-overlay .page-hero-desc--html { position: relative; z-index: 5; }
.page-hero.has-hero-bg .page-hero-desc--html > :not(style),
.page-hero.has-hero-overlay .page-hero-desc--html > :not(style) { position: relative; z-index: 1; }
.page-hero.has-hero-bg .page-hero-breadcrumb,
.page-hero.has-hero-overlay .page-hero-breadcrumb { position: relative; z-index: 4; }
.page-hero.has-hero-bg .board-hero-title,
.page-hero.has-hero-overlay .board-hero-title { position: relative; z-index: 4; }
.page-hero.has-hero-bg .page-hero-kicker,
.page-hero.has-hero-bg .board-hero-title,
.page-hero.has-hero-bg .page-hero-desc,
.page-hero.has-hero-bg .page-hero-breadcrumb,
.page-hero.has-hero-bg .page-hero-breadcrumb-link,
.page-hero.has-hero-bg .page-hero-breadcrumb-sep,
.page-hero.has-hero-overlay .page-hero-kicker,
.page-hero.has-hero-overlay .board-hero-title,
.page-hero.has-hero-overlay .page-hero-desc,
.page-hero.has-hero-overlay .page-hero-breadcrumb,
.page-hero.has-hero-overlay .page-hero-breadcrumb-link,
.page-hero.has-hero-overlay .page-hero-breadcrumb-sep { text-shadow: 0 1px 8px rgba(15, 23, 42, 0.35); }
.page-hero.has-hero-text-color .page-hero-breadcrumb-link:hover { color: var(--hero-text-custom); }
.page-hero.page-hero--rich.has-hero-text-color .board-hero-title { color: var(--hero-text-custom); }
.page-hero.page-hero--rich.has-hero-text-color .page-hero-kicker { color: color-mix(in srgb, var(--hero-text-custom) 86%, var(--site-accent)); }
.page-hero.page-hero--rich.has-hero-text-color .page-hero-desc { color: color-mix(in srgb, var(--hero-text-custom) 82%, #ffffff); }
.page-hero.page-hero--rich.has-hero-text-color .page-hero-breadcrumb,
.page-hero.page-hero--rich.has-hero-text-color .page-hero-breadcrumb-link,
.page-hero.page-hero--rich.has-hero-text-color .page-hero-breadcrumb-sep { color: color-mix(in srgb, var(--hero-text-custom) 78%, #ffffff); }
.page-hero.page-hero--rich.has-hero-text-color .page-hero-breadcrumb-link.is-current { color: var(--hero-text-custom); font-weight: 600; }
.page-hero.page-hero--rich.has-hero-text-color .page-hero-breadcrumb-link.is-current i { color: color-mix(in srgb, var(--hero-text-custom) 82%, var(--site-accent)); opacity: 1; }
.page-hero.page-hero--rich.has-hero-text-color .page-hero-breadcrumb-sep { opacity: 1; }
.page-hero.page-hero--rich.has-hero-text-color .page-hero-breadcrumb-link:hover { color: var(--hero-text-custom); }
/* Theme readability text when custom color is not set — 2026-06-29 */
.page-hero.page-hero--rich:not(.has-hero-text-color) .board-hero-title { color: color-mix(in srgb, var(--site-text) 92%, var(--site-accent)); }
.page-hero.page-hero--rich:not(.has-hero-text-color) .page-hero-kicker { color: var(--site-accent); }
.page-hero.page-hero--rich:not(.has-hero-text-color) .page-hero-desc { color: var(--site-muted); }
.page-hero:not(.has-hero-text-color) .page-hero-breadcrumb,
.page-hero:not(.has-hero-text-color) .page-hero-breadcrumb-link,
.page-hero:not(.has-hero-text-color) .page-hero-breadcrumb-sep { color: var(--site-muted); }
.page-hero:not(.has-hero-text-color) .page-hero-breadcrumb-link.is-current { color: var(--site-text); font-weight: 600; }
.page-hero:not(.has-hero-text-color) .page-hero-breadcrumb-link.is-current i { color: var(--site-accent); opacity: 1; }
.page-hero:not(.has-hero-text-color) .page-hero-breadcrumb-link:hover { color: var(--site-accent); }
.page-hero.page-hero--rich .page-hero-inner { padding: clamp(10px, 4vw, 20px) clamp(18px, 5vw, 26px); }
.page-hero.page-hero--rich .page-hero-main { flex: 1 1 360px; min-width: 0; }
.page-hero-kicker { margin: 0 0 8px; font-size: 0.8rem; letter-spacing: 0.1em; line-height: 1.3; }
.page-hero.page-hero--rich:not(.has-hero-text-color) .page-hero-kicker { color: var(--site-accent); }
.page-hero.page-hero--rich .board-hero-title { margin: 0 0 10px; font-size: clamp(1.85rem, 4vw, 1.85rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.page-hero-desc { margin: 0; max-width: 42rem; font-size: clamp(0.92rem, 2vw, 1rem); font-weight: 400; line-height: 1.55; }
.page-hero-desc--html { max-width: none; position: relative; z-index: 5; }
.page-hero-desc--html h1,
.page-hero-desc--html h2,
.page-hero-desc--html h3 { word-break: keep-all; overflow-wrap: break-word; }
.page-hero-desc--html p { margin: 0 0 0.5em; }
.page-hero-desc--html p:last-child { margin-bottom: 0; }
/* site-pages.css — 2026-06-29: square hero overlay corners (no pill shape) */
.page-hero.page-hero--rich.has-hero-bg,
.page-hero.page-hero--rich.has-hero-overlay { border-radius: 0; }
.page-hero.page-hero--rich:not(.has-hero-text-color) .page-hero-desc { color: var(--site-muted); }
.page-hero.page-hero--rich .page-hero-side { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; min-width: 0; padding-left: 16px; z-index: 1; }
.page-hero.page-hero--rich .page-hero-breadcrumb { justify-content: flex-end; }
.page-hero-deco { position: absolute; right: -24px; top: 0; width: 140px; height: 140px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--site-muted) 22%, transparent); pointer-events: none; opacity: 0.55; }
/* site-pages.css — 2026-06-26: PC only — breadcrumb bottom-right beside tall title block */
@media (min-width: 1025px) {
  .page-hero.page-hero--rich:not(.has-hero-min-height) .page-hero-inner { align-items: stretch; }
  .page-hero.page-hero--rich .page-hero-side { align-self: stretch; }
}
.page-hero-deco::before, .page-hero-deco::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--site-muted) 18%, transparent); }
.page-hero-deco::before { inset: 24px; }
.page-hero-deco::after { inset: 48px; }
/* site-pages.css — 2026-06-26: full-width page hero background with content-aligned inner */
.site-body:has(.is-page-hero-full-width) { overflow-x: clip; }
.page-hero.is-page-hero-full-width { position: relative; left: 50%; width: 100vw; max-width: 100vw; transform: translateX(-50%); }
.page-hero.is-page-hero-full-width .page-hero-inner { max-width: var(--site-content-max-width, 1200px); margin: 0 auto; }
/* site-pages.css — 2026-06-17: empty page grid placeholder (no widgets) */
.page-grid-empty { grid-column: 1 / -1; width: 100%; margin: 0; padding: 48px 20px; text-align: center; color: var(--site-muted); font-size: 0.95rem; line-height: 1.6; box-sizing: border-box; border-radius: var(--site-page-radius); }

/* site-pages.css — 2026-06-30: tablet/mobile — shorter hero ratio, content-aligned padding */
@media (max-width: 1024px) {
  .page-hero.page-hero--rich .page-hero-inner,
  .page-hero.page-hero--bar .page-hero-inner { flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: clamp(12px, 2.8vw, 18px) max(20px, 5vw) clamp(14px, 3vw, 20px); }
  .page-hero.is-page-hero-full-width .page-hero-inner { width: min(100%, var(--site-content-max-width, 1200px)); box-sizing: border-box; }
  .page-hero.has-hero-min-height { min-height: min(var(--hero-min-height, 0px), clamp(104px, 34vw, 220px)); }
  .page-hero.has-hero-min-height .page-hero-inner,
  .page-hero.has-hero-min-height.page-hero--rich .page-hero-inner { align-items: stretch; justify-content: center; min-height: min(var(--hero-min-height, 0px), clamp(104px, 34vw, 220px)); }
  .page-hero.page-hero--rich.has-hero-bg .page-hero-inner,
  .page-hero.page-hero--rich.has-hero-overlay .page-hero-inner { min-height: clamp(96px, 30vw, 188px); justify-content: center; }
  .page-hero.page-hero--rich .page-hero-main,
  .page-hero.page-hero--bar .page-hero-main { flex: 0 1 auto; width: 100%; min-width: 0; max-width: 100%; text-align: left; }
  .page-hero.page-hero--rich .page-hero-side,
  .page-hero.page-hero--bar .page-hero-side { width: 100%; align-self: auto; align-items: flex-start; justify-content: flex-start; padding-left: 0; margin-top: 0; min-height: 0; }
  .page-hero.page-hero--rich .page-hero-breadcrumb,
  .page-hero.page-hero--bar .page-hero-breadcrumb { justify-content: flex-start; align-items: center; width: 100%; row-gap: 4px; }
  .page-hero-breadcrumb-link { white-space: normal; max-width: 100%; }
  .page-hero-breadcrumb-link span { overflow-wrap: anywhere; word-break: keep-all; }
  .page-hero.page-hero--rich .board-hero-title,
  .page-hero.page-hero--bar .board-hero-title { word-break: keep-all; overflow-wrap: break-word; }
  .page-hero.page-hero--rich .board-hero-title { font-size: clamp(1.45rem, 4.8vw, 1.85rem); margin-bottom: 6px; }
  .page-hero-kicker { letter-spacing: 0.08em; margin-bottom: 6px; }
  .page-hero-deco { display: none; }
}

@media (max-width: 768px) {
  .page-shell--pixel { padding-bottom: 18px; }
  .board-shell--pixel { padding-bottom: 18px; }
  .board-shell--pixel:has(.board-fab) { padding-bottom: 72px; }
  .page-hero.page-hero--bar .page-hero-inner,
  .page-hero.page-hero--rich .page-hero-inner { gap: 6px; padding: clamp(10px, 2.6vw, 14px) max(20px, 5.5vw) clamp(12px, 2.8vw, 16px); }
  .page-hero.has-hero-min-height { min-height: min(var(--hero-min-height, 0px), clamp(88px, 30vw, 168px)); }
  .page-hero.has-hero-min-height .page-hero-inner { min-height: min(var(--hero-min-height, 0px), clamp(88px, 30vw, 168px)); }
  .page-hero.page-hero--rich.has-hero-bg .page-hero-inner,
  .page-hero.page-hero--rich.has-hero-overlay .page-hero-inner { min-height: clamp(84px, 28vw, 152px); }
  .page-hero.page-hero--bar .board-hero-title { font-size: clamp(1.05rem, 4.5vw, 1.35rem); }
  .page-hero.page-hero--rich .board-hero-title { font-size: clamp(1.28rem, 5.2vw, 1.62rem); margin-bottom: 4px; }
  .page-hero-kicker { font-size: 0.72rem; margin-bottom: 4px; }
  .page-hero-desc { font-size: 0.88rem; line-height: 1.5; }
  .page-hero-breadcrumb { font-size: 0.78rem; gap: 4px; }
  .page-hero-breadcrumb-link i { font-size: 0.68rem; }
  .page-grid-empty { padding: 36px 16px; font-size: 0.9rem; }
}