/* FRØYA Water blog. Loads after main.css, only on /blog pages. Dark Nordic look, same tokens. */
.blog-hero.pg-hero{min-height:min(60svh,620px)}
.blog-hero .pg-hero__in{gap:16px;padding-top:120px}
.blog-hero h1{font-size:clamp(30px,4.5vw,74px);line-height:1.04;font-stretch:112%;max-width:19em;text-wrap:balance;overflow-wrap:normal}
.blog-index .blog-hero h1{font-size:clamp(48px,9vw,150px);line-height:.95;font-stretch:125%}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px 0;font:500 11px/1.4 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:rgba(243,248,250,.78)}
.crumbs a{color:var(--gold-2);display:inline-flex;align-items:center;min-height:24px}
.crumbs a::after,.crumbs span::before{content:"/";margin:0 .8em;opacity:.45;color:var(--mist-2)}
.crumbs span::before{display:none}
.crumbs a:last-of-type::after{content:"/"}
.blog-meta{font:500 12px/1.5 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,248,250,.8)}
.blog-sec{padding-top:clamp(56px,9svh,110px)}
.blog-grid{display:grid;grid-template-columns:minmax(0,44em) minmax(0,20em);gap:clamp(30px,6vw,110px);justify-content:start;align-items:start}
.blog-body{min-width:0}
.blog-answer{margin:0 0 2.2em;padding:4px 0 4px 22px;border-left:2px solid var(--gold);font-size:clamp(18px,1.55vw,23px);line-height:1.55;color:#fff}
.blog-body h2{margin:2.3em 0 .75em;font:650 clamp(24px,2.3vw,36px)/1.16 var(--f-display);font-stretch:108%;letter-spacing:.005em;color:#fff;text-wrap:balance;scroll-margin-top:96px}
.blog-body h2:first-of-type{margin-top:0}
.blog-body p{margin:0 0 1.15em;font-size:clamp(16px,1.15vw,18.5px);line-height:1.8;color:rgba(243,248,250,.9)}
.blog-body a{color:var(--gold-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(211,184,143,.5);transition:text-decoration-color .3s,color .3s;overflow-wrap:anywhere}
.blog-body a:hover{color:#fff;text-decoration-color:var(--gold-2)}
.blog-body ul,.blog-body ol.blog-sources{display:grid;gap:.7em;margin:0 0 1.4em;padding:0}
.blog-body ul li{position:relative;padding-left:1.4em;font-size:clamp(16px,1.15vw,18.5px);line-height:1.7;color:rgba(243,248,250,.9)}
.blog-body ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--gold-2)}
.blog-body em{font-size:1.06em}
.blog-sources{list-style:decimal;padding-left:1.4em!important}
.blog-sources li{padding-left:.3em;font-size:14.5px!important;line-height:1.55!important;color:rgba(243,248,250,.8)!important}
.blog-sources li::before{display:none!important}
.blog-note{font-size:14px!important;line-height:1.65!important;color:rgba(243,248,250,.65)!important;margin-top:2em!important;padding-top:1.4em;border-top:1px solid var(--line)}
.blog-faq{display:grid;gap:12px;margin-bottom:1em}
.blog-faq details{border-radius:18px;transition:background .4s}
.blog-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 22px;cursor:pointer;list-style:none;font:600 clamp(16px,1.25vw,19px)/1.35 var(--f-body)}
.blog-faq summary::-webkit-details-marker{display:none}
.blog-faq summary i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line)}
.blog-faq summary i::before,.blog-faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--gold-2);transform:translate(-50%,-50%);transition:transform .5s var(--ease)}
.blog-faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.blog-faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.blog-faq details[open]{background:rgba(255,255,255,.1)}
.blog-faq .ans{padding:0 22px 22px;max-width:44em}
.blog-faq .ans p{margin:0;font-size:clamp(15px,1.1vw,17.5px);line-height:1.7}
.blog-aside{position:sticky;top:104px;display:grid;gap:18px}
.blog-toc,.blog-cta{padding:22px 22px 24px}
.blog-toc ol{display:grid;gap:2px;margin:14px 0 0;padding:0;list-style:none;counter-reset:t}
.blog-toc li{counter-increment:t}
.blog-toc a{display:block;padding:7px 0 7px 26px;position:relative;font-size:14px;line-height:1.4;color:rgba(243,248,250,.82)}
.blog-toc a::before{content:counter(t);position:absolute;left:0;top:7px;font:600 10px/1.9 var(--f-body);color:var(--gold-2);letter-spacing:.1em}
.blog-toc a:hover{color:#fff}
.blog-cta p:not(.eyebrow){margin:12px 0 16px;font-size:14.5px;line-height:1.6;color:rgba(243,248,250,.85)}
.blog-cta .pill{margin:0 6px 8px 0}
.blog-more__h{font:650 clamp(26px,3vw,46px)/1.1 var(--f-display);font-stretch:112%;margin:14px 0 28px;color:#fff}
.blog-more__f{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.bgrid--lg{grid-template-columns:repeat(3,minmax(0,1fr))}
.bcard{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r);transition:transform .6s var(--ease),border-color .4s}
.bcard:hover{transform:translateY(-4px);border-color:rgba(211,184,143,.5)}
.bcard__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--teal-1)}
.bcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.bcard:hover .bcard__img img{transform:scale(1.05)}
.bcard__k{padding:20px 22px 0;font:600 10px/1.4 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2)}
.bcard__t{display:block;padding:12px 22px 0;font:650 clamp(18px,1.5vw,23px)/1.2 var(--f-display);font-stretch:108%;color:#fff;text-wrap:balance}
.bcard__d{display:block;padding:10px 22px 0;font-size:14.5px;line-height:1.6;color:rgba(243,248,250,.78)}
.bcard__go{display:block;margin-top:auto;padding:18px 22px 22px;font:600 10px/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2)}
.bcard:not(.bcard--lg) .bcard__d{padding-bottom:22px}
.blog-index .blog-hero .lead{max-width:30em}
@media (max-width:1100px){.blog-grid{grid-template-columns:minmax(0,1fr)}.blog-aside{display:none}.bgrid,.bgrid--lg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .blog-hero .pg-hero__in{padding-top:96px}
  .bgrid,.bgrid--lg{grid-template-columns:minmax(0,1fr)}
  .blog-faq summary{padding:14px 18px}
  .blog-faq .ans{padding:0 18px 18px}
  .crumbs{font-size:12px}
}
html.lite .blog-body p,html.lite .blog-body li{font-size:17px}
html.lite .blog-sources li{font-size:14.5px!important}
html.lite .blog-hero.pg-hero{min-height:56svh}
html.lite .blog-meta{font-size:12px}
html.lite .bcard__k,html.lite .bcard__go{font-size:12px}
html.lite .crumbs a{min-height:44px}
html.lite .blog-toc a{min-height:44px}
html.lite .blog-more__f .pill{min-height:44px}
html.lite .bcard:hover{transform:none}
@media (prefers-reduced-motion:reduce){.bcard,.bcard__img img{transition:none}}