/* =========================================================
   Valkyra — premium puukoru-brändisivut
   - PAKOTTAA vaalean teeman (data-theme=dark sivutkin vaaleiksi)
   - Täysleveys mobile / desktop / ultrawide
   - Animaatiot data-vk-reveal kautta core-base.css:stä
   ========================================================= */

/* ========== TEEMA: PAKOTA VAALEA ========== */
/* :has() varmistaa että myös html saa vaalean taustan ennen kuin body lataa */
html:has(body.vk-valkyra){
  background:#faf6ee;
}

/* Korkeampi spesifisyys (html body.class) voittaa :root[data-theme="dark"] */
html body.vk-valkyra{
  --vk-bg:#faf6ee;
  --vk-surface:#ffffff;
  --vk-text:#1a1410;
  --vk-text-muted:#6a5d4e;
  --vk-accent:#c88458;
  --vk-accent2:#e6b07e;
  --vk-accent-contrast:#ffffff;
  --vk-border:#e8dccf;
  --vk-header-bg:#faf6ee;
  --vk-header-glass:rgba(250,246,238,0.85);
  --vk-header-text:#1a1410;
  --vk-header-link:#1a1410;
  --vk-header-link-hover:#b87446;
  --vk-glow:color-mix(in srgb, var(--vk-accent) 28%, transparent);
  --vk-shadow-soft:0 10px 22px rgba(122, 85, 50, 0.08);
  --vk-shadow-hover:0 16px 32px rgba(122, 85, 50, 0.14);
  --vk-card-shadow:0 18px 36px rgba(122, 85, 50, 0.10);
  --vk-card-shadow-hover:0 26px 48px rgba(122, 85, 50, 0.16);
  --vk-card-border-hover:color-mix(in srgb, var(--vk-border) 50%, var(--vk-accent) 50%);

  background:
    radial-gradient(1100px 540px at 8% -8%, color-mix(in srgb, var(--vk-accent2) 22%, transparent), transparent 60%),
    radial-gradient(900px 480px at 95% 0%, color-mix(in srgb, var(--vk-accent) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--vk-bg) 0%, color-mix(in srgb, var(--vk-bg) 92%, var(--vk-surface) 8%) 100%);
  background-attachment:fixed;
}

/* Piilota teeman vaihtonappi — Valkyra on aina vaalea */
body.vk-valkyra .vk-theme-toggle{
  display:none !important;
}

/* Tumman teeman footer ei sovi vaalealle Valkyralle — pakota läpinäkyvä taustakerros */
body.vk-valkyra .vk-footer{
  background:color-mix(in srgb, var(--vk-bg) 86%, var(--vk-surface) 14%);
  border-top-color:color-mix(in srgb, var(--vk-border) 80%, transparent);
}

/* ========== PAGE WRAPPER ========== */
.valkyra-page,
.valkyra-page *,
.valkyra-page *::before,
.valkyra-page *::after{
  box-sizing:border-box;
}

.valkyra-page{
  --vlk-serif:"Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --vlk-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --vlk-container:1280px;
  --vlk-pad-x:clamp(20px, 5vw, 64px);

  /* Break out of .vk-wrap container to reach full viewport width */
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:calc(-1 * clamp(18px, 4vw, 28px));
  padding:0;

  font-family:var(--vlk-sans);
  color:var(--vk-text);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.valkyra-page img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Yleinen container — sisältöleveys */
.valkyra-page .vlk-container,
.valkyra-hero-inner,
.valkyra-content{
  width:100%;
  max-width:var(--vlk-container);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--vlk-pad-x);
  padding-right:var(--vlk-pad-x);
}

/* ========== HERO ========== */
.valkyra-hero{
  position:relative;
  padding:clamp(56px, 9vw, 132px) 0 clamp(40px, 6vw, 88px);
  isolation:isolate;
  overflow:hidden;
}

