/* Shared details for legacy CMS-backed pages. */
.language-switch { position: relative; z-index: 20; }
.language-picker { position: relative; }
.language-picker > summary { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; color: #b7c6b6; background: transparent; font: 600 14px 'DM Sans',sans-serif; line-height: 1; list-style: none; cursor: pointer; white-space: nowrap; transition: color .16s ease, background-color .16s ease; }
.home-refined .language-picker > summary { min-height: 42px; padding: 0 8px; line-height: 1; }
.language-picker > summary::-webkit-details-marker { display: none; }
.language-picker > summary:hover,.language-picker[open] > summary { border-color: transparent; color: #edf1e8; background: #1b2b21; }
.home-refined .language-picker > summary:focus-visible,.language-picker > summary:focus-visible { outline: 2px solid #c7ff4f; outline-offset: 1px; box-shadow: none; }
.language-picker-chevron { color: #c7ff4f; font-size: 12px; transition: transform .18s ease; }
.language-picker[open] .language-picker-chevron { transform: rotate(180deg); }
.language-picker-panel { position: absolute; z-index: 100; top: calc(100% + 8px); right: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; width: min(260px,calc(100vw - 32px)); max-height: min(220px,calc(100svh - 108px)); overflow-y: auto; overscroll-behavior: contain; padding: 7px; border: 1px solid #405244; border-radius: 10px; background: #19251d; box-shadow: 0 12px 30px #0006; }
.language-picker-heading { display: none; }
.language-picker-panel > a { min-width: 0; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 9px; border-radius: 6px; color: #eaf0e6; font-size: 13px; line-height: 1.25; }
.language-picker-panel > a:hover,.language-picker-panel > a[aria-current="page"] { background: #26382a; }
.language-picker-panel > a[aria-current="page"] { box-shadow: inset 0 0 0 1px #536c4f; }
.language-picker-panel > a[aria-current="page"] b { color: #c7ff4f; }
.language-picker-panel > a b { color: #a9bbad; font: 600 10px var(--mono); }
.language-picker-divider { height: 1px; display: block; margin: 5px 8px; background: #35423a; }
.header > .language-picker { flex: 0 0 auto; }
.header > .language-picker > summary { border-color: transparent; }
.header > .language-picker .language-picker-panel { top: calc(100% + 9px); }

.detail-agent-profile { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: end; gap: 14px; margin: 0 0 22px; }
.detail-agent-profile img { width: 112px; height: 132px; display: block; border: 1px solid #435547; border-radius: 9px; object-fit: cover; object-position: center 30%; background: #26382a; }
.detail-agent-profile figcaption { min-width: 0; padding-bottom: 3px; }
.detail-agent-profile .section-tag { display: block; margin: 0 0 7px; color: #c7ff4f; font-size: 9px; }
.detail-agent-profile small { display: block; color: #a9bbad; font-size: 11px; line-height: 1.45; }
.agent-workflow-slot { min-width: 0; }
.agent-workflow-slot compact-process { margin: 0; }
.example-band:has(compact-process) { grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); align-items: start; gap: clamp(24px,5vw,64px); }
.example-band:has(compact-process) compact-process { margin: 0; }
.example-band:has(compact-process) .cp-content { height: 250px; }
.example-band:has(compact-process) .cp-chat { height: 250px; }
.example-band:has(compact-process) .cp-step { font-size: 11px; }
.example-band:has(compact-process) .cp-bottom { align-items: center; }

.detail-hero:has(.area-agent-gallery) { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.9fr); align-items: start; column-gap: clamp(32px,6vw,86px); }
.detail-hero:has(.area-agent-gallery) > .breadcrumbs,.detail-hero:has(.area-agent-gallery) > .section-tag { grid-column: 1 / -1; }
.detail-hero:has(.area-agent-gallery) > h1,.detail-hero:has(.area-agent-gallery) > .detail-lede { grid-column: 1; }
.area-agent-gallery { grid-column: 2; grid-row: 3 / span 2; min-width: 0; margin-top: 4px; padding: 17px; border: 1px solid #3b4d3f; border-radius: 12px; background: #151d17; }
.area-agent-gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.area-agent-gallery-heading .section-tag { margin: 0; color: #c7ff4f; font-size: 10px; }
.area-agent-gallery-heading small { color: #a9bbad; font-size: 10px; white-space: nowrap; }
.area-agent-gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.area-agent-tile { position: relative; min-width: 0; aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: 7px; background: #26382a; }
.area-agent-tile::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,#101713df); pointer-events: none; }
.area-agent-tile img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 28%; }
.area-agent-tile > span { position: absolute; z-index: 1; right: 7px; bottom: 7px; left: 7px; color: #edf1e8; font-size: 11px; font-weight: 600; line-height: 1.2; }
.area-agent-gallery-note { margin: 11px 0 0; color: #9eafa0; font-size: 10px; line-height: 1.4; }

@media (max-width: 900px) {
 .detail-hero:has(.area-agent-gallery) { display: block; }
 .area-agent-gallery { margin-top: 28px; }
 .example-band:has(compact-process) { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
 .language-picker > summary { min-height: 42px; padding: 0 10px; font-size: 13px; }
 .language-picker-panel { right: 0; width: min(248px,calc(100vw - 24px)); max-height: min(220px,calc(100svh - 96px)); }
 .detail-agent-profile { grid-template-columns: 94px minmax(0,1fr); gap: 12px; }
 .detail-agent-profile img { width: 94px; height: 112px; }
 .area-agent-gallery { padding: 13px; }
 .area-agent-gallery-grid { gap: 6px; }
 .area-agent-tile > span { right: 5px; bottom: 5px; left: 5px; font-size: 9px; }
 .example-band:has(compact-process) { padding: 42px 20px; }
}
@media (max-width: 420px) {
 .language-picker-name { display: none; }
}
