/* Resource libraries (/white-papers/ and /videos/) follow the Blog archive
   presentation (2026-10-28 requests): photo hero with left-aligned copy,
   square bordered cards with left-aligned text and a text action. Geometry
   mirrors stage7-editorial.css, blog-feedback.css and source-spacing.css;
   type roles are shared with the Blog in source-type-archives.css. The page
   class picks the hero photo and layout: .library-papers is a 3/2/1 grid of
   image-free cards (MKT-100), .library-media keeps the featured player and
   playlist carousels. */
.resource-library { --max-width:1400px; margin-top:calc(-1 * var(--site-header-height)); font-family:var(--font-marketing); font-size:18px; line-height:1.5; color:var(--color-text); }
.library-container { width:min(var(--max-width),calc(100% - 2 * var(--container-gutter))); margin-inline:auto; }
.resource-library h1 { font-size:clamp(32px,3.6vw,52px); font-weight:700; line-height:1.15; }

/* Hero: Blog spacing and breakpoints, decorative photo as a CSS background. */
.resource-library .library-hero { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; min-height:430px; padding:120px 0 50px; background:#000; text-align:left; }
.resource-library .library-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:right center/cover no-repeat; }
.library-papers .library-hero::before { background-image:url('/wp-content/uploads/2025/02/banner_head_solutionv2.jpg'); }
.library-media .library-hero::before { background-image:url('/images/stage5/34beeeb1c3824ff9946e-stage8-display.webp'); }
/* These photos are brighter than the Blog's; darken only behind the text
   column (about 780px) so the lead stays readable wherever they overlap. */
.resource-library .library-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.7) 780px,rgba(0,0,0,0) 1100px); pointer-events:none; }
.resource-library .library-hero > .library-container { width:min(1400px,calc(100% - 30px)); min-height:260px; padding:0 10px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.resource-library .library-hero :is(.breadcrumb,h1,p) { margin:0; }
.resource-library .library-hero p { max-width:var(--max-width-narrow); font-size:var(--font-size-lead); }

/* Sections */
.library-section { padding-block:40px; }
.library-section > h2 { margin:0 0 24px; color:var(--pl-gray-700); font:700 clamp(26px,2.4vw,32px)/1.25 var(--font-marketing); }
.library-papers .library-section { padding-block:48px 65px; }
.library-media .library-section:first-child { padding-top:48px; }

/* Cards: Blog card chrome. Video posters sit inside the padding like Blog
   listing images; the title follows 10px below. */
.library-grid { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:30px; }
.library-papers .library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.library-card { flex:0 1 calc((100% - 60px)/3); min-width:0; display:flex; flex-direction:column; border:1px solid #dedede; border-radius:0; padding:15px; background:white; transition:border-color var(--transition-base),box-shadow var(--transition-base); }
.library-card:is(:hover,:focus-within) { border-color:var(--color-primary-blue); box-shadow:0 0 0 2px var(--focus-ring); }
.library-card :is(h2,h3) { margin:10px 0 0; overflow-wrap:break-word; }
.library-copy p { margin:18px 0 24px; }
.library-copy > :is(h2,h3):last-child { margin-bottom:24px; }
.library-action { display:flex; align-items:center; justify-content:flex-start; align-self:flex-start; gap:8px; margin-top:auto; min-height:48px; padding:12px 4px 12px 0; color:var(--color-primary-blue); font:600 16px/16px var(--font-marketing); text-decoration:none; }
.library-action:is(:hover,:focus-visible) { color:var(--color-dark-blue); text-decoration:underline; text-underline-offset:4px; }
.library-arrow { transition:transform var(--transition-base); }
.library-card:is(:hover,:focus-within) .library-arrow { transform:translateX(4px); }
.resource-library :is(a,button,iframe):focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }

/* Video player: click-to-load poster; no provider request before activation. */
.library-player { aspect-ratio:16/9; position:relative; background:var(--color-dark-blue); }
.library-player img,.library-player iframe { display:block; width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; border:0; }
.library-player button { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); padding:10px 16px; min-height:48px; border:2px solid white; border-radius:4px; background:var(--color-dark-blue); color:white; font:600 16px/1.5 var(--font-marketing); cursor:pointer; }
.library-player button[hidden] { display:none; }

/* Featured video: one wide card, player beside its title on desktop. */
.library-featured .library-copy h3 { color:var(--pl-gray-700); font:700 clamp(24px,2.2vw,32px)/1.3 var(--font-marketing); }
@media(min-width:1025px) {
 .library-featured { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); grid-template-rows:auto 1fr; column-gap:30px; }
 .library-featured .library-player { grid-row:1 / 3; }
 .library-featured .library-copy h3 { margin-top:0; }
 .library-featured .library-action { grid-column:2; align-self:end; }
}

/* Playlist carousels (progressive enhancement; cards wrap without JS). */
.library-grid.library-carousel { position:relative; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding:4px; padding:4px; margin-inline:-4px; overscroll-behavior-x:contain; }
.library-carousel > .library-card { flex-shrink:0; scroll-snap-align:start; }
.library-carousel-controls { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-bottom:16px; }
.library-carousel-controls[hidden] { display:none; }
.library-carousel-controls button { min-height:44px; padding:8px 12px; border:1px solid var(--color-primary-blue); border-radius:4px; background:white; color:var(--color-dark-blue); font:600 16px/1.5 var(--font-marketing); cursor:pointer; }
.library-carousel-controls button[aria-disabled="true"] { color:var(--color-text); border-color:var(--pl-gray-300); cursor:default; }
.library-carousel-controls button[aria-disabled="false"]:is(:hover,:focus-visible) { background:var(--color-dark-blue); color:white; }
.library-carousel-status { font-size:16px; white-space:nowrap; }

/* Subscription call to action */
.library-subscription { padding:32px 0 64px; text-align:center; }
.library-subscribe { display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:12px 24px; border-radius:4px; background:var(--color-primary-blue); color:white; font:600 16px/1.5 var(--font-marketing); text-decoration:none; }
.library-subscribe:is(:hover,:focus-visible) { background:var(--color-dark-blue); color:white; text-decoration:underline; }

@media(max-width:1024px) {
 .resource-library .library-hero { min-height:410px; padding-top:100px; }
 .resource-library .library-hero > .library-container { width:calc(100% - 20px); }
 .library-action { font-size:15px; line-height:15px; }
}
@media(max-width:900px) {
 .library-grid { gap:20px; }
 .library-papers .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .library-card { flex-basis:calc((100% - 20px)/2); }
}
@media(max-width:767px) {
 .library-container { width:calc(100% - 2 * var(--spacing-md)); }
 .resource-library .library-hero { padding:90px 0 60px; }
 .resource-library .library-hero > .library-container { width:calc(100% - 10px); }
 .resource-library .library-hero::before { background-position:right top; }
 .resource-library .library-hero::after { background:rgba(0,0,0,.8); }
 .library-action { font-size:14px; line-height:14px; }
}
@media(max-width:600px) {
 .library-grid { gap:26px; }
 .library-papers .library-grid { grid-template-columns:minmax(0,1fr); }
 .library-card { flex-basis:100%; }
 .library-section { padding-block:28px; }
 .library-papers .library-section { padding-block:28px 48px; }
}
@media(prefers-reduced-motion:reduce) { .library-card,.library-arrow { transition:none; } .library-card:is(:hover,:focus-within) .library-arrow { transform:none; } }