.valkyra-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 420px at 88% 30%, color-mix(in srgb, var(--vk-accent2) 26%, transparent), transparent 70%),
    radial-gradient(720px 480px at 10% 90%, color-mix(in srgb, var(--vk-accent) 14%, transparent), transparent 65%);
  pointer-events:none;
  z-index:-1;
  opacity:0.9;
}

.valkyra-hero-inner{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
  gap:clamp(28px, 5vw, 72px);
  align-items:center;
}

.valkyra-page .vk-logo-wrap{
  margin-bottom:18px;
}

.valkyra-page .vk-logo{
  max-width:170px;
  height:auto;
  filter:drop-shadow(0 10px 22px rgba(122, 85, 50, 0.22));
}

.valkyra-page .vk-eyebrow{
  text-transform:uppercase;
  letter-spacing:0.24em;
  font-size:clamp(0.74rem, 0.85vw, 0.85rem);
  font-weight:600;
  color:color-mix(in srgb, var(--vk-accent) 75%, var(--vk-text-muted) 25%);
  margin:0 0 0.7rem;
}

.valkyra-page .vk-hero-title{
  font-family:var(--vlk-serif);
  font-weight:600;
  font-size:clamp(1.9rem, 4.4vw, 3.6rem);
  letter-spacing:0.03em;
  text-transform:uppercase;
  line-height:1.1;
  margin:0 0 1rem;
  color:var(--vk-text);
}

.valkyra-page .vk-hero-lead{
  font-size:clamp(1rem, 1.15vw, 1.15rem);
  color:color-mix(in srgb, var(--vk-text) 88%, transparent);
  line-height:1.7;
  max-width:38rem;
  margin:0;
}

.valkyra-page .vk-hero-actions{
  margin-top:1.8rem;
  display:flex;
  flex-direction:column;
  gap:0.85rem;
  align-items:flex-start;
}

.valkyra-page .vk-hero-note{
  margin:0;
  font-size:0.9rem;
  color:var(--vk-text-muted);
  line-height:1.5;
  max-width:34rem;
}

.valkyra-hero-media{
  display:flex;
  justify-content:center;
}

.valkyra-page .vk-hero-image{
  position:relative;
  width:100%;
  max-width:clamp(240px, 34vw, 440px);
  aspect-ratio:4 / 5;
  border-radius:24px;
  background:color-mix(in srgb, var(--vk-surface) 80%, var(--vk-accent) 6%);
  box-shadow:
    0 30px 60px rgba(122, 85, 50, 0.22),
    0 8px 20px rgba(122, 85, 50, 0.10);
  overflow:hidden;
  isolation:isolate;
}

.valkyra-page .vk-hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(160deg, transparent 55%, color-mix(in srgb, var(--vk-accent) 18%, transparent) 100%);
  pointer-events:none;
  mix-blend-mode:soft-light;
  z-index:1;
}

.valkyra-page .vk-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.valkyra-page .vk-hero-image:hover img{
  transform:scale(1.04);
}

/* ========== CONTENT ========== */
.valkyra-content{
  padding-top:clamp(20px, 3vw, 40px);
}

.valkyra-page .vk-section{
  padding:clamp(44px, 7vw, 88px) 0;
}

.valkyra-page .vk-section + .vk-section{
  border-top:1px solid color-mix(in srgb, var(--vk-border) 60%, transparent);
}

.valkyra-page h1,
.valkyra-page h2,
.valkyra-page h3{
  font-family:var(--vlk-serif);
  line-height:1.2;
  color:var(--vk-text);
}

.valkyra-page .vk-section h2{
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:600;
  margin:0 0 1.2rem;
}

.valkyra-page .vk-section p{
  font-size:clamp(0.96rem, 1.05vw, 1.08rem);
  line-height:1.75;
  color:color-mix(in srgb, var(--vk-text) 86%, transparent);
  margin:0 0 1rem;
  max-width:68ch;
}

.valkyra-page .vk-muted{
  font-size:0.9rem;
  color:var(--vk-text-muted);
  line-height:1.6;
}

