/* Layout shared by the blog listing and article pages. */
html { background: #f4f9fc; }
body.blog-site { margin: 0; color: #335969; font-family: Arial, Helvetica, sans-serif; background: #fff; line-height: 1.65; }
.blog-site * { box-sizing: border-box; }
.blog-site a { color: #07517a; text-decoration: none; }
.blog-site a:focus-visible, .blog-site button:focus-visible, .blog-site input:focus-visible { outline: 3px solid #e6ad28; outline-offset: 4px; }
.blog-site button { font-family: inherit; }
.blog-shell { max-width: 1200px; padding: 0 32px; margin: 0 auto; }
.blog-main { padding-top: 18px; padding-bottom: 32px; min-height: 50vh; }
.blog-hero { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; min-height: 190px; overflow: hidden; border: 1px solid #daeaf1; border-radius: 15px; background: linear-gradient(110deg, #e2f2fb, #f4fafc); }
.blog-hero-copy { padding: 28px 42px; }
.blog-hero h1 { margin: 0 0 6px; font-size: 34px; line-height: 1.2; color: #07517a; }
.blog-hero p { margin: 0; max-width: 470px; font-size: 16px; }
.blog-hero img { display: block; width: 100%; height: 190px; object-fit: contain; object-position: center; padding: 10px 20px; }
.blog-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0; font-size: 13px; line-height: 1.5; }
.blog-breadcrumb .separator { color: #89a9b8; }
.blog-breadcrumb [aria-current] { color: #527688; }
.blog-preview { display: flex; gap: 9px; align-items: baseline; margin: 0 0 20px; padding: 9px 14px; border: 1px solid #e0eaf0; border-radius: 8px; background: #f8fbfd; color: #5d7583; font-size: 12px; }
.blog-preview strong { color: #07517a; white-space: nowrap; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.blog-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid #dfe9ee; border-radius: 9px; padding: 8px; background: #fff; box-shadow: 0 3px 10px #164d6505; transition: transform .18s, box-shadow .18s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #164d6510; }
.blog-card-media { display: block; position: relative; overflow: hidden; border-radius: 6px; background: #f7fafc; }
.blog-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 1.9 / 1; object-fit: cover; }
.blog-card-media img.is-placeholder { object-fit: contain; padding: 10px; }
.blog-date { display: inline-block; padding: 4px 12px; font-size: 12px; line-height: 1.45; font-weight: 700; border-radius: 20px; color: #fff; background: #07517a; }
.blog-card-media .blog-date { position: absolute; left: 7px; top: 7px; }
.blog-card-copy { flex: 1; display: flex; flex-direction: column; padding: 13px 9px 10px; }
.blog-card h2 { margin: 0 0 9px; color: #07517a; font-size: 17px; line-height: 1.4; }
.blog-card p { margin: 0 0 15px; font-size: 14px; line-height: 1.65; }
.blog-read { margin-top: auto; font-size: 13px; font-weight: 700; align-self: flex-start; }
.blog-read span { margin-left: 8px; }
.blog-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.blog-pagination a, .blog-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid #dce7ed; border-radius: 6px; font-size: 13px; }
.blog-pagination [aria-current] { color: #fff; background: #07517a; border-color: #07517a; }
.blog-pagination [aria-disabled] { color: #a4b7c1; background: #f8fbfc; }
.blog-about { margin-top: 20px; text-align: center; font-size: 13px; }
.blog-empty { padding: 45px 20px; border: 1px solid #dfe9ee; border-radius: 10px; text-align: center; }
.blog-empty h1 { color: #07517a; }
.blog-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 30px; align-items: start; }
.blog-visual-column, .blog-article { min-width: 0; }
.blog-cover { display: block; width: 100%; height: auto; aspect-ratio: 1.3 / 1; object-fit: cover; border-radius: 12px; background: #f4f9fc; }
.blog-cover.is-placeholder { object-fit: contain; padding: 18px; border: 1px solid #e4edf2; }
.blog-related { margin-top: 20px; padding: 15px; border: 1px solid #e6f0f4; border-radius: 10px; background: #f3f9fc; }
.blog-related h2 { margin: 0 0 12px; color: #07517a; font-size: 17px; }
.blog-related a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid #e1ebf1; }
.blog-related a:first-of-type { border-top: 0; padding-top: 0; }
.blog-related img { display: block; width: 72px; height: 58px; object-fit: cover; border-radius: 5px; background: #fff; }
.blog-related img.is-placeholder { object-fit: contain; }
.blog-related strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; }
.blog-related time { display: block; margin-top: 4px; font-size: 11px; color: #6b8795; }
.blog-article > .blog-date { margin-bottom: 9px; color: #07517a; background: #e9f4fa; padding-right: 40px; }
.blog-article h1 { margin: 0 0 10px; color: #07517a; font-size: 29px; line-height: 1.25; }
.blog-meta { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 18px; color: #6c8795; font-size: 12px; }
.blog-article p { font-size: 14px; line-height: 1.75; margin: 0 0 16px; white-space: pre-line; }
.blog-article h2 { margin: 20px 0 6px; color: #07517a; font-size: 17px; line-height: 1.4; }
.blog-advice { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 13px; padding: 18px; margin: 22px 0; border: 1px solid #e2f0f6; border-radius: 12px; background: #eff8fc; }
.blog-advice svg { width: 26px; height: 32px; color: #07517a; fill: none; stroke: currentColor; stroke-width: 1.8; }
.blog-advice h2 { margin: 0 0 7px; font-size: 16px; }
.blog-advice p { font-size: 13px; margin: 0; }
.blog-actions { display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.blog-sharing { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.blog-sharing > span { font-size: 12px; font-weight: 600; margin-right: 3px; }
.blog-share { display: inline-flex; justify-content: center; align-items: center; width: 29px; height: 29px; border: 0; border-radius: 50%; font: 700 15px Arial, sans-serif; cursor: pointer; background: #07517a; color: #fff !important; }
.blog-share.facebook { background: #1877f2; }
.blog-share.linkedin { background: #0a66c2; font-size: 12px; }
.blog-share.whatsapp { background: #168943; }
.blog-share svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.blog-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 17px; border-radius: 24px; color: #fff !important; background: #07517a; font-size: 12px; font-weight: 600; }
.blog-copy-status { display: block; flex-basis: 100%; min-height: 1.5em; font-size: 12px; color: #477081; }
.blog-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.blog-gallery figure { min-width: 0; margin: 0; }
.blog-gallery figure:only-child { grid-column: 1 / -1; }
.blog-gallery img { display: block; width: 100%; height: auto; border-radius: 9px; }
.blog-import-notice { padding: 12px; border: 1px solid #e6c779; border-radius: 8px; background: #fff9eb; color: #715a22; }
@media (prefers-reduced-motion: reduce) { .blog-card { transition: none; } .blog-card:hover { transform: none; } }
@media (max-width: 900px) {
  .blog-shell { padding: 0 28px; }
  .blog-hero-copy { padding: 24px; }
  .blog-hero h1 { font-size: 29px; }
  .blog-hero p { font-size: 14px; }
  .blog-grid { gap: 15px; }
  .blog-card h2 { font-size: 15px; }
  .blog-card p { font-size: 13px; }
  .blog-detail { gap: 22px; }
  .blog-article h1 { font-size: 25px; }
}
@media (max-width: 680px) {
  .blog-detail { grid-template-columns: minmax(0, 1fr); }
  .blog-visual-column { display: contents; }
  .blog-cover { order: 0; aspect-ratio: 1.6 / 1; }
  .blog-article { order: 1; }
  .blog-related { order: 2; margin-top: 0; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-preview { display: block; }
  .blog-preview strong { margin-right: 6px; }
}
@media (max-width: 480px) {
  .blog-shell { padding: 0 16px; }
  .blog-main { padding-top: 14px; }
  .blog-hero { grid-template-columns: minmax(0, 1fr); }
  .blog-hero-copy { padding: 24px 22px 4px; }
  .blog-hero img { height: 140px; padding: 8px 16px; }
  .blog-hero h1 { font-size: 28px; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .blog-card h2 { font-size: 18px; }
  .blog-card p { font-size: 14px; }
  .blog-breadcrumb { font-size: 12px; margin: 17px 0; }
  .blog-article h1 { font-size: 27px; }
  .blog-meta { gap: 12px; }
  .blog-gallery { grid-template-columns: minmax(0, 1fr); }
}