/* ===== Fonts ===== */
@font-face {
  font-family: 'Eurosteal';
  src: url('Eurosteal.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Dungrg';
  src: url('DUNGRG__.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f5fdbd;
  overflow: hidden;
}

#scaler {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The whole brochure is authored at native reference resolution
   (3456 x 2234) and scaled to fit the viewport width via JS. */
#stage {
  --ts: 40px;                 /* uniform Times New Roman size */
  --lw: 2px;                  /* uniform line weight (stage px) */
  position: relative;
  width: 3456px;
  height: 2234px;
  overflow: hidden;
  color: #1b1b18;
  font-family: 'Times New Roman', Times, serif;
  background: #f5fdbd;
}

/* ===== Panel fold dividers : three hair-lines, full page height ===== */
.dline {
  position: absolute;
  top: 0;
  height: 2234px;
  width: var(--lw);
  background: #0b0b0b;
}

/* dark-gray background for the middle panel (between the fold dividers).
   Desktop only — it is display:none on mobile, so this colour never shows there. */
.mid-bg {
  position: absolute;
  top: 0;
  left: 1309px;
  width: 842px;          /* 1309 -> 2151, snug between the divider groups */
  height: 2234px;
  background: #404040;
}

/* idle "branches" overlay — sits behind all content so the vines weave
   around (and behind) the side-section elements */
.branch-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 3456px;
  height: 2234px;
  pointer-events: none;
}

/* ===== Logo ===== */
#logo {
  position: absolute;
  top: 116px;
  left: 1728px;
  transform: translateX(-50%);
  height: 200px;
  width: auto;
}

/* ===== Section headings (Eurosteal) ===== */
.heading {
  position: absolute;
  top: 360px;
  font-family: 'Eurosteal', sans-serif;
  font-size: 42px;
  color: #2c2c2c;
  white-space: nowrap;
}
#h-left  { left: 240px;  width: 896px; text-align: right; }
#h-mid   { left: 1310px; width: 841px; text-align: center; }
#h-right { left: 2324px; text-align: left; }

/* ================= LEFT COLUMN ================= */
#grid {
  position: absolute;
  left: 240px;
  top: 500px;
  width: 896px;
  display: grid;
  grid-template-columns: 438px 438px;
  grid-auto-rows: 322px;
  column-gap: 20px;
  row-gap: 20px;
}
.tile {
  position: relative;
  overflow: hidden;
}
.tile > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* charcoal button tiles */
.btn-tile {
  border: none;
  margin: 0;
  padding: 0;
  background: #404040;
  color: #f5fdbd;
  font-family: 'Times New Roman', Times, serif;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition: background .15s ease;
}
.btn-tile:hover { background: #4a4a4a; }

#tile5 { padding-top: 34px; justify-content: flex-start; }
.btn-tile span { max-width: 96%; text-align: center; }
.t5-top {
  font-size: 28px;
  line-height: 1.1;
}
.btn-tile .t5-emblem {
  width: 64px;
  height: auto;
  object-fit: contain;
  margin: 14px 0 12px;
}
.t5-title {
  font-family: 'Dungrg', 'Times New Roman', serif;
  font-size: 50px;
  line-height: 1;
  margin-top: 2px;
}
.t5-sub {
  font-style: italic;
  font-size: 28px;
  line-height: 1.1;
  margin-top: 8px;
}

#tile6 { justify-content: center; }
.t6-text {
  font-size: var(--ts);
  line-height: 1.18;
  text-align: center;
}

/* Booking box */
#booking {
  position: absolute;
  left: 240px;
  top: 1584px;
  width: 896px;
  height: 228px;
  border: var(--lw) solid #0b0b0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ts);
  color: #1b1b18;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#booking:hover {
  background: #404040;
  border-color: #404040;
  color: #f5fdbd;
}

/* ================= MIDDLE COLUMN ================= */
#mid {
  position: absolute;
  left: 1310px;
  top: 0;
  width: 841px;
  height: 2234px;
  text-align: center;
  color: #1b1b18;
}
#mid > * { position: absolute; margin: 0; }

.mid-para {
  left: 0;
  width: 841px;
  padding: 0 178px;
  font-size: var(--ts);
  line-height: 48px;
}
.mid-para1 { top: 500px; }
.mid-para2 { top: 1028px; }

.highlight {
  left: 50%;
  width: 360px;
  transform: translateX(-50%);
  top: 808px;
  padding: 16px 30px;
  border-left: var(--lw) solid #1b1b18;
  border-right: var(--lw) solid #1b1b18;
  font-size: var(--ts);
  line-height: 48px;
}

