/* ======================
   Self-hosted fonts
   ====================== */
@font-face {
  font-family:  'Tangerine';
  src:          url('../fonts/TangerineRegular.woff2') format('woff2'),
                url('../fonts/TangerineRegular.woff')  format('woff'),
                url('../fonts/TangerineRegular.ttf')   format('truetype');
  font-weight:  400;
  font-style:   normal;
  font-display: swap;
}

/* latin-ext (å, ä, ö och övriga utökade latinska tecken) */
@font-face {
  font-family:  'Noto Sans';
  font-style:   normal;
  font-weight:  100 900;
  font-display: swap;
  src:          url('../fonts/NotoSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family:  'Noto Sans';
  font-style:   normal;
  font-weight:  100 900;
  font-display: swap;
  src:          url('../fonts/NotoSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* ======================
   Figma Design Tokens
   ====================== */
:root {
  --color-white:  #ffffff;
  --color-black:  #000000;
  --color-neon:   #f7f70a;

  /* Color cycle for "Colourful Collection #2"
     Update hex values here to match Figma palette */
  --cycle-white:  #ffffff;
  --cycle-red:    #E1373F;
  --cycle-yellow: #F7CE0A;
  --cycle-green:  #46B07B;
  --cycle-blue:   #12677D;
  --cycle-pink:   #DB7EA9;

  --col-hash: #ffffff; /* tracks current text color for the # glyph */

  --page-gutter: 60px;

  --font-display: 'Tangerine', cursive;

  --size-large:   96px;
  --lh-large:     101px;
  --ls-large:     0em;

  --size-small:   24px;
  --lh-small:     25px;
  --ls-small:     0.04px;
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1439px) {
  :root {
    --size-large: 76px;
    --lh-large:   80px;
    --size-small: 20px;
  }
}

/* Tablet portrait */
@media (min-width: 768px) and (orientation: portrait) {
  :root {
    --size-large:  54px;
    --lh-large:    58px;
    --size-small:  16px;
    --lh-small:    20px;
    --page-gutter: 40px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --size-large:  54px;
    --lh-large:    58px;
    --size-small:  16px;
    --page-gutter: 24px;
  }
}

/* ======================
   Reset & Base
   ====================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html, body {
  width:      100%;
  height:     100%;
  overflow:   hidden;
  background: transparent;
  color:      var(--color-white);
}

/* ======================
   Video Background
   ====================== */
.video-bg {
  position:            fixed;
  inset:               0;
  z-index:             0;
  background-image:    url('../img/poster-desktop.jpg');
  background-size:     cover;
  background-position: center;
}

@media (orientation: portrait) {
  .video-bg {
    background-image: url('../img/poster-mobile.jpg');
  }
}

.bg-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0;
  transition: opacity 1s ease;
}

.bg-video.visible {
  opacity: 1;
}

.video-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.28);
}

/* ======================
   Main Layout — flex column on all breakpoints.
   Logo top, content centered in remaining space, bottom-bar at bottom.
   ====================== */
main {
  position:       relative;
  z-index:        1;
  width:          100%;
  height:         100vh;
  height:         100dvh;
  display:        flex;
  flex-direction: column;
  padding:        30px 58px;
  box-sizing:     border-box;
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1439px) and (orientation: landscape) {
  main {
    padding: 24px 40px;
  }
}

