/* ==========================================================================
   Nuance Cases - frontend
   Brandfarver: teal #007083, mint #9CD2CB, cream #F5F2EA. Font: Poppins.
   Vil du bruge Fredoka i stedet, skift --nuance-font nedenfor.
   Kort-billeder bruger object-fit: cover for et ensartet grid - skift
   --nuance-card-fit til contain hvis du hellere vil se hele billedet.
   ========================================================================== */

.nuance-cases-archive,
.nuance-cases-shortcode,
.nuance-case-single{
  --nuance-teal:#007083;
  --nuance-teal-700:#004C59;
  --nuance-mint:#9CD2CB;
  --nuance-mint-100:#E1F1EE;
  --nuance-mint-500:#5BAEA3;
  --nuance-cream:#F5F2EA;
  --nuance-surface:#FBFAF5;
  --nuance-ink:#0E2A2E;
  --nuance-ink-body:#32484C;
  --nuance-ink-muted:#5C7175;
  --nuance-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --nuance-radius:24px;
  --nuance-ease:cubic-bezier(0.23,1,0.32,1);
  --nuance-card-fit:cover;

  font-family:var(--nuance-font);
  color:var(--nuance-ink-body);
}

/* ---------- Fælles ---------- */
.nuance-eyebrow{
  font-family:var(--nuance-font); font-weight:600; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--nuance-mint-500);
  margin:0 0 14px;
}

/* ---------- Arkiv ---------- */
.nuance-cases-archive{
  background-color:var(--nuance-cream);
  padding:clamp(60px,8vw,110px) 6vw;
}
.nuance-archive-hero{ max-width:640px; margin:0 auto clamp(36px,5vw,56px); text-align:center; }
.nuance-archive-title{
  font-family:var(--nuance-font); font-weight:600; color:var(--nuance-ink);
  font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.08; letter-spacing:-0.02em; margin:0 0 18px;
}
.nuance-archive-intro{
  font-family:var(--nuance-font); font-weight:400; font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.65; color:var(--nuance-ink-body); margin:0;
}

/* Filter */
.nuance-filter{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  max-width:900px; margin:0 auto clamp(36px,5vw,52px);
}
.nuance-filter-btn{
  font-family:var(--nuance-font); font-weight:500; font-size:14px; color:var(--nuance-teal-700);
  background-color:var(--nuance-surface); cursor:pointer;
  padding:11px 22px; border:none; border-radius:999px;
  box-shadow:inset 0 0 0 1.5px var(--nuance-mint-100);
  transition:background-color .25s var(--nuance-ease), box-shadow .25s var(--nuance-ease), color .25s var(--nuance-ease);
}
.nuance-filter-btn.is-active{ background-color:var(--nuance-teal); color:#fff; box-shadow:none; }
@media (hover:hover){
  .nuance-filter-btn:not(.is-active):hover{ background-color:var(--nuance-mint-100); box-shadow:inset 0 0 0 1.5px var(--nuance-mint); }
}

/* Grid */
.nuance-grid{
  display:grid; grid-template-columns:repeat(var(--nuance-cols,3),1fr); gap:26px;
  max-width:1240px; margin:0 auto;
}
@media (max-width:980px){ .nuance-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .nuance-grid{ grid-template-columns:1fr; } }

/* Kort */
.nuance-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background-color:var(--nuance-surface); border-radius:var(--nuance-radius); overflow:hidden;
  box-shadow:0 10px 30px -14px rgba(0,112,131,0.18);
  transition:transform .5s var(--nuance-ease), box-shadow .5s var(--nuance-ease);
}
.nuance-card-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background-color:#ECE7DA; }
.nuance-card-img{
  width:100%; height:100%; object-fit:var(--nuance-card-fit); display:block;
  transition:transform .6s var(--nuance-ease);
}
.nuance-card-placeholder{ background:linear-gradient(135deg,#E1F1EE,#C9E6E1); }
.nuance-card-cat{
  position:absolute; top:14px; left:14px;
  font-family:var(--nuance-font); font-weight:600; font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--nuance-teal-700);
  background-color:rgba(225,241,238,0.94); backdrop-filter:blur(4px);
  padding:6px 13px; border-radius:999px;
}
.nuance-card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:6px; flex:1; }
.nuance-card-client{
  font-family:var(--nuance-font); font-weight:500; font-size:13px; letter-spacing:.02em;
  color:var(--nuance-mint-500); text-transform:uppercase;
}
.nuance-card-title{
  font-family:var(--nuance-font); font-weight:600; font-size:1.18rem; line-height:1.3;
  letter-spacing:-0.01em; color:var(--nuance-ink); margin:0;
}
.nuance-card-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:12px;
  font-family:var(--nuance-font); font-weight:600; font-size:14px; color:var(--nuance-teal);
}
.nuance-card-link svg{ transition:transform .35s var(--nuance-ease); }
@media (hover:hover){
  .nuance-card:hover{ transform:translateY(-6px); box-shadow:0 26px 60px -28px rgba(0,94,110,0.30); }
  .nuance-card:hover .nuance-card-img{ transform:scale(1.05); }
  .nuance-card:hover .nuance-card-link svg{ transform:translateX(4px); }
}

