/* Responsiv layout: platta (max 1100 px) och mobil (max 640 px).
   Sidorna är byggda med inline-stilar, därför behövs !important här. */
html, body { overflow-x: hidden; }
img { max-width: 100%; }

@media (max-width: 1100px) {
  .r-root { max-width: none !important; }
  .r-pad { padding-left: 48px !important; padding-right: 48px !important; }
  section.r-pad { padding-top: 80px !important; padding-bottom: 80px !important; }
  .r-row { flex-wrap: wrap !important; gap: 40px !important; }
  .r-row > .r-fixw { width: 100% !important; flex-basis: 100% !important; box-sizing: border-box; }
  .r-row > * { min-width: 0; }
  .r-wrap { flex-wrap: wrap !important; }
  .r-row > .kk-btn { flex-shrink: 0; min-width: auto; }
  .r-row > [style*="flex-grow: 1"] { flex-basis: 100% !important; }
  .r-g5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .r-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-row > div.r-fixw[style*="position: relative"] { max-width: 520px; }
  .r-grid.r-stairs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; }
  .r-stairs > * { height: auto !important; min-height: 0 !important; gap: 20px; }
  .r-stairs > :last-child { grid-column: span 2; }
  .kk-facts { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; max-width: none; }
  .kk-fact-value { font-size: 40px; }
  .r-fs-xl { font-size: 60px !important; }
  .r-fs-l { font-size: 48px !important; }
  .r-maxw { max-width: none !important; }
  .kk-nav { flex-wrap: wrap; row-gap: 8px; }
  .kk-nav-right { display: contents; }
  .kk-nav nav { order: 3; width: 100%; min-width: 0; }
  .kk-nav ul { display: flex !important; width: 100%; overflow-x: auto; gap: 20px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .kk-nav ul::-webkit-scrollbar { display: none; }
  [data-galleri] { height: 460px !important; }
  img.r-img[alt^="Nio av delägarna"] { height: auto !important; aspect-ratio: 3 / 2; }
}

@media (max-width: 640px) {
  .r-pad { padding-left: 20px !important; padding-right: 20px !important; }
  section.r-pad { padding-top: 56px !important; padding-bottom: 56px !important; }
  footer.r-pad { padding-top: 44px !important; padding-bottom: 32px !important; }
  .r-row { gap: 28px !important; }
  .r-grid { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; height: auto !important; }
  .r-grid.r-g5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .r-span2 { grid-column: auto !important; grid-row: auto !important; }
  footer .r-grid.r-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 20px !important; }
  footer .r-g4 > :first-child { grid-column: span 2; }
  footer.r-pad { gap: 24px !important; }
  form[style*="padding: 40px"] { padding: 24px 20px !important; }
  article[style*="padding: 40px"], article[style*="padding: 32px"], article[style*="padding: 28px"] { padding: 24px 20px !important; }
  article[style*="min-height: 200px"] { min-height: 0 !important; flex-direction: row !important; align-items: center; gap: 16px !important; }
  article[style*="min-height: 200px"] > span { min-width: 40px; }
  .kk-quote blockquote { font-size: 22px; }
  .r-row > div.r-fixw[style*="position: relative"] { max-width: 220px; }
  .r-row > div.r-fixw[style*="position: relative"] > img { height: auto !important; aspect-ratio: 4 / 5; }
  article > svg[width="120"] { width: 80px; height: 48px; }
  .kk-fact { min-height: 104px; padding: 16px; }
  section.r-pad[style*="flex-direction: column"] { gap: 32px !important; }
  .r-wrap > .kk-btn:not(.kk-btn-liten) { padding: 0 16px; font-size: 15px; min-height: 44px; }
  .r-wrap[style*="padding-top: 8px"] { gap: 8px !important; }
  p[style*="font-size: 17px; line-height: 1.65"] { font-size: 16px !important; line-height: 1.6 !important; }
  section.r-pad { padding-top: 48px !important; padding-bottom: 48px !important; }
  .r-tall { height: auto !important; min-height: 0; }
  .r-tall[style*="dashed"] { min-height: 220px; }
  .r-abs[style*="border-top-left-radius: 160px"] { display: none; }
  article.r-tall { min-height: 0; }
  .r-img { height: auto !important; aspect-ratio: 4 / 3; }
  .r-fs-xl { font-size: 44px !important; }
  .r-fs-l { font-size: 38px !important; }
  .r-fs-m { font-size: 30px !important; }
  .r-fs-s { font-size: 24px !important; }
  .r-fs-lead { font-size: 18px !important; }
  .kk-nav { padding: 12px 20px !important; column-gap: 12px; }
  .r-collage { display: grid !important; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 8px; width: 100% !important; height: auto !important; }
  .r-collage > * { position: static !important; width: 100% !important; height: auto !important; aspect-ratio: 1; }
  .r-collage > :first-child { grid-row: span 2; height: 100% !important; aspect-ratio: auto; }
  .r-collage > div { display: none; }
  .r-box { padding: 36px 24px !important; border-radius: 16px !important; }
  .r-grid.r-stairs { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .r-stairs > :last-child { grid-column: auto; }
  .r-span2 img { height: auto !important; aspect-ratio: 4 / 3; }
  .r-span2 figcaption { font-size: 13px !important; left: 12px !important; top: 12px !important; right: 12px; }
  .r-stairs > * { height: auto !important; min-height: 0 !important; gap: 16px; }
  .kk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kk-fact { min-height: 120px; }
  .kk-fact-value { font-size: 44px; }
  .kk-fact-label { font-size: 14px; overflow-wrap: anywhere; hyphens: auto; }
  .kk-member { min-width: 0; }
  .kk-member-body { padding: 12px 14px 16px; min-width: 0; }
  .kk-member-name { font-size: 17px; overflow-wrap: anywhere; hyphens: auto; }
  .kk-member-meta { font-size: 14px; }
  .kk-member-initials { font-size: 52px; }
  .kk-member-door { width: 40px; height: 40px; border-top-right-radius: 40px; }
  .kk-tag { font-size: 12px; padding: 4px 8px; white-space: normal; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
  .kk-room { grid-template-columns: 80px 1fr; }
  .kk-room-plan { width: 80px; height: 80px; }
  .kk-vacancy { grid-template-columns: 1fr !important; padding: 32px 24px !important; }
  .kk-vacancy-title { font-size: 32px !important; }
  .demo-lage { right: 8px !important; bottom: 8px !important; font-size: 12px !important; }
  .kk-knock { position: static; width: auto; margin-top: 12px; animation: none; }
  .r-grid[data-galleri] { grid-template-columns: 2fr 1fr !important; height: 280px !important; gap: 6px !important; }
  dl.r-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  details[data-anmal] > summary { width: 100%; box-sizing: border-box; justify-content: center; }
}