/* ====================================================================
   HANGOOW · Unified sub-page template
   Reference: galeratech.com/business-areas
   Pattern: centered page hero → card grid (title + copy + "Find out
   more") → closing trust statement → CTA → footer
   Used by: products / about / capabilities / applications /
            inventory / inventory-detail
   Depends on: common-theme.css
   ==================================================================== */

/* ---------- Page hero ---------- */
.pa-hero{position:relative;padding:150px 0 60px;text-align:center}
.pa-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:var(--r-full);
  background:rgba(21,42,62,0.04);border:1px solid var(--line-2);
  font-family:var(--f-m);font-size:10.5px;letter-spacing:1.8px;color:var(--cyan);
  text-transform:uppercase;margin-bottom:26px}
.pa-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.pa-hero h1{font-family:var(--f-d);font-size:clamp(34px,4.6vw,58px);font-weight:300;
  letter-spacing:-1.4px;line-height:1.08;color:var(--ink);margin:0 0 20px;
  text-shadow:0 1px 2px rgba(255,255,255,0.55)}
.pa-hero h1 .b{font-weight:600;color:var(--ink)}
.pa-hero h1 .light{font-weight:300;color:var(--ink-3)}
.pa-hero p{max-width:680px;margin:0 auto;font-size:15.5px;color:var(--ink-2);line-height:1.8;
  text-shadow:0 1px 2px rgba(255,255,255,0.5)}

/* ---------- Card grid ---------- */
.pa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pa-card{
  position:relative;overflow:hidden;
  padding:32px 28px 28px;background:var(--grad-card);border:1px solid var(--line);
  border-radius:var(--r-lg);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .25s,border-color .25s,box-shadow .25s
}
.pa-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan-soft) 100%);
  opacity:0;transition:opacity .25s
}
.pa-card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 12px 32px rgba(21,42,62,0.10)}
.pa-card:hover::before{opacity:1}

.pa-num{font-family:var(--f-m);font-size:11px;color:var(--ink-4);letter-spacing:1.6px}
.pa-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:var(--r-md);background:rgba(21,42,62,0.05);color:var(--cyan);margin-bottom:2px}
.pa-card h3{font-family:var(--f-d);font-size:19px;font-weight:600;color:var(--ink);line-height:1.28}
.pa-card h3 .en{display:block;font-family:var(--f-m);font-size:10.5px;font-weight:600;
  letter-spacing:1.2px;color:var(--cyan);text-transform:uppercase;margin-top:6px}
.pa-card p{font-size:13.5px;color:var(--ink-3);line-height:1.75}

/* "Find out more" — underline + chevron, galeratech-style */
.pa-more{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-s);font-size:13px;font-weight:600;color:var(--cyan);
  text-decoration:none;letter-spacing:.2px;
  border-top:1px dashed var(--line);width:100%;
  transition:gap .2s,color .2s
}
.pa-more svg{flex-shrink:0;transition:transform .2s}
.pa-card:hover .pa-more{gap:11px;color:var(--cyan-bright)}
.pa-card:hover .pa-more svg{transform:translateX(2px)}
.pa-more:hover{text-decoration:underline}

/* meta row inside card (stock / price chips) */
.pa-meta{display:flex;flex-wrap:wrap;gap:6px}
.pa-meta span{padding:3px 10px;background:rgba(21,42,62,0.04);border:1px solid var(--line);
  border-radius:var(--r-sm);font-family:var(--f-m);font-size:10.5px;color:var(--cyan)}
.pa-meta .hi{color:var(--success);border-color:rgba(58,139,91,0.25);background:rgba(58,139,91,0.07)}
.pa-meta .lo{color:var(--danger);border-color:rgba(150,35,23,0.22);background:rgba(150,35,23,0.06)}

@media(max-width:1024px){.pa-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .pa-grid{grid-template-columns:1fr}
  .pa-hero{padding:120px 0 44px}
}

/* ---------- Closing trust statement ---------- */
.pa-close{padding:80px 0;text-align:center;background:rgba(232,238,243,0.55);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pa-close h2{font-family:var(--f-d);font-size:clamp(24px,3vw,34px);font-weight:300;
  letter-spacing:-0.6px;color:var(--ink);max-width:780px;margin:0 auto 16px;line-height:1.32}
.pa-close h2 .b{font-weight:600}
.pa-close p{font-size:14.5px;color:var(--ink-2);max-width:660px;margin:0 auto 22px;line-height:1.8}
.pa-close .cert-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px}
.pa-close .cert-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  border:1px solid var(--line-2);border-radius:var(--r-full);background:#ffffff;
  font-size:11.5px;font-weight:600;color:var(--ink)}
.pa-close .cert-pill .ck{color:var(--success);font-weight:700}

/* ---------- Empty / fallback ---------- */
.pa-empty{grid-column:1/-1;padding:40px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* ====================================================================
   Photo band — 3-up imagery strip (people / warehouse / logistics /
   wafer / lab). Decorative captions sit on a dark gradient so photos
   stay readable on the light B2B theme.
   ==================================================================== */
.pa-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pa-shot{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);box-shadow:0 10px 30px rgba(21,42,62,0.10);
  aspect-ratio:4/3;background:var(--bg-soft)
}
.pa-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.pa-shot:hover img{transform:scale(1.05)}
.pa-shot .cap{
  position:absolute;left:0;right:0;bottom:0;padding:18px 20px;
  background:linear-gradient(180deg,transparent 0%,rgba(14,32,48,0.55) 45%,rgba(14,32,48,0.85) 100%);
  color:#e8eef3
}
.pa-shot .cap b{display:block;font-family:var(--f-d);font-size:14.5px;font-weight:600;
  letter-spacing:.2px;color:#ffffff;margin-bottom:4px}
.pa-shot .cap span{font-family:var(--f-m);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:rgba(232,238,243,0.82)}

/* wide feature image (optional full-width banner) */
.pa-feature{position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line-2);box-shadow:0 18px 50px rgba(21,42,62,0.14);aspect-ratio:21/9}
.pa-feature img{width:100%;height:100%;object-fit:cover;display:block}
.pa-feature .cap{position:absolute;left:26px;bottom:24px;padding:9px 16px;border-radius:var(--r-full);
  background:rgba(14,32,48,0.6);backdrop-filter:blur(8px);color:#f5f5f5;
  font-family:var(--f-m);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase}

/* section label used above photo bands */
.pa-band-head{text-align:center;margin-bottom:32px}
.pa-band-head .sec-tag{margin-bottom:14px}
.pa-band-head h2{font-family:var(--f-d);font-size:clamp(24px,2.8vw,32px);font-weight:300;
  letter-spacing:-0.6px;color:var(--ink);margin-bottom:10px}
.pa-band-head h2 .b{font-weight:600}
.pa-band-head p{max-width:600px;margin:0 auto;font-size:14.5px;color:var(--ink-2);line-height:1.75}

@media(max-width:1024px){.pa-shots{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .pa-shots{grid-template-columns:1fr}
  .pa-feature{aspect-ratio:16/10}
}