/* Work of Time – felles stil (inspirert av klassisk interiørbutikk-design) */
:root{
  --rosa:#EAE1E0;        /* topptekst */
  --rosa-mork:#B08E8C;   /* aktiv meny / aksent */
  --gra:#F0F0F0;         /* bakgrunnsbånd */
  --tekst:#222222;
  --dempet:#555555;
  --hvit:#FFFFFF;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Roboto",system-ui,Arial,sans-serif;
  --smal:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--hvit);color:var(--tekst);font:400 1.0625rem/1.65 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--rosa-mork);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;margin:0 0 .5em;color:#3A3A3A}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem);text-align:center}
p{margin:0 0 1em}
.wrap{max-width:84rem;margin:0 auto;padding:0 clamp(1rem,3vw,2.5rem)}
.ingress{text-align:center;color:var(--dempet);font-size:1.15rem;max-width:56rem;margin:0 auto 2.5rem}
section{padding:clamp(3rem,6vw,5rem) 0}
.band{background:var(--gra);margin:0 clamp(0rem,1vw,1rem)}

/* ---------- Topptekst ---------- */
.site-head{background:var(--rosa);position:sticky;top:0;z-index:30;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.head-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1.1rem clamp(1rem,2vw,1.75rem) .4rem}
.head-left,.head-right{display:flex;gap:1.25rem;align-items:center;font-family:var(--smal);font-size:.95rem;letter-spacing:.03em}
.head-right{justify-content:flex-end}
.head-left a,.head-right a{text-decoration:none;color:#333}
.head-left a:hover,.head-right a:hover{color:var(--rosa-mork)}
.logo{text-align:center;text-decoration:none;color:#111;display:block}
.logo strong{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:-.01em}
.logo small{display:block;margin-top:.45rem;font:700 .72rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase}
.main-nav{display:flex;justify-content:center;gap:clamp(1rem,2vw,1.75rem);padding:1.1rem 1rem 1.25rem;overflow-x:auto;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{position:relative;text-decoration:none;font-family:var(--smal);text-transform:uppercase;font-size:1.05rem;letter-spacing:.02em;color:#111;white-space:nowrap;padding:.25rem 0}
.main-nav a::before{content:"";position:absolute;left:-.4rem;right:-.4rem;top:-1.15rem;height:3px;background:var(--rosa-mork);opacity:0}
.main-nav a:hover{color:var(--rosa-mork)}
.main-nav a[aria-current="page"]{color:var(--rosa-mork)}
.main-nav a[aria-current="page"]::before{opacity:1}

/* ---------- Bilder: legg filen i /bilder med navnet i data-file ---------- */
.img{position:relative;overflow:hidden;background:linear-gradient(135deg,#D9D2D0,#B9AFAD)}
.img::before{content:attr(data-file);position:absolute;left:.75rem;top:.6rem;font:.72rem var(--sans);color:#fff;opacity:.8}
.img::after{content:"";position:absolute;inset:0;background:var(--img) center/cover no-repeat}

/* ---------- Hero ---------- */
.hero{position:relative;margin:clamp(1rem,2.5vw,2.75rem) clamp(0rem,1vw,1rem) 0;min-height:min(78vh,46rem);display:flex;align-items:flex-end;color:#fff}
.hero>.img{position:absolute;inset:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.45),rgba(0,0,0,.1) 65%),linear-gradient(to top,rgba(0,0,0,.35),transparent 50%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-bottom:clamp(2.5rem,7vh,5.5rem)}
.hero-text{max-width:52rem;padding-left:clamp(0rem,7vw,7rem)}
.hero h1{font-family:var(--serif);color:#fff;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(2.6rem,6.5vw,5.2rem);line-height:1;margin-bottom:.45em}
.hero p{font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.65;text-shadow:0 1px 8px rgba(0,0,0,.25);margin:0}

/* ---------- Kategori-karusell ---------- */
.carousel{position:relative}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5*2.5rem)/6);gap:2.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 0 .5rem}
.track::-webkit-scrollbar{display:none}
.cat{scroll-snap-align:start;text-decoration:none;text-align:center}
.cat .img{aspect-ratio:1}
.cat span{display:block;margin-top:.8rem;font-family:var(--serif);font-weight:700;font-size:1.2rem;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1.5px}
.cat:hover span{color:var(--rosa-mork)}
.arrow{position:absolute;top:calc(50% - 2.6rem);width:3.2rem;height:3.2rem;border-radius:50%;border:1.5px solid #333;background:rgba(255,255,255,.35);
  display:grid;place-items:center;cursor:pointer;z-index:2;color:#333;font-size:1.4rem;line-height:1}
.arrow:hover{background:#fff}
.arrow.prev{left:1.25rem}.arrow.next{right:1.25rem}
.arrow[hidden]{display:none}
.dots{display:flex;justify-content:center;gap:.6rem;margin-top:1.25rem}
.dots button{width:.9rem;height:.9rem;border-radius:50%;border:2px solid #999;background:transparent;padding:0;cursor:pointer}
.dots button.on{background:#111;border-color:#111}
.dots[hidden]{display:none}

/* ---------- Tekst / to kolonner ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
.two h3{font-size:1.6rem}
.list{list-style:none;padding:0;margin:0}
.list li{padding:.85rem 0;border-top:1px solid #E2E2E2}
.list li strong{font-weight:500}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:s;text-align:center}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:3rem;height:3rem;margin:0 auto 1rem;border-radius:50%;border:1.5px solid var(--rosa-mork);
  font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--rosa-mork)}
.steps strong{display:block;font-family:var(--serif);font-size:1.3rem;margin-bottom:.35rem}
.steps span{color:var(--dempet)}

/* ---------- Merker ---------- */
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,10rem));justify-content:center;align-items:center;gap:2rem 2.5rem}
.brand{aspect-ratio:2/1;display:grid;place-items:center}
.brands:has(.brand-text){display:flex}
.brand .img{width:100%;height:100%;background:#F4F4F4}
.brand .img::before{color:#888;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap}
.brand .img::after{background-size:contain}
.brand-text{font-family:var(--sans);font-weight:900;font-size:2.6rem;letter-spacing:.02em;text-decoration:none}

/* ---------- Hjelp + skjema ---------- */
.help{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;padding:clamp(1.5rem,3vw,2.75rem)}
.help>.img{height:100%;min-height:24rem;min-width:0}
.help>*{min-width:0}
.help-body{text-align:center;max-width:34rem;margin:0 auto}
.help-body h2{font-size:clamp(1.6rem,2.6vw,2.3rem)}
.help-body p{font-size:1.15rem;color:#444}
form.contact{text-align:left;margin-top:1.75rem}
form.contact label{display:block;font-weight:500;margin-bottom:1rem;font-size:.98rem}
form.contact input,form.contact textarea{display:block;width:100%;margin-top:.35rem;padding:.75rem .9rem;border:1px solid #CFCFCF;background:#fff;font:inherit;border-radius:2px}
form.contact textarea{min-height:7rem;resize:vertical}
form.contact input:focus,form.contact textarea:focus{outline:none;border-color:var(--rosa-mork)}
.hp{position:absolute;left:-9999px}
.btn{display:inline-block;padding:.85rem 2rem;background:#222;color:#fff;border:0;font:500 .95rem var(--smal);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--rosa-mork)}
.takk{display:none;background:#fff;border-left:3px solid var(--rosa-mork);padding:1rem 1.25rem;text-align:left;margin-top:1.5rem}
.takk.vis{display:block}

/* ---------- Bunntekst ---------- */
.site-foot{background:var(--rosa);margin-top:clamp(2rem,4vw,3rem);padding:3rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.site-foot h3{font-size:1.15rem;margin-bottom:.6rem}
.site-foot p,.site-foot a{color:#444;text-decoration:none;font-size:.98rem}
.site-foot a:hover{color:var(--rosa-mork)}
.site-foot ul{list-style:none;padding:0;margin:0;line-height:2}
.copy{text-align:center;font-size:.85rem;color:#777;margin-top:2.5rem}

@media (max-width:1100px){.track{grid-auto-columns:calc((100% - 3*1.5rem)/4);gap:1.5rem}}
@media (max-width:820px){
  .head-left{display:none}.head-row{grid-template-columns:1fr auto}.logo{text-align:left}
  .main-nav{justify-content:flex-start}
  .track{grid-auto-columns:calc((100% - 1.25rem)/2.2);gap:1.25rem}
  .arrow{display:none}
  .two,.help,.foot-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .hero-text{padding-left:0}
}
@media (max-width:480px){.head-right a:not(.call){display:none}.steps{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ================= Kennel: raser, kull og blogg ================= */
.breed-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;margin-top:2.5rem}
.breed-row+.breed-row .img{order:2}
.breed-row .img{aspect-ratio:4/3}
.breed-row h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.breed-row p{color:#444}
.litters{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1rem}
.litter{background:#fff;border:1px solid #E2E2E2;padding:2rem;text-align:center}
.litter h3{font-size:1.45rem}
.litter p{color:var(--dempet);margin:0}
.status{display:inline-block;font:500 .82rem var(--smal);letter-spacing:.12em;text-transform:uppercase;color:var(--rosa-mork);margin-bottom:.6rem}
.center{text-align:center}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 2rem}
.post-card{display:block;text-decoration:none;text-align:center}
.post-card img,.post-card .img{aspect-ratio:1;object-fit:cover;width:100%}
.post-card .img::before{content:none}
.post-body{padding-top:1rem}
.post-body h2,.post-body h3{font-size:1.35rem;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1.5px;margin-bottom:.35rem}
.post-card:hover h2,.post-card:hover h3{color:var(--rosa-mork)}
.post-body p:last-child{color:var(--dempet);margin:0;font-size:.98rem}
.post-meta{font:500 .85rem var(--smal);letter-spacing:.08em;text-transform:uppercase;color:var(--rosa-mork);margin:0 0 .4rem}
.post-meta .tag{text-decoration:none;color:inherit}
.post-meta .tag::before{content:"/ "}
.page-title{background:var(--gra);margin:clamp(1rem,2.5vw,2.75rem) clamp(0rem,1vw,1rem) 0;padding:clamp(2.5rem,5vw,4rem) 0;text-align:center}
.page-title h1{font-size:clamp(2.4rem,5vw,3.8rem);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3em}
.page-title p{color:var(--dempet);font-size:1.15rem;margin:0}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.5rem;margin-top:1.5rem}
.chip{font:500 1rem var(--smal);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:#111;padding:.2rem 0;border-bottom:2px solid transparent}
.chip:hover{color:var(--rosa-mork)}
.chip.on{color:var(--rosa-mork);border-color:var(--rosa-mork)}
.narrow{max-width:46rem}
.article{padding:clamp(2.5rem,5vw,4rem) 0 2rem}
.article h1{font-size:clamp(2.2rem,5vw,3.4rem);text-align:center}
.article .post-meta{text-align:center}
.back{display:inline-block;margin-bottom:2rem;font:500 .95rem var(--smal);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:#111}
.back::before{content:"‹ "}
.back:hover{color:var(--rosa-mork)}
.article-hero{width:100%;margin:1.5rem 0 2rem}
.article-text{font-size:1.15rem;line-height:1.8}
.article-text a{color:var(--rosa-mork)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.75rem;margin:2rem 0 2.5rem}
.gallery img{aspect-ratio:1;object-fit:cover;width:100%}
@media (max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.breed-row,.litters{grid-template-columns:1fr}.breed-row+.breed-row .img{order:0}}
@media (max-width:540px){.posts{grid-template-columns:1fr}}

/* ---------- Mer tekst: ingresser, fakta og spørsmål ---------- */
.prose{max-width:46rem;margin:0 auto;font-size:1.12rem;line-height:1.8;color:#333}
.prose p{margin-bottom:1.2em}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#E2E2E2;border:1px solid #E2E2E2;margin:1.25rem 0 1.5rem}
.facts div{background:#fff;padding:.9rem 1rem}
.facts dt{font:500 .78rem var(--smal);letter-spacing:.1em;text-transform:uppercase;color:var(--rosa-mork)}
.facts dd{margin:.2rem 0 0;font-weight:500}
.faq{max-width:52rem;margin:0 auto}
.faq details{border-top:1px solid #DADADA}
.faq details:last-child{border-bottom:1px solid #DADADA}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;font-family:var(--serif);font-weight:700;font-size:1.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:400;font-size:1.5rem;line-height:1;color:var(--rosa-mork)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:#444;margin:0;padding:0 0 1.25rem;max-width:46rem}
.quote{max-width:46rem;margin:0 auto;text-align:center;font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.4;color:#3A3A3A}
.quote cite{display:block;margin-top:1rem;font:500 .9rem var(--smal);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--rosa-mork)}
@media (max-width:820px){.facts{grid-template-columns:1fr 1fr}}

/* ---------- Kennel Work of Time: foreldre, kullhistorikk, om oss ---------- */
.parents{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);margin-top:1rem}
.parent .img{aspect-ratio:1}
.parent h3{font-size:1.5rem;margin:1.25rem 0 .2rem}
.parent .role{font:500 .85rem var(--smal);letter-spacing:.1em;text-transform:uppercase;color:var(--rosa-mork);margin:0 0 1rem}
.parent .facts{grid-template-columns:repeat(2,1fr)}
.parent p{color:#444}
.timeline{list-style:none;padding:0;margin:0 auto;max-width:52rem}
.timeline li{display:grid;grid-template-columns:6rem 1fr;gap:1.5rem;padding:1.4rem 0;border-top:1px solid #DADADA}
.timeline li:last-child{border-bottom:1px solid #DADADA}
.timeline .year{font-family:var(--serif);font-weight:700;font-size:1.8rem;color:var(--rosa-mork);line-height:1.1}
.timeline h3{font-size:1.25rem;margin-bottom:.25rem}
.timeline p{margin:0;color:#444}
.person{display:grid;grid-template-columns:20rem 1fr;gap:clamp(2rem,4vw,4rem);align-items:start;max-width:62rem;margin:2.5rem auto 0}
.person .img{aspect-ratio:1}
.person h3{font-size:1.6rem}
.person p{color:#333;font-size:1.08rem;line-height:1.8}
.address{font-style:normal;line-height:1.8;margin-top:1.5rem;text-align:left}
.address strong{font-family:var(--serif)}
@media (max-width:820px){.parents,.person{grid-template-columns:1fr}.person .img{max-width:20rem}.timeline li{grid-template-columns:4.5rem 1fr;gap:1rem}}

/* Mindre logo på mobil */
@media (max-width:600px){.logo strong{font-size:1.75rem}.logo small{font-size:.6rem;letter-spacing:.16em;line-height:1.4}}