/* ==========================================================================
   Vintergatan Media — site styles
   Recreates the Squarespace (7.1 / Fluid Engine) look with plain CSS.

   Contents
   1. Tokens            5. Fluid-engine grid     9.  Gallery
   2. Base & type       6. Blocks                10. Blog
   3. Header            7. Buttons & forms       11. Footer
   4. Sections          8. Card list             12. Utilities
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
  --accent: rgb(134, 200, 89);
  --black: #000;
  --white: #fff;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-meta: "PT Serif", Georgia, serif;
  --font-cta: "Cabin", "Inter", sans-serif;

  --max-width: 1400px;
  --gutter: 4vw;            /* page side padding (desktop) */
  --gutter-mobile: 6vw;     /* page side padding (mobile)  */
  --gap: 11px;              /* fluid-engine column/row gap */
  --container: min(var(--max-width), calc(100vw - var(--gutter) * 2));

  /* Squarespace scales type with min(viewport width, max width) on desktop
     and with the viewport height on mobile. */
  --type-scale: calc(0.012 * min(100vh, 900px));
  --header-h: 84px;
}
@media (min-width: 768px) {
  :root { --type-scale: calc(0.012 * min(100vw, var(--max-width))); }
}
@media (min-width: 1024px) {
  :root { --header-h: 114px; }   /* full navigation; below this the hamburger menu is used */
}