/* ========== GRID 3 ========== */
.valkyra-page .vk-grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(18px, 2vw, 28px);
  margin-top:1rem;
}

.valkyra-page .vk-card{
  background:var(--vk-surface);
  border:1px solid var(--vk-border);
  border-radius:20px;
  padding:clamp(20px, 2vw, 28px);
  box-shadow:var(--vk-card-shadow);
  transition:transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
             box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
             border-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.valkyra-page .vk-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--vk-card-shadow-hover), 0 0 0 1px var(--vk-glow);
  border-color:var(--vk-card-border-hover);
}

.valkyra-page .vk-card h3{
  font-family:var(--vlk-serif);
  font-size:clamp(1.05rem, 1.2vw, 1.2rem);
  font-weight:600;
  letter-spacing:0.04em;
  margin:0 0 0.6rem;
}

.valkyra-page .vk-card p{
  margin:0;
  font-size:0.95rem;
  line-height:1.7;
  color:color-mix(in srgb, var(--vk-text) 84%, transparent);
}

/* ========== COLLECTION GRID ========== */
.valkyra-page .vk-collection-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:clamp(18px, 2.2vw, 28px);
  margin-top:1.4rem;
}

.valkyra-page .vk-collection-grid-large{
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}

.valkyra-page .vk-collection-item{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  background:var(--vk-surface);
  border:1px solid var(--vk-border);
  border-radius:20px;
  padding:14px 14px 20px;
  box-shadow:var(--vk-card-shadow);
  transition:transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
             box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
             border-color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.valkyra-page .vk-collection-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--vk-card-shadow-hover), 0 0 0 1px var(--vk-glow);
  border-color:var(--vk-card-border-hover);
}

.valkyra-page .vk-thumb{
  display:block;
  width:100%;
  aspect-ratio:3 / 4;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--vk-surface) 70%, var(--vk-accent) 10%) 0%,
    color-mix(in srgb, var(--vk-surface) 92%, transparent) 100%);
  box-shadow:0 12px 24px rgba(122, 85, 50, 0.10);
  margin-bottom:0.6rem;
  position:relative;
  isolation:isolate;
  text-decoration:none !important;
  border:0;
  cursor:pointer;
}

.valkyra-page a.vk-thumb:focus-visible{
  outline:2px solid var(--vk-accent);
  outline-offset:3px;
}

/* Estä globaali .vk-content a -korostushover thumb- ja CTA-linkeille */
.valkyra-page a.vk-thumb:hover,
.valkyra-page .vk-item-cta a:hover{
  background:transparent !important;
  text-decoration:none !important;
  padding:0 !important;
  border-radius:0 !important;
}

.valkyra-page .vk-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  opacity:0;
  transform:translateX(-100%);
  transition:opacity 200ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events:none;
  z-index:2;
}

.valkyra-page .vk-collection-item:hover .vk-thumb::before{
  opacity:1;
  transform:translateX(100%);
}

.valkyra-page .vk-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.valkyra-page .vk-collection-item:hover .vk-thumb img{
  transform:scale(1.05);
}

.valkyra-page .vk-collection-item h3{
  font-family:var(--vlk-serif);
  margin:0.5rem 0 0.2rem;
  font-size:clamp(1rem, 1.15vw, 1.15rem);
  font-weight:600;
  letter-spacing:0.03em;
  color:var(--vk-text);
}

.valkyra-page .vk-item-material{
  margin:0 0 0.5rem;
  font-size:0.86rem;
  color:var(--vk-text-muted);
  letter-spacing:0.04em;
}

.valkyra-page .vk-item-text{
  font-size:0.92rem;
  line-height:1.65;
  margin:0 0 0.7rem;
  color:color-mix(in srgb, var(--vk-text) 84%, transparent);
}

.valkyra-page .vk-item-cta{
  margin:auto 0 0;
  padding-top:0.6rem;
  border-top:1px dashed color-mix(in srgb, var(--vk-border) 70%, transparent);
}

