/* sang-pages.css — shared pieces for the inner pages redesigned to match the
 * homepage (design/sang0.html). Loaded after sang.css; hand-authored, so the
 * build-sang-css.py generator never touches it. Everything is scoped under `.sg`. */

/* ---------- top-bar language switcher (flag dropdown) ---------- */
.sg .langflag{position:relative}
.sg .langflag__cur{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:7px;padding:4px 8px;cursor:pointer;line-height:0;
  transition:background .15s,border-color .15s}
.sg .langflag__cur:hover{background:rgba(255,255,255,.16)}
.sg .langflag__cur img{width:24px;height:16px;min-width:24px;max-width:none;object-fit:cover;border-radius:2px;display:block}
.sg .langflag .lf-caret{width:6px;height:6px;border-right:1.6px solid #C7D4EC;border-bottom:1.6px solid #C7D4EC;
  transform:rotate(45deg) translateY(-1px);transition:transform .2s}
.sg .langflag.open .lf-caret{transform:rotate(-135deg) translateY(1px)}
.sg .langflag__menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--sh-lift);padding:5px;z-index:70;
  display:flex;flex-direction:row;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.sg .langflag.open .langflag__menu{opacity:1;visibility:visible;transform:translateY(0)}
/* flex:none stops the anchors shrinking; max-width:none defeats sang0's global
   `.sg img{max-width:100%}`, which otherwise ties each flag to its collapsed
   parent and crushes it to a sliver. */
.sg .langflag__menu a{flex:0 0 auto;display:block;padding:4px;border-radius:6px;line-height:0;transition:background .14s}
.sg .langflag__menu a:hover{background:var(--flame-tint)}
.sg .langflag__menu a.on{outline:2px solid var(--flame);outline-offset:-1px}
.sg .langflag__menu a img{width:26px;height:18px;min-width:26px;max-width:none;object-fit:cover;
  border-radius:2px;display:block;border:1px solid var(--line)}

/* ---------- inner-page hero band ---------- */
.sg .page-hero{position:relative;overflow:hidden;background:var(--grad-navy);color:#E7EEFB;
  padding-block:clamp(38px,5vw,64px)}
.sg .page-hero::before{content:"";position:absolute;right:-80px;top:-90px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,176,32,.28),transparent 66%);pointer-events:none}
.sg .page-hero::after{content:"";position:absolute;left:-90px;bottom:-110px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(243,112,6,.22),transparent 66%);pointer-events:none}
.sg .page-hero__in{position:relative}
.sg .page-hero.has-img{background:var(--navy-deep)}
.sg .page-hero.has-img .page-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.28;pointer-events:none}
.sg .page-hero h1{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:900;letter-spacing:-.03em;color:#fff;
  text-wrap:balance;margin:0}
.sg .page-hero .ph-icon{width:54px;height:54px;border-radius:15px;background:var(--grad-flame);display:grid;
  place-items:center;margin-bottom:16px;box-shadow:0 12px 24px -10px rgba(243,112,6,.7)}
