/* ==================== Variabler ==================== */
:root {
  --brand:#206a5d;
  --muted:#777;
  --bg:#f9f9f9;
}

/* ==================== BASIS ==================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, Arial, sans-serif;
  color: #333;
  background: #edc3f8ec; /* beholdt fra original */
  line-height: 1.6;
  padding-bottom: env(safe-area-inset-bottom);
}

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

h1, h2 { font-family: "Playfair Display", serif; }

/* ==================== HEADER ==================== */
.site-header {
  position: absolute; top: 0; left: 0; width: 100%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(12px);
  z-index: 1000;
  padding: 10px;
}
.nav-inner { display: flex; justify-content: center; align-items: center; gap: 40px; }
.brand { display:flex; align-items:center; text-decoration:none; }
.brand-logo { height:60px; margin-right:15px; }
.brand-name { font-size:4rem; font-weight:700; color:#fff; text-shadow:1px 1px 6px rgba(0,0,0,.5); }

nav ul {
  display:flex; gap:25px; margin:0; padding:0; list-style:none;
}
nav ul li a {
  text-decoration:none; font-size:2rem; font-weight:600; color:#fff;
  padding:10px 20px; border-radius:8px; transition:.3s all;
  text-shadow:1px 1px 5px rgba(0,0,0,.6); border:2px solid transparent;
}
nav ul li a:hover { background:rgba(32,106,93,0.8); border-color:#fff; color:#fff; }

/* ==================== HERO ==================== */
.hero { position:relative; text-align:center; }
.hero-image { width:100%; height:80vh; object-fit:cover; display:block; }
.hero-content {
  font-size:1.5rem; line-height:1.4;
  position:absolute; top:60%; left:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.5); padding:20px; border-radius:12px; color:#fff;
}
.hero h1 { font-size:2.8rem; }
.hero-index .hero-content { background: rgba(0,0,0,.5); }
.hero-patterns .hero-content { background: rgba(56,54,63,.3); }
.hero-about .hero-content { background: rgba(237,195,248,.3); }

/* ==================== GALLERI ==================== */
.gallery { padding:40px 20px; text-align:center; }
.gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:50px; justify-items:center; max-width:1200px; margin:0 auto;
}
.gallery-grid figure {
  aspect-ratio:1/1; max-width:200px; overflow:hidden; border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.15); transition:transform .3s ease;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:#fff;
}
.gallery-grid figure img { width:100%; height:auto; display:block; border-bottom:3px solid #eee; }
.gallery-grid figure figcaption {
  padding:12px 16px; text-align:left; font-size:.95rem; line-height:1.4; color:#333;
  background:#fafafa; margin-top:-1px; border-top:1px solid #ddd; width:100%; box-sizing:border-box;
}
.gallery-grid figure:hover { transform:scale(2.5); z-index:2; }
.gallery-grid figure strong { font-size:1.1rem; color:#000; display:block; margin-bottom:4px; }
.gallery-grid figure em { color:#666; font-style:italic; display:block; margin-top:6px; }

/* ==================== INSTAGRAM ==================== */
.instagram {
  padding:40px 20px; text-align:center; border:10px solid black;
  border-radius:12px; margin:40px auto; max-width:1180px !important;
}
.instagram h2 {
  font-size:2.4rem !important; font-weight:700; margin-bottom:30px;
  color:#206a5d; text-transform:uppercase; letter-spacing:1px;
}
.insta-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:50px; max-width:1180px; justify-items:center; margin:0 auto;
}
.insta-item {
  aspect-ratio:1/1; max-width:200px; overflow:hidden; border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.15); transition:transform .3s ease;
}
.insta-item img { width:100%; height:100%; object-fit:cover; }
.insta-item:hover { transform:scale(2); z-index:2; }
.insta-follow { grid-column: span 4; display:flex; justify-content:center; align-items:center; }
.insta-follow a {
  display:inline-block; padding:16px 30px; background:#2a7466; color:#fff; font-weight:700;
  border-radius:8px; text-decoration:none; font-size:1.1rem; transition:background .3s;
}
.insta-follow a:hover { background:#2e8c78; transform:scale(1.05); }

/* ==================== CTA ==================== */
.cta {
  background:#206a5d; color:#fff; padding:50px 20px; text-align:center;
  border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.25); width:100%; margin:30px auto;
}
.cta h2 { font-size:2.5rem; margin-bottom:20px; text-transform:uppercase; letter-spacing:2px; }
.cta p { font-size:1.2rem; margin-bottom:30px; max-width:700px; margin-inline:auto; }
.btn-secondary {
  display:inline-block; padding:14px 28px; background:#fff; color:#206a5d;
  border-radius:8px; font-weight:700; font-size:1.1rem; transition:all .3s ease;
}
.btn-secondary:hover { background:#f0f0f0; transform:scale(1.05); }

/* ==================== FOOTER ==================== */
footer { padding:20px; text-align:center; background:#eee; }
.mobile-test { display:none; }

/* ==================== STRIKKEOPPSKRIFTER (desktop) ==================== */
.patterns-title {
  font-family:"Playfair Display", serif; font-size:2.8rem; text-align:center;
  color:#206a5d; margin-bottom:0; text-transform:uppercase; letter-spacing:2px;
}
.patterns-list {
  display:flex; flex-direction:column; gap:60px; max-width:1000px; margin:0 auto;
}
.patterns-list figure { display:flex; align-items:center; gap:30px; }
.patterns-list figure:nth-child(even) { flex-direction:row-reverse; }
.patterns-list img {
  flex:0 0 350px; width:100%; max-width:350px; height:auto; border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.15); object-fit:cover; transition:transform .3s, box-shadow .3s;
}
.patterns-list img:hover, .patterns-list img:active { transform:scale(1.08); box-shadow:0 8px 20px rgba(0,0,0,.3); z-index:2; }
.patterns-list figcaption { flex:1; font-size:1.1rem; line-height:1.6; }

/* ==================== OM MEG ==================== */
.about-section {
  padding:60px 20px; text-align:center; background:#edc3f8ec;
}
.about-section h2 { font-family:"Playfair Display", serif; font-size:2.5rem; color:#206a5d; margin-bottom:30px; }
.about-wrapper { position:relative; display:flex; flex-direction:column; align-items:center; margin-top:30px; }
.about-image {
  width:450px; max-width:100%; border-radius:12px; box-shadow: 4px 15px rgba(116, 22, 22, 0.25); margin-bottom:24px;
}
/* --- Om meg: penere kort/boks over bildet --- */
.about-text {
  position: absolute;
  left: 50%;                      /* midtstill horisontalt */
  bottom: 16px;                   /* litt mer luft fra bunnen */
  transform: translateX(-50%);    /* juster for 50% centering */
  display: inline-block;

  /* Størrelse/lesbarhet */
  max-width: min(90%, 720px);     /* aldri for bred */
  padding: 18px 24px;
  border-radius: 14px;

  /* Bakgrunn/kontrast: litt mer opak + svak blur for lesbarhet */
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);

  /* Subtil kant + myk skygge i to lag (ser naturlig ut) */
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 12px 28px rgba(83, 75, 75, 0.18),
    0 2px  6px rgba(0, 0, 0, 0.589);

  color: #333;
  text-shadow: none;              /* ryddig tekst */
}

/* Tittel/tekst inne i boksen (valgfritt justert spacing) */
.about-text h2 { margin: 0 0 8px; }
.about-text p  { margin: 0; line-height: 1.6; }

/* Mobil: legg boksen under bildet, behold samme stil men litt lavere “løft” */
@media (max-width: 768px) {
  .about-text {
    position: static;
    transform: none;
    margin-top: 15px;
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.16),
      0 1px 4px  rgba(0, 0, 0, 0.08);
  }
}
.about-text p { margin-bottom:15px; }
.about-text a { color:#206a5d; font-weight:700; text-decoration:underline; }
.about-text a:hover { color:#2e8c78; }

/* ==================== Animasjoner ==================== */
@keyframes fadeInUp { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
@keyframes zoomInSlow { from{transform:scale(1);} to{transform:scale(1.04);} }

/* ==================== MOBIL (generelt) ==================== */
@media (max-width: 768px) {
  html, body { height: auto; margin: 0; padding: 0; }
  section { min-height:auto; display:block; }
  .container { width:100%; max-width:100%; padding:0 10px; }

  .brand-logo { height:35px; }
  .brand-name { font-size:1.4rem; text-align:left; }

  nav ul {
    flex-direction:column; gap:6px; position:absolute; top:10px; right:10px;
    background:rgba(0,0,0,.6); padding:8px; border-radius:6px;
  }
  nav ul li a { font-size:.9rem; padding:5px 10px; }

  .gallery-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .gallery-grid figure { max-width:150px; }
  .gallery-grid figure:hover { transform:scale(1.1); }

  .instagram {
    width:100%; max-width:100%; margin:0; border:3px solid black; border-radius:0;
    box-sizing:border-box; padding:20px 10px;
  }
  .insta-grid { grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:100%; margin:0 auto; }
  .insta-item { max-width:150px; }
  .insta-item:nth-child(n+5):not(.insta-follow) { display:none; }
  .insta-item:hover { transform:scale(1.1); }

  .insta-follow { grid-column:1 / -1; order:99; margin-top:15px; }

  .cta { border-radius:0; margin:20px 0; padding:30px 15px; }
  .cta h2 { font-size:2rem; }
  .cta p { font-size:1rem; }
  .btn-secondary { padding:16px 34px; font-size:1.1rem; }

  footer { width:100%; border-radius:0; }
  .mobile-test { display:block; }

  /* Om meg – mobiljusteringer */
  .about-wrapper { margin-top:15px; }
  .about-text { position:static; margin-top:15px; max-width:100%; font-size:.95rem; }
  .about-section h2 { font-size:2rem; }
}

/* ==================== STRIKKEOPPSKRIFTER – MOBIL (robust, uten snap) ==================== */
@media (max-width: 768px) {
  body.page-patterns { height:auto; overflow:auto; }

  body.page-patterns .patterns-list {
    display:flex; flex-direction:column; gap:24px;
    max-width:1000px; margin:0 auto;
    height:auto; overflow:visible; scroll-snap-type:none;
  }

  body.page-patterns .patterns-list figure {
    position:static; width:90%; margin:0 auto;
    display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
    background:#fff; overflow:hidden; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.2);
  }

  body.page-patterns .patterns-list figure:nth-child(even) { flex-direction:column; }

  body.page-patterns .patterns-list figure img {
    width:100%; height:auto; object-fit:cover;
    border-radius:12px 12px 0 0; animation:none; transform:none;
  }

  body.page-patterns .patterns-list figure figcaption {
    background:#fff; color:#333; text-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    margin-top:0; padding:14px 18px; border-radius:0 0 12px 12px; box-shadow:none;
    width:100%; box-sizing:border-box;
  }

  body.page-patterns .patterns-list figure strong { color:#000; }
  body.page-patterns .patterns-list figure em { color:#666; }
}

/* ==================== KONTAKTSKJEMA (scopet) ==================== */
/* legg class="contact-page" på <main> i kontaktskjemaet */
.contact-page { max-width:720px; margin:48px auto; padding:0 20px; }
.contact-page h1 { text-align:center; color:var(--brand); margin:0 0 24px; }
.contact-page form {
  background:#fff; padding:24px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.contact-page .field { margin-bottom:16px; }
.contact-page label { display:block; font-weight:600; margin-bottom:6px; }
.contact-page input,
.contact-page textarea {
  width:100%; border:1px solid #ccc; border-radius:8px; padding:12px; font-size:16px; outline:none; background:#fff;
}
.contact-page input:focus,
.contact-page textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(32,106,93,.12); }
.contact-page button {
  background:var(--brand); color:#fff; padding:12px 20px; border:0; border-radius:10px;
  font-size:16px; cursor:pointer; transition:filter .2s ease;
}
.contact-page button:disabled { filter:grayscale(.5) brightness(.9); cursor:not-allowed; }
.contact-page .err { display:block; color:#b00020; min-height:1em; margin-top:6px; font-size:.9rem; }
.contact-page .status { text-align:center; margin-top:16px; color:var(--brand); font-weight:600; min-height:1.4em; }
/* honeypot */
.contact-page .hp { position:absolute; left:-5000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ==================== Ekstra mobiljusteringer ==================== */
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns:1fr; gap:16px; }
  .gallery-grid figure { max-width:90%; margin:0 auto; }
  .gallery-grid figure figcaption { font-size:.9rem; }
}
/* Intro-seksjon: midtstilt og lettlest */
.intro {
  text-align: center;
  padding: 40px 20px;
  max-width: 900px;     /* begrens linjelengde */
  margin: 0 auto;       /* midtstill hele seksjonen */
}
.intro h2 {
  margin: 0 0 12px;
}
.intro .highlight {
  max-width: 60ch;      /* fin lesebredde */
  margin: 0 auto;       /* midtstill avsnittet */
  font-size: 1.1rem;
  line-height: 1.7;
}
.hero-about .hero-content {
  background: rgba(204, 203, 203, 0.233);
  color: #333;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.18),
    0 2px  6px rgba(0,0,0,0.10);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero-about .hero-content h1 { margin: 0 0 8px; color: var(--brand); }

/* Page-specific override: gjør hero-boksen på vilkårs-siden (terms.html) mindre oppak
   Endre alpha-verdien her for å justere gjennomsiktighet (0 = helt gjennomsiktig, 1 = helt opak) */
.page-terms .hero-about .hero-content {
  background: rgba(204, 203, 203, 0.548);
  color: #723535;
}
/* === GALLERI – justert størrelse og hover === */

/* Desktop: 5 kolonner = litt mindre fliser */
.gallery-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  justify-items: stretch;
}

/* Flisene */
.gallery-grid figure {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  transform-origin: center;
  transform: translateZ(0);
  transition: transform .25s ease;
  background: #fff;
  z-index: 0;
}

/* Bildet fyller ramma */
.gallery-grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover-zoom (tøff, men ikke voldsom) */
.gallery-grid figure:hover,
.gallery-grid figure:focus-within {
  transform: scale(2.1);
  z-index: 5;
}

/* Mobil: 2 kolonner + overstyr gamle regler */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .gallery-grid figure {
    max-width: 100% !important;
    margin: 0 !important;
  }
  .gallery-grid figure:hover,
  .gallery-grid figure:focus-within {
    transform: scale(1.9);
  }
}
/* === GALLERI – stabil flis, zoom kun på bildet === */

/* Desktop: 4 kolonner, sentrert grid */
.gallery {
  /* hvis du tidligere hadde text-align:center; fjern effekten på grid */
  text-align: initial;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;           /* sentrer hele grid-området */
  place-items: center;       /* sentrer innholdet i cellene */
}

/* Selve flisa – fast størrelse (kvadrat), ikke skalér på hover */
.gallery-grid figure {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  background: #fff;
  position: relative;
  transform: none !important;      /* overstyr eventuelle eldre regler */
}

/* Bildet fyller flisa og får smooth zoom */
.gallery-grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transform-origin: center;
  transform: scale(1);             /* startstørrelse */
  transition: transform .25s ease; /* smooth zoom */
  will-change: transform;
}

/* Zoom INNI flisa ved hover/fokus (ikke utvide flisa) */
.gallery-grid figure:hover img,
.gallery-grid figure:focus-within img {
  transform: scale(2.1);           /* juster 2.0–2.3 etter smak */
}

/* Fjern gammel regel som skalerte hele flisa */
.gallery-grid figure:hover,
.gallery-grid figure:focus-within {
  transform: none !important;
  z-index: auto !important;
}

/* Mobil: 2 kolonner og litt lavere zoom, ingen overflow eller “ut av skjerm” */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* overstyr gamle 1-kolonner */
    gap: 12px !important;
  }
  .gallery-grid figure {
    max-width: 100% !important;    /* overstyr tidligere 150/200px caps */
    margin: 0 !important;
  }
  .gallery-grid figure:hover img,
  .gallery-grid figure:focus-within img {
    transform: scale(1.8);         /* litt roligere zoom på mobil */
  }
}
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr; ... }
  .gallery-grid figure { max-width: 90%; ... }
}
/* === GALLERI – pop-out på desktop, trygg zoom på mobil === */

