/* Page-specific styles for asset-tokenization-on-various-industries (latest blog layout).
   Loaded last, after blog-details.css and real-world-asset-tokenization-guide.css. */

/* blog-details.css draws this pill as dark text on a green fill; the guide CSS already
   resets its background and border, so only the text colour and spacing are fixed here. */
.bx-updated-pill {
    color: #fff;
    font-weight: 400;
    margin-left: 12px;
}

.blog-single-wrap .bx-meta-strip {
    margin-bottom: 34px;
}

/* "Business Benefits of Asset Tokenization" is an H3 (items under it are H4) for the heading
   outline, but keeps the look it had as a section H2 / H3 items. Values mirror blog-details.css. */
.blog-single-wrap h3.atv-sec {
    font-size: 28px;
    line-height: 40px;
    padding: 0 0 20px;
}

.blog-single-wrap h4.atv-sub {
    line-height: 40px;
    background: linear-gradient(89.98deg, #f5d255 -3.37%, #36e7c4 99.98%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 991px) {
    .blog-single-wrap h3.atv-sec {
        font-size: 24px;
        line-height: 35px;
        padding-bottom: 20px;
    }

    .blog-single-wrap h4.atv-sub {
        line-height: 35px;
    }
}

@media (max-width: 767px) {
    .blog-single-wrap h3.atv-sec {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 15px;
    }

    .blog-single-wrap h4.atv-sub {
        line-height: 30px;
    }
}

@media (max-width: 575px) {
    .blog-single-wrap h3.atv-sec {
        font-size: 18px !important;
        line-height: 26px;
        padding: 10px 0;
    }

    .blog-single-wrap h4.atv-sub {
        line-height: 26px;
    }
}

/* "The asset tokenization process explained" — supplied SVG infographic (replaces the old image).
   Classes/keyframes prefixed atp- so they cannot clash with the rest of the page. */
.atv-process { text-align: center; }
.atv-process svg{width:100%;max-width:856px;height:auto}
.atp-node{cursor:pointer;outline:none;animation:atp-in .6s cubic-bezier(.2,.8,.2,1) both}.atp-node:nth-of-type(1){animation-delay:0.10s}.atp-node:nth-of-type(2){animation-delay:0.25s}.atp-node:nth-of-type(3){animation-delay:0.40s}.atp-node:nth-of-type(4){animation-delay:0.55s}.atp-node:nth-of-type(5){animation-delay:0.70s}
@keyframes atp-in{from{opacity:0}}
.atp-hexg,.atp-ic,.atp-glow{transition:transform .4s cubic-bezier(.3,1.5,.5,1),opacity .3s;transform-box:fill-box;transform-origin:center}
.atp-node:hover .atp-hexg,.atp-node:focus-visible .atp-hexg{transform:translateY(-8px) scale(1.07)}
.atp-node:hover .atp-ic,.atp-node:focus-visible .atp-ic{transform:scale(1.14) rotate(-5deg)}
.atp-node:hover .atp-glow,.atp-node:focus-visible .atp-glow{transform:scale(1.25);opacity:.9}
.atp-lb{transition:fill .25s}.atp-node:hover .atp-lb,.atp-node:focus-visible .atp-lb{fill:var(--c)}
.atp-flow path{animation:atp-dash 1.2s linear infinite}@keyframes atp-dash{to{stroke-dashoffset:-22}}
.atp-spark{animation:atp-sp 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes atp-sp{50%{transform:rotate(45deg) scale(1.3)}}
@media(prefers-reduced-motion:reduce){.atv-process *{animation:none!important;transition:none!important}}

/* "Asset tokenization across various industries" — supplied HTML infographic (replaces the old image).
   Classes/keyframes prefixed ati- (the original .row/.card would clash with Bootstrap). */
.ati-card,.ati-card *{box-sizing:border-box;margin:0}
.ati-card{margin:0 auto;font-family:"Exo 2", sans-serif;position:relative;width:100%;max-width:572px;padding:44px 20px 40px;border-radius:22px;border:1.5px solid #D8CDE6;background:radial-gradient(circle at 20% 0%,#fff 0%,#FBF6FA 100%);overflow:hidden}
.ati-card::before,.ati-card::after{content:"";position:absolute;width:10px;height:10px;background:#8B5CF6;opacity:.6;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:ati-tw 3s ease-in-out infinite}
.ati-card::before{top:18px;left:18px}.ati-card::after{bottom:22px;left:38px;animation-delay:1.2s}
@keyframes ati-tw{50%{transform:scale(1.7) rotate(45deg);opacity:1}}
.ati-row{display:flex;justify-content:center;gap:4.2%;margin-bottom:26px}
.ati-row:last-child{margin-bottom:0}
.ati-item{all:unset;box-sizing:border-box;cursor:pointer;width:20.5%;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;animation:ati-in .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*70ms)}
@keyframes ati-in{from{opacity:0;transform:translateY(14px) scale(.94)}}
.ati-tile{position:relative;width:100%;aspect-ratio:1;border-radius:18%;border:1.6px solid var(--c);background:linear-gradient(180deg,color-mix(in srgb,var(--l) 55%,#fff),#fff);box-shadow:0 2px 4px color-mix(in srgb,var(--c) 10%,transparent),0 8px 16px -6px color-mix(in srgb,var(--c) 22%,transparent);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;display:block}
.ati-tile::after{content:"";position:absolute;inset:4%;border-radius:15%;border:1px solid #fff;opacity:.85}
.ati-tile svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.ati-label{font-size:clamp(9.5px,2.1vw,11.5px);font-weight:500;line-height:1.3;color:#33334D;transition:color .25s}
.ati-item:hover .ati-tile,.ati-item:focus-visible .ati-tile{transform:translateY(-8px);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 14%,transparent),0 18px 26px -8px color-mix(in srgb,var(--c) 45%,transparent)}
.ati-item:hover svg,.ati-item:focus-visible svg{transform:scale(1.14) rotate(-4deg)}
.ati-item:hover .ati-label,.ati-item:focus-visible .ati-label{color:var(--d)}
.ati-item:active .ati-tile{transform:translateY(-3px) scale(.96)}
.ati-item:focus-visible .ati-tile{outline:2px solid var(--d);outline-offset:3px}
.ati-item.ati-pop .ati-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--c);animation:ati-rip .7s ease-out forwards}
@keyframes ati-rip{to{transform:scale(1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.ati-card,.ati-card *,.ati-card *::before,.ati-card *::after{animation:none!important;transition:none!important}}

/* Card spans exactly the heading's width: the wrapper shrinks to the heading text (fit-content),
   and the card (width:0; min-width:100%) adds nothing to that width but fills it. */
.atv-ind-wrap{width:fit-content;max-width:100%}
.atv-ind-wrap .atv-industries{width:0;min-width:100%}
.atv-ind-wrap .ati-card{margin:0;max-width:none}

/* Card spans the full text column (heading/paragraph left edge to the paragraph's right edge)
   and is shorter: smaller tiles spread across the width, tighter padding and row spacing.
   Desktop/tablet only; phones keep the original tile sizes. */
.atv-ind-wrap{width:auto}
.atv-ind-wrap .atv-industries{width:auto;min-width:0}
@media (min-width:576px){
  .atv-ind-wrap .ati-card{width:100%;max-width:none;margin:0;padding:28px 24px 26px}
  .atv-ind-wrap .ati-row{gap:7%;margin-bottom:18px}
  .atv-ind-wrap .ati-item{width:13%;gap:8px}
}

/* Mid-article CTA boxes: real-world-asset-tokenization-guide.css caps .cta-mid at 720px;
   let them fill the column (same as the other recent blogs). */
.blog-single-wrap .cta-mid{max-width:none;margin:16px 0 40px}

/* Space between "Listen to the Audio :" and the Spotify player. */
.blog-single-wrap .atv-audio-label{margin-bottom:14px}

/* Industries card: columns spread evenly across the card. Side padding matches the top padding
   (28px); tile size unchanged (13%); gaps equal: 4 x 13% + 3 x 16% = 100%, so the first and last
   tiles sit on the padding edge and the row of 3 is centred under the gaps above. */
@media (min-width:576px){
  .atv-ind-wrap .ati-card{padding:28px 28px 26px}
  .atv-ind-wrap .ati-row{gap:0 16%}
}

/* Industries card: less empty space — larger tiles, narrower equal gaps (4 x 16% + 3 x 12% = 100%),
   tighter row spacing so the card does not grow much taller. */
@media (min-width:576px){
  .atv-ind-wrap .ati-card{padding:24px 24px 22px}
  .atv-ind-wrap .ati-row{gap:0 12%;margin-bottom:14px}
  .atv-ind-wrap .ati-item{width:16%}
}

/* Industries card: shorter box, slightly tighter gaps — tiles 14%, equal gaps 11% (group centred),
   less padding / row / label spacing. */
@media (min-width:576px){
  .atv-ind-wrap .ati-card{padding:20px 24px 18px}
  .atv-ind-wrap .ati-row{gap:0 11%;margin-bottom:10px}
  .atv-ind-wrap .ati-item{width:14%;gap:6px}
}

/* Small gap between the "Industries Being Transformed…" heading and the card. */
.atv-ind-wrap .atv-industries{margin-top:12px}