.sg .page-hero .ph-icon img{width:30px;height:30px;object-fit:contain;filter:brightness(0) invert(1)}
.sg .page-hero .ph-icon svg{width:28px;height:28px;color:#fff}
.sg .page-hero .ph-sub{margin-top:12px;color:#AFC0E2;font-size:clamp(1rem,1.4vw,1.15rem);max-width:60ch}

/* breadcrumb */
.sg .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.86rem;margin-top:16px;color:#9EB2D6}
.sg .crumbs a{color:#C7D4EC;font-weight:600}.sg .crumbs a:hover{color:#fff}
.sg .crumbs .sep{opacity:.5}
.sg .crumbs .cur{color:#fff;font-weight:700}
/* breadcrumb on light bands */
.sg .crumbs--light{color:var(--slate);margin-top:0}
.sg .crumbs--light a{color:var(--flame-700)}.sg .crumbs--light a:hover{color:var(--flame)}
.sg .crumbs--light .cur{color:var(--navy)}

/* ---------- prose: styles DB-authored HTML content ---------- */
.sg .prose{font-size:1.02rem;line-height:1.7;color:#2B3350;max-width:min(100%,860px)}
.sg .prose.wide{max-width:100%}
.sg .prose > *:first-child{margin-top:0}
.sg .prose h1,.sg .prose h2,.sg .prose h3,.sg .prose h4{color:var(--navy);font-weight:800;
  line-height:1.25;letter-spacing:-.02em;margin:1.6em 0 .5em}
.sg .prose h1{font-size:1.7rem}.sg .prose h2{font-size:1.42rem}.sg .prose h3{font-size:1.18rem}.sg .prose h4{font-size:1.04rem}
.sg .prose p{margin:0 0 1.05em}
.sg .prose a{color:var(--flame-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.sg .prose a:hover{color:var(--flame)}
.sg .prose img{border-radius:var(--r-md);margin:1.1em 0;box-shadow:var(--sh);height:auto}
.sg .prose ul,.sg .prose ol{margin:0 0 1.1em;padding-left:1.35em}
.sg .prose li{margin:.35em 0}
.sg .prose ul li::marker{color:var(--flame)}
.sg .prose blockquote{border-left:4px solid var(--flame);background:var(--flame-tint);border-radius:0 var(--r-md) var(--r-md) 0;
  margin:1.2em 0;padding:.9em 1.1em;color:#3B466A}
.sg .prose strong,.sg .prose b{color:var(--navy);font-weight:700}
.sg .prose hr{border:none;border-top:1px solid var(--line);margin:1.8em 0}
.sg .prose code{background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:.1em .4em;font-size:.9em}
.sg .prose-scroll{overflow-x:auto;margin:1.2em 0}
.sg .prose table{border-collapse:collapse;width:100%;font-size:.94rem}
.sg .prose-scroll table{margin:0}
.sg .prose th,.sg .prose td{border:1px solid var(--line2);padding:.66em .8em;text-align:left;vertical-align:top}
.sg .prose thead th,.sg .prose tr:first-child td{background:var(--navy);color:#fff;font-weight:700;border-color:var(--navy)}
.sg .prose tbody tr:nth-child(even),.sg .prose tr:nth-child(even){background:var(--cream)}
.sg .prose iframe,.sg .prose video{max-width:100%;border-radius:var(--r-md);margin:1.1em 0}

/* ---------- generic listing card grid (news, guides, etc.) ---------- */
.sg .plist{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sg .plist.cols4{grid-template-columns:repeat(4,1fr)}
.sg .pcard{background:#fff;border:1px solid var(--line2);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.sg .pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.sg .pcard__thumb{aspect-ratio:16/10;background:var(--cream);overflow:hidden}
.sg .pcard__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.sg .pcard:hover .pcard__thumb img{transform:scale(1.04)}
.sg .pcard__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.sg .pcard__date{font-size:.76rem;font-weight:700;color:var(--flame-700);display:inline-flex;align-items:center;
  gap:6px;margin-bottom:10px}.sg .pcard__date svg{width:13px;height:13px}
.sg .pcard h3,.sg .pcard h4{font-size:1.04rem;line-height:1.4;color:var(--navy);font-weight:800;margin:0 0 8px}
.sg .pcard p{font-size:.9rem;color:var(--slate);line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sg .pcard .rd{margin-top:14px;font-size:.84rem;font-weight:800;color:var(--slate);display:inline-flex;
  align-items:center;gap:6px}.sg .pcard .rd svg{width:14px;height:14px}.sg .pcard:hover .rd{color:var(--flame-700)}

/* sidebar (news list, price tabs, guide nav) */
.sg .layout-2col{display:grid;grid-template-columns:1fr 320px;gap:clamp(24px,3vw,44px);align-items:start}
.sg .layout-2col.left{grid-template-columns:280px 1fr}
.sg .side-card{background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--sh);
  padding:20px;position:sticky;top:92px}
.sg .side-card h4{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--flame-700);
  font-weight:800;margin:0 0 14px}
.sg .side-list{display:flex;flex-direction:column;gap:4px}
.sg .side-list a{padding:10px 12px;border-radius:10px;font-weight:600;font-size:.92rem;color:#3B466A;
  transition:background .15s,color .15s;display:flex;gap:10px;align-items:center}
.sg .side-list a:hover{background:var(--flame-tint);color:var(--flame-700)}
.sg .side-list a.active{background:var(--navy);color:#fff}
.sg .side-mini{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2)}
.sg .side-mini:last-child{border-bottom:none}
.sg .side-mini img{width:74px;height:56px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.sg .side-mini h5{font-size:.86rem;line-height:1.35;color:var(--navy);font-weight:700;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* empty state */
.sg .empty-note{text-align:center;color:var(--slate);padding:48px 0;font-weight:500}

@media (max-width:980px){
  .sg .plist{grid-template-columns:1fr 1fr}
  .sg .plist.cols4{grid-template-columns:1fr 1fr}
  .sg .layout-2col,.sg .layout-2col.left{grid-template-columns:1fr}
  .sg .side-card{position:static}
}
@media (max-width:600px){
  .sg .plist,.sg .plist.cols4{grid-template-columns:1fr}
}