/* Sunrise Glory Engineering — v5.9 typography controls and product agency pages */

/* All front-end px text rules are converted to these proportional variables in v5.9.
   The hierarchy remains intact: a 48px title still scales more than a 14px label. */

.sg-agency-main-hero { overflow: hidden; }
.sg-agency-main-hero-actions,
.sg-agency-category-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.sg-agency-main-hero .button-primary,
.sg-agency-category-hero .button-primary { gap:10px; }
.sg-agency-main-hero .button-outline,
.sg-agency-category-hero .button-outline { gap:10px; }

.sg-agency-section-head { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:70px; align-items:start; }
.sg-agency-section-head .section-copy { margin-top:4px; }
.sg-agency-category-index { border-bottom:1px solid var(--line); }
.sg-agency-category-index-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:52px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.sg-agency-category-index-card { position:relative; display:flex; min-height:330px; flex-direction:column; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px; background:#fff; color:var(--navy); transition:background .2s var(--ease-out),color .2s var(--ease-out),transform .2s var(--ease-out); }
.sg-agency-category-index-card:hover { z-index:1; background:var(--navy); color:#fff; transform:translateY(-4px); }
.sg-agency-category-index-no { color:var(--orange); font-family:'Barlow Condensed','Noto Sans TC',sans-serif; font-size:var(--sg-font-14,14px); font-weight:700; letter-spacing:.13em; }
.sg-agency-category-index-icon { display:grid; width:48px; height:48px; place-items:center; margin-top:42px; border:1px solid var(--line); color:var(--orange); font-size:var(--sg-font-20,20px); transition:border-color .2s var(--ease-out); }
.sg-agency-category-index-card:hover .sg-agency-category-index-icon { border-color:rgba(255,255,255,.45); }
.sg-agency-category-index-card h3 { margin:25px 0 0; font-family:'Barlow Condensed','Noto Sans TC',sans-serif; font-size:var(--sg-font-31,31px); font-weight:700; letter-spacing:-.04em; line-height:.95; }
.sg-agency-category-index-card p { margin:14px 0 0; color:var(--steel); font-size:var(--sg-font-13,13px); line-height:1.85; transition:color .2s var(--ease-out); }
.sg-agency-category-index-card:hover p { color:#c6d4dc; }
.sg-agency-category-index-card small { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:27px; color:var(--orange); font-size:var(--sg-font-11,11px); font-weight:800; letter-spacing:.07em; }

.sg-agency-category-hero { position:relative; min-height:520px; overflow:hidden; background:var(--navy); color:#fff; }
.sg-agency-category-hero:before { position:absolute; inset:0; background-image:linear-gradient(90deg,rgba(7,26,46,.98) 0%,rgba(7,26,46,.91) 42%,rgba(7,26,46,.42) 100%),var(--sg-agency-hero-image,linear-gradient(130deg,#102e47,#071a2e)); background-position:center; background-size:cover; content:''; }
.sg-agency-category-hero:after { position:absolute; top:-170px; right:-140px; width:520px; height:520px; border:1px solid rgba(125,207,255,.28); border-radius:50%; box-shadow:0 0 0 52px rgba(125,207,255,.04),0 0 0 104px rgba(125,207,255,.025); content:''; }
.sg-agency-category-hero-inner { position:relative; z-index:1; display:grid; min-height:520px; grid-template-columns:minmax(0,1fr) 280px; gap:70px; align-items:end; padding-top:74px; padding-bottom:62px; }
.sg-agency-category-hero .tech-label { color:#7dcfff; }
.sg-agency-category-hero h1 { max-width:900px; margin:20px 0 0; font-family:'Barlow Condensed','Noto Sans TC',sans-serif; font-size:clamp(var(--sg-font-50,50px),5.7vw,var(--sg-font-90,90px)); font-weight:700; letter-spacing:-.055em; line-height:.86; }
.sg-agency-category-hero h1 span { color:var(--orange); }
.sg-agency-category-hero>p { max-width:720px; }
.sg-agency-category-hero-inner>div>p { max-width:740px; margin:25px 0 0; color:#cfdae1; font-size:var(--sg-font-15,15px); line-height:1.95; }
.sg-agency-category-hero-note { align-self:end; border-left:2px solid var(--orange); padding:8px 0 8px 20px; color:#c4d1d9; }
.sg-agency-category-hero-note>span { color:#7dcfff; font-family:'Barlow Condensed','Noto Sans TC',sans-serif; font-size:var(--sg-font-42,42px); font-weight:700; letter-spacing:-.03em; line-height:1; }
.sg-agency-category-hero-note b { display:block; margin-top:12px; color:#fff; font-family:'Barlow Condensed','Noto Sans TC',sans-serif; font-size:var(--sg-font-11,11px); letter-spacing:.12em; }
.sg-agency-category-hero-note p { margin:13px 0 0; font-size:var(--sg-font-12,12px); line-height:1.75; }

.sg-agency-brands-section { background:#fff; }
.sg-agency-brand-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:52px; }
.sg-agency-brand-card { position:relative; min-height:250px; overflow:hidden; border:1px solid var(--line); padding:30px; background:linear-gradient(135deg,#fff 0%,#f6fafe 100%); }
.sg-agency-brand-card:after { position:absolute; right:-70px; bottom:-105px; width:260px; height:260px; border:1px solid rgba(0,114,188,.15); border-radius:50%; content:''; }
.sg-agency-brand-mark { display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--orange); color:var(--orange); }
.sg-agency-brand-card h3 { position:relative; z-index:1; margin:22px 0 0; font-family:'Barlow Condensed','Noto Sans TC',sans-serif; font-size:var(--sg-font-32,32px); font-weight:700; letter-spacing:-.04em; line-height:.95; }
.sg-agency-brand-card p { position:relative; z-index:1; max-width:620px; margin:14px 0 0; color:var(--steel); font-size:var(--sg-font-13,13px); line-height:1.85; }
.sg-agency-brand-card a { position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px; margin-top:21px; color:var(--orange); font-size:var(--sg-font-12,12px); font-weight:800; }
.sg-agency-brand-card a:hover { color:var(--navy); }

.sg-agency-products-section { border-top:1px solid var(--line); }
.sg-agency-view-all { display:inline-flex; align-items:center; gap:9px; justify-self:end; border-bottom:1px solid var(--orange); padding-bottom:4px; color:var(--orange); font-size:var(--sg-font-12,12px); font-weight:800; }
.sg-agency-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:50px; }
.sg-agency-product-card { display:flex; min-width:0; flex-direction:column; background:#fff; box-shadow:0 8px 24px rgba(7,26,46,.06); }
.sg-agency-product-image { display:grid; height:180px; place-items:center; overflow:hidden; background:#0c2a42; color:#7dcfff; font-size:var(--sg-font-42,42px); }
.sg-agency-product-image img { width:100%; height:100%; object-fit:cover; }
.sg-agency-product-card-body { display:flex; min-height:230px; flex-direction:column; padding:24px; }
.sg-agency-product-tags { display:flex; min-height:20px; flex-wrap:wrap; gap:6px; }
.sg-agency-product-tags span { background:#eaf3fb; padding:3px 6px; color:var(--orange); font-family:'Barlow Condensed','Noto Sans TC',sans-serif; font-size:var(--sg-font-10,10px); font-weight:700; letter-spacing:.08em; }
.sg-agency-product-card h3 { margin:13px 0 0; font-size:var(--sg-font-17,17px); font-weight:900; letter-spacing:-.03em; line-height:1.35; }
.sg-agency-product-card p { margin:11px 0 0; color:var(--steel); font-size:var(--sg-font-12,12px); line-height:1.75; }
.sg-agency-product-card a { display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:20px; color:var(--orange); font-size:var(--sg-font-12,12px); font-weight:800; }
.sg-agency-empty-state { display:flex; min-height:210px; align-items:center; justify-content:center; gap:15px; margin-top:48px; border:1px dashed #b8c8d3; padding:30px; color:var(--steel); text-align:center; }
.sg-agency-empty-state i { color:var(--orange); font-size:var(--sg-font-24,24px); }
.sg-agency-empty-state p { max-width:560px; margin:0; font-size:var(--sg-font-13,13px); line-height:1.85; }

@media (max-width:1000px) {
  .sg-agency-section-head { grid-template-columns:1fr; gap:24px; }
  .sg-agency-category-index-grid { grid-template-columns:1fr 1fr; }
  .sg-agency-category-hero-inner { grid-template-columns:1fr; gap:38px; }
  .sg-agency-category-hero-note { max-width:600px; }
  .sg-agency-product-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .sg-agency-main-hero-actions,.sg-agency-category-hero-actions { gap:10px; margin-top:25px; }
  .sg-agency-main-hero-actions .button-primary,.sg-agency-main-hero-actions .button-outline,.sg-agency-category-hero-actions .button-primary,.sg-agency-category-hero-actions .button-outline { width:100%; }
  .sg-agency-category-index-grid,.sg-agency-brand-grid,.sg-agency-product-grid { grid-template-columns:1fr; }
  .sg-agency-category-index-grid { margin-top:34px; }
  .sg-agency-category-index-card { min-height:255px; padding:23px; }
  .sg-agency-category-index-icon { margin-top:27px; }
  .sg-agency-category-hero { min-height:560px; }
  .sg-agency-category-hero-inner { min-height:560px; gap:30px; padding-top:56px; padding-bottom:45px; }
  .sg-agency-category-hero h1 { font-size:var(--sg-font-51,51px); }
  .sg-agency-brand-grid,.sg-agency-product-grid { margin-top:34px; }
  .sg-agency-brand-card { min-height:225px; padding:24px; }
  .sg-agency-view-all { justify-self:start; margin-top:4px; }
}