/* ============================================================
   Unique Udyog — premium inner pages
   Shared components for Manufacturing, Catalogue, Certificates.
   Inherits palette tokens from .uhero-scope (hero-premium.css).
   Pairs with js/pages.js (scroll reveal, in-view video, lightbox).
   ============================================================ */

.uhero-scope.inner{
  background:#0a1722;
  color:var(--u-ink);
}

/* ---- shared layout primitives ---- */
.pwrap{max-width:1280px;margin:0 auto;padding:0 40px}
.psection{padding:96px 0}
.psection--tight{padding:64px 0}

/* ---- premium page hero band ---- */
.phero{
  position:relative;overflow:hidden;
  padding:86px 0 70px;
  background:
    radial-gradient(120% 120% at 16% 0%, rgba(192,138,68,.16) 0%, rgba(192,138,68,0) 46%),
    linear-gradient(120deg,#08182a 0%,#0c2336 55%,#0f2c44 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.phero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../images/chain-link-110.jpg") center/cover no-repeat;
  opacity:.06;mix-blend-mode:luminosity;
}
.phero__inner{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 40px}
.phero__eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:3px;
  font-weight:700;font-size:.8rem;color:var(--u-copper-soft);margin-bottom:18px;
}
.phero__eyebrow::before{content:"";width:34px;height:2px;background:var(--u-copper)}
.phero h1{
  font-family:var(--u-ff-head);font-weight:900;color:#fff;letter-spacing:-1px;
  font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:1.02;margin:0 0 16px;
}
.phero__sub{color:var(--u-mute);font-size:1.1rem;max-width:62ch;margin:0 0 18px;line-height:1.7}
.phero__crumb{font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:1.4px;font-size:.78rem;color:#7e93a6}
.phero__crumb a{color:#9fb1c2}
.phero__crumb a:hover{color:var(--u-copper-soft)}
.phero__crumb span{color:var(--u-copper);margin:0 8px}

/* ---- section heading ---- */
.sec-head{max-width:760px;margin:0 0 54px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .eyb{
  font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:2.6px;
  font-weight:700;font-size:.8rem;color:var(--u-copper-soft);display:block;margin-bottom:14px;
}
.sec-head h2{font-family:var(--u-ff-head);font-weight:800;color:#fff;font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.1;margin:0 0 14px;letter-spacing:-.5px}
.sec-head p{color:var(--u-mute);font-size:1.05rem;line-height:1.7;margin:0}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
html:not(.js) .reveal{opacity:1;transform:none}

/* ============================================================
   MANUFACTURING — portrait video showcase
   ============================================================ */
.mfg-process{
  display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:64px;align-items:center;
  padding:70px 0;border-top:1px solid rgba(255,255,255,.07);
}
.mfg-process:first-of-type{border-top:0}
.mfg-process:nth-child(even) .mfg-video{order:2}
.mfg-process:nth-child(even) .mfg-copy{order:1}
/* ≥761px: every video sits in the SAME fixed 300–420px track (identical in size to the
   Welding Electrodes section) on the OUTER edge of its row, with the copy hugging the
   opposite outer edge — a clean alternating split: text-left/video-right, then
   video-left/text-right. Below 761px the single-column media query at the bottom of
   this file takes over unchanged. */
@media (min-width:761px){
  .mfg-process .mfg-copy{justify-self:end}                     /* odd rows: video left, copy hugs right edge */
  .mfg-process:nth-child(even){grid-template-columns:1fr minmax(300px,420px)}
  .mfg-process:nth-child(even) .mfg-copy{justify-self:start}   /* even rows: copy hugs left edge, video right */
}

/* portrait video card 9:16 */
.mfg-video{
  position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,#13212f,#0a141d);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06),
             inset 0 0 0 1px rgba(192,138,68,.1);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease;
}
.mfg-video:hover{transform:translateY(-8px) scale(1.012);
  box-shadow:0 54px 90px -28px rgba(0,0,0,.85),0 0 0 1px rgba(192,138,68,.35)}
.mfg-video img,.mfg-video iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
.mfg-video::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,14,22,.66) 0%,rgba(6,14,22,0) 42%)}
/* placeholder shown until a real video is dropped in */
.mfg-video__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:#69839a;text-align:center;padding:24px}
.mfg-video__ph svg{width:48px;height:48px;opacity:.7}
.mfg-video__ph span{font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:1.6px;font-size:.74rem}
.mfg-video__cap{
  position:absolute;left:20px;right:20px;bottom:18px;z-index:2;
  font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:1.6px;
  font-size:.78rem;color:#fff;display:flex;align-items:center;gap:9px;
}
.mfg-video__cap::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--u-copper);box-shadow:0 0 0 4px rgba(192,138,68,.2)}

/* YouTube facade — poster + play button; the real player loads only on click,
   so the page stays light and fast until a visitor chooses to watch */