/* Slå av gammel regel som skalerte hele flisa */
.gallery-grid figure:hover,
.gallery-grid figure:focus-within {
  transform: none !important;
  z-index: auto;
}

/* DESKTOP: la bildet poppe UT av ramma, flisa står i ro */
@media (min-width: 769px) {
  .gallery-grid { overflow: visible; }
  .gallery-grid figure {
    position: relative;
    overflow: visible !important;       /* viktig: ikke klipp på desktop */
  }
  .gallery-grid figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    transform: scale(1.08);             /* litt større allerede før hover */
    transition: transform .3s ease, box-shadow .3s ease;
    will-change: transform;
  }
  .gallery-grid figure:hover,
  .gallery-grid figure:focus-within {
    z-index: 20;                         /* legg over nabokort */
  }
  .gallery-grid figure:hover img,
  .gallery-grid figure:focus-within img {
    transform: scale(2.2);               /* 2.0–2.5 etter smak */
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
  }
}

/* MOBIL: klipp inni ramma og bruk lavere zoom (slipper å gå utenfor skjerm) */
@media (max-width: 768px) {
  .gallery-grid figure {
    overflow: hidden !important;         /* hold alt inni flisa på mobil */
  }
  .gallery-grid figure img {
    transform: scale(1.04);              /* litt større som utgangspunkt */
    transition: transform .25s ease;
  }
  .gallery-grid figure:hover img,
  .gallery-grid figure:focus-within img {
    transform: scale(1.6);               /* roligere zoom på mobil */
  }
}
/* === GALLERI fixes: proper pop-out + hide captions === */

