/* Article catalog: tactical artwork and the portal's existing file-catalog controls. */
.portal-page .pc-page--articles { container: article-catalog / inline-size; min-width: 0; }
.portal-page .pc-page--articles > .pc-tabs { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent !important; }
.portal-page .pc-page--articles > .pc-tabs > a { min-height: 38px; padding: 8px 16px; font-size: 12px; }
.portal-page .pc-page--articles > .pc-tabs > .pc-rss { padding-inline: 0; border: 0 !important; background: transparent; }
.pc-tactical-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 300px; margin: 0 0 22px; padding: clamp(26px, 4cqi, 52px); overflow: hidden; border: 1px solid #f5a53b35; border-radius: 12px; background: radial-gradient(ellipse at 87% 50%, #a66a232a, transparent 58%), #1b1e23; }
.pc-tactical-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .4; background-image: linear-gradient(#f5a53b0b 1px, transparent 1px), linear-gradient(90deg, #f5a53b0b 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, transparent, #000); }
.pc-tactical-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, #f5a53b, #f5a53b05 65%); }
.pc-tactical-copy { position: relative; z-index: 2; width: 63%; min-width: 0; }
.pc-tactical-copy > .eyebrow { color: #d5ab72; font: 650 10px/1.6 var(--font); letter-spacing: .14em; }
.pc-tactical-copy h1 { margin: 16px 0 18px; color: #f0f1f3; font: 800 clamp(32px, 4.4cqi, 58px)/1.08 var(--font); letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; }
.pc-tactical-copy h1 > span { display: block; color: #f5a53b; }
.pc-tactical-copy p { max-width: 490px; margin: 0; color: #b4bdc9; font: 400 14px/1.8 var(--font); }
.pc-tactical-caption { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #d2ba97; font-size: 11px; }
.pc-tactical-caption .icon { color: #f5a53b; }
.pc-tactical-art { position: absolute; z-index: 1; inset: 0 0 0 auto; width: 47%; pointer-events: none; }
.pc-tactical-art > img { position: absolute; right: -1%; bottom: -4%; width: 100%; height: 106%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 0 25px #0009); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.pc-tactical-target { position: absolute; width: 260px; height: 260px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #f5a53b2b; border-radius: 50%; box-shadow: 0 0 0 35px #f5a53b07, 0 0 0 70px #f5a53b04; }
.pc-tactical-target::before, .pc-tactical-target::after { content: ""; position: absolute; background: #f5a53b4a; }
.pc-tactical-target::before { top: 50%; left: -22px; right: -22px; height: 1px; }
.pc-tactical-target::after { left: 50%; top: -22px; bottom: -22px; width: 1px; }
.pc-tactical-coordinate { position: absolute; right: 20px; top: 18px; z-index: 1; color: #d3af778c; font: 9px/1.5 Consolas, monospace; letter-spacing: .12em; }
.pc-article-sections, .pc-article-subsections { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 20px; }
.pc-article-sections > a, .pc-article-subsections > a { display: inline-flex; align-items: center; min-height: 34px; max-width: 100%; padding: 7px 11px; border: 1px solid #343a43; border-radius: 7px; color: #b6bfcb; background: transparent; text-decoration: none; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.pc-article-sections > a:hover, .pc-article-sections > a[aria-current], .pc-article-subsections > a:hover, .pc-article-subsections > a[aria-current] { color: #f5a53b; border-color: #f5a53b59; background: #f5a53b0b; }
.pc-article-subsections { margin-top: -10px; }
.pc-article-subsections > a { border-color: transparent; padding: 5px 8px; min-height: 28px; color: #a4adba; }
.pc-articles-search { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(130px, 190px) minmax(135px, 170px) auto; align-items: end; gap: 14px; margin: 0 0 28px; padding: 20px; border: 1px solid #343a43; border-radius: 12px; background: #1b1e23; }
.pc-articles-search > *, .pc-articles-search-input, .pc-articles-search-select { min-width: 0; }
.pc-articles-search label, .pc-articles-search-select > span { display: block; margin: 0 0 8px; color: #aeb8c6; font-size: 11px; font-weight: 600; line-height: 1.5; }
.pc-articles-search-select { margin: 0 !important; }
.pc-articles-search-input { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 13px; border: 1px solid #3a424e; border-radius: 8px; background: #14171c; transition: border-color .15s, box-shadow .15s; }
.pc-articles-search-input > .icon { flex: none; color: #a6b0bf; }
.pc-articles-search-input:focus-within { border-color: #f5a53b; box-shadow: 0 0 0 3px #f5a53b16; }
.portal-page .pc-articles-search-input input { min-width: 0; width: 100%; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #edf0f5; font: 400 13px/1.5 var(--font); outline: none; box-shadow: none; }
.pc-articles-search-input input::placeholder { color: #8b97a8; opacity: 1; }
.portal-page .pc-articles-search-select select { display: block; width: 100%; min-height: 44px; padding: 10px 32px 10px 12px; border: 1px solid #3a424e; border-radius: 8px; background-color: #14171c; color: #d1d8e2; font: 400 12px/1.5 var(--font); }
.pc-articles-search-select option { color: #e0e5ec; background: #1b1e23; }
.pc-articles-search-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 18px; border: 1px solid #f5a53b; border-radius: 8px; background: #f5a53b; color: #17191d; font: 750 12px/1.5 var(--font); cursor: pointer; }
.pc-articles-search-submit:hover { background: #ffb44f; border-color: #ffb44f; }
.pc-articles-search-reset { display: inline-flex; align-items: center; gap: 7px; grid-column: 1 / -1; justify-self: start; color: #d4ae78; font-size: 11px; text-decoration: none; }
.pc-articles-search-reset > span { font-size: 17px; }
.pc-page--articles :is(.pc-article-sections a,.pc-article-subsections a,.pc-articles-search select,.pc-articles-search-submit,.pc-articles-search-reset):focus-visible { outline: 2px solid #f5a53b; outline-offset: 3px; }
.pc-article-results { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; scroll-margin-top: 110px; outline: none; }
.pc-article-results h2 { margin: 0; color: #edf0f5; font: 700 22px/1.3 var(--font); letter-spacing: -.025em; }
.pc-article-results > p { margin: 0; color: #aab3c1; font-size: 11px; }
.pc-page--articles .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pc-page--articles .pc-card-cover { aspect-ratio: 16 / 9; }
.pc-page--articles .pc-card-copy { padding: 20px; }
.pc-page--articles .pc-card-social { padding: 14px 18px; margin-top: auto; border-top: 1px solid #30343c; }
.portal-page .pc-page--articles .pc-article-gallery .pb-media-stage { width: 100%; max-height: none; aspect-ratio: 16 / 9; }
.portal-page .pc-page--articles .pc-article-gallery .pb-media-hero > img { object-fit: contain; }
.portal-page .pc-page--articles .pc-article-gallery :is(.pb-media-expand,.pb-media-count) { border: 1px solid #3b424d; background: #292e36; color: #d7dee8; }
.portal-page .pc-page--articles .pc-article-gallery .pb-media-expand:hover { border-color: #9d733b; background: #393023; color: #f5a53b; }
.portal-page .pc-page--articles .pc-article-gallery .pb-media-help { color: #a5aebc; }
/* Same shared paginator and exact compact button treatment as the file catalog. */
.pc-articles-pagination .pb-pagination { justify-content: center; margin-top: 24px; padding-top: 20px; gap: 12px; border-color: var(--portal-border); }
.pc-articles-pagination .pb-pagination__summary { width: 100%; text-align: center; font-size: 11px; color: var(--portal-muted); }
.pc-articles-pagination .pb-pagination__summary strong { color: #c6cfd9; }
.portal-page .pc-articles-pagination :is(.pb-pagination__step,.pb-pagination__number) { min-height: 36px; min-width: 36px; padding: 7px 10px; border: 1px solid var(--portal-border); border-radius: 7px; background: var(--portal-sidebar); color: #b8c2ce; font-size: 11px; }
.portal-page .pc-articles-pagination .pb-pagination__step svg { width: 15px; height: 15px; min-width: 15px; max-width: 15px; flex-basis: 15px; }
.portal-page .pc-articles-pagination [aria-current="page"] { color: var(--portal-accent); background: #f5a53b13; border-color: #f5a53b59; }
.portal-page .pc-articles-pagination a:hover { background: var(--portal-raised); border-color: #79603e; color: var(--portal-accent); }
.portal-page .pc-articles-pagination [aria-disabled="true"] { opacity: .4; background: transparent; border-color: transparent; }
@container article-catalog (max-width: 960px) { .pc-page--articles .pc-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .pc-articles-search { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; } .pc-articles-search-query { grid-column: 1 / -1; } .pc-articles-search-submit { min-width: 100px; } }
@container article-catalog (max-width: 620px) { .pc-page--articles .pc-grid { grid-template-columns: minmax(0,1fr); } .pc-tactical-hero { min-height: 280px; padding: 26px 22px; } .pc-tactical-copy { width: 82%; } .pc-tactical-copy h1 { font-size: clamp(30px,6.6cqi,40px); } .pc-tactical-copy p { font-size: 13px; } .pc-tactical-art { width: 62%; opacity: .32; } .pc-tactical-coordinate { display: none; } .pc-tactical-art > img { right: -12%; mask-image: linear-gradient(90deg,transparent,#000 65%); } .pc-tactical-target { width: 200px; height: 200px; } }
@container article-catalog (max-width: 420px) { .pc-articles-search { padding: 14px; gap: 12px; grid-template-columns: minmax(0,1fr); } .pc-articles-search-query { grid-column: auto; } .portal-page .pc-articles-search :is(input,select) { font-size: 16px; } .pc-articles-search-submit { width: 100%; } .pc-tactical-copy { width: 100%; } .pc-tactical-copy p { max-width: 92%; } .pc-tactical-art { opacity: .2; } .pc-article-sections { gap: 6px; } .pc-article-sections > a { font-size: 10px; padding: 6px 9px; min-height: 31px; } }
@media (prefers-reduced-motion: reduce) { .pc-articles-search-input { transition: none; } }
