:root{
  --haap-card-w: clamp(220px, 26vw, 320px);
  --haap-card-ratio: 3 / 4;
  --haap-lines: 7;
  --haap-ovl-top: .42;
  --haap-ovl-mid: .32;
  --haap-ovl-bot: .46;
  --haap-card-h: calc(var(--haap-card-w) * 4 / 3);
}

.haap-vismer-text{
  display:inline-flex; align-items:center; gap:.4rem;
  font:inherit; font-weight:600; cursor:pointer;
  background:none; border:none; padding:.25rem; border-radius:.4rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.haap-vismer-text:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,204,153,.35); }
.haap-vismer-chevron::before{
  content:"▸"; display:inline-block; font-size:1.1em; line-height:1;
  transform:rotate(0deg); transition:transform .25s ease; opacity:.8;
}
.haap-vismer-text.open .haap-vismer-chevron::before{ transform:rotate(90deg); opacity:1; }

.nsgla-modal-bg{
  display:none; position:fixed; inset:0; z-index:1002;
  background:rgba(0,0,0,.8); align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.nsgla-modal-bg.active{ display:flex; }
.nsgla-modal{
  position:relative; background:#18191a; color:#eaeaea;
  border:1px solid #333; border-radius:16px; padding:2rem 1.5rem; width:90vw; max-width:380px;
  box-shadow:0 6px 24px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:1.25rem;
}
.nsgla-modal-close{
  position:absolute; top:1rem; right:1rem; background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.6); font-size:1.5rem;
}
.nsgla-modal-close:hover{ color:#00cc99; }
.nsgla-modal label{ display:block; font-weight:600; color:#00cc99; margin-bottom:.5rem; }
.nsgla-modal input[type="text"], .nsgla-modal textarea{
  width:100%; padding:1rem 1.2rem; border-radius:14px; border:1.5px solid #333;
  background:#23272b; color:#f2f6f4; font:inherit; transition:border .2s, box-shadow .2s;
}
.nsgla-modal input[type="text"]:focus, .nsgla-modal textarea:focus{
  border-color:#00cc99; box-shadow:0 0 0 3px rgba(0,204,153,.25);
}
.nsgla-modal .nsgla-modal-actions{ display:flex; justify-content:flex-end; gap:1rem; }
.nsgla-modal .nsgla-modal-actions button{
  padding:.9rem 1.5rem; border:none; border-radius:14px; background:#00cc99; color:#fff; cursor:pointer;
  font-weight:500; transition:background .2s, transform .2s, box-shadow .2s;
}
.nsgla-modal .nsgla-modal-actions button:hover{
  background:#00997a; transform:translateY(-2px) scale(1.03); box-shadow:0 4px 16px rgba(76,175,80,.13);
}

.nordlyshaap-container{
  background:none; padding:0; margin:0 auto; max-width:100%;
  box-sizing:border-box;
}

.nordlyshaap-container .haap-swiper{
  width:100%;
  padding:8px 0 24px;
  overflow:hidden;
  min-height: calc(var(--haap-card-h) + 32px);
}
.haap-swiper .swiper-wrapper{ align-items:stretch; }
.haap-swiper.swiper > .swiper-wrapper > .swiper-slide{
  width: var(--haap-card-w) !important;
  flex-shrink: 0 !important;
  height: auto !important;
  display: flex;
}
.haap-swiper .swiper-button-prev,
.haap-swiper .swiper-button-next{ color:#d7f7ee; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.haap-swiper .swiper-pagination-bullet{ background:rgba(255,255,255,.6); }
.haap-swiper .swiper-pagination-bullet-active{ background:#00cc99; }
.haap-swiper.haap-ready{ min-height: calc(var(--haap-card-h) + 32px); }

.nordlyshaap-container .nsgla-card{
  position: relative;
  min-height: calc(var(--haap-card-h) + 40px);
  overflow: hidden;
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: calc(var(--haap-card-h) + 40px);
}
.nordlyshaap-container .nsgla-card::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  animation: none !important;
  transition: none !important;
  will-change: opacity, transform;
}

.haap-card,
.haap-swiper .haap-quote{
  position:relative; width:100%; aspect-ratio:var(--haap-card-ratio);
  border-radius:16px; overflow:hidden;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  display:flex; align-items:center; justify-content:center; text-align:center; color:#f6fbfa;
  box-shadow: 0 12px 36px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
  transition: transform .18s ease, box-shadow .18s ease;
  outline: none;
  content-visibility: auto;
  contain-intrinsic-size: var(--haap-card-h);
}
.haap-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 46px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.02); }
.haap-card:focus-visible{ box-shadow: 0 0 0 3px rgba(0,204,153,.38), 0 12px 36px rgba(0,0,0,.35); }

.haap-card > img.haap-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  will-change: transform, opacity;
}