/* Stop old rule that scaled the whole figure */
.gallery-grid figure:hover,
.gallery-grid figure:focus-within {
  transform: none !important;
}

/* Ensure we can layer above neighboring tiles */
.gallery-grid {
  position: relative;
  overflow: visible;
  isolation: isolate;                 /* keeps stacking clean inside the grid */
}
.gallery-grid figure {
  position: relative;
  z-index: 0;                         /* baseline layer */
  overflow: visible !important;       /* allow pop-out on desktop */
}

/* Remove the white figcaption box */
.gallery-grid figure figcaption {
  display: none !important;
}

/* DESKTOP: pop the IMAGE out over neighbors */
@media (min-width: 769px) {
  .gallery-grid figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    transform: scale(1.08);           /* a tad larger before hover */
    transition: transform .3s ease, box-shadow .3s ease;
    will-change: transform;
  }

  .gallery-grid figure:hover,
  .gallery-grid figure:focus-within {
    z-index: 999 !important;          /* sit above neighbors (left AND right) */
  }
  .gallery-grid figure:hover img,
  .gallery-grid figure:focus-within img {
    transform: scale(2.2);            /* 2.0–2.5 as you like */
    box-shadow: 0 18px 44px rgba(0,0,0,.35);
  }
}

/* MOBIL: keep zoom inside the tile (no overflow off-screen) */
@media (max-width: 768px) {
  .gallery-grid figure {
    overflow: hidden !important;      /* clip to the frame on phones */
  }
  .gallery-grid figure img {
    transform: scale(1.04);
    transition: transform .25s ease;
  }
  .gallery-grid figure:hover img,
  .gallery-grid figure:focus-within img {
    transform: scale(1.6);            /* gentler mobile zoom */
  }
}