.nuance-empty{ text-align:center; color:var(--nuance-ink-muted); font-family:var(--nuance-font); }

/* Pagination */
.nuance-cases-archive .pagination,
.nuance-cases-archive .nav-links{
  display:flex; justify-content:center; gap:10px; margin-top:48px; flex-wrap:wrap;
}
.nuance-cases-archive .page-numbers{
  font-family:var(--nuance-font); font-weight:500; color:var(--nuance-teal-700);
  background-color:var(--nuance-surface); padding:10px 16px; border-radius:12px; text-decoration:none;
  box-shadow:inset 0 0 0 1.5px var(--nuance-mint-100);
}
.nuance-cases-archive .page-numbers.current{ background-color:var(--nuance-teal); color:#fff; box-shadow:none; }

/* ---------- Single ---------- */
.nuance-case-single{ background-color:var(--nuance-cream); }
.nuance-back-bar{ padding:24px 6vw 0; max-width:1240px; margin:0 auto; }
.nuance-back{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--nuance-font); font-weight:600; font-size:15px; color:var(--nuance-teal);
  text-decoration:none; background-color:var(--nuance-surface);
  padding:11px 20px; border-radius:999px; box-shadow:0 6px 18px -10px rgba(0,112,131,0.25);
  transition:transform .25s var(--nuance-ease), background-color .25s var(--nuance-ease);
}
.nuance-back svg{ transition:transform .3s var(--nuance-ease); }
@media (hover:hover){
  .nuance-back:hover{ background-color:var(--nuance-mint-100); }
  .nuance-back:hover svg{ transform:translateX(-3px); }
}
.nuance-case-content{ margin:0 auto; }

/* Næste case */
.nuance-next-case{
  display:flex; align-items:center; gap:32px; text-decoration:none; color:inherit;
  max-width:1100px; margin:40px auto; padding:clamp(24px,4vw,44px) 6vw;
  background:linear-gradient(160deg,#007083 0%,#004C59 100%);
  border-radius:var(--nuance-radius);
  box-shadow:0 24px 60px -28px rgba(0,40,47,0.45);
  transition:transform .5s var(--nuance-ease), box-shadow .5s var(--nuance-ease);
}
.nuance-next-media{ flex:0 0 200px; height:150px; border-radius:18px; overflow:hidden; }
.nuance-next-img{ width:100%; height:100%; object-fit:cover; display:block; }
.nuance-next-body .nuance-eyebrow{ color:var(--nuance-mint); }
.nuance-next-title{
  font-family:var(--nuance-font); font-weight:600; color:#fff;
  font-size:clamp(1.4rem,3vw,2rem); line-height:1.15; letter-spacing:-0.015em; margin:0 0 10px;
}
.nuance-next-cat{
  font-family:var(--nuance-font); font-weight:500; font-size:13px; color:rgba(255,255,255,0.7);
}
@media (hover:hover){
  .nuance-next-case:hover{ transform:translateY(-4px); box-shadow:0 30px 70px -30px rgba(0,40,47,0.55); }
}
@media (max-width:640px){
  .nuance-next-case{ flex-direction:column; align-items:flex-start; gap:20px; }
  .nuance-next-media{ flex:none; width:100%; height:200px; }
}

/* ---------- Reveal-animationer (Emil Kowalski) ---------- */
.nuance-js [data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .65s var(--nuance-ease), transform .65s var(--nuance-ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.nuance-js [data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* blød reveal på elementor-sektioner inde i en case */
.nuance-js .nuance-case-content .nuance-reveal-el{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--nuance-ease), transform .7s var(--nuance-ease);
}
.nuance-js .nuance-case-content .nuance-reveal-el.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  .nuance-js [data-reveal],
  .nuance-js .nuance-case-content .nuance-reveal-el{ opacity:1 !important; transform:none !important; transition:none !important; }
}


/* ==========================================================================
   Shortcode-karousel (fx forsiden) + premium case-card
   ========================================================================== */
.nuance-cases-shortcode{
  font-family:var(--nuance-font);
  background-color:transparent;
  padding:0;
  --nuance-cc-w:clamp(270px,80vw,360px); /* kort-bredde i karousellen */
}

.nuance-carousel{ position:relative; }

.nuance-carousel-track{
  display:flex; gap:22px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 4px 10px;
  -ms-overflow-style:none; scrollbar-width:none;
  cursor:grab;
}
.nuance-carousel-track::-webkit-scrollbar{ display:none; }
.nuance-carousel-track.is-grabbing{ cursor:grabbing; scroll-behavior:auto; }

/* ---- Case-card (fuld-bleed med overlay) ---- */
.nuance-cc{
  position:relative; flex:0 0 var(--nuance-cc-w);
  aspect-ratio:3/4; scroll-snap-align:start;
  display:block; text-decoration:none; color:#fff;
  border-radius:26px; overflow:hidden;
  background-color:#0E2A2E;
  box-shadow:0 16px 40px -20px rgba(0,40,47,0.40);
  transition:transform .55s var(--nuance-ease), box-shadow .55s var(--nuance-ease);
}
.nuance-cc-media{ position:absolute; inset:0; }
.nuance-cc-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--nuance-ease);
}
.nuance-cc-placeholder{ background:linear-gradient(135deg,#007083,#004C59); }

/* blød gradient saa teksten kan laeses */
.nuance-cc::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,40,47,0.88) 0%, rgba(0,40,47,0.45) 32%, rgba(0,40,47,0) 62%);
}

