/* Tips & Articles — hub + article styling (loads after style.min.css) */
:root{
  --tips-navy:#0B1E3D; --tips-navy-800:#0A1628; --tips-gold:#C9A24A;
  --tips-amber:#F59E0B; --tips-ink:#1C2333; --tips-muted:#5A6175;
  --tips-line:#E5E7EB; --tips-bg:#F7F8FB;
}

/* ---------- breadcrumb ---------- */
.breadcrumb-bar{background:var(--tips-bg);border-bottom:1px solid var(--tips-line)}
.breadcrumb-bar .breadcrumb{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding:12px 0;margin:0;font-size:13px;color:var(--tips-muted)}
.breadcrumb-bar .breadcrumb li{display:flex;align-items:center;gap:.5rem}
.breadcrumb-bar .breadcrumb li:not(:last-child)::after{content:"/";color:#9aa1b0}
.breadcrumb-bar .breadcrumb a{color:var(--tips-navy);font-weight:600}
.breadcrumb-bar .breadcrumb a:hover{color:var(--tips-gold)}

/* ---------- hub hero ---------- */
.tips-hero{background:var(--tips-navy);color:#fff;padding:52px 0}
.tips-hero h1{font-size:clamp(1.9rem,1.4rem+2.2vw,2.8rem);font-weight:800;margin:0 0 .5rem;line-height:1.15}
.tips-hero p{color:rgba(255,255,255,.82);font-size:1.05rem;max-width:760px;margin:0;line-height:1.7}

/* ---------- hub grid ---------- */
.tips-list-section{padding:48px 0;background:#fff}
.tips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.tips-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--tips-line);
  border-radius:14px;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.tips-card:hover{border-color:var(--tips-gold);box-shadow:0 10px 30px rgba(27,42,82,.10);transform:translateY(-3px)}
.tips-card__imgwrap{display:block;aspect-ratio:16/9;background:var(--tips-bg);overflow:hidden}
.tips-card__imgwrap img{width:100%;height:100%;object-fit:cover}
.tips-card__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.tips-card__cat{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tips-gold);margin-bottom:8px}
.tips-card__title{font-size:1.18rem;line-height:1.3;margin:0 0 8px;font-weight:800}
.tips-card__title a{color:var(--tips-navy)}
.tips-card__title a:hover{color:var(--tips-gold)}
.tips-card__excerpt{color:var(--tips-muted);font-size:14.5px;line-height:1.6;margin:0 0 16px;flex:1}
.tips-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--tips-line);padding-top:12px}
.tips-card__date{font-size:12.5px;color:#8a90a0}
.tips-card__more{font-size:14px;font-weight:700;color:var(--tips-navy)}
.tips-card__more:hover{color:var(--tips-gold)}
.tips-empty{font-size:1.05rem;color:var(--tips-muted);padding:30px 0}
.tips-empty a{color:var(--tips-navy);font-weight:700}

/* ---------- article ---------- */
.tips-article{background:#fff;padding:0 0 10px}
.tips-article__wrap{max-width:820px}
.tips-article__head{padding:40px 0 10px}
.tips-article__eyebrow{color:var(--tips-gold);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  font-size:12px;margin:0 0 10px}
.tips-article__title{font-size:clamp(1.9rem,1.4rem+2.4vw,2.9rem);font-weight:800;line-height:1.18;
  color:var(--tips-navy);margin:0 0 10px}
.tips-article__date{color:var(--tips-muted);font-size:14px;margin:0}
.tips-article__hero{margin:22px 0 6px;border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(11,30,61,.14)}
.tips-article__hero img{width:100%;height:auto;display:block}

.tips-article__body{font-size:1.06rem;line-height:1.8;color:var(--tips-ink);padding:18px 0 8px}
.tips-article__body h2{font-size:clamp(1.4rem,1.1rem+1.2vw,1.9rem);font-weight:800;color:var(--tips-navy);
  line-height:1.25;margin:2em 0 .6em}
.tips-article__body h3{font-size:1.25rem;font-weight:800;color:var(--tips-navy);margin:1.6em 0 .5em}
.tips-article__body p{margin:0 0 1.15em}
.tips-article__body a{color:#1b4fa0;text-decoration:underline;text-underline-offset:2px}
.tips-article__body a:hover{color:var(--tips-gold)}
.tips-article__body ul,.tips-article__body ol{margin:0 0 1.15em 1.3em}
.tips-article__body li{margin:.3em 0;list-style:disc}
.tips-article__body ol li{list-style:decimal}

/* ---------- share buttons ---------- */
.tips-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0 4px;
  padding:16px 0;border-top:1px solid var(--tips-line);border-bottom:1px solid var(--tips-line)}
.tips-share__label{font-weight:800;color:var(--tips-navy);font-size:14px;margin-right:4px}
.tips-share__btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  color:#fff;padding:8px 14px;border-radius:9999px;text-decoration:none;line-height:1;
  transition:transform .12s ease,opacity .15s ease}
.tips-share__btn:hover{transform:translateY(-2px);opacity:.92}
.tips-share__btn--wa{background:#25D366}
.tips-share__btn--fb{background:#1877F2}
.tips-share__btn--x{background:#0f1419}
.tips-share__btn--li{background:#0A66C2}
.tips-share__btn--em{background:var(--tips-navy)}
@media(max-width:600px){.tips-share{gap:8px}.tips-share__label{flex:1 0 100%;margin-bottom:4px}}

.tips-article__cta{margin:26px 0 8px;background:var(--tips-bg);border:1px solid var(--tips-line);
  border-left:4px solid var(--tips-amber);border-radius:12px;padding:22px 24px}
.tips-article__cta p{margin:0 0 12px;color:var(--tips-ink)}
.tips-article__cta p:last-child{margin:0;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- article CTA band uses the existing .btn system ---------- */
.tips-ctaband{background:var(--tips-navy);color:#fff;text-align:center;padding:50px 0}
.tips-ctaband h2{font-size:clamp(1.5rem,1.2rem+1.4vw,2.1rem);font-weight:800;margin:0 0 .5rem}
.tips-ctaband p{color:rgba(255,255,255,.85);margin:0 0 18px}
.tips-ctaband p:last-child{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0}

@media(max-width:600px){
  .tips-article__cta p:last-child .btn,.tips-ctaband p:last-child .btn{width:100%}
}