.valkyra-page .vk-item-cta a{
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
  font-size:0.88rem;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--vk-accent) !important;
  text-decoration:none !important;
  transition:gap 180ms ease, color 180ms ease;
}

.valkyra-page .vk-item-cta a:hover{
  gap:0.55rem;
  color:color-mix(in srgb, var(--vk-accent) 70%, #000) !important;
}

/* ========== TWO COLUMN ========== */
.valkyra-page .vk-two-column{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  gap:clamp(24px, 4vw, 56px);
}

/* ========== LISTA ========== */
.valkyra-page .vk-list{
  list-style:none;
  padding-left:0;
  margin:1rem 0 0;
}

.valkyra-page .vk-list li{
  position:relative;
  padding-left:1.6rem;
  margin-bottom:0.5rem;
  color:color-mix(in srgb, var(--vk-text) 86%, transparent);
  font-size:1rem;
  line-height:1.7;
}

.valkyra-page .vk-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.7em;
  width:0.85rem;
  height:1px;
  background:var(--vk-accent);
  opacity:0.95;
}

/* ========== NAPIT ========== */
.valkyra-page .vk-btn-primary{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1rem 2rem;
  border-radius:999px;
  font-family:var(--vlk-sans);
  font-size:0.85rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none !important;
  color:#1a1207 !important;
  background:linear-gradient(135deg, #f0d49a 0%, #c88458 55%, #8a5a32 100%);
  border:1px solid color-mix(in srgb, #c88458 50%, rgba(0, 0, 0, 0.15) 50%);
  box-shadow:0 16px 36px rgba(122, 85, 50, 0.28),
             inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
             box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
             filter 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.valkyra-page .vk-btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform:translateX(-120%);
  pointer-events:none;
  transition:transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index:-1;
}

.valkyra-page .vk-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 48px rgba(122, 85, 50, 0.36),
             inset 0 1px 0 rgba(255, 255, 255, 0.45);
  filter:brightness(1.05);
  color:#1a1207 !important;
}

.valkyra-page .vk-btn-primary:hover::after{
  transform:translateX(120%);
}

.valkyra-page .vk-btn-primary:focus-visible{
  outline:2px solid color-mix(in srgb, var(--vk-accent) 75%, transparent);
  outline-offset:3px;
}

.valkyra-page .vk-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.95rem 1.8rem;
  border-radius:999px;
  background:transparent;
  color:var(--vk-text);
  border:1px solid color-mix(in srgb, var(--vk-accent) 50%, var(--vk-border) 50%);
  font-size:0.85rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.valkyra-page .vk-btn-secondary:hover{
  background:color-mix(in srgb, var(--vk-accent) 10%, transparent);
  border-color:var(--vk-accent);
}

/* ========== FAQ ========== */
.valkyra-page .vk-faq-item{
  border-left:2px solid color-mix(in srgb, var(--vk-accent) 70%, transparent);
  padding:0.5rem 0 0.5rem 1.2rem;
  margin-bottom:1.6rem;
  transition:border-color 200ms ease;
}

.valkyra-page .vk-faq-item:hover{
  border-left-color:var(--vk-accent);
}

.valkyra-page .vk-faq-item h3{
  font-family:var(--vlk-serif);
  font-size:1.05rem;
  font-weight:600;
  margin:0 0 0.4rem;
  letter-spacing:0.02em;
}

.valkyra-page .vk-faq-item p{
  margin:0;
  font-size:0.94rem;
  line-height:1.7;
  color:color-mix(in srgb, var(--vk-text) 84%, transparent);
}

/* ========== CTA / BACK LINK ========== */
.valkyra-page .vk-collection-cta{
  margin-top:2rem;
  text-align:center;
}

.valkyra-page .vk-back-link,
.valkyra-page .vk-back-links{
  text-align:center;
}

.valkyra-page .vk-back-link p,
.valkyra-page .vk-back-links p{
  margin:0.5rem 0;
}

.valkyra-page .vk-back-link a,
.valkyra-page .vk-back-links a{
  font-size:0.95rem;
  color:var(--vk-text-muted);
  text-decoration:none;
  transition:color 180ms ease;
}

.valkyra-page .vk-back-link a:hover,
.valkyra-page .vk-back-links a:hover{
  color:var(--vk-accent);
}

/* ========== LINKIT yleisesti Valkyran sisällä ========== */
.valkyra-page a:not(.vk-btn-primary):not(.vk-btn-secondary):not(.vk-thumb){
  color:var(--vk-text);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--vk-accent) 55%, transparent);
  transition:color 180ms ease, text-decoration-color 180ms ease;
}

