/* assets/start.css – landningssidan (/) */

/* =========================
   BAKGRUND & ATMOSFÄR
   ========================= */

body.silk.start-bg{
  position: relative;
  min-height: 100vh;
  background: transparent;
}

body.silk.start-bg::before{
  content:"";
  position: fixed;
  inset: 0;
  background: var(--start-bg, url("/assets/images/01.jpg")) center/cover no-repeat;
  opacity: 0.22;
  filter: blur(2px) saturate(1.08);
  pointer-events: none;
  z-index: -2;
}

body.silk.start-bg::after{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,0.75), rgba(255,255,255,0.18) 55%, rgba(255,240,247,0.28) 100%),
    linear-gradient(180deg, rgba(255,238,247,0.35), rgba(255,238,247,0.12));
  pointer-events: none;
  z-index: -1;
}

/* =========================
   ROSA BAR FÄST I VÄNSTERKANT
   (påverkar INTE layouten)
   ========================= */

.left-rail{
  position: fixed;
  top: 0;
  left: 0;
  width: 160px; /* 56px */
  height: 100vh;

  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.30), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,122,200,0.55), rgba(255,79,163,0.28));

  border-right: 1px solid rgba(255,79,163,0.35);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);

  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 14px;
  gap: 12px;

  z-index: 60;
}

.left-rail::after{
  content:"";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 0;
  width: 1px;
  background: rgba(255,255,255,0.35);
  opacity: 0.55;
}

.left-rail a{
  width: 140px; /* 40px */
  height: 40px;
  border-radius: 14px;

  display: grid;
  place-items: center;

  text-decoration: none;
  font-size: 1.1rem;
  color: inherit;

  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 8px 20px rgba(255,111,174,0.22);

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.left-rail a:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255,111,174,0.32);
  background: rgba(255,255,255,0.34);
}

.left-rail a.active{
  background: linear-gradient(135deg, #ff7ac8, #ff4fa3);
  color: #fff;
  border-color: rgba(255,255,255,0.40);
  box-shadow: 0 14px 30px rgba(255,79,163,.45);
}

.left-rail a.brand{
  border-radius: 999px;
  animation: heartPulse 2.2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes heartPulse{
  0%, 100%{ transform: scale(1); }
  45%{ transform: scale(1.06); }
  70%{ transform: scale(1.00); }
}

@media (max-width: 720px){
  .left-rail{
    width: 100%;
    height: 64px;
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    gap: 10px;
    border-right: none;
    border-bottom: 1px solid rgba(255,79,163,0.35);
  }
  .left-rail::after{ display: none; }
}

/* =========================
   LAYOUT (kortet centrerat)
   ========================= */

.start-wrap{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 14px 52px;
}

.start-hero.card{
  max-width: 1020px;
  width: 100%;
  margin: 0;
  padding: 26px; /* lite luftigare för balans */

  background: rgba(255,249,252,0.58);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid rgba(255,255,255,0.65);
}

/* =========================
   TEXT (FIX: bredare innehåll)
   ========================= */

.landing{
  text-align: center;
  max-width: 900px;     /* viktig: fyller kortet mer */
  margin: 0 auto;
  padding: 10px 10px;
}

.landing h1{
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  margin: 0 0 10px;
  letter-spacing: 0.2px;
}

.landing-sub{
  margin: 0 auto 18px;
  max-width: 640px;     /* lite bredare */
  opacity: .88;
}

/* Textblock – håll texten snygg, men inte “vänsteröken” */
.landing-copy{
  max-width: 860px;     /* viktig: detta är optiska centrerings-fixen */
  margin: 0 auto;
  text-align: left;
}

.landing-copy h2{
  margin: 18px 0 8px;
  font-size: 1.25rem;
}

.landing-copy p{
  margin: 0 0 10px;
  opacity: .95;
}

/* =========================
   BILDER – större & mer mittiga
   ========================= */

.landing-gallery{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 24px auto;
}

.landing-gallery img{
  width: 100%;
  max-width: 560px;   /* viktig: så de matchar nya textbredden */
  height: 300px;
  object-fit: cover;

  border-radius: 30px 30px 22px 22px;
  border: 1px solid rgba(255,255,255,0.62);

  box-shadow:
    0 18px 42px rgba(255,111,174,0.26),
    0 12px 30px rgba(0,0,0,0.08);

  opacity: 0.95;
  filter: saturate(1.06) contrast(1.02);
  transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}

.landing-gallery img:hover{
  transform: translateY(-2px) scale(1.01);
  opacity: 1;
  box-shadow:
    0 22px 52px rgba(255,111,174,0.32),
    0 16px 38px rgba(0,0,0,0.10);
}

/* =========================
   MOBIL
   ========================= */

@media (max-width: 600px){
  .start-hero.card{
    padding: 20px;
  }

  .landing{
    max-width: 100%;
    padding: 8px 6px;
  }

  .landing-copy{
    max-width: 100%;
  }

  .landing-gallery{
    margin: 18px auto;
  }

  .landing-gallery img{
    max-width: 100%;
    height: 220px;
    border-radius: 22px;
  }
}

@media (min-width: 1100px){
  .landing-gallery img{
    height: 320px;
  }
}

/* ====== FELSÄKRING: centrering + inga gamla kolumner ====== */
.start-wrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

.start-hero.card{
  margin: 0 auto !important;
}

.start-shell{ display:block !important; }
.start-rail{ display:none !important; }
.start-main{ width:100% !important; }

.landing{
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
}

.landing-copy{
  max-width: 860px !important;
  margin: 0 auto !important;
}

.landing-gallery img{
  max-width: 560px !important;
}