/* ==========================================================================
   The homepage haze banner (template-parts/haze-banner.php).

   Built in code rather than as artwork so it fills the content column at any
   width. Desktop: the skyline on the left, the words on the right. Phone: the
   words laid over the skyline, on a dark wash so they read.
   ========================================================================== */
[data-arcsg-haze-banner][hidden]{display:none}

.haze-banner{position:relative;display:block;overflow:hidden;border-radius:16px;background:#3a3550;color:#fff;
  min-height:280px;box-shadow:var(--shadow);transition:transform .14s ease}
.haze-banner:hover{transform:translateY(-2px)}
.haze-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 55%;display:block}
/* The phone wash: dark at the bottom where the words sit, clear at the top so
   the skyline still shows. */
.haze-banner:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(40,34,62,.15) 0%,rgba(40,34,62,.65) 45%,rgba(40,34,62,.92) 100%)}
.haze-banner-text{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;padding:22px 20px 22px}
.haze-banner-eyebrow{font-size:9px;color:var(--gold);margin-bottom:10px}
.haze-banner-title{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.08;font-size:clamp(24px,6.4vw,30px)}
.haze-banner-title .hi{color:var(--gold)}
.haze-banner-sub{color:#E4DFF7;margin-top:8px;font-size:15px;max-width:40ch}
.haze-banner-btn{align-self:flex-start;margin-top:16px}

@media (min-width:720px){
  /* Side by side. The skyline fills the left 45% and fades into the band on
     its right edge; the words set the height, so the square picture never
     stretches the banner to its own shape. */
  .haze-banner{min-height:260px}
  .haze-banner-img{inset:0 auto 0 0;width:45%}
  .haze-banner:after{inset:0 auto 0 0;width:45%;
    background:linear-gradient(90deg,transparent 55%,#3a3550 100%)}
  .haze-banner-text{justify-content:center;min-height:260px;margin-left:45%;padding:28px 36px 28px 24px}
  .haze-banner-title{font-size:clamp(26px,3vw,36px)}
  .haze-banner-sub{font-size:16px}
}