.haap-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(135deg, rgba(0,200,120,.18), rgba(100,64,200,.12) 45%, rgba(0,140,255,.12));
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding: 1px; opacity: .6; z-index:2;
}
.haap-card::before,
.haap-swiper .haap-quote::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(115% 120% at 50% 18%, rgba(0,0,0,var(--haap-ovl-top)), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,var(--haap-ovl-bot)), rgba(0,0,0,var(--haap-ovl-mid)) 46%, rgba(0,0,0,var(--haap-ovl-bot)));
}
.haap-content{
  position:relative; z-index:3; width:100%; height:100%;
  max-width: 92%;
  padding:clamp(16px, 4.2vw, 28px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.haap-content blockquote{
  margin:0; padding:0; border:0; line-height:1.45;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.35);
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:var(--haap-lines);
  word-break:break-word; hyphens:auto;
}
.haap-card.size-l blockquote,
.haap-swiper .haap-quote.size-l blockquote{ font-size:clamp(1.1rem, 2.1vw, 1.35rem); }
.haap-card.size-m blockquote,
.haap-swiper .haap-quote.size-m blockquote{ font-size:clamp(1.0rem, 1.9vw, 1.2rem); }
.haap-card.size-s blockquote,
.haap-swiper .haap-quote.size-s blockquote{ font-size:clamp(0.95rem, 1.7vw, 1.1rem); }
.haap-meta{
  margin-top:clamp(8px, 2.2vw, 14px);
  font-size:clamp(.9rem, 1.4vw, 1rem);
  color:#e2f3ee; opacity:.95; text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.haap-textwrap{
  padding: clamp(10px, 2vw, 16px) clamp(12px, 2.4vw, 20px);
  border-radius: 12px;
  background: rgba(0,0,0,.36);
  -webkit-backdrop-filter: saturate(110%) blur(3px);
  backdrop-filter: saturate(110%) blur(3px);
  max-width: 38ch;
}
.haap-high-contrast::before{
  background:
    radial-gradient(120% 120% at 50% 18%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.45) 46%, rgba(0,0,0,.65));
}
.haap-card.autosized blockquote,
.haap-swiper .haap-quote.autosized blockquote,
.haap-preview.autosized blockquote{
  -webkit-line-clamp: initial; overflow: visible; display: block;
}

[data-haap-grid]{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px 20px;
}
[data-haap-grid] .haap-card{
  width:100%;
  aspect-ratio: var(--haap-card-ratio);
  max-width: 360px;
  margin-inline: auto;
}

