/* ============================================================
   Hantai Lifting - inner page components
   Depends on css/site.css (design tokens & base layout)
   ============================================================ */

/* ---------- inner page hero ---------- */
.page-hero{position:relative;padding:150px 0 62px;background:#0B3D91;overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,61,145,.94) 0%,rgba(11,61,145,.82) 45%,rgba(30,144,255,.55) 100%);z-index:2;}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);filter:saturate(.85);}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#FBBF24,#FCD34D,#FBBF24);z-index:3;}
.page-hero .container{position:relative;z-index:4;}
.page-hero h1{font-family:'Noto Serif SC',serif;font-size:2.5rem;font-weight:700;color:#fff;margin:0 0 14px;letter-spacing:1px;}
.page-hero h1 em{font-style:normal;color:#FBBF24;}
.page-hero p{color:rgba(255,255,255,.86);font-size:1.02rem;line-height:1.9;max-width:760px;margin:0;}
.breadcrumb-trail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.86rem;color:rgba(255,255,255,.72);margin-bottom:18px;}
.breadcrumb-trail a{color:rgba(255,255,255,.86);text-decoration:none;}
.breadcrumb-trail a:hover{color:#FBBF24;}
.breadcrumb-trail span.sep{opacity:.55;}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.hero-tags span{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid rgba(251,191,36,.55);border-radius:999px;color:#FDE68A;font-size:.82rem;background:rgba(251,191,36,.08);}

/* ---------- generic section ---------- */
.section-pad{padding:76px 0;}
.section-pad.tight{padding:56px 0;}
.bg-light-gray{background:#F8FAFC;}
.bg-white{background:#fff;}
.lead-text{font-size:1.02rem;line-height:2;color:#555;max-width:860px;}
.section-header.left-align{text-align:left;margin-bottom:38px;}
.section-header.left-align .gold-line{margin-left:0;}
.section-header.left-align .section-subtitle{margin-left:0;}

/* ---------- service detail block ---------- */
.svc-block{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:44px 0;border-bottom:1px solid #E8EDF5;}
.svc-block:last-child{border-bottom:none;}
.svc-block.reverse .svc-media{order:2;}
.svc-media{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(11,61,145,.16);}
.svc-media img{width:100%;height:340px;object-fit:cover;display:block;transition:transform .6s ease;}
.svc-media:hover img{transform:scale(1.05);}
.svc-media .svc-badge{position:absolute;left:16px;top:16px;background:#FBBF24;color:#0B3D91;font-weight:700;font-size:.78rem;padding:5px 12px;border-radius:6px;letter-spacing:.5px;}
.svc-body h2{font-family:'Noto Serif SC',serif;font-size:1.62rem;font-weight:700;color:#0B3D91;margin:0 0 6px;}
.svc-body .svc-en{font-size:.76rem;letter-spacing:2px;text-transform:uppercase;color:#9AA7B8;margin-bottom:14px;display:block;}
.svc-body p{color:#555;line-height:2;margin-bottom:16px;font-size:.98rem;}
.spec-list{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;}
.spec-list li{position:relative;padding-left:20px;color:#3d4a5c;font-size:.92rem;line-height:1.75;}
.spec-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:#1E90FF;box-shadow:0 0 0 3px rgba(30,144,255,.16);}
.svc-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}

/* ---------- spec table ---------- */
.spec-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(11,61,145,.08);}
.spec-table th,.spec-table td{padding:13px 18px;text-align:left;font-size:.94rem;border-bottom:1px solid #EDF1F7;}
.spec-table thead th{background:#0B3D91;color:#fff;font-weight:600;letter-spacing:.5px;}
.spec-table tbody tr:nth-child(even){background:#F8FAFC;}
.spec-table tbody th{color:#0B3D91;font-weight:600;width:32%;}
.spec-table tbody td{color:#555;}

/* ---------- gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;}
.gallery-item{position:relative;border-radius:12px;overflow:hidden;background:#0B3D91;cursor:zoom-in;box-shadow:0 10px 24px rgba(11,61,145,.12);}
.gallery-item img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .55s ease,opacity .3s ease;}
.gallery-item:hover img{transform:scale(1.07);opacity:.92;}
.gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(to top,rgba(6,26,64,.9),rgba(6,26,64,0));color:#fff;font-size:.86rem;line-height:1.5;}
.gallery-item.wide{grid-column:span 2;}
.gallery-item.wide img{height:200px;}

/* ---------- certificate cards ---------- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;}
.cert-card{background:#fff;border-radius:12px;padding:14px;box-shadow:0 10px 26px rgba(11,61,145,.1);cursor:zoom-in;transition:transform .3s ease,box-shadow .3s ease;}
.cert-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(11,61,145,.16);}
.cert-card img{width:100%;height:230px;object-fit:contain;background:#F4F6FA;border-radius:8px;display:block;}
.cert-card h4{font-size:.98rem;font-weight:700;color:#0B3D91;margin:12px 0 4px;text-align:center;}
.cert-card p{font-size:.8rem;color:#8A96A8;text-align:center;margin:0;}

/* ---------- faq ---------- */
.faq-list{max-width:920px;margin:0 auto;}
.faq-list details{background:#fff;border:1px solid #E6ECF5;border-radius:10px;margin-bottom:12px;padding:0 20px;transition:box-shadow .25s ease,border-color .25s ease;}
.faq-list details[open]{border-color:#C7D8F2;box-shadow:0 10px 26px rgba(11,61,145,.09);}
.faq-list summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:12px;padding:17px 0;font-weight:600;color:#17324F;font-size:1rem;line-height:1.7;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::before{content:"Q";flex:0 0 24px;height:24px;border-radius:50%;background:#0B3D91;color:#fff;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:3px;}
.faq-list details[open] summary::before{background:#FBBF24;color:#0B3D91;}
.faq-list .faq-answer{padding:0 0 18px 36px;color:#5A6779;line-height:2;font-size:.96rem;}
.faq-list .faq-answer strong{color:#0B3D91;}

/* ---------- info cards / contact ---------- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.info-card{background:#fff;border-radius:12px;padding:26px 24px;box-shadow:0 10px 26px rgba(11,61,145,.08);height:100%;}
.info-card i{font-size:1.5rem;color:#1E90FF;margin-bottom:14px;display:block;}
.info-card h4{font-size:1rem;font-weight:700;color:#0B3D91;margin:0 0 8px;}
.info-card p{font-size:.92rem;color:#5A6779;line-height:1.9;margin:0;}
.info-card a{color:#1E90FF;text-decoration:none;}
.info-card a:hover{text-decoration:underline;}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,#0B3D91 0%,#0A357E 55%,#1E90FF 100%);padding:52px 0;position:relative;overflow:hidden;}
.cta-band::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(251,191,36,.12);}
.cta-band .cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:2;}
.cta-band h3{font-family:'Noto Serif SC',serif;color:#fff;font-size:1.5rem;margin:0 0 6px;}
.cta-band p{color:rgba(255,255,255,.82);margin:0;font-size:.94rem;}

/* ---------- stat strip ---------- */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.stat-strip .stat-cell{background:#fff;border-radius:10px;padding:24px 16px;text-align:center;box-shadow:0 8px 20px rgba(11,61,145,.08);}
.stat-strip .stat-cell b{display:block;font-family:'Noto Serif SC',serif;font-size:2rem;color:#0B3D91;line-height:1.1;}
.stat-strip .stat-cell b span{color:#FBBF24;}
.stat-strip .stat-cell small{color:#7A8798;font-size:.84rem;}

/* ---------- pill tags ---------- */
.tag-pill{display:inline-block;padding:5px 13px;border-radius:999px;background:rgba(30,144,255,.1);color:#1266C9;font-size:.8rem;margin:0 8px 8px 0;}

/* ---------- client logo / text strip ---------- */
.client-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.client-strip div{background:#fff;border:1px solid #E8EDF5;border-radius:10px;padding:18px 10px;text-align:center;font-weight:600;color:#17324F;font-size:.94rem;letter-spacing:.5px;}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(6,16,36,.92);padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.lightbox-close{position:absolute;right:26px;top:22px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:1.3rem;cursor:pointer;}
.lightbox-close:hover{background:rgba(255,255,255,.26);}
.lightbox-caption{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-size:.9rem;}

/* ---------- map placeholder ---------- */
.map-card{background:#fff;border-radius:12px;padding:22px;box-shadow:0 10px 26px rgba(11,61,145,.08);}
.map-card .map-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.map-card .map-head i{color:#1E90FF;}
.map-card .map-head strong{color:#0B3D91;}
.map-card p{color:#5A6779;font-size:.92rem;line-height:1.9;margin:0 0 6px;}
.map-card .btn-outline-custom{margin-top:12px;}
.map-card-frame{border-radius:12px;overflow:hidden;background:#EEF4FF;border:1px solid rgba(11,61,145,.10);padding:18px;}
.map-card-frame img{width:100%;display:block;border-radius:8px;max-height:420px;object-fit:cover;}
.map-card-info{display:grid;gap:10px;margin-top:16px;}
.map-card-info p{display:flex;gap:10px;align-items:flex-start;margin:0;color:#33415C;font-size:.94rem;line-height:1.8;}
.map-card-info i{color:#1E90FF;margin-top:4px;flex:0 0 auto;}

/* ---------- inner page footer spacing ---------- */
.footer .footer-contact a{color:rgba(255,255,255,.86);text-decoration:none;}

/* ---------- contact cta ---------- */
.contact-cta{background:#fff;}
.contact-cta .cta-inner{background:linear-gradient(135deg,#0B3D91 0%,#123E7A 55%,#0B3D91 100%);border-radius:18px;padding:52px 40px;text-align:center;box-shadow:0 18px 42px rgba(11,61,145,.22);position:relative;overflow:hidden;}
.contact-cta .cta-inner::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:120px;height:3px;background:#FBBF24;}
.contact-cta h2{color:#fff;font-family:'Noto Serif SC',serif;font-size:1.85rem;margin:0 0 14px;}
.contact-cta p{color:rgba(255,255,255,.82);font-size:.98rem;line-height:1.9;margin:0 auto 26px;max-width:720px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}
@media (max-width:575px){.contact-cta .cta-inner{padding:36px 22px;}.contact-cta h2{font-size:1.4rem;}}

/* ---------- buttons ---------- */
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#FBBF24,#F59E0B);color:#0B3D91;font-weight:700;font-size:.98rem;padding:14px 30px;border-radius:999px;text-decoration:none;border:none;box-shadow:0 10px 24px rgba(251,191,36,.32);transition:.28s;}
.btn-gold:hover{transform:translateY(-3px);color:#0B3D91;box-shadow:0 14px 32px rgba(251,191,36,.45);}
.btn-gold i{font-size:.85rem;}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:transparent;color:#fff;font-weight:600;padding:13px 28px;border-radius:999px;border:1px solid rgba(255,255,255,.5);text-decoration:none;transition:.28s;}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;}

/* ---------- home extra sections ---------- */
.product-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:.9rem;font-weight:600;color:#0B3D91;text-decoration:none;border-bottom:1px solid rgba(11,61,145,.25);padding-bottom:2px;transition:.25s;}
.product-link i{font-size:.78rem;transition:.25s;}
.product-link:hover{color:#1E90FF;border-bottom-color:#1E90FF;}
.product-link:hover i{transform:translateX(4px);}

.equip-section{background:#F8FAFC;}
.gallery-section{background:#ffffff;}
.faq-section{background:#F8FAFC;}
.area-section{background:#ffffff;}

.area-tags{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px;}
.area-tags .tag-pill{background:#fff;border:1px solid rgba(11,61,145,.16);color:#0B3D91;padding:9px 18px;border-radius:999px;font-size:.92rem;box-shadow:0 4px 12px rgba(11,61,145,.05);}
.area-note{text-align:center;color:#5A6779;margin:26px auto 0;max-width:760px;font-size:.95rem;line-height:1.9;}

.equip-section .gallery-item,.gallery-section .gallery-item{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 26px rgba(11,61,145,.09);margin:0;}
.equip-section .gallery-item img,.gallery-section .gallery-item img{width:100%;height:230px;object-fit:cover;display:block;}
.equip-section .gallery-item figcaption,.gallery-section .gallery-item figcaption{position:static;background:#fff;padding:16px 18px 18px;font-size:.88rem;color:#5A6779;line-height:1.85;}
.equip-section .gallery-item figcaption strong,.gallery-section .gallery-item figcaption strong{display:block;color:#0B3D91;font-size:1rem;margin-bottom:6px;}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .page-hero{padding:126px 0 48px;}
  .page-hero h1{font-size:1.9rem;}
  .svc-block{grid-template-columns:1fr;gap:26px;padding:32px 0;}
  .svc-block.reverse .svc-media{order:0;}
  .svc-media img{height:260px;}
  .gallery-item.wide{grid-column:span 1;}
  .section-pad{padding:56px 0;}
}
@media (max-width:575px){
  .page-hero h1{font-size:1.55rem;}
  .spec-list{grid-template-columns:1fr;}
  .gallery-item img{height:180px;}
  .cert-card img{height:190px;}
}

/* ---------- cert detail table ---------- */
.spec-table th small{display:block;font-weight:400;font-size:.78rem;color:#7C8AA0;margin-top:3px;letter-spacing:0;}
.spec-table td{vertical-align:top;}

/* ---------- outline button on light background ---------- */
.svc-links .btn-outline-custom,
.map-card .btn-outline-custom{color:#0B3D91;border-color:rgba(11,61,145,.35);background:#fff;}
.svc-links .btn-outline-custom:hover,
.map-card .btn-outline-custom:hover{background:#F1F5FB;border-color:#0B3D91;color:#0B3D91;}

@media (min-width:992px){.client-strip{grid-template-columns:repeat(5,1fr);}}