.valkyra-page a:not(.vk-btn-primary):not(.vk-btn-secondary):not(.vk-thumb):hover{
  color:var(--vk-accent);
  text-decoration-color:var(--vk-accent);
}

/* .vk-item-cta a -värisäännöt määritelty ylempänä — overrideilla varmistettu */

/* ========== REVEAL-ANIMAATIOIDEN HIENOSÄÄTÖ ========== */
.valkyra-page [data-vk-reveal]{
  will-change:opacity, transform, filter;
}

/* ========== ULTRAWIDE (>1600px) ========== */
@media (min-width: 1600px){
  .valkyra-page{
    --vlk-container:1400px;
    --vlk-pad-x:clamp(40px, 4vw, 80px);
  }
  .valkyra-page .vk-hero-title{
    font-size:clamp(2.6rem, 3vw, 4rem);
  }
  .valkyra-hero-inner{
    gap:clamp(48px, 5vw, 96px);
  }
}

/* ========== TABLET (max 1024) ========== */
@media (max-width: 1024px){
  .valkyra-hero-inner{
    grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
    gap:clamp(24px, 4vw, 48px);
  }
  .valkyra-page .vk-grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ========== MOBIILI (max 720) ========== */
@media (max-width: 720px){
  .valkyra-hero{
    padding:clamp(40px, 8vw, 64px) 0 clamp(28px, 5vw, 48px);
  }
  .valkyra-hero-inner{
    grid-template-columns:1fr;
    gap:28px;
  }
  .valkyra-hero-media{
    justify-content:flex-start;
    order:-1;
  }
  .valkyra-page .vk-hero-image{
    max-width:240px;
  }
  .valkyra-page .vk-two-column{
    grid-template-columns:1fr;
    gap:24px;
  }
  .valkyra-page .vk-grid-3{
    grid-template-columns:1fr;
  }
  .valkyra-page .vk-section{
    padding:clamp(36px, 8vw, 56px) 0;
  }
  .valkyra-page .vk-section h2{
    letter-spacing:0.14em;
  }
}

/* ========== XS (max 480) ========== */
@media (max-width: 480px){
  .valkyra-page .vk-logo{
    max-width:130px;
  }
  .valkyra-page .vk-hero-image{
    max-width:210px;
  }
  .valkyra-page .vk-btn-primary,
  .valkyra-page .vk-btn-secondary{
    width:100%;
    padding-left:1rem;
    padding-right:1rem;
  }
  .valkyra-page .vk-hero-actions{
    align-items:stretch;
    width:100%;
  }
  .valkyra-page .vk-hero-note{
    text-align:center;
  }
}

/* ========== REDUCE MOTION ========== */
@media (prefers-reduced-motion: reduce){
  .valkyra-page .vk-thumb img,
  .valkyra-page .vk-hero-image img,
  .valkyra-page .vk-btn-primary::after,
  .valkyra-page .vk-thumb::before,
  .valkyra-page .vk-card,
  .valkyra-page .vk-collection-item{
    transition:none !important;
  }
  .valkyra-page .vk-collection-item:hover,
  .valkyra-page .vk-card:hover{
    transform:none;
  }
}