.addr {
  left: 0;
  width: 841px;
  top: 1430px;
  font-size: var(--ts);
}

.arrow {
  top: 1584px;
  left: 50%;
  width: 432px;
  height: 0;
  transform: translateX(-50%);
  border-top: var(--lw) solid #1b1b18;
}
.arrow-2 { top: 1812px; }   /* = bottom of the booking box (1584 + 228) */
.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.arrow::before { left: -2px;  border-right: 15px solid #1b1b18; }
.arrow::after  { right: -2px; border-left: 15px solid #1b1b18; }

.price1, .price2 {
  left: 0;
  width: 841px;
  font-family: 'Dungrg', 'Times New Roman', serif;
  font-size: 72px;
  line-height: 1;
}
/* centred between the two arrow-lines (1584–1812), tighter line spacing */
.price1 { top: 1620px; }
.price2 { top: 1704px; }

/* The price wrapper is layout-neutral on desktop: kept static (so it is
   NOT a containing block) while its children keep their absolute coords
   relative to #mid, exactly as before the wrapper existed. */
#mid > .pris-block { position: static; }
#mid .pris-block > * { position: absolute; margin: 0; }

/* ================= RIGHT COLUMN ================= */
#right {
  position: absolute;
  left: 2324px;
  top: 0;
  width: 892px;
  height: 2234px;
}
#right > * { position: absolute; left: 0; }
.field {
  display: block;
  width: 892px;
  background: #ffffff;
  border: var(--lw) solid #0b0b0b;
  font-family: 'Times New Roman', Times, serif;
  font-size: var(--ts);
  color: #1b1b18;
  outline: none;
}
.field::placeholder { color: #4f4f4f; opacity: 1; }
.input-epost   { top: 490px; height: 114px; padding: 0 28px; }
.input-melding {
  top: 662px;
  height: 680px;
  padding: 30px 28px;
  resize: none;
  vertical-align: top;
}

#send-btn {
  display: block;
  top: 1354px;
  width: 892px;
  height: 116px;
  background: #404040;
  color: #eef0e0;
  border: none;
  font-family: 'Times New Roman', Times, serif;
  font-size: var(--ts);
  cursor: pointer;
  transition: background .15s ease;
}
#send-btn:hover { background: #4a4a4a; }

.form-msg {
  position: absolute;
  top: 1486px;
  left: 0;
  width: 892px;
  text-align: center;
  font-size: var(--ts);
  color: #9b2d2d;
}
.form-msg.ok { color: #2d6a2d; }

.contact {
  position: absolute;
  top: 1582px;
  left: 0;
  width: 892px;
  font-size: var(--ts);
  line-height: 48px;
  color: #1b1b18;
}
.contact p { margin: 0 0 48px; }

/* ===== Mobile top bar (hidden on desktop) ===== */
#mobnav {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #f5fdbd;
  border-bottom: 1px solid #0b0b0b;
  z-index: 200;
  transform: translateY(-100%);
  transition: transform .28s ease;
}
body.scrolled #mobnav { transform: translateY(0); }
#mobnav .nav-logo { height: 34px; width: auto; }
#mobnav .nav-kontakt {
  font-family: 'Dungrg', 'Times New Roman', serif;
  font-size: 26px;
  line-height: 1;
  background: none;
  border: none;
  color: #1b1b18;
  cursor: pointer;
  padding: 4px 6px;
}

/* ============================================================
   MOBILE  (portrait / narrow): stack as middle, contact, images
   ============================================================ */