/* 2. Base & type ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--black);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 2rem 0;
}
/* size = (scale - 1) * type-scale + 1rem ; line-height shrinks for larger sizes */
h1 { font-size: calc(2.7 * var(--type-scale) + 1rem);  line-height: calc(1.2 * (1 - 2.7 / 25)); }
h2 { font-size: calc(1.2 * var(--type-scale) + 1rem);  line-height: calc(1.2 * (1 - 1.2 / 25)); }
h3 { font-size: calc(0.5 * var(--type-scale) + 1rem);  line-height: calc(1.2 * (1 - 0.5 / 25)); }
h4 { font-size: calc(0.5 * var(--type-scale) + 1rem);  line-height: calc(1.2 * (1 - 0.5 / 25)); }
p, ul, ol, blockquote, pre { margin: 1rem 0; }
.sqsrte-large { font-size: calc(0.4 * var(--type-scale) + 1rem); }
.sqsrte-small { font-size: calc(-0.1 * var(--type-scale) + 1rem); }
.sqsrte-text-color--white { color: #fff; }
.sqsrte-text-color--black { color: #000; }
.sqsrte-text-highlight { background: var(--accent); }
blockquote { margin: 1rem 40px; }
pre, code { font-family: var(--font-meta); white-space: pre-wrap; }

/* Rich text produced by the old editor relies on pre-wrap */
.txt :is(p, h1, h2, h3, h4, blockquote, li) { white-space: pre-wrap; }
.txt > :first-child { margin-top: 0; }
.txt > :last-child { margin-bottom: 0; }
.txt p:empty::before { content: "\200b"; }
.txt a { text-decoration: underline; text-underline-offset: 0.15em; }
.txt ul, .txt ol { padding-left: 2em; }
.txt li > p { margin: 0.5rem 0; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; color: #000; padding: 8px 16px; }
.skip-link:focus { left: 8px; top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3. Header ---------------------------------------------------------------- */
/* Like the Squarespace header: it sits on top of the first section (which gets
   extra top padding, see "Sections") and scrolls away with the page. */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: var(--black); color: #fff; }
.header-inner {
  display: flex; align-items: center; gap: 2.2vw;
  padding: 0.8vw var(--gutter);
  min-height: var(--header-h);
}
.header-logo { margin-right: auto; display: block; }
.header-logo img { height: calc(var(--header-h) - 1.6vw); width: auto; max-height: 91px; }
.header-nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2.4vw; }
.header-nav a, .nav-folder-title {
  display: block; font: 400 1rem/1.3 var(--font-body); color: #fff; text-decoration: none;
  background: none; border: 0; padding: 0.2em 0; margin: 0; cursor: pointer;
}
.header-nav a:hover, .nav-folder-title:hover,
.header-nav .is-active > a, .header-nav .is-active > .nav-folder-title {
  text-decoration: underline; text-underline-offset: 0.25em;
}
.nav-folder { position: relative; }
.nav-sub {
  list-style: none; margin: 0; padding: 12px 0; position: absolute; left: -20px; top: 100%;
  min-width: 160px; background: var(--black); opacity: 0; visibility: hidden; transition: opacity 0.15s;
}
.nav-sub a { display: block; padding: 6px 20px; }
.nav-folder:hover .nav-sub, .nav-folder:focus-within .nav-sub, .nav-folder.open .nav-sub { opacity: 1; visibility: visible; }
.header-social { color: #fff; margin-left: 1.5vw; }
.header-cta {
  display: inline-block; background: var(--accent); color: #000; text-decoration: none;
  font: 700 1rem/1.2 var(--font-cta); letter-spacing: 0.06em;
  padding: 1.2em 2.004em; border-radius: 300px; margin-left: 1.5vw;
}
.header-cta:hover { opacity: 0.85; }
/* SV / EN language switcher */
.lang-switch {
  color: #fff; text-decoration: none; font: 600 0.85rem/1 var(--font-body); letter-spacing: 0.06em;
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 300px; padding: 0.45em 0.8em; margin-left: 1.2vw;
}
.lang-switch:hover { border-color: #fff; }
.mobile-menu .lang-switch { display: inline-block; margin: 0 0 1.2rem; font-size: 1rem; }
.menu-toggle { display: none; background: none; border: 0; width: 44px; height: 36px; padding: 6px 4px; cursor: pointer; }
.menu-toggle span { display: block; height: 1px; background: #fff; margin: 9px 0; transition: transform 0.2s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-5px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; background: var(--black); color: #fff;
  padding: 6vw var(--gutter-mobile); overflow-y: auto; z-index: 49;
}
.mobile-menu ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.mobile-menu li { font-size: 1.6rem; line-height: 1.5; }
.mobile-menu a { text-decoration: none; }
.mobile-menu .mm-label { font-size: 0.9rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.08em; }
.mobile-menu .mm-gap { margin-top: 1.2rem; }
.mobile-menu .header-cta { margin: 0; }
@media (max-width: 1023px) {
  .header-nav, .header-inner > .header-social, .header-inner > .header-cta, .header-inner > .lang-switch { display: none; }
  .menu-toggle { display: block; }
  .header-inner { padding: 6px var(--gutter-mobile); }
  .header-logo img { height: 36px; }
}
body.menu-open { overflow: hidden; }

/* 4. Sections ---------------------------------------------------------------- */
.sec {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  --pad: 0px;
  padding-top: calc(var(--pad-top, var(--pad)) + var(--header-offset, 0px));
  padding-bottom: calc(var(--pad-bottom, var(--pad)) + var(--divider-offset, 0px));
  background: var(--bg); color: var(--fg);
  overflow: hidden;
}
/* the first section starts underneath the (absolutely positioned) header */
main > .sec:first-child { --header-offset: var(--header-h); }
.theme-light  { --bg: var(--white);  --fg: var(--black); }
.theme-dark   { --bg: var(--black);  --fg: var(--white); }
.theme-accent { --bg: var(--accent); --fg: var(--white); }
.theme-dark h4 { color: var(--accent); }

.sec.h-small  { min-height: 33vh;  --pad: 3.3vmax; }
.sec.h-medium { min-height: 66vh;  --pad: 6.6vmax; }
.sec.h-large  { min-height: 100vh; --pad: 10vmax; }
.sec.h-custom { min-height: calc(var(--custom-h, 0) * 1vh); --pad: calc(var(--custom-h, 0) * 0.1vmax); }
.sec.va-top    { justify-content: flex-start; --pad-top: var(--gutter); --pad-bottom: calc(var(--pad) * 2); }
.sec.va-bottom { justify-content: flex-end;   --pad-top: calc(var(--pad) * 2); --pad-bottom: var(--gutter); }

.sec-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sec-bg .bg-media { width: 100%; height: 100%; object-fit: cover; }
.sec-bg .bg-overlay { position: absolute; inset: 0; background: #000; }
.sec > :not(.sec-bg) { position: relative; z-index: 1; }

/* "rounded" section divider: the bottom edge of the section curves down */
/* "rounded" section divider: the bottom edge of the section curves down.
   The section's own colour/image lives on .sec-bg (masked); underneath the
   curve the colour of the *next* section shows through. */
.sec.has-divider {
  --divider-h: 6vw;
  --divider-offset: var(--divider-h);
  --divider-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100Q50 20 0 0Z'/%3E%3C/svg%3E");
  background: var(--next-bg, var(--black));
}
.sec.has-divider:has(+ .theme-light)  { --next-bg: var(--white); }
.sec.has-divider:has(+ .theme-dark)   { --next-bg: var(--black); }
.sec.has-divider:has(+ .theme-accent) { --next-bg: var(--accent); }
.sec.has-divider > .sec-bg {
  background: var(--bg);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--divider-h) + 1px) no-repeat,
                var(--divider-shape) bottom / 100% var(--divider-h) no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--divider-h) + 1px) no-repeat,
                var(--divider-shape) bottom / 100% var(--divider-h) no-repeat;
}

.container { width: 100%; max-width: calc(var(--max-width) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 767px) { .container { padding: 0 var(--gutter-mobile); } }

/* 5. Fluid-engine grid ------------------------------------------------------
   Each block carries its own placement as CSS variables:
     --m : grid-area on mobile  (row-start / col-start / row-end / col-end)
     --d : grid-area on desktop
     --va / --va-m : vertical alignment inside the area (start|center|end)
   Desktop grid: 24 content columns + 2 gutter columns (cols 1 and 26).
   Mobile grid:   8 content columns + 2 gutter columns (cols 1 and 10).     */
.fe {
  display: grid;
  gap: var(--gap);
  grid-template-columns:
    minmax(calc(var(--gutter-mobile) - var(--gap)), 1fr)
    repeat(8, minmax(0, calc((var(--max-width) - var(--gap) * 7) / 8)))
    minmax(calc(var(--gutter-mobile) - var(--gap)), 1fr);
  grid-template-rows: repeat(var(--rows-m, 1), minmax(24px, auto));
}
.fe > .b {
  grid-area: var(--m);
  display: flex; flex-direction: column; justify-content: var(--va-m, var(--va, start));
  min-width: 0; position: relative;
}
@media (min-width: 768px) {
  .fe {
    grid-template-columns:
      minmax(calc(var(--gutter) - var(--gap)), 1fr)
      repeat(24, minmax(0, calc((var(--max-width) - var(--gap) * 23) / 24)))
      minmax(calc(var(--gutter) - var(--gap)), 1fr);
    grid-template-rows: repeat(var(--rows-d, 1), minmax(calc(var(--container) * 0.0215), auto));
  }
  .fe > .b { grid-area: var(--d); justify-content: var(--va, start); }
}

/* 6. Blocks ---------------------------------------------------------------- */
.b-text { overflow-wrap: break-word; }
.card-desc a { text-decoration: underline; text-underline-offset: 0.15em; }

.b-image { overflow: hidden; min-height: 24px; }
.b-image img, .b-image > a { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-image img { object-fit: cover; }
.b-image.mask-circle { clip-path: ellipse(50% 50% at 50% 50%); }

.yt { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.b-video .caption, .flow-video .caption { font-size: 0.9rem; margin-top: 0.75rem; }
.b-video .caption p { margin: 0; }

.social-links { display: flex; gap: 12px; }
.social-links a { color: var(--accent); }
.theme-light .social-links a { color: #000; }

/* 7. Buttons & forms -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 1rem/1.2 var(--font-body); text-decoration: none; text-align: center;
  padding: 1.2em 2.004em; border-radius: 300px; border: 0; cursor: pointer;
  background: var(--black); color: var(--white); transition: opacity 0.15s;
}
.btn:hover { opacity: 0.8; }
.theme-dark .btn--primary { background: var(--accent); color: var(--black); }
.btn--secondary { background: var(--black); color: var(--white); }
.theme-dark .btn--secondary { background: var(--white); color: var(--black); }
.btn--large { font-size: 1.2rem; }
.btn--small { font-size: 0.8rem; }
.b-button .btn-wrap--stretch { height: 100%; }
.b-button .btn-wrap--stretch .btn { width: 100%; height: 100%; }

.form { display: grid; gap: 20px; }
.form fieldset { border: 0; margin: 0; padding: 0; }
.form legend { padding: 0; margin-bottom: 4px; }
.form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form .field-row .lbl { font-size: 12px; }
.form label { display: grid; gap: 4px; }
.form .req { opacity: 0.7; font-size: 0.85em; margin-left: 0.25em; }
.form input, .form textarea {
  width: 100%; font: inherit; color: #000; border: 2px solid transparent;
  background: rgb(204, 204, 204); border-radius: 26px; padding: 10px 20px; line-height: 24px;
}
.form textarea { height: 100px; resize: vertical; display: block; }
.theme-light .form input, .theme-light .form textarea { background: #fff; border: 1px solid #ccc; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form .btn { justify-self: start; }
.form-error { color: #ff6b6b; }

/* 8. Card list (Squarespace "list section") -------------------------------- */
/* Settings come from CSS variables on the section:
   --cols, --col-gap, --row-gap, --pad-y, --title-size, --media-ratio, --card-pad */
.sec.list-sec { --pad: var(--pad-y, 10vmax); min-height: 0; }
.list-title { font-size: calc(1.2 * var(--type-scale) + 1rem); line-height: 1.15; letter-spacing: -0.02em; padding-bottom: 70px; }
.list-title p { margin: 0; }
.cards {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--row-gap, 60px) min(var(--col-gap, 60px), 7vw); align-items: start;
}
.cards--boxed .card { background: rgb(227, 227, 227); color: #000; padding: var(--card-pad, 20px); }
.card-media { aspect-ratio: var(--media-ratio, 4 / 3); overflow: hidden; margin-bottom: var(--media-space, 6%); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-title { font-size: calc((var(--title-size, 1.2) - 1) * var(--type-scale) + 1rem); margin: 0; }
.card-desc { font-size: 0.892rem; margin-top: var(--title-space, 6%); }
.card .btn { margin-top: var(--body-space, 6%); }
@media (max-width: 767px) { .cards { grid-template-columns: 1fr; gap: var(--row-gap, 60px); } }

/* Portfolio index (/portfolio) */
.sec.portfolio-index { min-height: 100vh; justify-content: center; }
.portfolio-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.97rem 10rem;
  padding: 4vw; font-size: calc(2.7 * var(--type-scale) + 1rem); letter-spacing: -0.02em; line-height: 1.1;
}
.portfolio-links a { color: #000; text-decoration: none; }
.portfolio-links a:hover { text-decoration: underline; }
.portfolio-links .dot { color: #000; font-size: 0.6em; }

/* Item pagination (portfolio sub pages) */
.item-pagination { display: flex; justify-content: space-between; padding-top: 2rem; padding-bottom: 2rem; background: #fff; color: #000; }
/* full-width white band (also on ultra-wide screens); links stay aligned with the content */
.item-pagination.container { max-width: none; padding-left: max(var(--gutter), (100% - var(--max-width)) / 2); padding-right: max(var(--gutter), (100% - var(--max-width)) / 2); }
@media (max-width: 767px) { .item-pagination.container { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); } }
.item-pagination a { font-size: calc(0.5 * var(--type-scale) + 1rem); text-decoration: none; display: inline-flex; align-items: center; gap: 0.75em; }
.item-pagination a.next::after { content: ""; width: 0.55em; height: 0.55em; border-top: 1.5px solid; border-right: 1.5px solid; transform: rotate(45deg); }
.item-pagination a.prev::before { content: ""; width: 0.55em; height: 0.55em; border-bottom: 1.5px solid; border-left: 1.5px solid; transform: rotate(45deg); }

/* 9. Gallery ------------------------------------------------------------------ */
.sec.gallery-sec { --pad: var(--gutter); min-height: 0; }
.gallery--masonry { columns: var(--cols, 2); column-gap: var(--gap); padding: 0 var(--gutter); }
.gallery--masonry figure { margin: 0 0 var(--gap); break-inside: avoid; }
.gallery--masonry picture { display: block; }
.gallery--masonry img { width: 100%; height: auto; }
/* site.js re-arranges figures into .masonry-col columns (shortest column first) */
.gallery--masonry.is-laid-out { columns: auto; display: flex; gap: var(--gap); align-items: flex-start; }
.gallery--masonry.is-laid-out .masonry-col { flex: 1; min-width: 0; }
@media (max-width: 767px) { .gallery--masonry { padding: 0 var(--gutter-mobile); } }

/* 10. Blog ------------------------------------------------------------------ */
.sec.blog-list-sec { --pad: 4vw; }
.blog-list-heading { margin-top: 0; }
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw 30px; }
.blog-card-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 4.5rem; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.blog-card-img:hover img { transform: scale(1.02); }
.blog-card-title { font-size: calc(0.5 * var(--type-scale) + 1rem); margin: 0 0 2rem; }
.blog-card-title a { text-decoration: none; }
.blog-card-excerpt { font-size: 0.9rem; }
.blog-card-excerpt p { margin: 0 0 1.5rem; }
.blog-card-more { font-size: 0.9rem; text-underline-offset: 0.2em; display: inline-block; margin-top: 0.5rem; }
@media (max-width: 767px) { .blog-grid { grid-template-columns: 1fr; gap: 12vw; } .blog-card-img { margin-bottom: 1.5rem; } }

.sec.blog-post-sec { --pad-top: 6.6vmax; --pad-bottom: 0px; }
.post { max-width: calc(1000px + var(--gutter) * 2); }
.post-title { margin: 0 0 3rem; }
.post-body { font-size: 1rem; }
.post-body :is(p, h1, h2, h3, h4, li) { white-space: pre-wrap; }
.post-body h3 { margin: 2rem 0 1.5rem; }
.post-body a { text-decoration: underline; }
.post-body .row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 30px; }
.post-body .span-12 { grid-column: span 12; } .post-body .span-6 { grid-column: span 6; }
.post-body .span-4 { grid-column: span 4; } .post-body .span-8 { grid-column: span 8; }
.post-pagination { display: flex; justify-content: space-between; gap: 2rem; padding: 6rem 0 2rem; margin: 0 calc(-1 * (100vw - 100%) / 2); padding-left: 4vw; padding-right: 4vw; }
.post-pagination a { font-size: calc(0.5 * var(--type-scale) + 1rem); text-decoration: none; display: inline-flex; align-items: center; gap: 1rem; max-width: 45%; line-height: 1.2; }
.post-pagination a.prev::before, .post-pagination a.next::after { content: ""; flex: none; width: 0.55em; height: 0.55em; border-top: 1.5px solid; border-right: 1.5px solid; }
.post-pagination a.prev::before { transform: rotate(-135deg); }
.post-pagination a.next { margin-left: auto; text-align: right; }
.post-pagination a.next::after { transform: rotate(45deg); }

/* 11. Footer ---------------------------------------------------------------- */
.site-footer .sec { background: var(--black); color: var(--white); }

/* 12. Utilities --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}