/* Seamless banners using the seven images provided by the project owner.
   This is loaded after previous banner styles. Does not alter method cover images. */
.library-page[data-area="information"]{
 --area:#397f79;--area-soft:#e9f4f0;--area-sidebar:#eaf4f0;
 --area-border:#c8e3d9;--area-hero1:#234e49;--area-hero2:#448a7f;
}
.library-page .hero{
 position:relative!important;isolation:isolate!important;
 min-height:clamp(255px,24vw,310px)!important;
 overflow:hidden!important;display:flex!important;align-items:center!important;
 border-radius:28px!important;
}
.library-page .hero>div:first-child{
 position:relative!important;z-index:3!important;
 flex:0 1 66%!important;max-width:66%!important;min-width:0!important;
}
.library-page .hero .hero-art,
.library-page[data-area="special"] .hero .hero-art,
.library-page[data-area="adults"] .hero .hero-art,
.library-page[data-area="spt"] .hero .hero-art{
 display:block!important;position:absolute!important;
 top:0!important;right:0!important;bottom:auto!important;left:auto!important;
 flex:none!important;align-self:auto!important;
 width:min(57%,680px)!important;height:100%!important;
 min-width:0!important;margin:0!important;padding:0!important;
 border:0!important;outline:0!important;border-radius:0!important;
 box-shadow:none!important;background-color:transparent!important;
 background-image:url("assets/psyteka-sections-7.webp?v=20261026newbanners1")!important;
 background-repeat:no-repeat!important;background-size:400% 200%!important;
 background-position:var(--psy-banner-x,0%) var(--psy-banner-y,0%)!important;
 mix-blend-mode:normal!important;filter:none!important;opacity:1!important;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 17%,#000 43%,#000 100%)!important;
 mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 17%,#000 43%,#000 100%)!important;
 -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
 animation:none!important;transform:none!important;
 transition:opacity .4s ease,filter .4s ease!important;pointer-events:none!important;
}
.library-page[data-area="school"]{--psy-banner-x:0%;--psy-banner-y:0%}
.library-page[data-area="preschool"]{--psy-banner-x:33.3333%;--psy-banner-y:0%}
.library-page[data-area="adults"]{--psy-banner-x:66.6667%;--psy-banner-y:0%}
.library-page[data-area="special"]{--psy-banner-x:100%;--psy-banner-y:0%}
.library-page[data-area="prevention"]{--psy-banner-x:0%;--psy-banner-y:100%}
.library-page[data-area="documents"]{--psy-banner-x:33.3333%;--psy-banner-y:100%}
.library-page[data-area="information"],.library-page[data-area="spt"]{--psy-banner-x:66.6667%;--psy-banner-y:100%}
.library-page .hero h1,.library-page .hero p,.library-page .hero .eyebrow{
 position:relative;z-index:4;text-shadow:0 1px 2px rgba(9,38,28,.08);
}
.library-page[data-area="information"] #resourceCards .resource-card{
 display:flex;flex-direction:column;gap:4px;justify-content:flex-start;
}
.library-page .psy-information-link{
 display:inline-flex;align-items:center;gap:8px;margin-top:auto;
 padding-top:13px;color:var(--area,#287457);font-weight:750;
 text-decoration:none;line-height:1.5;
}
.library-page .psy-information-link:hover{text-decoration:underline}
.library-page .psy-information-link:focus-visible{
 outline:2px solid var(--area);outline-offset:4px;border-radius:5px
}
html.dark .library-page .hero .hero-art{
 opacity:.84!important;filter:brightness(.86) saturate(.88)!important;
 mix-blend-mode:normal!important;
}
@media(max-width:850px){
 .library-page .hero{min-height:245px!important}
 .library-page .hero>div:first-child{flex-basis:73%!important;max-width:73%!important}
 .library-page .hero .hero-art{width:60%!important}
}
@media(max-width:600px){
 .library-page .hero{min-height:225px!important;padding:25px 23px!important;gap:0!important}
 .library-page .hero>div:first-child{max-width:100%!important;flex:1 1 100%!important}
 .library-page .hero .hero-art{
  width:86%!important;height:100%!important;
  opacity:.24!important;filter:saturate(.75)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.7) 35%,#000 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.7) 35%,#000 100%)!important;
 }
 .library-page .hero h1{font-size:clamp(29px,7vw,36px)!important}
}
@media(prefers-reduced-motion:reduce){
 .library-page .hero .hero-art{transition:none!important;animation:none!important}
}