/* Tablet portrait */
@media (min-width: 768px) and (orientation: portrait) {
  main {
    padding: 24px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  main {
    padding: 20px;
  }
}

/* Phone landscape — very compact */
@media (max-height: 500px) and (orientation: landscape) {
  main {
    padding: 12px 30px;
  }
}

/* ======================
   Logotype — first flex item, stays top-left
   ====================== */
.logotype {
  position: fixed;
  top:      30px;
  left:     40px;
  z-index:  100;
  display:  block;
  width:    clamp(200px, 25vw, 360px);
}

.logotype svg,
.logotype img {
  width:   100%;
  height:  auto;
  display: block;
}

@media (max-width: 767px) {
  .logotype {
    top:   20px;
    left:  20px;
    width: clamp(150px, 50vw, 220px);
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .logotype {
    top:   12px;
    left:  30px;
    width: clamp(100px, 14vw, 160px);
  }
}

/* ======================
   Typography
   ====================== */
.display-large {
  font-family:    var(--font-display);
  font-size:      var(--size-large);
  font-weight:    400;
  line-height:    var(--lh-large);
  letter-spacing: var(--ls-large);
  font-style:     normal;
  color:          var(--color-white);
}

/* # character rendered in Arial — Tangerine's # looks bad */
.hash {
  font-family:    Arial, Helvetica, sans-serif;
  font-size:      0.8em;
  vertical-align: 0.06em;
}

/* ======================
   Colourful Collection — color sweep animation
   JS applies background-clip:text and cycles the gradient.
   Fallback if JS is absent: white text via .display-large.
   ====================== */
#colourful-text {
  -webkit-background-clip: text;
  background-clip:         text;
}

/* # rendered in Arial must keep an explicit color;
   CSS transition follows the sweep duration in JS */
#colourful-text .hash {
  color:      var(--col-hash, #ffffff);
  transition: color 1.8s ease;  /* matches SWEEP_MS in JS */
}

/* ======================
   Content Block — fills space between logo and bottom-bar
   ====================== */
.content {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  width:           100%;
  padding:         16px 0;
}

/* ======================
   Bottom Bar — last flex item, always bottom-left
   ====================== */
.bottom-bar {
  flex-shrink:     0;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       nowrap;
  font-family:     var(--font-display);
  font-size:       var(--size-small);
  font-weight:     400;
  line-height:     var(--lh-small);
  letter-spacing:  var(--ls-small);
  font-style:      normal;
  color:           var(--color-white);
}

/* Tablet portrait + mobile — stack items vertically, left-aligned */
@media (min-width: 768px) and (orientation: portrait) {
  .bottom-bar {
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: flex-start;
    gap:             4px;
  }
}

@media (max-width: 767px) {
  .bottom-bar {
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: flex-start;
    gap:             4px;
  }
}

/* ======================
   Bottom Links — animated curved underline
   ====================== */
.hover-img-trigger {
  position:   relative;
  cursor:     pointer;
  transition: color 0.3s ease;
}

.hover-img-trigger:hover {
  color: var(--cycle-pink);
}

.hover-img-trigger:hover .link-underline {
  clip-path: inset(0 0% 0 0);
}

.hover-img-trigger:hover .link-underline path {
  stroke: var(--cycle-pink);
}

.bottom-link {
  position:        relative;
  display:         inline-block;
  text-decoration: none;
  color:           inherit;
  font-family:     inherit;
  font-size:       inherit;
  font-weight:     inherit;
  line-height:     inherit;
  letter-spacing:  inherit;
  cursor:          pointer;
  transition:      color 0.3s ease;
}

.link-underline {
  position:       absolute;
  bottom:         -4px;
  left:           0;
  width:          100%;
  height:         10px;
  pointer-events: none;
  /* Hide by clipping from the right; reveal left→right on hover */
  clip-path:      inset(0 100% 0 0);
  transition:     clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-underline path {
  stroke:       currentColor;
  stroke-width: 1.5px;
  fill:         none;
}

.bottom-link:hover,
.bottom-link:focus-visible {
  color: var(--cycle-pink);
}

.bottom-link:hover .link-underline,
.bottom-link:focus-visible .link-underline,
.nav-link:hover .link-underline,
.nav-link:focus-visible .link-underline,
.contact-link:hover .link-underline,
.contact-link:focus-visible .link-underline {
  clip-path: inset(0 0% 0 0);
}

.bottom-link:hover .link-underline path,
.bottom-link:focus-visible .link-underline path,
.contact-link:hover .link-underline path,
.contact-link:focus-visible .link-underline path {
  stroke: var(--cycle-pink);
}

/* ======================
   Löptextlänkar — alltid understrukna, rosa vid hover
   Använd klassen .prose-link i löptext
   ====================== */
.prose-link {
  color:                  inherit;
  text-decoration:        none;
  border-bottom:          1px solid currentColor;
  transition:             color 0.3s ease, border-color 0.3s ease;
  padding-bottom:         1px;
}

.prose-link:hover,
.prose-link:focus-visible {
  color:        var(--cycle-pink);
  border-color: var(--cycle-pink);
}

/* ======================
   Cursor Following Image
   ====================== */
.cursor-image {
  position:       fixed;
  top:            0;
  left:           0;
  z-index:        50;
  pointer-events: none;
  opacity:        0;
  transform:      translate(-50%, calc(-100% - 40px));
  transition:     opacity 0.25s ease;
}

.cursor-image.visible {
  opacity: 1;
}

.cursor-image img {
  display:       block;
  width:         min(378px, 65vw);
  height:        auto;
  border-radius: 10px;
}

@media (min-width: 768px) and (max-width: 1439px) {
  .cursor-image img {
    width: min(260px, 40vw);
  }
}

/* No hover image on touch devices */
@media (hover: none) {
  .cursor-image {
    display: none;
  }
}

/* ======================
   Page overflow control — inner pages override html/body
   ====================== */
html:has(body.page-scrollable) {
  overflow: auto;
  height:   auto;
}
body.page-scrollable {
  overflow: auto;
  height:   auto;
}

/* ======================
   Nav Toggle (Hamburger / Close)
   ====================== */
.nav-toggle {
  position:   fixed;
  top:        30px;
  right:      40px;
  z-index:    200;
  width:      66px;
  height:     66px;
  display:    flex;
  align-items:     center;
  justify-content: center;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    0;
}

.nav-hamburger-icon {
  width:   49px;
  height:  42px;
  display: block;
}

.nav-close-icon {
  width:      44px;
  height:     44px;
  display:    none;
  transition: transform 0.35s ease;
}

.nav-hamburger-icon rect {
  transition: fill 0.2s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-close-icon path {
  transition: fill 0.2s ease;
}

.nav-toggle:hover .nav-hamburger-icon rect {
  fill: var(--cycle-pink);
}

.nav-toggle[aria-expanded="true"]:hover .nav-close-icon {
  transform: rotate(90deg);
}

.nav-toggle[aria-expanded="true"]:hover .nav-close-icon path {
  fill: var(--cycle-pink);
}

.nav-toggle[aria-expanded="true"] .nav-hamburger-icon { display: none; }
.nav-toggle[aria-expanded="true"] .nav-close-icon     { display: block; }

.hb-top,
.hb-mid {
  transition: fill 0.2s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-toggle[aria-expanded="false"]:hover .hb-top { transform: translateX(-24.6667px); }
.nav-toggle[aria-expanded="false"]:hover .hb-mid { transform: translateX(-11.6667px); }

@media (max-width: 767px) {
  .nav-toggle {
    top:   20px;
    right: 8px;
  }
  .nav-hamburger-icon { width: 34px; height: 29px; }
  .nav-close-icon     { width: 36px; height: 36px; }
}

/* ======================
   Nav Overlay — circular reveal from hamburger position
   ====================== */
.nav-overlay {
  position:        fixed;
  inset:           0;
  z-index:         150;
  background:      var(--color-white);
  display:         flex;
  flex-direction:  column;
  padding:         30px 60px;
  pointer-events:  none;
  clip-path:       circle(0px at calc(100% - 73px) 63px);
  transition:      clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-overlay[aria-hidden="false"] {
  pointer-events: all;
  clip-path:      circle(200vmax at calc(100% - 73px) 63px);
  transition:     clip-path 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Dark logotype — same size as .logotype on all breakpoints */
.nav-overlay-logo {
  display:     block;
  width:       clamp(200px, 25vw, 360px);
  flex-shrink: 0;
}

.nav-overlay-logo svg {
  width:   100%;
  height:  auto;
  display: block;
}

@media (max-width: 767px) {
  .nav-overlay-logo { width: clamp(150px, 50vw, 220px); }
}

@media (max-height: 500px) and (orientation: landscape) {
  .nav-overlay-logo { width: clamp(100px, 14vw, 160px); }
}

/* Two-column layout: photo + nav */
.nav-overlay-content {
  flex:        1;
  display:     flex;
  align-items: center;
  gap:         55px;
  min-height:  0;
}

.nav-overlay-photo {
  flex:          0 0 auto;
  width:         min(45%, 776px);
  aspect-ratio:  776 / 790;
  align-self:    center;
  border-radius: 10px;
  overflow:      hidden;
}

.nav-overlay-photo img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
}

/* Nav links */
.nav-overlay nav {
  display:        flex;
  flex-direction: column;
  gap:            36px;
}

.nav-link {
  position:        relative;
  display:         inline-block;
  align-self:      flex-start;
  font-family:     var(--font-display);
  font-size:       70px;
  line-height:     1.1;
  font-weight:     400;
  color:           var(--color-black);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.nav-link .link-underline path {
  stroke-width: 3px;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--cycle-pink);
}

@media (max-width: 1200px) {
  .nav-overlay { padding: 30px 40px; }
}

/* Mobile — dölj foto, centrera länkarna */
@media (max-width: 767px) {
  .nav-overlay {
    padding:   20px;
    clip-path: circle(0px at calc(100% - 53px) 53px);
  }
  .nav-overlay[aria-hidden="false"] {
    clip-path: circle(200vmax at calc(100% - 53px) 53px);
  }
  .nav-overlay-photo   { display: none; }
  .nav-overlay-content { justify-content: center; }
  .nav-link            { font-size: 54px; line-height: 64px; }
}

/* ======================
   Cookie Banner
   ====================== */
.cookie-overlay {
  position:       fixed;
  inset:          0;
  z-index:        250;
  background:     rgba(0, 0, 0, 0.55);
}

.cookie-overlay.hidden {
  display: none;
}

.cookie-banner {
  position:        fixed;
  bottom:          20px;
  left:            40px;
  right:           40px;
  z-index:         300;
  background:      var(--color-black);
  border-radius:   20px;
  padding:         24px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  transition:      transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                   opacity   0.5s ease;
}

.cookie-banner.hidden {
  transform:      translateY(calc(100% + 50px));
  opacity:        0;
  pointer-events: none;
}

.cookie-text {
  font-family: 'Noto Sans', sans-serif;
  font-size:   18px;
  line-height: 26px;
  color:       var(--color-white);
  font-weight: 400;
}

.cookie-link {
  position:        relative;
  display:         inline-block;
  color:           inherit;
  text-decoration: none;
}

.cookie-link .link-underline {
  position:       absolute;
  bottom:         -3px;
  left:           0;
  width:          100%;
  height:         8px;
  pointer-events: none;
  clip-path:      none;
  transition:     none;
}

.cookie-link .link-underline path {
  stroke:     var(--color-white);
  transition: stroke 0.4s ease;
}

.cookie-link:hover {
  color: var(--cycle-pink);
}

.cookie-link:hover .link-underline path {
  stroke: var(--cycle-pink);
}

.cookie-accept {
  position:    relative;
  font-family: 'Noto Sans', sans-serif;
  font-size:   18px;
  line-height: 26px;
  font-weight: 700;
  color:       var(--color-white);
  background:  none;
  border:      none;
  cursor:      pointer;
  white-space: nowrap;
  padding:     0 0 6px;
  flex-shrink: 0;
  transition:  color 0.3s ease;
}

.cookie-accept .link-underline {
  clip-path:  inset(0 100% 0 0);
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-accept .link-underline path {
  stroke:     var(--cycle-pink);
  transition: none;
}

.cookie-accept:hover {
  color: var(--cycle-pink);
}

.cookie-accept:hover .link-underline {
  clip-path: inset(0 0% 0 0);
}

@media (max-width: 767px) {
  .cookie-banner {
    bottom:  20px;
    left:    16px;
    right:   16px;
    padding: 20px;
    gap:     16px;
  }
  .cookie-text,
  .cookie-accept {
    font-size:   15px;
    line-height: 22px;
  }
}

/* ======================
   Vernissage Badge — link variant (after vernissage)
   ====================== */
a.vernissage-badge {
  text-decoration: none;
}

a.vernissage-badge:hover {
  background: var(--color-white);
}

/* ======================
   Vernissage Badge
   ====================== */
.vernissage-badge {
  position:        absolute;
  width:           200px;
  height:          200px;
  background:      var(--color-neon);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          default;
  z-index:         10;
}

.vernissage-badge span {
  font-family:    var(--font-display);
  font-size:      var(--size-small);
  line-height:    var(--lh-small);
  color:          var(--color-black);
  text-align:     center;
  pointer-events: none;
  user-select:    none;
}

@media (min-width: 768px) and (max-width: 1439px) {
  .vernissage-badge {
    width:  150px;
    height: 150px;
  }
  .vernissage-badge span {
    font-size:   18px;
    line-height: 22px;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  .vernissage-badge {
    width:  120px;
    height: 120px;
  }
  .vernissage-badge span {
    font-size:   16px;
    line-height: 20px;
  }
}

@media (max-width: 767px) {
  .vernissage-badge {
    width:  84px;
    height: 84px;
  }
  .vernissage-badge span {
    font-size:   12px;
    line-height: 15px;
  }
}

/* ======================
   Gallery Page — utstallning.php
   ====================== */
.page-gallery {
  background: var(--color-white);
  color:      var(--color-black);
}

.page-gallery .nav-toggle rect {
  fill: var(--color-black);
}

.page-gallery .bottom-bar {
  color:   var(--color-black);
  padding: 0 var(--page-gutter);
}


/* Gallery page main wrapper — overrides the 100vh main constraint */
.gallery-page {
  position:       relative;
  z-index:        2;
  height:         auto;
  min-height:     100vh;
  padding:        0 0 60px;
}


/* Intro text block — lives in grid row 1, aligned to painting bottom */
.gallery-intro {
  align-self:  end;
  padding-bottom: 40px; /* sits level with caption area */
}

.gallery-h1-hash {
  font-family: Arial, sans-serif;
  font-weight: 400;
}

#colourful-title .gallery-h1-hash {
  color:      var(--col-hash);
  transition: color 1.8s ease;
}

.gallery-intro-line {
  font-family: var(--font-display);
  font-size:   clamp(40px, 5vw, 76px);
  font-weight: 400;
  line-height: 1.1;
  color:       var(--color-black);
  margin:      0;
}

#colourful-title {
  line-height:   1.1;
  margin-top:    0.15em;
  margin-bottom: 0.3em;
}

.gallery-intro-line--accent {
  color: #12677d;
}

/* Grid — 12-column editorial layout */
.gallery-grid {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap:            32px;
  row-gap:               80px;
  align-items:           start;
  max-width:             1400px;
  margin:                0 auto;
  padding:               220px var(--page-gutter) 120px;
}

/* Painting item */
.gallery-item {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  min-width:      0;
  cursor:         pointer;
  position:       relative;
}

/* Image wrapper */
.gallery-img-wrap {
  overflow:      hidden;
  position:      relative;
  border-radius: 10px;
}

.gallery-img {
  display:    block;
  width:      100%;
  height:     auto;
  opacity:    0;
  transition: opacity 0.5s ease;
}

.gallery-img.visible {
  opacity: 1;
}

/* Sold badge — yellow circle protruding from top-right corner of painting */
@keyframes sold-spin {
  from { transform: translate(28%, -28%) rotate(30deg); }
  to   { transform: translate(28%, -28%) rotate(390deg); }
}

.sold-badge {
  position:        absolute;
  top:             0;
  right:           0;
  transform:       translate(28%, -28%) rotate(30deg);
  width:           80px;
  height:          80px;
  background:      #f7f70a;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         10;
  pointer-events:  none;
}

.gallery-item:hover .sold-badge {
  animation: sold-spin 1.2s linear infinite;
}

.sold-badge span {
  font-family:  var(--font-display);
  font-size:    20px;
  color:        var(--color-black);
  line-height:  1;
  text-align:   center;
}

/* Caption: "Title, Price" on one line */
.gallery-caption {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.gallery-caption-title,
.gallery-caption-price {
  font-family: 'Noto Sans', sans-serif;
  font-size:   16px;
  font-weight: 400;
  line-height: 1.4;
  color:       var(--color-black);
  margin:      0;
}

/* Responsive */
@media (max-width: 1200px) {
  .gallery-grid { padding: 180px var(--page-gutter) 100px; row-gap: 64px; column-gap: 24px; }
}

/* Tablet: single-column stack */
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    row-gap: 52px;
    padding: 160px var(--page-gutter) 80px;
  }
  .gallery-intro,
  .gallery-item {
    grid-column: 1 / -1 !important;
    grid-row:    auto  !important;
  }
  .gallery-intro {
    padding-bottom: 0;
    padding-top:    8px;
  }
}

@media (max-width: 600px) {
  .gallery-grid { padding: 140px var(--page-gutter) 80px; row-gap: 44px; }
}

/* ======================
   Painting detail overlay
   ====================== */
.painting-overlay {
  position:        fixed;
  inset:           0;
  z-index:         250;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             20px;
  padding:         90px 60px 60px;
  background:      rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  clip-path:       circle(0px at var(--origin-x, 50%) var(--origin-y, 50%));
  pointer-events:  none;
  transition:      clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.painting-overlay[aria-hidden="false"] {
  clip-path:      circle(200vmax at var(--origin-x, 50%) var(--origin-y, 50%));
  pointer-events: all;
  transition:     clip-path 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Wrapper keeps badge positioned relative to the image */
.painting-overlay-media {
  position:     relative;
  line-height:  0;
  justify-self: center;
}

@keyframes overlay-slide-out-left {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-80px); opacity: 0; }
}
@keyframes overlay-slide-out-right {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(80px); opacity: 0; }
}
@keyframes overlay-slide-in-from-right {
  from { transform: translateX(80px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes overlay-slide-in-from-left {
  from { transform: translateX(-80px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.painting-overlay-img {
  max-width:     min(900px, calc(100vw - 336px)); /* 120px overlay padding + 216px arrow cols+gaps */
  max-height:    calc(100vh - 200px);
  width:         auto;
  height:        auto;
  object-fit:    contain;
  border-radius: 10px;
  display:       block;
}

/* Sold badge inside overlay — larger, slow continuous spin */
@keyframes overlay-badge-spin {
  from { transform: translate(25%, -25%) rotate(30deg); }
  to   { transform: translate(25%, -25%) rotate(390deg); }
}

.painting-overlay-sold-badge {
  position:        absolute;
  top:             0;
  right:           0;
  transform:       translate(25%, -25%) rotate(30deg);
  width:           130px;
  height:          130px;
  background:      #f7f70a;
  border-radius:   50%;
  display:         none;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
  animation:       overlay-badge-spin 6s linear infinite;
}

.painting-overlay-sold-badge.visible {
  display: flex;
}

.painting-overlay-sold-badge span {
  font-family: var(--font-display);
  font-size:   34px;
  color:       var(--color-black);
  line-height: 1;
  text-align:  center;
}

/* Prev / Next navigation buttons */
.painting-overlay-inner {
  display:               grid;
  grid-template-columns: 96px 1fr 96px;
  align-items:           center;
  gap:                   12px;
  width:                 100%;
  max-width:             1000px;
}

.painting-overlay-nav {
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         12px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      opacity 0.2s ease;
  opacity:         1;
}

.painting-overlay-nav:hover { opacity: 0.7; }

.painting-overlay-prev:hover .painting-overlay-arrow-icon { transform: translateX(-6px); }
.painting-overlay-next:hover .painting-overlay-arrow-icon--right { transform: scaleX(-1) translateX(-6px); }

.painting-overlay-nav:disabled {
  opacity:        0.15;
  pointer-events: none;
}

/* Tablet portrait — arrows below caption, painting fills full width */
@media (min-width: 768px) and (orientation: portrait) {
  .painting-overlay {
    padding: 70px 40px 80px;
  }
  .painting-overlay-inner {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
    gap:             16px;
  }
  .painting-overlay-media {
    order:           1;
    width:           100%;
    display:         flex;
    justify-content: center;
  }
  .painting-overlay-caption {
    order:      2;
    width:      100%;
    grid-column: auto;
  }
  .painting-overlay-prev {
    position: absolute;
    bottom:   28px;
    left:     32px;
  }
  .painting-overlay-next {
    position: absolute;
    bottom:   28px;
    right:    32px;
  }
  .painting-overlay-img {
    max-width:  calc(100vw - 80px);
    max-height: calc(100vh - 260px);
  }
}

/* Tablet landscape (iPad) — smaller arrows */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  .painting-overlay-inner      { grid-template-columns: 64px 1fr 64px; }
  .painting-overlay-arrow-icon { width: 48px; height: 48px; }
  .painting-overlay-img        { max-width: min(900px, calc(100vw - 272px)); } /* 120px padding + 152px arrow cols+gaps */
}

@media (max-width: 767px) {
  .painting-overlay-inner {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
    gap:             12px;
  }
  .painting-overlay-media   { order: 1; width: 100%; }
  .painting-overlay-caption { order: 2; width: 100%; }
  .painting-overlay-prev {
    position: absolute;
    bottom:   32px;
    left:     24px;
  }
  .painting-overlay-next {
    position: absolute;
    bottom:   32px;
    right:    24px;
  }
}

.painting-overlay-arrow-icon {
  width:      72px;
  height:     72px;
  fill:       var(--color-black);
  transition: fill 0.2s ease, transform 0.2s ease;
}

.painting-overlay-arrow-icon--right {
  transform: scaleX(-1);
}

.painting-overlay-nav:hover .painting-overlay-arrow-icon {
  fill: var(--cycle-pink);
}

.painting-overlay-caption {
  grid-column:    2;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  text-align:     center;
}

.painting-overlay-caption-title,
.painting-overlay-caption-price {
  font-family: 'Noto Sans', sans-serif;
  font-size:   16px;
  font-weight: 400;
  color:       var(--color-black);
  margin:      0;
}

.painting-overlay-close {
  position:        absolute;
  top:             30px;
  right:           40px;
  background:      none;
  border:          none;
  cursor:          pointer;
  width:           44px;
  height:          44px;
  padding:         0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.painting-overlay-close-icon {
  width:      44px;
  height:     44px;
  display:    block;
  fill:       var(--color-black);
  transition: transform 0.35s ease;
}

.painting-overlay-close:hover .painting-overlay-close-icon {
  fill: var(--cycle-pink);
  transform: rotate(90deg);
}

@media (max-width: 767px) {
  .painting-overlay           { padding: 60px 20px 30px; }
  .painting-overlay-close     { top: 16px; right: 16px; }
  .painting-overlay-close-icon { width: 22px; height: 22px; }
  .painting-overlay-img       { max-width: calc(100vw - 40px); max-height: 55vh; }
  .painting-overlay-arrow-icon { width: 36px; height: 36px; }
}

/* Tablet portrait — icon sizes (must come after base rules) */
@media (min-width: 768px) and (orientation: portrait) {
  .painting-overlay-close      { top: 20px; right: 24px; width: 32px; height: 32px; }
  .painting-overlay-close-icon { width: 22px; height: 22px; }
  .painting-overlay-arrow-icon { width: 36px; height: 36px; }
}


/* ======================
   Cookie policy page
   ====================== */
.cookie-policy-layout {
  flex:       1;
  padding:    220px var(--page-gutter) 80px;
  max-width:  800px;
  margin:     0 auto;
  width:      100%;
  box-sizing: border-box;
}

.cookie-policy-text .about-body p strong {
  font-weight: 600;
}

@media (max-width: 1100px) {
  .cookie-policy-layout { padding-top: 140px; }
}

@media (max-width: 800px) {
  .cookie-policy-layout { padding-top: 120px; }
}

@media (max-width: 500px) {
  .cookie-policy-layout { padding-top: 100px; }
}

/* ======================
   Om Rebekka page
   ====================== */
.about-page {
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  padding:        0 0 60px;
}

.about-layout {
  display:   flex;
  gap:       80px;
  flex:      1;
  padding:   220px var(--page-gutter) 80px;
  max-width: 1400px;
  margin:    0 auto;
  width:     100%;
  box-sizing: border-box;
}

.about-image-col {
  flex:      0 0 38%;
  max-width: 38%;
}

.about-photo {
  display:      block;
  width:        100%;
  height:       auto;
  border-radius: 10px;
}

.about-text-col {
  flex: 1;
  min-width: 0;
  padding-top: 20px;
}

.about-heading {
  font-family: var(--font-display);
  font-size:   clamp(52px, 6vw, 96px);
  font-weight: 400;
  line-height: 1.0;
  color:       var(--color-black);
  margin:      0 0 48px;
}

.about-body {
  display:        flex;
  flex-direction: column;
  gap:            24px;
}

.about-body p {
  font-family: 'Noto Sans', sans-serif;
  font-size:   clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  color:       var(--color-black);
  margin:      0;
}


.page-about .nav-toggle rect {
  fill: var(--color-black);
}

.page-about .bottom-bar {
  color:   var(--color-black);
  padding: 0 var(--page-gutter) 48px;
}

@media (max-width: 1100px) {
  .about-layout { padding: 140px var(--page-gutter) 60px; gap: 60px; }
}

@media (max-width: 800px) {
  .about-layout {
    flex-direction: column;
    padding:        120px var(--page-gutter) 60px;
    gap:            40px;
  }
  .about-image-col { flex: none; max-width: 100%; width: 100%; }
  .about-text-col  { padding-top: 0; }
}

@media (max-width: 500px) {
  .about-layout { padding: 100px var(--page-gutter) 60px; }
}


/* ======================
   Kontakt page
   ====================== */
.contact-page {
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  padding:        0 0 60px;
}

.contact-layout {
  display:    flex;
  gap:        80px;
  flex:       1;
  padding:    220px var(--page-gutter) 80px;
  max-width:  1400px;
  margin:     0 auto;
  width:      100%;
  box-sizing: border-box;
}

.contact-image-col {
  flex:      0 0 38%;
  max-width: 38%;
}

.contact-photo {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: 10px;
}

.contact-text-col {
  flex:        1;
  min-width:   0;
  padding-top: 20px;
  display:     flex;
  flex-direction: column;
}

.contact-heading {
  font-family: var(--font-display);
  font-size:   clamp(64px, 8vw, 120px);
  font-weight: 400;
  line-height: 1.0;
  color:       var(--color-black);
  margin:      0 0 40px;
}

.contact-intro {
  font-family: 'Noto Sans', sans-serif;
  font-size:   clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  color:       var(--color-black);
  margin:      0 0 48px;
}

.contact-links {
  display:        flex;
  flex-direction: column;
  gap:            32px;
}

.contact-item {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.contact-label {
  font-family: 'Noto Sans', sans-serif;
  font-size:   clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  color:       var(--color-black);
}

.contact-link {
  font-family:     var(--font-display);
  font-size:       clamp(32px, 4vw, 60px);
  font-weight:     400;
  color:           var(--color-black);
  text-decoration: none;
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  width:           fit-content;
}

.contact-link:hover {
  color: var(--cycle-pink);
}

/* Opening hours block */
.gallery-hours { margin-top: 8px; }

.gallery-hours-heading {
  font-family: 'Noto Sans', sans-serif;
  font-size:   clamp(15px, 1.1vw, 18px);
  font-weight: 600;
  color:       var(--color-black);
  margin:      0 0 12px;
}

.gallery-hours-times {
  font-family:   'Noto Sans', sans-serif;
  font-size:     clamp(15px, 1.1vw, 18px);
  font-weight:   400;
  color:         var(--color-black);
  margin:        0 0 20px;
  line-height:   1.8;
}

.gallery-address {
  font-family: 'Noto Sans', sans-serif;
  font-size:   clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  color:       var(--color-black);
  margin:      0;
}

.page-contact .nav-toggle rect {
  fill: var(--color-black);
}

.page-contact .bottom-bar {
  color:   var(--color-black);
  padding: 0 var(--page-gutter) 48px;
}

@media (max-width: 1100px) {
  .contact-layout { padding: 140px var(--page-gutter) 60px; gap: 60px; }
}

@media (max-width: 800px) {
  .contact-layout {
    flex-direction: column;
    padding:        120px var(--page-gutter) 60px;
    gap:            40px;
  }
  .contact-image-col { flex: none; max-width: 100%; width: 100%; }
  .contact-text-col  { padding-top: 0; justify-content: flex-start; }
}

@media (max-width: 500px) {
  .contact-layout { padding: 100px var(--page-gutter) 60px; }
}