/* Shared standard banner: fixed copy and selected responsive artwork. */
body.catalog-home .home-top:has(>.home-welcome){background:var(--public-surface,#0c0e0e);min-height:0}
body.catalog-home .home-top:has(>.home-welcome)::before,
body.catalog-home .home-top:has(>.home-welcome)::after{content:none}
body.catalog-home .home-top>.home-welcome{
 position:relative;z-index:2;isolation:isolate;display:flex;align-items:center;overflow:visible;
 min-height:clamp(260px,24vw,320px);padding-block:32px;
 background:var(--public-surface,#0c0e0e);border:0;box-shadow:none;
}
body.catalog-home .home-top>.home-welcome::before,
body.catalog-home .home-top>.home-welcome::after{content:none}
body.catalog-home .home-welcome-panorama{
 position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 68%,transparent 100%);
 mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 68%,transparent 100%);
}
body.catalog-home .home-welcome-panorama img{
 display:block;width:100%;height:100%;object-fit:cover;object-position:right center;
}
body.catalog-home .home-welcome-panorama picture{display:block;width:100%;height:100%}
body.catalog-home .home-welcome-panorama::after{
 content:'';position:absolute;inset:0;
 background:linear-gradient(to right,#0c0e0e 0%,#0c0e0e 24%,rgba(12,14,14,.96) 36%,rgba(12,14,14,.78) 46%,rgba(12,14,14,.3) 60%,transparent 76%);
}
body.catalog-home .home-welcome .catalog-hero-copy{
 position:relative;z-index:1;top:0;width:62%;max-width:760px;min-width:0;min-height:0;
}
body.catalog-home .home-welcome h1{
 margin:0;font:600 48px/1.13 Manrope,Arial,sans-serif;
 letter-spacing:-.025em;color:var(--top-text-primary);
}
body.catalog-home .home-welcome p{
 max-width:520px;margin:24px 0 0;font:400 17px/26px var(--top-font-family);
 color:var(--top-description-color);text-shadow:none;
}
/* Desktop banner geometry is independent of the background image size. */
@media(min-width:981px){
 body.catalog-home .home-top>.home-welcome{
  height:180px;min-height:180px;padding-block:12px;box-sizing:border-box;
 }
 body.catalog-home .home-welcome .catalog-hero-copy{width:72%;max-width:780px}
 body.catalog-home .home-welcome h1{font-size:32px;line-height:1.13}
 body.catalog-home .home-welcome p{
  max-width:780px;margin-top:10px;font-size:15px;line-height:22px;
 }
 body.catalog-home .home-welcome-panorama img{
  object-position:right 65%;transform:none;
 }
 body.catalog-home .home-welcome[data-banner-theme="townfall"] .home-welcome-panorama img{object-position:right 62%}
 body.catalog-home .home-welcome[data-banner-theme="viticulture"] .home-welcome-panorama img{object-position:right 55%}
 body.catalog-home .home-welcome[data-banner-theme="fleet-dice"] .home-welcome-panorama img{object-position:right 85%}
 body.catalog-home .home-welcome[data-banner-theme="fc27"] .home-welcome-panorama img{object-position:right 80%}
 body.catalog-home .home-welcome[data-banner-theme="modern-warfare"] .home-welcome-panorama img{object-position:right 25%}
 body.catalog-home .home-welcome[data-banner-theme="minecraft"] .home-welcome-panorama img{object-position:right 70%}
 body.catalog-home .home-welcome[data-banner-theme="requiem"] .home-welcome-panorama img{object-position:right 55%}
 body.catalog-home .home-welcome-panorama{
  left:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 2px,#000 calc(100% - 20px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 2px,#000 calc(100% - 20px),transparent 100%);
 }
 body.catalog-home .home-welcome-panorama::after{
  background-image:var(--home-mobile-copy-shade,linear-gradient(to right,#0c0e0e 38%,transparent 68%));
  background-size:100% 100%;background-repeat:no-repeat;
 }
}
@media(max-width:980px){
 body.catalog-home .home-top>.home-welcome{min-height:280px;padding-block:28px}
 body.catalog-home .home-welcome .catalog-hero-copy{width:75%}
 body.catalog-home .home-welcome h1{font-size:40px}
 body.catalog-home .home-welcome-panorama img{object-position:74% center}
 body.catalog-home .home-welcome-panorama::after{
  background:linear-gradient(to right,#0c0e0e 0%,rgba(12,14,14,.94) 28%,rgba(12,14,14,.8) 52%,rgba(12,14,14,.32) 80%,rgba(12,14,14,.12));
 }
}
@media(max-width:600px){
 body.catalog-home .home-top>.home-welcome{
  min-height:clamp(400px,110vw,470px);padding-block:24px 180px;align-items:flex-start;
 }
 body.catalog-home .home-welcome .catalog-hero-copy{width:100%;max-width:none}
 body.catalog-home .home-welcome p{max-width:100%}
 body.catalog-home .home-welcome-panorama{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 28px),transparent 100%);
 }
 body.catalog-home .home-welcome-panorama img{object-position:center;opacity:1}
 body.catalog-home .home-welcome-panorama::after{
  background:linear-gradient(to bottom,#0c0e0e 0%,#0c0e0e calc(var(--home-mobile-copy-bottom,210px) - 32px),rgba(12,14,14,.88) var(--home-mobile-copy-bottom,210px),rgba(12,14,14,.15) calc(var(--home-mobile-copy-bottom,210px) + 40px),transparent calc(var(--home-mobile-copy-bottom,210px) + 64px));
 }
}
/* Landscape phones use their own shallow panorama and the shared copy contour. */
@media(max-width:980px) and (max-height:600px) and (orientation:landscape){
 body.catalog-home .home-top>.home-welcome{height:180px;min-height:180px;padding-block:14px;box-sizing:border-box;align-items:center}
 body.catalog-home .home-welcome .catalog-hero-copy{width:55%;max-width:440px}
 body.catalog-home .home-welcome h1{font-size:clamp(20px,2.9vw,24px);line-height:1.13}
 body.catalog-home .home-welcome p{max-width:400px;margin-top:10px;font-size:12px;line-height:1.5}
 body.catalog-home .home-welcome-panorama{left:0;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 6px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 6px,#000 calc(100% - 20px),transparent)}
 body.catalog-home .home-welcome-panorama img{width:100%;object-position:right center}
 body.catalog-home .home-welcome[data-banner-theme="townfall"] .home-welcome-panorama img{object-position:right 40%}
 body.catalog-home .home-welcome[data-banner-theme="modern-warfare"] .home-welcome-panorama img{object-position:right 25%}
 body.catalog-home .home-welcome[data-banner-theme="fleet-dice"] .home-welcome-panorama img{object-position:right 85%}
 body.catalog-home .home-welcome[data-banner-theme="fc27"] .home-welcome-panorama img{object-position:right 80%}
 body.catalog-home .home-welcome-panorama::after{background-image:var(--home-mobile-copy-shade,linear-gradient(to right,#0c0e0e 38%,transparent 68%));background-size:100% 100%;background-repeat:no-repeat}
}
/* Portrait phones keep the scene beside the copy rather than below it. */
@media(max-width:600px) and (orientation:portrait){
 body.catalog-home .home-top>.home-welcome{
  min-height:clamp(220px,60vw,258px);padding-block:20px;align-items:center;
 }
 body.catalog-home .home-welcome .catalog-hero-copy{width:60%;max-width:270px}
 body.catalog-home .home-welcome h1:has(.catalog-title-line){font-size:clamp(18px,5.1vw,22px);line-height:1.13}
 body.catalog-home .home-welcome p{max-width:210px;margin-top:10px;font-size:12px;line-height:1.5}
 body.catalog-home .home-welcome .catalog-description-line{display:inline}
 body.catalog-home .home-welcome .catalog-description-line:last-child::before{content:' '}
 body.catalog-home .home-welcome-panorama{
  left:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 6px,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 6px,#000 calc(100% - 20px),transparent);
 }
 body.catalog-home .home-welcome-panorama img{object-position:right center}
 body.catalog-home .home-welcome-panorama::after{
  background-image:var(--home-mobile-copy-shade,linear-gradient(to right,#0c0e0e 38%,transparent 68%)),linear-gradient(to right,#0c0e0e,rgba(12,14,14,.65) 12px,transparent 36px);
  background-size:100% 100%;background-repeat:no-repeat;
 }
}