/* =========================
   PROJEKT – GRID + KORT
   ========================= */

/* Grid: 30px mellan korten */
.projekt-grid{
  display:grid;
  gap:30px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px){ .projekt-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px){ .projekt-grid{ grid-template-columns:1fr; } }

/*
  Kort – default = transparent
  (OBS: använd INTE !important här, annars kan bgcolor aldrig slå igenom)
*/
.projekt-card{
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/*
  När shortcoden skickar bgcolor -> du sätter inline CSS-variabler.
  Detta gäller både om du väljer klass "is-has-bg" eller bara variabeln.
*/
.projekt-card.is-has-bg,
.projekt-card[style*="--projekt-card-bg"]{
  background: var(--projekt-card-bg, transparent);
  padding: var(--projekt-card-pad, 16px);
  border-radius: var(--projekt-card-radius, 18px);
}

/* Klipp bildhörn snyggt om kortet har bg */
.projekt-card.is-has-bg .projekt-main,
.projekt-card[style*="--projekt-card-bg"] .projekt-main{
  border-radius: calc(var(--projekt-card-radius, 18px) - 2px);
  overflow: hidden;
}

/* Main bild: lås höjd via aspect-ratio (förhindrar hopp) */
.projekt-main{
  display:block;
  width:100%;
  aspect-ratio: 16 / 10;   /* justera om du vill */
  overflow:hidden;
  border-radius:18px;
}
.projekt-main-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Thumbs-rad: bara gap */
.projekt-thumbs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  padding:0 !important;
  margin:10px 0 0;
}

/* Bas: både button och a ska bete sig som samma box */
.projekt-thumb{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  border-radius:10px;
  border:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  text-decoration:none !important;
}

/* Hover / focus */
.projekt-thumb:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.projekt-thumb:focus{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }

/* +N rutan: alltid radius + tunn border (grå/vit-ish) */
.projekt-thumb--more{
  border-radius:10px;
  overflow:hidden;
  position:relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

/* Overlay */
.projekt-thumb-more{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
  color:#fff;
  background:rgba(3, 18, 40, .55);
  backdrop-filter: blur(2px);
  border-radius:inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.projekt-thumb--more:hover .projekt-thumb-more{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.32);
}
.projekt-thumb--more:focus,
.projekt-thumb--more:focus-visible{
  outline:2px solid rgba(255,255,255,.55);
  outline-offset:2px;
}

/* Meta */
.projekt-meta{
  margin-top:10px;
}

/* Ort */
.projekt-ort{
  margin:0 0 6px;
  font-size:14px;
  font-weight:700;
  color:#b7d700;
}

/* Titel + intro (som du hade i mörkt läge) */
.projekt-title{
  margin:0 0 8px;
  font-size:22px;
  line-height:1.1;
}
.projekt-title a{ color:#fff; text-decoration:none; }
.projekt-title a:hover{ text-decoration:none; }

.projekt-intro{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.45;
}

/* =========================
   PROJEKT MODAL – FULLBREDD BAND + VÅGOR
   (vågor via .projekt-modal__wave divs, INTE pseudo)
   ========================= */

.projekt-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}
.projekt-modal.is-open{ display:block; }

/* mörk overlay bakom bandet */
.projekt-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(5, 18, 36, .65);
  backdrop-filter: blur(2px);
}

/* dialog fyller viewport, bandet placeras i mitten */
.projekt-modal__dialog{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* bandet */
.projekt-modal__panel{
  position:relative;
  width:100%;
  background:#F7EDE1;
  border-radius:0;
  box-shadow:none;
  overflow:visible !important; /* måste vara visible för våg utanför */
}

/* Content */
.projekt-modal__content{
  max-width:1100px;
  margin:0 auto;
  padding:54px 42px 42px;
  position:relative;
  z-index:2; /* över våg */
}
@media (max-width: 720px){
  .projekt-modal__content{ padding:42px 18px 34px; }
}

/* stängknapp */
.projekt-modal__close{
  position:absolute;
  top:18px;
  left:18px;
  z-index:3;
  width:40px;
  height:40px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background:rgba(255,255,255,.65);
  display:flex;
  align-items:center;
  justify-content:center;
}
.projekt-modal__close:hover{ background:rgba(255,255,255,.9); }

/* Vågor (en låg, mjuk våg) */
.projekt-modal__wave{
  display:block;
  position:absolute;
  left:0;
  width:100%;
  height:34px;          /* låg våg */
  pointer-events:none;
  z-index:1;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:left center;
}

.projekt-modal__wave--top{
  top:-34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23F7EDE1' d='M0,60 L0,26 C220,44 440,44 660,26 C880,8 1040,14 1200,26 L1200,60 Z'/%3E%3C/svg%3E");
}
.projekt-modal__wave--bottom{
  bottom:-34px;
  transform:scaleY(-1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23F7EDE1' d='M0,60 L0,26 C220,44 440,44 660,26 C880,8 1040,14 1200,26 L1200,60 Z'/%3E%3C/svg%3E");
}

/* =========================
   MODAL – GALLERY STRIP
   ========================= */

.projekt-modal__gallery{
  position:relative;
  margin-top:18px;
}

.projekt-modal__track-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom:10px;

  /* Göm scrollbar */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.projekt-modal__track-wrap::-webkit-scrollbar{ display:none; }

.projekt-modal__track{
  display:flex;
  gap:18px;
  align-items:stretch;
}

.projekt-modal__img{
  flex:0 0 auto;
  width:calc((100% - 36px) / 3);
  aspect-ratio:16 / 9;
  border-radius:14px;
  object-fit:cover;
  scroll-snap-align:start;
  background:#ddd;
}

@media (max-width: 900px){
  .projekt-modal__img{ width:80%; }
}

/* pilar */
.projekt-modal__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  background:#B7D700;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  z-index:3;
}
.projekt-modal.has-more .projekt-modal__nav{ display:flex; }
.projekt-modal__nav--prev{ left:10px; }
.projekt-modal__nav--next{ right:10px; }
.projekt-modal__nav svg{ width:18px; height:18px; fill:#0B2A52; }

/* fade */
.projekt-modal__fade-right{
  pointer-events:none;
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:90px;
  background:linear-gradient(to left, rgba(247,237,225,1), rgba(247,237,225,0));
  opacity:0;
  transition:opacity .2s ease;
  z-index:2;
}
.projekt-modal.has-more .projekt-modal__fade-right{ opacity:1; }

/* CTA */
.projekt-modal__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  font-weight:700;
  text-decoration:none;
  color:#0B2A52;
}
.projekt-modal__cta:hover{ text-decoration:underline; }

.projekt-modal__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:6px;
}