
/* Online Family — shared blog listing and article styles */
.blog-grid-paginated { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 18px; }
.blog-image { width:100%; aspect-ratio:16/9; position:relative; overflow:hidden; background:#d6d5c9; }
.blog-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .4s; }
.blog-card a:hover .blog-image img { transform:scale(1.035); }
.blog-image>span { position:absolute; left:10px; bottom:10px; background:var(--lime); padding:6px 8px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.blog-card .meta { margin:13px 0 8px; }
.blog-card h3 { font-size:22px; line-height:1.1; }
.blog-card p { min-height:45px; line-height:1.7; }
.read-link { display:inline-block; margin-top:5px; font-size:10px; letter-spacing:.1em; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.paged-article[hidden] { display:none!important; }
.pagination { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:48px; flex-wrap:wrap; }
.pagination button { width:40px; height:40px; border:1px solid var(--line); background:transparent; font-size:12px; font-weight:700; }
.pagination button.active,.pagination button:hover { background:var(--lime); border-color:var(--lime); }
.pagination button:disabled { opacity:.35; cursor:not-allowed; }
.pagination #blog-page-status { font-size:10px; color:var(--muted); margin-left:10px; }
.article-callout { background:var(--lime); padding:22px; margin:28px 0; }
.article-callout p { color:var(--ink); margin:12px 0 0; }
.article-end-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:36px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); }
.article-end-actions .article-back-link { display:inline-block; text-decoration:none; font-weight:600; }
.article-end-actions .article-back-link:hover { text-decoration:underline; }
.related-articles { margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); }
.related-articles h2 { margin:0 0 8px; }
.related-articles>p { margin:0 0 12px; color:var(--muted,#a8a8ad); }
.related-article-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 22px; list-style:none; margin:0; padding:0; }
.related-article-list li { min-width:0; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.related-article-list a { font-weight:600; text-decoration:none; }
.related-article-list a:hover { text-decoration:underline; }
.related-read-label { display:block; margin-top:4px; font-size:.78rem; opacity:.72; }
@media(max-width:800px) {
  .blog-grid-paginated { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) { .related-article-list { grid-template-columns:1fr; gap:0; } }
@media(max-width:600px) { .article-end-actions { align-items:flex-start; flex-direction:column; gap:14px; } }
@media(max-width:560px) {
  .blog-grid-paginated { grid-template-columns:1fr; }
  .blog-card h3 { font-size:22px; }
  .pagination { gap:5px; }
  .pagination button { width:36px; height:36px; }
  .pagination #blog-page-status { width:100%; text-align:center; margin:7px 0 0; }
  .blog-card p { min-height:0; }
}


/* Extracted shared page-family rules from the legacy base stylesheet */
.blog-card img{width:100%;aspect-ratio:4/3;object-fit:cover}.blog-card .meta{font-size:9px;text-transform:uppercase;letter-spacing:.1em;margin:14px 0;color:var(--muted)}.blog-card h3{font-size:22px}.blog-card p{font-size:12px;color:var(--muted)}@media(max-width:650px){.blog-card h3{font-size:19px}.blog-card p{font-size:11px}}.blog-toolbar{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:30px}.blog-toolbar>p{max-width:340px;margin:0}.blog-grid-paginated{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 18px}.blog-image{aspect-ratio:4/3;position:relative;overflow:hidden;background:#d6d5c9}.blog-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s;filter:saturate(.8)}.blog-card a:hover .blog-image img{transform:scale(1.04)}.blog-image>span{position:absolute;left:10px;bottom:10px;background:var(--lime);padding:6px 8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.blog-card .meta{margin:13px 0 8px}.blog-card h3{font-size:22px;line-height:1.1}.blog-card p{min-height:45px;line-height:1.7}.read-link{display:inline-block;margin-top:5px;font-size:10px;letter-spacing:.1em;font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:4px}.paged-article[hidden]{display:none!important}.pagination{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:48px;flex-wrap:wrap}.pagination button{width:40px;height:40px;border:1px solid var(--line);background:transparent;font-size:12px;font-weight:700}.pagination button.active, .pagination button:hover{background:var(--lime);border-color:var(--lime)}.pagination button:disabled{opacity:.35;cursor:not-allowed}.pagination #blog-page-status{font-size:10px;color:var(--muted);margin-left:10px}.article-callout{background:var(--lime);padding:22px;margin:28px 0}.article-callout p{color:var(--ink);margin:12px 0 0}@media(max-width:800px){.blog-grid-paginated{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.blog-toolbar{display:block}.blog-toolbar>p{margin-top:14px}.blog-grid-paginated{grid-template-columns:1fr}.blog-card h3{font-size:22px}.pagination{gap:5px}.pagination button{width:36px;height:36px}.pagination #blog-page-status{width:100%;text-align:center;margin:7px 0 0}.blog-card p{min-height:0}}.article-end-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}.article-end-actions .article-back-link{display:inline-block;text-decoration:none;font-weight:600}.article-end-actions .article-back-link:hover{text-decoration:underline}@media(max-width:600px){.article-end-actions{align-items:flex-start;flex-direction:column;gap:14px}}.related-articles{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}.related-articles h2{margin:0 0 8px}.related-articles>p{margin:0 0 12px;color:var(--muted,#a8a8ad)}.related-article-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 22px;list-style:none;margin:0;padding:0}.related-article-list li{min-width:0;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}.related-article-list a{font-weight:600;text-decoration:none}.related-article-list a:hover{text-decoration:underline}.related-read-label{display:block;margin-top:4px;font-size:.78rem;opacity:.72}@media(max-width:700px){.related-article-list{grid-template-columns:1fr;gap:0}}.blog-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}.blog-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}.blog-image{ width: 100%; aspect-ratio: 16 / 9; overflow: hidden; position: relative; }.blog-image img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Editorial layout refinement: three article cards per row on desktop. */
.blog-grid-paginated{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px;align-items:start;max-width:1180px;margin-inline:auto}
.blog-card{min-width:0;max-width:100%}
.blog-card>a{display:block;height:100%}
.blog-image{aspect-ratio:16/10}
.blog-card h3{font-size:clamp(21px,2.2vw,27px);line-height:1.18;letter-spacing:-.035em;overflow-wrap:anywhere}
.blog-card p{font-size:14px;line-height:1.75;min-height:0;max-width:54ch}
.blog-card .meta{font-size:9px;line-height:1.5}
.read-link{font-size:10px;line-height:1.6}
.related-article-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.article-body{max-width:760px;margin-inline:auto}
.article-body p,.article-body li{font-size:17px;line-height:1.85}
.article-body h2{font-size:clamp(27px,3vw,38px);line-height:1.15;letter-spacing:-.035em}
@media(max-width:760px){
 .blog-grid-paginated{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
 .blog-card h3{font-size:21px}
 .blog-card p{font-size:13px;line-height:1.7}
 .related-article-list{grid-template-columns:1fr}
 .article-body p,.article-body li{font-size:16.5px;line-height:1.8}
}
@media(max-width:520px){
 .blog-grid-paginated{grid-template-columns:minmax(0,1fr);gap:30px;max-width:440px}
 .blog-image{aspect-ratio:16/9}
 .blog-card h3{font-size:23px;line-height:1.2}
 .blog-card p{font-size:14px;line-height:1.75}
 .blog-toolbar h2{font-size:clamp(32px,9vw,44px)}
 .article-body p,.article-body li{font-size:16px;line-height:1.78}
 .article-end-actions .btn{max-width:100%;white-space:normal;text-align:center}
}


/* Editorial practical-check callout: a single useful action, not keyword filler */
.article-practical-check{margin:26px 0;padding:16px 18px;border-left:3px solid var(--lime,#cfff4f);background:#f0f0e7;color:#303128;font-size:14px;line-height:1.7}
.article-practical-check strong{font-weight:750;margin-right:5px}
@media(max-width:600px){.article-practical-check{padding:14px 15px;font-size:14px;line-height:1.7}}
