/* =========================================================
   LILLE NOR – PROJEKT SIDE (KUN SIDE-SPECIFIKT)
   Base/nav/body/fonts ligger i basefil.css
========================================================= */

/* Projekt-variable */
:root{
    --bg-hero: #486b9a;
    --bg-section: #77a4e6;
  
    --wrap: 1100px;
    --padX: 28px;
  }
  
  /* Wrappers (projektsider) */
  .wrap{
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 28px var(--padX);
  }
  
  .wrap--wide{
    max-width: 1200px;
  }
  
  /* =========================================================
     HERO
  ========================================================= */
  .project-hero{
    background: var(--bg-hero);
    padding: 40px 0 56px;
  }
  
  .menu-kicker{
    margin: 0 0 28px;
    font-size: 18px;
    letter-spacing: .02em;
    color: rgba(0,0,0,.75);
  }
  
  .hero-grid{
    display: grid;
    grid-template-columns: 1fr minmax(480px, 40%);
    gap: 56px;
    align-items: end;
  }
  
  .hero-title{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-size: 128px;
    line-height: .95;
    margin: 0;
    color: #eaf3ff;
  }
  
  .hero-body{ margin-top: 34px; }
  
  .hero-lead{
    margin: 0;
    max-width: 46ch;
    font-size: 20px;
    line-height: 2.05;
    color: rgba(0,0,0,.78);
  }
  
  .hero-media{
    margin: 0;
    justify-self: end;
  }
  
  .hero-media img{
    width: 100%;
    height: auto;
  }
  
  /* =========================================================
     STEMNING
  ========================================================= */
  .project-section.mood{
    background: var(--bg-section);
    padding-top: 70px;
    padding-bottom: 90px;
  }
  
  .mood-title{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    text-align: center;
    font-size: 88px;
    line-height: 1.02;
    margin: 0 0 46px;
    color: rgba(0,0,0,.22);
  }
  
  .mood-grid{
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 42px;
    align-items: center;
    justify-content: center;
  }
  
  .mood-text p{
    margin: 0;
    font-size: 20px;
    line-height: 2.05;
    max-width: 38ch;
    color: rgba(0,0,0,.75);
  }
  
  .mood-media{
    margin: 0;
    display: flex;
    justify-content: center;
  }
  
  .mood-media img{
    width: min(560px, 100%);
    border-radius: 18px;
  }
  
  /* =========================================================
     BESKRIVELSE / BIDRAG
  ========================================================= */
  .project-section.desc{
    background: #f2f1ee;
    padding: 64px 0;
  }
  
  .desc-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: start;
  }
  
  .desc-title{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-size: 86px;
    line-height: .95;
    margin: 0 0 26px;
    color: rgba(52, 92, 150, .95);
  }
  
  .desc-col p{
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 2.05;
    color: rgba(0,0,0,.78);
    max-width: 48ch;
  }
  
  .contrib-list{
    margin: 0;
    padding-left: 24px;
  }
  
  .contrib-list li{
    font-size: 20px;
    line-height: 2.05;
    margin: 0 0 14px;
    color: rgba(0,0,0,.78);
  }
  
  /* =========================================================
     PROCESS
  ========================================================= */
  .project-section.process{
    background: var(--bg-hero);
    padding: 90px 0 100px;
  }
  
  .project-section.process .wrap{
    max-width: 1160px;
    margin: 0 auto;
  }
  
  .process-grid{
    display: grid;
    grid-template-columns: 0.95fr 1.15fr;
    gap: 56px;
    align-items: center;
  }
  
  .process-title{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-size: 118px;
    line-height: .85;
    margin: 0 0 36px;
    color: #eaf3ff;
  }
  
  .process-left{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  
  .process-card{
    background: #f4f4f4;
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
  }
  
  .process-card h3{
    margin: 0 0 8px;
    font-size: 14px;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0,0,0,.85);
  }
  
  .process-card p{
    margin: 0;
    font-size: 17px;
    line-height: 1.85;
    color: rgba(0,0,0,.78);
  }
  
  .process-right{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
  
  .collage-btn{
    width: 100%;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
  
  .collage-thumb{
    width: 100%;
    max-width: 860px;
    height: auto;
    border-radius: 0;
  }
  
  .collage-hint{
    margin: 0;
    font-size: 14px;
    color: rgba(234,243,255,.85);
    text-align: center;
  }
  
  /* Lightbox */
  .lightbox{
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    padding: 22px;
    background: rgba(0,0,0,.70);
    z-index: 9999;
  }
  
  .lightbox.is-open{
    display: grid;
  }
  
  .lightbox-img{
    max-width: min(1200px, 92vw);
    max-height: 92vh;
    border-radius: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
  }
  
  /* =========================================================
     RESULTATET
  ========================================================= */
  .project-section.result{
    background: #f2f1ee;
    padding: 70px 0;
  }
  
  .result-title{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    text-align: center;
    font-size: clamp(62px, 8vw, 130px);
    margin: 0 0 34px;
    color: rgba(52, 92, 150, .95);
  }
  
  .result-grid{
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 54px;
    align-items: start;
  }
  
  .result-text p{
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 2.1;
    color: rgba(0,0,0,.78);
    max-width: 54ch;
  }
  
  .result-media{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .result-video{
    width: 100%;
    max-width: 760px;
    height: auto;
  }
  
  .result-cta{
    display: inline-block;
    margin-top: 18px;
    padding: 16px 26px;
    border-radius: 999px;
    background: #f2a9c8;
    color: rgba(0,0,0,.85);
    text-decoration: none;
    font-size: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
  }
  
  .result-cta:hover{
    filter: brightness(0.98);
  }
  
  /* =========================================================
     RESPONSIVE
  ========================================================= */
  @media (max-width: 1100px){
    .hero-grid{
      grid-template-columns: 1fr 520px;
      gap: 34px;
    }
  
    .hero-title{ font-size: 104px; }
  
    .process-title{ font-size: 100px; }
  
    .process-grid{
      grid-template-columns: 1fr 1fr;
      gap: 44px;
    }
  
    .collage-thumb{ max-width: 720px; }
  }
  
  @media (max-width: 980px){
    .mood-title{
      font-size: 64px;
      margin-bottom: 30px;
    }
  
    .mood-grid{
      grid-template-columns: 1fr;
      gap: 26px;
    }
  
    .mood-text p{ max-width: 60ch; }
  
    .mood-media{ justify-content: flex-start; }
  }
  
  @media (max-width: 900px){
    .hero-grid{
      grid-template-columns: 1fr;
      align-items: start;
    }
  
    .hero-title{ font-size: 84px; }
  
    .hero-body{ margin-top: 22px; }
  
    .hero-media{
      justify-self: start;
      margin-top: 20px;
    }
  
    .desc-grid{
      grid-template-columns: 1fr;
      gap: 34px;
    }
  
    .desc-title{ font-size: 64px; }
  
    .process-grid{
      grid-template-columns: 1fr;
      gap: 34px;
    }
  
    .process-title{ font-size: 80px; }
  
    .result-grid{
      grid-template-columns: 1fr;
      gap: 28px;
    }
  
    .result-media{ align-items: flex-start; }
    .result-video{ max-width: 100%; }
  }