@media (max-width: 820px) {
  html, body { height: auto; overflow: auto; -webkit-text-size-adjust: 100%; }
  #scaler { position: static; display: block; }
  .dline { display: none; }
  .mid-bg { display: none; }       /* middle stays on page bg on mobile */
  .branch-canvas { display: none; }
  #mobnav { display: flex; }

  #stage {
    --ts: 17px;
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    zoom: 1;
    padding: 0 0 48px;
  }

  /* drop all desktop absolute coordinates */
  #stage > *,
  #mid > *,
  #right > * {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
  #stage > * { width: auto !important; height: auto; }

  /* stacking order: logo, middle, contact, images */
  #logo    { order: 1; }
  #h-mid   { order: 2; }
  #mid     { order: 3; }
  #h-right { order: 4; }
  #right   { order: 5; }
  #h-left  { order: 6; }
  #grid    { order: 7; }
  #booking { order: 8; }

  #logo { height: 96px !important; margin: 28px auto 2px; }

  .heading {
    font-size: 15px;
    letter-spacing: 1px;
    text-align: center !important;
    width: 100% !important;
    white-space: normal;
    margin: 30px 0 14px;
  }
  /* KULTURLOKALE sits close under the logo/title */
  #h-mid { margin-top: 8px; }
  /* extra space between the contact section and the image section */
  #h-left { margin-top: 54px; }

  /* ---- MIDDLE ----
     NB: the base rule `#mid > * { margin:0 }` (needed by the desktop
     absolute layout) out-specifies plain class selectors, so every
     mobile spacing rule here is #mid-prefixed to take effect. */
  #mid { display: block; text-align: center; padding: 0 22px 40px; }
  #mid > * { width: auto !important; }
  #mid .mid-para {
    padding: 0;
    max-width: 560px;
    margin: 0 auto;
    font-size: var(--ts);
    line-height: 1.4;
  }
  #mid .mid-para1 { margin-top: 22px; }   /* space below logo/title */
  #mid .mid-para2 { margin-top: 40px; }
  /* block (not inline-block) so the vertical margins create real spacing;
     fit-content + auto margins keeps it centred and shrunk to its text */
  #mid .highlight {
    display: block;
    width: fit-content !important;
    max-width: 80%;
    margin: 40px auto;
    padding: 10px 22px;
    font-size: var(--ts);
    line-height: 1.4;
  }
  #mid .addr { font-size: 15px; letter-spacing: 1px; margin: 44px 0 0; }

  /* price block: a full-viewport-width white panel sits behind it,
     spanning from the top arrow-line to the bottom arrow-line */
  #mid .pris-block {
    position: relative !important;   /* beat the #mid>* static reset */
    isolation: isolate;              /* own stacking context for the panel */
    margin: 36px 0 0;
  }
  #mid .pris-block::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #fff;
    z-index: -1;                  /* backmost layer of the isolated wrapper */
  }
  #mid .pris-block > * {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;   /* clear desktop top/left/translate */
    width: auto !important;
    margin: 0 auto;
  }
  #mid .price1, #mid .price2 { font-size: 34px; line-height: 1; }
  #mid .price1 { margin-top: 24px; }
  #mid .price2 { margin-top: 10px; margin-bottom: 24px; }
  /* arrow-heads anchor to the line; arrows sit on the panel edges */
  #mid .arrow { position: relative !important; width: 180px !important; }

  /* ---- RIGHT / contact ---- */
  #right { display: block; padding: 0 22px; }
  /* form controls must fill the column; width:auto would shrink inputs
     to their intrinsic size, so set 100% explicitly */
  .field { display: block; width: 100%; font-size: var(--ts); padding: 12px 14px; }
  .input-epost { height: 52px; margin: 0; }
  .input-melding { height: 220px; margin-top: 14px; }
  #send-btn { width: 100%; height: 56px; margin-top: 12px; font-size: var(--ts); }
  .form-msg { width: auto; margin-top: 12px; font-size: var(--ts); text-align: center; }
  .contact { width: auto; margin-top: 24px; text-align: left; font-size: var(--ts); line-height: 1.4; }
  .contact p { margin: 0 0 18px; }

  /* ---- LEFT / images ---- */
  #grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 8px;
    width: 100% !important;
    padding: 0 22px;
  }
  .tile { aspect-ratio: 438 / 322; overflow: hidden; }
  /* button tiles match the image tiles' size; text shrinks to fit */
  .btn-tile { aspect-ratio: 438 / 322; min-height: 0; padding: 6px; justify-content: center; }
  #tile5 { padding-top: 6px !important; }
  .t5-top { font-size: 11px; }
  .btn-tile .t5-emblem { width: 30px; margin: 4px 0 3px; }
  .t5-title { font-size: 17px; }
  .t5-sub { font-size: 9px; }
  .t6-text { font-size: 16px; line-height: 1.15; }
  #booking {
    width: auto !important;
    height: auto;
    min-height: 60px;
    margin: 10px 22px 0;
    padding: 14px;
    font-size: 14px;
  }

  /* keep contact form clear of the fixed top bar when jumped to */
  #h-right { scroll-margin-top: 66px; }
}

/* ===== Web (desktop): white content on the dark-gray middle panel =====
   Scoped to desktop so mobile (light middle) keeps its dark text. */
@media (min-width: 821px) {
  #logo { filter: brightness(0) invert(1); }   /* black wordmark -> white */
  #h-mid { color: #ffffff; }
  #mid { color: #ffffff; }                      /* paragraphs, address, price */
  .highlight { border-color: #ffffff; }
  .arrow { border-top-color: #ffffff; }
  .arrow::before { border-right-color: #ffffff; }
  .arrow::after  { border-left-color: #ffffff; }
}