.nordlyshaap-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:1.2rem; max-width:1000px; margin:2rem auto; padding:1rem;
}
.haap-card-oversikt{
  background:#18191a; border-radius:12px; padding:1.6rem 1.4rem; color:#eaeaea;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}
.haap-card-oversikt blockquote{ margin:0; }
.haap-pagination{
  margin-top: 1.2rem; text-align:center;
}
.haap-pagination a, .haap-pagination span{
  display:inline-block; margin:0 .25rem; padding:.4rem .7rem;
  border-radius:8px; background:rgba(255,255,255,0.08); color:#eaf4f1; text-decoration:none;
}
.haap-pagination .current{
  background:#00cc99; color:#fff; font-weight:700;
}
.haap-pagination a:hover{ background:#00997a; }

.haap-form-inline{ display:flex; flex-direction:column; gap:.7rem; width:100%; }
.haap-form-inline label{ font-weight:600; color:#4caf50; margin-bottom:.3rem; }
.haap-form-inline input[type="text"], .haap-form-inline textarea{
  width:100%; padding:1rem 1.2rem; border-radius:14px; border:1.5px solid #333;
  background:#23272b; color:#eaeaea; font:inherit; outline:none;
  transition:border .2s, box-shadow .2s; box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.haap-form-inline input[type="text"]:focus, .haap-form-inline textarea:focus{
  border-color:#4caf50; box-shadow:0 2px 8px rgba(76,175,80,.10);
}
.haap-response-inline{ margin-top:.6rem; color:#4caf50; min-height:1.2em; }
.haap-bg-picker{ margin-top:.3rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.haap-bg-thumb{
  width:64px; height:44px; border-radius:8px; background-size:cover; background-position:center;
  border:2px solid transparent; cursor:pointer;
}
.haap-bg-thumb[aria-selected="true"]{ border-color:#00cc99; }
.haap-preview{
  width:var(--haap-card-w); aspect-ratio:var(--haap-card-ratio);
  margin-top:.7rem; position:relative; border-radius:16px; overflow:hidden;
  background:#0e1412 center/cover no-repeat; color:#f6fbfa; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.haap-preview::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(115% 120% at 50% 18%, rgba(0,0,0,var(--haap-ovl-top)), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,var(--haap-ovl-bot)), rgba(0,0,0,var(--haap-ovl-mid)) 46%, rgba(0,0,0,var(--haap-ovl-bot)));
}
.haap-preview .haap-content{
  position:relative; z-index:1; width:100%; height:100%;
  padding:clamp(16px, 4.2vw, 28px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.haap-preview blockquote{
  margin:0; padding:0; border:0; line-height:1.45;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.35);
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:var(--haap-lines);
}

.haap-compose { overflow-anchor: none; }

@media (prefers-reduced-motion: reduce){
  .haap-card{ transition: none; }
}

.haap-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06); color:#eaf4f1; cursor:pointer;
  font-weight:600;
  margin-top: 1.5rem;
}
.haap-toggle:hover{ background: rgba(255,255,255,0.1); }

.haap-compose{
  display:none;
  margin-top:.8rem;
  grid-template-columns: 1fr;
  gap:.8rem;
}
.haap-compose.is-open{ display:grid; }

.haap-compose .haap-bg-label{
  width: 100%;
  text-align: center;
  font-weight: 600;
  color: #eaf4f1;
  opacity: .95;
  margin: .2rem 0 .35rem;
  letter-spacing: .2px;
}
.haap-compose .haap-bg-picker{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: .9rem;
  max-width: 980px;
  margin-inline: auto;
}
.haap-compose .haap-bg-thumb{
  width:72px; height:50px; border-radius:8px; background-size:cover; background-position:center;
  border:2px solid transparent; cursor:pointer;
}
.haap-compose .haap-bg-thumb[aria-selected="true"]{ border-color:#00cc99; }

.haap-form-card{ width:100%; display:flex; justify-content:center; }
.haap-compose-card{
  --compose-w: clamp(260px, 42vw, 520px);
  width: min(100%, var(--compose-w));
  aspect-ratio: var(--haap-card-ratio);
  margin: 0 auto;
  position: relative; border-radius:16px; overflow:hidden;
  background: #0e1412 center/cover no-repeat; color:#f6fbfa;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.haap-compose-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 18%, rgba(0,0,0,0.42), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.46), rgba(0,0,0,0.32) 46%, rgba(0,0,0,0.46));
}
.haap-compose-card .haap-content{
  position:relative; z-index:1; width:100%; height:100%;
  padding: clamp(16px, 4.2vw, 28px);
  display:flex; align-items:center; justify-content:center;
}
.haap-compose-card .haap-textwrap{
  width:100%; max-width: 90%; margin: 0 auto;
  padding: clamp(10px, 2vw, 16px) clamp(12px, 2.4vw, 20px);
  border-radius: 12px;
  background: rgba(0,0,0,0.28);
  -webkit-backdrop-filter: saturate(110%) blur(2.5px);
  backdrop-filter: saturate(110%) blur(2.5px);
}

.haap-edit{
  outline: none; min-height: 1.4em;
  white-space: pre-wrap; word-break: break-word; color: #f6fbfa;
}
.haap-edit.is-empty::before{ content: attr(data-placeholder); opacity:.6; }
.haap-edit-message{
  font-weight:600; line-height:1.45; margin-bottom:.6rem;
  font-size: clamp(1.05rem, 2.0vw, 1.25rem);
}
.haap-edit-name, .haap-edit-location{
  font-size: clamp(.95rem, 1.6vw, 1.05rem); opacity:.95;
}

.haap-compose-card:focus-within{
  box-shadow: 0 0 0 3px rgba(0,204,153,0.35), 0 8px 24px rgba(0,0,0,0.25);
}

.haap-compose-footer{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; gap:.8rem; align-items:center; justify-content:space-between;
  padding: clamp(10px, 2.2vw, 16px);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.35) 40%, rgba(0,0,0,.55));
  z-index:2;
}
.haap-consent{
  color:#eaf4f1; font-size:clamp(.85rem, 1.4vw, .95rem);
  display:flex; align-items:center; gap:.5rem;
}
.haap-submit{
  padding:.8rem 1.2rem; border:none; border-radius:12px; cursor:pointer;
  background:#00cc99; color:#fff; font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.haap-submit:hover{ transform: translateY(-1px); background:#00b087; box-shadow:0 6px 20px rgba(0,0,0,.22); }
.haap-submit:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,204,153,.35), 0 6px 20px rgba(0,0,0,.22); }

@media (max-width:700px){
  .haap-compose-card{ --compose-w: 100%; width:100%; }
  .haap-compose-card .haap-content{ padding-bottom: max(64px, 8vh); }
}

.nordlyshaap-container .nsgla-card{ position: relative; }
.nordlyshaap-container .nsgla-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: none;
}
.haap-card::before{ animation: none; transition: none; }
.nordlyshaap-container .nha-swiper .swiper-pagination {
  margin-top: 12px;
  position: relative;
}
.nordlyshaap-container .haap-swiper .swiper-pagination {
  position: static;
  margin-top: 16px;
}