.mfg-yt{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;
  cursor:pointer;display:block;background:#0a141d center/cover no-repeat;
}
.mfg-yt__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(192,138,68,.92);box-shadow:0 14px 34px -8px rgba(0,0,0,.6);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s ease;
}
.mfg-yt__play svg{width:30px;height:30px;fill:#fff;margin-left:4px}
.mfg-yt:hover .mfg-yt__play,.mfg-yt:focus-visible .mfg-yt__play{
  transform:translate(-50%,-50%) scale(1.08);background:var(--u-copper)}
.mfg-yt:focus-visible{outline:2px solid var(--u-copper);outline-offset:3px}
/* once playing, the iframe owns the card; drop our overlays so they don't sit over YT chrome */
.mfg-video.is-playing::after{display:none}
.mfg-video.is-playing .mfg-video__cap{display:none}

.mfg-copy{max-width:46ch}
.mfg-copy .step{font-family:var(--u-ff-cond);font-weight:700;letter-spacing:2px;color:rgba(192,138,68,.8);font-size:.82rem;display:block;margin-bottom:14px}
.mfg-copy h3{font-family:var(--u-ff-head);font-weight:800;color:#fff;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.12;margin:0 0 16px;letter-spacing:-.4px}
.mfg-copy p{color:var(--u-mute);font-size:1.05rem;line-height:1.75;margin:0 0 22px}
.mfg-copy .specs{display:flex;flex-wrap:wrap;gap:10px 12px}
.mfg-copy .specs span{
  font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:1px;font-size:.74rem;font-weight:700;
  color:#c8d6e2;padding:8px 14px;border:1px solid rgba(255,255,255,.14);border-radius:40px;background:rgba(255,255,255,.03);
}

/* ============================================================
   CATALOGUE
   ============================================================ */
.cat-hero{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.cat-hero__copy h2{font-family:var(--u-ff-head);font-weight:800;color:#fff;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.08;margin:0 0 18px;letter-spacing:-.5px}
.cat-hero__copy p{color:var(--u-mute);font-size:1.08rem;line-height:1.75;margin:0 0 22px;max-width:48ch}
.cat-stats{display:flex;gap:34px;margin:26px 0 32px}
.cat-stats div{display:flex;flex-direction:column}
.cat-stats b{font-family:var(--u-ff-head);font-weight:900;color:#fff;font-size:1.9rem;line-height:1}
.cat-stats span{font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:1.2px;font-size:.72rem;color:var(--u-copper-soft);margin-top:6px}
.cat-actions{display:flex;flex-wrap:wrap;gap:14px}

/* 3D book mockup */
.cat-book{perspective:1800px;display:flex;justify-content:center}
.cat-book__inner{
  position:relative;width:min(360px,80%);aspect-ratio:3/4;
  transform:rotateY(-22deg) rotateX(4deg);transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(-40px 40px 50px rgba(0,0,0,.6));
}
.cat-book:hover .cat-book__inner{transform:rotateY(-12deg) rotateX(2deg)}
.cat-book__cover{
  position:absolute;inset:0;border-radius:6px 12px 12px 6px;overflow:hidden;
  background:linear-gradient(150deg,#10283d 0%,#0a1a28 60%,#0e2236 100%);
  border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;justify-content:space-between;padding:34px 30px;
}
.cat-book__cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;
  background:linear-gradient(to right,rgba(0,0,0,.45),rgba(255,255,255,.05));border-right:1px solid rgba(0,0,0,.3)}
.cat-book__cover::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 80% 10%,rgba(192,138,68,.18),transparent 55%)}
.cat-book__logo{position:relative;z-index:1;height:42px;width:auto;align-self:flex-start}
.cat-book__title{position:relative;z-index:1}
.cat-book__title span{display:block;font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:3px;color:var(--u-copper-soft);font-size:.72rem;margin-bottom:8px}
.cat-book__title b{font-family:var(--u-ff-head);font-weight:900;color:#fff;font-size:1.7rem;line-height:1.1;display:block}
.cat-book__title em{display:block;font-style:normal;color:#9fb1c2;font-size:.82rem;margin-top:10px;letter-spacing:.5px}

/* flipbook frame */
.cat-frame{
  position:relative;border-radius:16px;overflow:hidden;background:#06101a;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07);
}
.cat-frame__bar{display:flex;align-items:center;gap:8px;padding:13px 18px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.cat-frame__bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18);display:block}
.cat-frame__bar span{margin-left:12px;font-family:var(--u-ff-cond);letter-spacing:1.4px;text-transform:uppercase;font-size:.72rem;color:#8ea1b3}
.cat-frame__bar .grow{flex:1}
.cat-frame__full{background:transparent;border:1px solid rgba(255,255,255,.2);color:#cdd9e4;cursor:pointer;
  font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:1.2px;font-size:.7rem;font-weight:700;
  padding:7px 14px;border-radius:5px;transition:background .2s,border-color .2s,color .2s}
.cat-frame__full:hover{background:var(--u-copper);border-color:var(--u-copper);color:#10212e}
.cat-frame iframe{display:block;width:100%;height:78vh;min-height:520px;border:0;background:#0b1620}

/* ============================================================
   CERTIFICATES
   ============================================================ */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(540px,1fr));gap:36px}
.cert-card{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:0;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);border-radius:18px;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .45s ease;
}
.cert-card:hover{transform:translateY(-6px);border-color:rgba(192,138,68,.4);box-shadow:0 40px 70px -34px rgba(0,0,0,.8)}

/* certificate preview (styled, click to zoom) */
.cert-preview{
  position:relative;cursor:zoom-in;background:#f4f1ea;padding:22px;display:flex;
  border-right:1px solid rgba(0,0,0,.12);
}
.cert-doc{
  position:relative;flex:1;background:#fff;border:1px solid #e4ddcb;border-radius:3px;
  box-shadow:0 10px 26px rgba(0,0,0,.28);padding:20px 16px;display:flex;flex-direction:column;
  align-items:center;text-align:center;overflow:hidden;
}
.cert-doc::before{content:"";position:absolute;inset:6px;border:1.5px solid #d8c79a;border-radius:2px;pointer-events:none}
.cert-doc__seal{width:46px;height:46px;margin-bottom:10px}
.cert-doc h4{font-family:'Times New Roman',Georgia,serif;color:#7a1020;font-size:1rem;margin:0 0 6px;font-weight:700}
.cert-doc .org{font-family:var(--u-ff-head);font-weight:900;color:#0c2236;font-size:1.05rem;margin:4px 0 6px;letter-spacing:.5px}
.cert-doc .std{font-family:var(--u-ff-head);font-weight:800;color:#11171e;font-size:1.3rem;margin:6px 0}
.cert-doc small{color:#5a6675;font-size:.62rem;line-height:1.4;display:block}
.cert-preview__zoom{
  position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(12,34,54,.9);display:flex;align-items:center;justify-content:center;color:#fff;
  opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s;
}
.cert-preview:hover .cert-preview__zoom{opacity:1;transform:scale(1)}
.cert-preview__zoom svg{width:16px;height:16px}

/* certificate details */
.cert-info{padding:30px 32px;display:flex;flex-direction:column}
.cert-info .tag{align-self:flex-start;font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:1.4px;font-size:.68rem;font-weight:700;
  color:#0c2236;background:var(--u-copper-soft);padding:5px 12px;border-radius:30px;margin-bottom:14px}
.cert-info h3{font-family:var(--u-ff-head);font-weight:800;color:#fff;font-size:1.4rem;margin:0 0 4px}
.cert-info .issuer{color:var(--u-copper-soft);font-size:.9rem;margin:0 0 18px}
.cert-info dl{margin:0 0 22px;display:grid;gap:11px}
.cert-info .crow{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed rgba(255,255,255,.1);padding-bottom:9px}
.cert-info dt{font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:.8px;font-size:.72rem;color:#8ea1b3}
.cert-info dd{margin:0;color:#dbe6f0;font-size:.86rem;text-align:right;font-weight:600;max-width:60%}
.cert-info .cert-actions{display:flex;gap:12px;margin-top:auto;flex-wrap:wrap}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;
  background:rgba(4,12,20,.92);backdrop-filter:blur(6px);padding:40px}
.lightbox.open{display:flex}
.lightbox__stage{position:relative;width:min(900px,94vw);height:min(86vh,1100px);background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.6)}
.lightbox__stage iframe,.lightbox__stage img{width:100%;height:100%;border:0;object-fit:contain;display:block;background:#fff}
.lightbox__close{position:absolute;top:-14px;right:-14px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:var(--u-copper);color:#10212e;font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.4)}
.lightbox__close:hover{background:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .pwrap,.phero__inner{padding:0 26px}
  .psection{padding:72px 0}
  .cat-hero{grid-template-columns:1fr;gap:40px}
  .cat-hero__copy{order:2}.cat-book{order:1}
  .cert-grid{grid-template-columns:1fr}
  .cert-card{grid-template-columns:1fr}
  .cert-preview{border-right:0;border-bottom:1px solid rgba(0,0,0,.12)}
}
@media (max-width:760px){
  .mfg-process{grid-template-columns:1fr;gap:26px;padding:48px 0}
  .mfg-process:nth-child(even) .mfg-video{order:0}
  .mfg-process:nth-child(even) .mfg-copy{order:0}
  /* width:100% so the grid item fills before max-width caps it — otherwise
     margin:auto collapses it to content width and aspect-ratio yields a sliver. */
  .mfg-video{width:100%;max-width:340px;margin:0 auto}
  .cat-frame iframe{height:62vh;min-height:420px}
  .cat-stats{gap:22px}
}
@media (max-width:520px){
  .pwrap,.phero__inner{padding:0 18px}
  .cat-actions .ubtn,.cert-actions .ubtn{flex:1 1 auto}
}