/* AI portfolio promo banner, first item of the right column on /portfolio/ (31.10, v4)
   Info sits at the bottom edge: blue "/новинка" tag, big title + line of text, white "Детальніше" button on the right.
   Behind it: a wall of AI project covers scrolling top-to-bottom (assets/js/ai-banner.js). */
.aib{--aib-blue:#000AFF;position:relative;display:block;box-sizing:border-box;width:100%;overflow:hidden;height:280px;margin:0;color:#fff;text-decoration:none;text-transform:none;line-height:normal;font-weight:400;isolation:isolate;background:#05060f;font-family:"Neue Machina","Helvetica Neue",Arial,sans-serif}
.aib-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.aib--3d .aib-canvas{opacity:1}
/* legibility: dark gradient + a blurred strip under the text, both from the bottom edge */
.aib-shade{position:absolute;display:block;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,6,15,.92) 0%,rgba(5,6,15,.78) 20%,rgba(5,6,15,.38) 36%,rgba(5,6,15,.08) 52%,rgba(5,6,15,0) 64%)}
.aib-shade::before{content:"";position:absolute;left:0;right:0;bottom:0;height:31%;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(0deg,#000 0%,#000 55%,transparent 100%)}
.aib-row{position:absolute;z-index:3;left:0;right:0;bottom:0;box-sizing:border-box;width:100%;display:flex;align-items:flex-end;gap:15px;padding:0 28px 13px}
.aib-label{flex:none;align-self:flex-start;margin-top:8px;padding:0 10px;height:26px;display:inline-flex;align-items:center;background:var(--aib-blue);color:#fff;font-size:13px;font-weight:500;letter-spacing:.06em;line-height:1;text-transform:uppercase;white-space:nowrap}
.aib-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding-left:6px}
.aib-title{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(30px,3.4vw,56px);line-height:1;color:#fff;white-space:nowrap}
.aib-sub{margin-top:6px;font-size:16px;line-height:1.35;font-weight:300;color:rgba(227,229,229,.88)}
.aib-cta{flex:none;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 24px;border-radius:0;background:#fff;color:#000;font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1;white-space:nowrap;transition:background .3s,color .3s}
.aib-cta svg{transition:transform .3s}
.aib:hover .aib-cta{background:var(--aib-blue);color:#fff}
.aib:hover .aib-cta svg{transform:translate(3px,3px)}
.aib:focus-visible{outline:2px solid var(--aib-blue);outline-offset:4px}
@media (max-width:760px){
  .aib{height:280px}
  .aib-row{flex-wrap:wrap;align-items:flex-start;padding:0 20px 14px;gap:10px}
  .aib-label{margin-top:0}
  .aib-main{flex-basis:100%;padding-left:0;order:1}
  .aib-label{order:0}
  .aib-cta{order:2;height:46px;padding:0 20px;font-size:14px}
  .aib-title{font-size:clamp(30px,10vw,42px)}
  .aib-sub{font-size:14px;margin-top:4px}
}
@media (max-width:760px){
  .aib-shade{background:linear-gradient(0deg,rgba(5,6,15,.95) 0%,rgba(5,6,15,.86) 38%,rgba(5,6,15,.45) 56%,rgba(5,6,15,.08) 70%,rgba(5,6,15,0) 80%)}
  .aib-shade::before{height:52%}
}
/* the theme paints a blue inset box-shadow on links on hover - not here */
.aib,.aib *{box-shadow:none!important}
/* the theme gives spans in links margin-left:-4px - keep layers flush with the banner edges */
.aib-shade,.aib-row{margin:0!important}
/* button aligned with the top of the title, like "UKRAINE ↘" in the rows below */
.aib-cta{align-self:flex-start}
@media (max-width:760px){.aib-cta{align-self:auto}}
/* button top = top of the title's capital letters (caps start ~4% of the font size below the line box) */
@media (min-width:761px){.aib-cta{margin-top:calc(clamp(30px,3.4vw,56px) * .04)}}
/* page: gap between the header and the portfolio -30% (128px -> 90px) */
@media (min-width:1024px){.main__section > .lg\:mt-32{margin-top:90px!important}}
/* gap banner -> first project = gap between projects +30% (column gap 128px; rows 64px -> 83px, 40px -> 52px below md) */
.aib{margin-bottom:-76px!important}
@media (min-width:768px){.aib{margin-bottom:-45px!important}}

/* mobile v5 (31.10): everything centred, NEW badge on the same line as the title */
@media (max-width:760px){
  .aib-row{flex-wrap:wrap;justify-content:center;align-items:center;text-align:center;gap:0;padding:0 16px 16px}
  .aib-main{display:contents}
  .aib-label{order:0;align-self:center;margin:0 10px 0 0;height:24px;font-size:12px;padding:0 8px}
  .aib-title{order:1;font-size:clamp(22px,7.6vw,34px);line-height:1}
  .aib-sub{order:2;flex-basis:100%;margin-top:8px;text-align:center}
  .aib-cta{order:3;margin-top:14px;align-self:auto}
}
/* mobile v6: taller banner, more room under the button, lighter shade */
@media (max-width:760px){
  .aib{height:340px}
  .aib-row{padding-bottom:34px}
  .aib-shade{background:linear-gradient(0deg,rgba(5,6,15,.86) 0%,rgba(5,6,15,.74) 36%,rgba(5,6,15,.34) 54%,rgba(5,6,15,.05) 68%,rgba(5,6,15,0) 78%)}
  .aib-shade::before{height:50%;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
}