/* Shared blog and knowledge-bank presentation.
   Loaded only for /blogg/ routes by scripts/build-site.mjs. */

body.blog-page { background: #fff; }
body.blog-page .site-header { z-index: 1000; }
body.blog-page .blogg-hero,
body.blog-page .blog-hero { position: relative; isolation: isolate; }
body.blog-page .blogg-hero::before,
body.blog-page .blog-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 88% 20%,rgba(201,165,66,.13),transparent 28%),linear-gradient(135deg,rgba(11,41,76,.035),transparent 60%);
}
body.blog-page .blog-meta {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px;
  border: 1px solid #dbe4ef; border-radius: 999px; background: rgba(255,255,255,.78);
}
body.blog-page .blog-body > p:first-of-type,
body.blog-page .blog-body > .editorial-check + p { font-size: 1.04rem; }
body.blog-page .blog-body a:not(.primary):not(.secondary) { text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.blog-page .editorial-check { box-shadow: 0 12px 32px rgba(11,35,65,.07); }
body.blog-page .blog-cta-box,
body.blog-page .sidebar-card { box-shadow: 0 14px 34px rgba(11,35,65,.09); }

body.blog-index .guide-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
body.blog-index .guide-link {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 128px; padding: 45px 52px 20px 22px; overflow: hidden;
  border: 1px solid #dbe4ef; border-radius: 16px;
  background: radial-gradient(circle at 92% 10%,rgba(201,165,66,.19),transparent 35%),linear-gradient(145deg,#fff 0%,#f7f9fc 100%);
  box-shadow: 0 10px 28px rgba(11,35,65,.055); color: #0b294c; text-decoration: none; line-height: 1.35;
  transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
body.blog-index .guide-link::before {
  content: "GUIDE"; position: absolute; top: 18px; left: 22px; color: #9a731d; font-size: 10px; font-weight: 800; letter-spacing: .13em;
}
body.blog-index .guide-link::after {
  content: "→"; position: absolute; right: 20px; bottom: 19px; color: #b78b28; font-size: 22px; line-height: 1;
}
body.blog-index .guide-link:hover,
body.blog-index .guide-link:focus-visible { transform: translateY(-2px); border-color: #c9a542; box-shadow: 0 16px 34px rgba(11,35,65,.1); }
body.blog-index .blogg-section:nth-of-type(even) .guide-link {
  background: radial-gradient(circle at 92% 10%,rgba(63,143,153,.16),transparent 36%),linear-gradient(145deg,#fff 0%,#f4faf9 100%);
}

@media (min-width: 769px) {
  body.blog-page .blogg-hero,
  body.blog-page .blog-hero { padding-top: 132px !important; }
  body.blog-page .blogg-hero { padding-bottom: 56px !important; }
  body.blog-page .blog-hero h1,
  body.blog-page .blogg-hero h1 { text-wrap: balance; }
  body.blog-article .blog-layout { gap: 54px; }
  body.blog-article .blog-body { max-width: 790px; }
}

@media (max-width: 1000px) and (min-width: 769px) {
  body.blog-index .guide-links { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  body.blog-page { width: 100%; max-width: 100%; overflow-x: hidden; }
  body.blog-page .mobile-topbar,
  body.blog-page .mobile-main,
  body.blog-page .mobile-main *,
  body.blog-page .m-section,
  body.blog-page .m-hero,
  body.blog-page .m-cta { box-sizing: border-box; min-width: 0; max-width: 100%; }
  body.blog-page .mobile-topbar,
  body.blog-page .mobile-main { width: 100% !important; }
  body.blog-page .mobile-topbar-logo { object-fit: contain; }

  body.blog-index .m-hero { width: calc(100% - 24px) !important; margin-left: 12px !important; margin-right: 12px !important; }
  body.blog-index .m-h1,
  body.blog-index .m-section h2,
  body.blog-index .m-section h3 { max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; text-wrap: balance; }
  body.blog-index .m-h1 { font-size: clamp(1.85rem,9.2vw,2.45rem) !important; }
  body.blog-index .m-chips { grid-template-columns: repeat(2,minmax(0,1fr)) !important; width: 100% !important; max-width: 100%; }
  body.blog-index .m-chip { min-width: 0; max-width: 100%; overflow: hidden; white-space: normal !important; font-size: 10px !important; line-height: 1.2; }
  body.blog-index .mobile-main .m-section { width: 100% !important; padding-top: 22px; padding-bottom: 22px; }
  body.blog-index .mobile-main .m-section ul { display: grid; gap: 10px; width: 100%; margin: 14px 0 0; padding: 0; list-style: none; }
  body.blog-index .mobile-main .m-section li { min-width: 0; margin: 0; }
  body.blog-index .mobile-main .m-section li a {
    position: relative; display: block; min-width: 0; padding: 15px 42px 15px 16px;
    border: 1px solid #dbe4ef; border-radius: 13px; background: linear-gradient(145deg,#fff,#f7f9fc);
    box-shadow: 0 7px 20px rgba(11,35,65,.045); color: #0b294c; font-weight: 650;
    text-decoration: none; line-height: 1.35; overflow-wrap: anywhere;
  }
  body.blog-index .mobile-main .m-section li a::after { content: "→"; position: absolute; right: 16px; top: 50%; color: #b78b28; font-size: 18px; transform: translateY(-50%); }

  /* Blog articles use one complete source on both desktop and mobile. */
  body.blog-article .mobile-main { display: none !important; }
  /* mobile.css hides every direct child except .mobile-main; restore the complete article children. */
  body.blog-article main { display: block !important; padding-bottom: 82px; }
  body.blog-article main > *:not(.mobile-main) { display: block !important; }
  body.blog-article .blog-hero { padding: 84px 0 30px !important; }
  body.blog-article .blog-hero .container,
  body.blog-article main:not(.mobile-main) > section .container { width: auto !important; max-width: none !important; margin: 0 16px !important; padding: 0 !important; }
  body.blog-article .blog-hero nav { margin-bottom: 14px !important; }
  body.blog-article .blog-meta { margin-bottom: 18px !important; font-size: 11px; }
  body.blog-article .blog-hero h1 { font-size: clamp(2rem,10vw,2.65rem) !important; line-height: 1.04 !important; overflow-wrap: anywhere; }
  body.blog-article .blog-lead { font-size: 15px !important; line-height: 1.65 !important; }
  body.blog-article .blog-cta-box { padding: 22px 18px !important; border-radius: 14px !important; }
  body.blog-article .blog-cta-btns { display: grid !important; grid-template-columns: 1fr; }
  body.blog-article .blog-cta-btns a { width: 100%; box-sizing: border-box; text-align: center; }
  body.blog-article .editorial-check { margin: 18px 12px 4px !important; padding: 17px !important; border-radius: 13px !important; }
  body.blog-article .editorial-check h2 { font-size: 1.2rem; }
  body.blog-article .blog-layout { display: block !important; }
  body.blog-article .blog-sidebar { display: none !important; }
  body.blog-article .blog-body { width: 100%; max-width: none; }
  body.blog-article .blog-body h2 { margin-top: 32px !important; font-size: 1.55rem !important; }
  body.blog-article .blog-body h3 { font-size: 1.1rem !important; }
  body.blog-article .blog-body p,
  body.blog-article .blog-body li { font-size: 15px !important; line-height: 1.72 !important; }
  body.blog-article .blog-body table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.blog-article main:not(.mobile-main) > section:last-of-type { padding-top: 30px !important; padding-bottom: 50px !important; }

  /* Complete-source containment: legacy article markup may contain wide tables,
     long URLs or fixed-size children. Keep those inside the mobile viewport. */
  body.blog-article main,
  body.blog-article main > *,
  body.blog-article .container,
  body.blog-article .blog-layout,
  body.blog-article .blog-body,
  body.blog-article .blog-body > *,
  body.blog-article .blog-cta-box,
  body.blog-article .editorial-check {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  body.blog-article h1,
  body.blog-article h2,
  body.blog-article h3,
  body.blog-article p,
  body.blog-article li,
  body.blog-article a,
  body.blog-article td,
  body.blog-article th {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  body.blog-article table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.blog-article img,
  body.blog-article svg,
  body.blog-article iframe,
  body.blog-article video {
    max-width: 100% !important;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.blog-index .guide-link { transition: none; }
}