.nuance-cc-cat{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--nuance-font); font-weight:600; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--nuance-teal-700);
  background-color:rgba(245,242,234,0.94); backdrop-filter:blur(5px);
  padding:7px 14px; border-radius:999px;
}

.nuance-cc-bottom{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  padding:22px;
}
.nuance-cc-text{ min-width:0; }
.nuance-cc-client{
  display:block;
  rotate:90deg;
  left:-52px;
  top:-112%;
  position:absolute;
  font-family:var(--nuance-font);
  font-weight:600;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--nuance-mint);
  margin:0 0 6px;
}
.nuance-cc-title{
  font-family:var(--nuance-font); font-weight:600; color:#fff;
  font-size:1.32rem; line-height:1.22; letter-spacing:-0.01em; margin:0;
  text-shadow:0 1px 14px rgba(0,40,47,0.35);
}
.nuance-cc-go{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--nuance-teal); background-color:#FBFAF5;
  box-shadow:0 8px 20px -8px rgba(0,40,47,0.5);
  transform:translateY(2px);
  transition:transform .45s var(--nuance-ease), background-color .45s var(--nuance-ease), color .45s var(--nuance-ease);
}

@media (hover:hover){
  .nuance-cc:hover .nuance-cc-img{ transform:scale(1.07); }
  .nuance-cc:hover .nuance-cc-go{ background-color:var(--nuance-teal); color:#fff; transform:translateY(0) rotate(-2deg); }
}

/* ---- Pile ---- */
.nuance-carousel-nav{
  display:flex; gap:10px; justify-content:flex-end; margin-top:16px; padding:0 4px;
}
.nuance-arrow{
  width:48px; height:48px; border-radius:50%; cursor:pointer; border:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--nuance-teal); background-color:#FBFAF5;
  box-shadow:0 8px 22px -12px rgba(0,112,131,0.4);
  transition:background-color .25s var(--nuance-ease), color .25s var(--nuance-ease), transform .25s var(--nuance-ease), opacity .25s var(--nuance-ease);
}
@media (hover:hover){
  .nuance-arrow:hover{ background-color:var(--nuance-teal); color:#fff; transform:translateY(-2px); }
}
.nuance-arrow.is-disabled{ opacity:.35; pointer-events:none; }

/* reveal-stagger paa kortene */
.nuance-js .nuance-cc[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .65s var(--nuance-ease), transform .65s var(--nuance-ease);
  transition-delay:calc(var(--i,0) * 80ms);
}
.nuance-js .nuance-cc[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

@media (max-width:600px){
  .nuance-cc-title{ font-size:1.18rem; }
}
@media (prefers-reduced-motion:reduce){
  .nuance-carousel-track{ scroll-behavior:auto; }
}