/* ================================================
   Skidresor.se — Main CSS
   Primärfärg: #00548a | Font: Lato
   ================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Reservefont malt til Montserrat (5/10 2026). Google-fontene lastes asynkront med
   swap; for byttet var Arial smalere, sa avsnitt fikk en linje mer nar Montserrat kom
   og alt under hoppet (CLS 0,12 pa /finn-ditt-skisted/). Tallene er Montserrat mot Arial. */
@font-face {
  font-family: 'Montserrat Reserve';
  src: local('Arial');
  size-adjust: 113.1%;
  ascent-override: 85.8%;
  descent-override: 22.3%;
  line-gap-override: 0%;
}

:root {
  --primary:      #09355c;
  --primary-dark: #062140;
  --primary-mid:  #54708b;
  --cta:          #fbe17e;
  --cta-hover:    #f5d44a;
  --bg:           #eff4f7;
  --white:        #ffffff;
  --text:         #212529;
  --muted:        #5c6b75;   /* morkare 8/9 2026: #6c757d gav 4,23:1 mot den ljusbla bottnen, under AA (L10) */
  --border:       #afc5d8;
  --accent:       rgb(99, 62, 110);
  --radius:       5px;
  --radius-btn:   0 8px 0 8px;
  --shadow:       0 2px 10px rgba(9,53,92,.10);
  --font-headline: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:     'Montserrat', 'Montserrat Reserve', 'Segoe UI', Arial, sans-serif;
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 170px; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
p a:not(.btn):not(.legal-cta), li a:not(.btn):not(.legal-cta) { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
p a:not(.btn):not(.legal-cta):hover, li a:not(.btn):not(.legal-cta):hover { text-decoration-color: var(--primary); }

img { max-width: 100%; height: auto; display: block; }
h1 > img, h2 > img, h3 > img { display: inline; vertical-align: middle; }

h1, h2, h3, h4 { font-family: var(--font-headline); line-height: 1.2; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .02em; }
h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .6rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .5rem; }
h3 { font-size: 1.3rem; margin-bottom: .4rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
}

/* ================================================
   TOPBAR
   ================================================ */
.topbar {
  background: var(--bg);
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  font-weight: 500;
  padding: 7px 20px;
  letter-spacing: .02em;
}

/* ================================================
   HEADER
   ================================================ */
.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
  border-bottom: 1px solid var(--border);
}

/* Tvåradig layout: logo uppe-vänster, nav nere-höger */
.header-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 110px;
  padding: 12px 0 0;
}

.site-logo {
  display: block;
  align-self: flex-start;
  margin-top: 14px;
}
.site-logo img { display: block; }
.site-logo:hover { text-decoration: none; opacity: .85; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 0;
  padding-bottom: 8px;
}

.site-nav a {
  font-family: var(--font-headline);
  color: #000;
  font-size: 1.25rem;
  font-weight: 300;
  padding: 8px 15px;
  transition: color .15s;
  white-space: nowrap;
  line-height: 1.375;
  letter-spacing: .06em;
}
.site-nav a:hover { color: #000; text-decoration: underline; text-underline-offset: 4px; }
.site-nav a.active { color: var(--primary); font-weight: 700; }

.nav-sista {
  color: #000 !important;
  font-weight: 600 !important;
  background: var(--cta) !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
}
.nav-sista:hover { background: var(--cta-hover) !important; color: #000 !important; }

.nav-cta {
  color: var(--primary) !important;
  font-weight: 700 !important;
  border: 1.5px solid var(--primary) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  margin-left: 8px !important;
}
.nav-cta:hover { background: var(--primary) !important; color: var(--white) !important; }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  position: absolute;
  right: 20px;
  top: 20px;
}
.burger span { display: block; width: 24px; height: 2px; background: var(--primary); border-radius: 2px; transition: .2s; }
/* Apen meny = X (5/10 2026, som pa skidresor.se) */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 12px 20px 20px;
}
.mobile-nav a {
  display: block;
  font-family: var(--font-headline);
  color: var(--text);
  padding: 10px 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--border);
}
.mobile-nav a:hover { color: var(--primary); text-decoration: none; }
.mobile-nav a.nav-sista-mob { background: var(--cta); color: #000; font-weight: 600; padding: 10px 12px; border-radius: 4px; }
.mobile-nav.open { display: block; }

/* Overlay bakom mobilmeny */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 999;
}
.mobile-nav-overlay.open { display: block; }

/* ================================================
   HERO (startsida)
   ================================================ */
.hero {
  background: var(--primary);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 480px;
  position: relative;
  z-index: 1;
}
.hero-text {
  padding: 60px 0;
}
.hero h1 { color: var(--white); font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 1rem; text-shadow: none; }
.hero p { font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255,255,255,.85); max-width: 500px; margin: 0 0 2rem; text-shadow: none; text-transform: none; }
.hero-image {
  position: relative;
  height: 100%;
  min-height: 480px;
}
.hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Landschips i heron. Stilen lag tidigare inline i index.php, men samma chips
   rendras nu pa tva stallen (hero pa desktop, under infoboxen pa mobil). */
.hero-lander { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.hero-chip { display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.14); color: #fff; padding: 6px 13px;
  border-radius: 20px; font-size: .85rem; font-weight: 600; text-decoration: none; }
.hero-chip img { border-radius: 2px; }
.season-badge { display: inline-block; background: #fff; color: #0a3d62; font-weight: 700;
  font-size: .85rem; padding: 6px 14px; border-radius: 20px; margin-bottom: 14px;
  letter-spacing: .03em; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
/* Mobilvarianterna ar dolda som default, mediefragan nedan slar om. */
.season-badge-mobil, .hero-val-mobil { display: none; }

.hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--primary) 0%, transparent 15%);
  z-index: 1;
}

/* ================================================
   BUTTONS
   ================================================ */
.btn {
  /* inline-flex sa att texten ligger mitt i knappen aven i hojdled nar
     grannknappen i samma rad ar tvaradig (Tobbe 2026-09-09). */
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 12px 30px;
  border-radius: var(--radius-btn);
  font-size: 1.1rem;
  cursor: pointer;
  transition: opacity .15s;
  text-align: center;
  border: 2px solid transparent;
}
.btn:hover { text-decoration: none; opacity: .9; }
.btn:active { opacity: .85; }

.btn-primary { background: var(--cta); color: #000; border-color: var(--cta); }
.btn-primary:hover { background: var(--cta-hover); color: #000; }

.btn-blue { background: var(--primary); color: var(--white); border-color: var(--primary); }
.btn-blue:hover { background: var(--primary-dark); color: var(--white); }

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-secondary:hover { background: var(--primary); color: var(--white); }

.btn-white { background: var(--white); color: var(--primary); border-color: var(--white); }
.btn-white:hover { opacity: .9; }

.btn-accent { background: var(--accent); color: var(--white); border-color: var(--accent); }
.btn-accent:hover { opacity: .8; }

.btn-block { display: block; width: 100%; }

/* ================================================
   ORTER GRID (startsida)
   ================================================ */
.orter-section { padding: 56px 0; }
.orter-section + .orter-section { padding-top: 0; }

.section-header { margin-bottom: 28px; }
.section-header h2 { color: var(--primary); }
.section-label {
  display: inline-block;
  font-family: var(--font-headline);
  background: var(--primary);
  color: var(--white);
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 14px;
  border-radius: var(--radius-btn);
  margin-bottom: 8px;
}

.ort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.ort-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
}
.ort-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,84,138,.15); text-decoration: none; }

.ort-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--border);
}
.ort-card-img-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}
/* Bilden lyfts ur flodet sa att rutan alltid blir 16:9. Ligger den kvar i
   flodet bestammer bildens egna proportioner hojden - guidebilderna ar 3:2 -
   och da hoppar underkanten mellan korten. */
.ort-card-img-placeholder > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Snedstalld "Flyg ingar ej"-skylt (Frankrike-orter) - vanstra ovre hornet */
.flyg-badge {
  position: absolute;
  top: 12px;
  left: -6px;
  transform: rotate(-7deg);
  z-index: 2;
  font-family: var(--font-headline);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--primary-dark);
  color: var(--white);
  padding: 4px 12px;
  border-radius: var(--radius-btn);
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
}

.ort-card-body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; }
.ort-card-body h3 { font-family: var(--font-headline); font-size: 1.15rem; color: var(--primary); margin-bottom: 4px; text-transform: uppercase; }
.ort-card-body p { font-size: .85rem; color: var(--muted); margin: 0; }
.ort-card-arrow {
  font-family: var(--font-headline);
  font-size: .95rem;
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  /* Alltid nere till hoger i rutan, oavsett textmangd - da hoppar den inte
     mellan korten. Pilen togs bort ur markupen samtidigt. */
  margin-top: auto;
  padding-top: 10px;
  align-self: flex-end;
  display: block;
}

/* ================================================
   ORT-SIDA (vinter/sommar)
   ================================================ */
.ort-hero {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--primary);
}
.ort-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.ort-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,61,99,.35) 0%, rgba(0,61,99,.10) 40%, rgba(0,61,99,.45) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 20px 40px;
}
.ort-hero-text { width: 100%; }
.ort-hero-overlay > .container { padding-left: 30px; padding-right: 30px; }
.ort-hero-text h1 { color: var(--white); margin: 0; text-shadow: 0 3px 5px rgba(0,0,0,.6); }
.ort-hero-text p { color: rgba(255,255,255,.92); margin: 8px 0 0; font-size: 1.05rem; max-width: 70ch; text-shadow: 0 2px 5px rgba(0,0,0,.65); }
.ort-hero-text h1 .land-flagga { display: inline-block; vertical-align: middle; width: 40px; height: auto;
  margin-right: .4em; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.45); position: relative; top: -.06em; }
@media (max-width: 768px){ .ort-hero-text h1 .land-flagga { width: 30px; } }
.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.90); margin-bottom: 8px; background: rgba(0,0,0,.25); display: inline-block; padding: 5px 14px; border-radius: 4px; }
.breadcrumb a { color: rgba(255,255,255,.90); }
.breadcrumb a:hover { color: var(--white); }

.ort-content { padding: 48px 0; }

.ort-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}

.ort-main h2 { margin-top: 32px; padding-top: 32px; border-top: 2px solid var(--border); }
.ort-main h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.ort-cta-block {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  margin: 32px 0;
  text-align: center;
}
.ort-cta-block p { color: rgba(255,255,255,.9); margin-bottom: 16px; }
/* Samme gule knapp som heroen (5/10 2026, var lysebla) */
.ort-cta-block .btn { background: var(--cta); color: #000; font-size: 1.15rem; border: 2px solid var(--cta); margin: 4px 5px; }
.ort-cta-block .btn:hover { opacity: .85; }

/* Sidebar */
.ort-sidebar { }

.sidebar-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.sidebar-card h3 {
  font-family: var(--font-headline);
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  text-transform: uppercase;
}

.fakta-list { list-style: none; }
.fakta-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.fakta-list li:last-child { border-bottom: none; }
.fakta-list .label { color: var(--muted); flex-shrink: 0; }
.fakta-list .value { font-weight: 700; color: var(--primary); text-align: right; word-break: break-word; }

.temp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  font-size: .82rem;
}
.temp-row { display: contents; }
.temp-row span { padding: 3px 0; }
.temp-manad { font-weight: 700; color: var(--primary); }
.temp-dag { color: var(--text); }

/* Temperature bar chart */
.temp-chart { display: flex; flex-direction: column; gap: 6px; }
.temp-bar-row {
  display: grid;
  grid-template-columns: 36px 1fr 72px;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
}
.temp-bar-label { font-weight: 600; color: var(--primary); }
.temp-bar-track {
  position: relative;
  height: 22px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}
.temp-bar-range {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 2px;
  min-width: 2px;
}
.temp-bar-range.dag { background: var(--primary); opacity: .85; }
.temp-bar-range.natt { background: var(--primary-mid); opacity: .5; }
.temp-bar-values {
  font-size: .72rem;
  color: var(--text);
  white-space: nowrap;
  font-weight: 600;
  text-align: right;
}
.temp-zero-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e53935;
  opacity: .5;
  z-index: 1;
}
.temp-legend {
  display: flex;
  gap: 14px;
  font-size: .72rem;
  color: var(--muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.temp-legend span::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.temp-legend .leg-dag::before { background: var(--primary); opacity: .85; }
.temp-legend .leg-natt::before { background: var(--primary-mid); opacity: .5; }
.temp-legend .leg-zero::before { background: #e53935; opacity: .5; width: 2px; }

/* Price indicator */
.price-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.price-dots {
  display: flex;
  gap: 4px;
}
.price-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
}
.price-dot.active {
  background: var(--primary);
  border-color: var(--primary);
}
.price-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--primary);
}
.price-icon {
  font-size: 1.4rem;
  line-height: 1;
}
.price-icon.cheap { color: #2e7d32; }
.price-icon.medium { color: var(--primary); }
.price-icon.expensive { color: #c62828; }

.sidebar-cta .btn { width: 100%; text-align: center; font-size: .95rem; }

/* Tips */
.tips-list { counter-reset: tips; list-style: none; }
.tips-list li {
  counter-increment: tips;
  padding: 12px 0 12px 44px;
  border-bottom: 1px solid var(--border);
  position: relative;
  font-size: .95rem;
}
.tips-list li:last-child { border-bottom: none; }
.tips-list li::before {
  content: counter(tips);
  position: absolute;
  left: 0;
  top: 12px;
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
}
.tips-list strong { display: block; color: var(--primary); }

/* Visste du */
.visste-du-box {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  margin: 32px 0;
  position: relative;
  overflow: hidden;
}
.visste-du-box::before {
  content: '"';
  position: absolute;
  top: -10px;
  right: 20px;
  font-size: 8rem;
  color: rgba(255,255,255,.08);
  font-family: Georgia, serif;
  line-height: 1;
}
.visste-du-box h3,
.visste-du-box .visste-du-rubrik { color: rgba(255,255,255,.9); font-size: 1rem; margin: 0 0 10px; font-weight: 700; }
.visste-du-box p { color: rgba(255,255,255,.88); font-size: .95rem; margin: 0; }

/* Pistkarta */
.pistkarta-section { margin-top: 40px; }
.pistkarta-section img {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  width: 100%;
}
.pistkarta-btns { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* Relaterade orter */
.relaterade-section { background: var(--bg); padding: 48px 0; margin-top: 48px; }
.relaterade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.relaterad-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--primary);
  transition: transform .2s, box-shadow .2s;
}
.relaterad-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,84,138,.15); text-decoration: none; }
.relaterad-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.relaterad-card-body { padding: 12px 14px; text-align: center; }
.relaterad-card-body small { font-weight: 400; font-size: .8rem; color: var(--muted); text-transform: none; }

/* ================================================
   CONTENT PAGES (om-oss, villkor, kontakt)
   ================================================ */
.page-header {
  background: var(--primary);
  color: var(--white);
  padding: 48px 20px;
}
.page-header h1 { color: var(--white); margin: 0; }

.page-content { padding: 60px 0; max-width: 800px; }
.page-content h2 { margin: 32px 0 12px; }
.page-content ul, .page-content ol { padding-left: 1.4em; margin-bottom: 1rem; }
.page-content li { margin-bottom: .4rem; }

.contact-form {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 32px;
  margin-top: 32px;
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 6px; font-size: .9rem; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  transition: border-color .15s;
}
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--primary); }

/* Fokusmarkering. outline:none pa formularfalt och .stl-block lamnade sajten
   utan synlig fokusindikator for den som navigerar med tangentbord
   (granskningen 8/9 2026, M12). :focus-visible ligger sist i filen. */
.form-group textarea { resize: vertical; min-height: 120px; }
.form-success { color: #1a7a3a; background: #e6f4ea; border-radius: 4px; padding: 14px; margin-top: 12px; display: none; }

/* ================================================
   PISTKARTOR
   ================================================ */
.pistkartor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 48px 0;
}
.pistkarta-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pistkarta-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.pistkarta-card-body { padding: 14px 16px; }
.pistkarta-card-body h3 { font-size: 1rem; margin-bottom: 8px; }

.pistfarger { list-style: none; margin: 10px 0 12px; padding: 0; }
.pistfarger li { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.pistprick { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; }
.pf-bla   { background: #1f7ae0; }
.pf-rod   { background: #d92b2b; }
.pf-svart { background: #1a1a1a; }

.pk-landknappar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;}
.pk-landknapp{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-headline);
  font-size:.95rem;letter-spacing:.03em;text-transform:uppercase;color:var(--primary);
  background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:7px 14px;transition:background .15s,border-color .15s,color .15s;}
.pk-landknapp:hover{background:var(--primary);border-color:var(--primary);color:var(--white);text-decoration:none;}
.pk-landknapp span{font-family:var(--font-body);font-size:.78rem;font-weight:600;color:var(--muted);}
.pk-landknapp:hover span{color:rgba(255,255,255,.85);}

/* ================================================
   FOOTER
   ================================================ */
.site-footer {
  background: var(--primary);
  color: rgba(255,255,255,.95);
  padding: 48px 0 24px;
  font-size: .9rem;
}
.footer-brand {
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 32px;
}
.footer-brand .site-logo { display: inline-block; margin-bottom: 12px; }
.footer-brand p { font-size: .85rem; line-height: 1.6; max-width: 420px; color: rgba(255,255,255,.90); }

.footer-top {
  display: grid;
  /* Fyra landkolumner sedan 8/9 2026 (Frankrike lades till, H13). Auto-fit sa
     kolumnerna foljer antalet land i datat i stallet for en fast mall. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 32px;
  align-items: start;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-top .footer-col li { break-inside: avoid; }
.footer-mid {
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
}

/* Sidfotens rubriker ar h2 sedan 8/9 2026 (M13: h2 -> h4 var ett hopp i
   rubrikhierarkin pa alla 249 sidor). Klassen halller utseendet oforandrat. */
.footer-col h4,
.footer-col .footer-rubrik {
  font-family: var(--font-headline);
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.footer-col .footer-rubrik { margin-top: 0; }
.site-footer .footer-seo-wrap h2 { margin-top: 0; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: rgba(255,255,255,.88); font-size: .9rem; font-weight: 300; }
.footer-col a:hover { color: var(--white); text-decoration: none; }

.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .8rem;
  color: rgba(255,255,255,.65);
}
.footer-bottom a { color: rgba(255,255,255,.5); }
.footer-bottom a:hover { color: var(--white); }

/* Systerwebbar */
.syster-links {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 20px;
  margin-top: 20px;
  font-size: .78rem;
  color: rgba(255,255,255,.35);
  line-height: 1.8;
}
.syster-links a { color: rgba(255,255,255,.45); margin-right: 4px; }
.syster-links a:hover { color: rgba(255,255,255,.8); }

/* ================================================
   LEGAL / CONTACT PAGES
   ================================================ */
.legal-page { background: var(--bg); min-height: 60vh; }
/* Globala reseten (*{margin:0;padding:0}) nollar list-indraget - utan detta
   hamnar punktlistorna utanfor vanstermarginalen pa mobil (Tobbe 29/8) */
.legal-page ul, .legal-page ol { padding-left: 1.35rem; margin: 0 0 1.3rem; }
.legal-page li { margin-bottom: .5rem; }
.legal-page li:last-child { margin-bottom: 0; }
/* Standardbredd pa alla sidor: samma ytterram som .container, sa att
   innehallet inte hoppar i sidled nar besokaren byter sida. Brodtexten halls
   kvar pa lasbar bredd medan bildgallerier och knappraderna far hela bredden. */
.legal-container { max-width: 1400px; margin: 0 auto; padding: 26px 30px 72px; }
.legal-container > * { max-width: 1040px; }
.legal-container > .ort-galleri,
.legal-container > .legal-cta-row,
.legal-container > nav,
.legal-container > .pistkartor-grid,
.legal-container > .faq-list { max-width: none; }
@media (max-width: 768px) { .legal-container { padding: 32px 16px 56px; } }
.legal-container > h1 { font-size: clamp(1.6rem,3.5vw,2.2rem); color: var(--primary); margin-bottom: .35rem; }
.legal-updated { color: var(--muted); font-size: .9rem; margin-bottom: 32px; }

/* Samma lasbredd pa textrutorna oavsett vilken container sidan anvander */
.legal-card { max-width: 1040px; }
.legal-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 16px;
  overflow: visible;
}
/* Tabeller i legal-cards: responsiv scroll + max bredd */
.legal-card table { max-width: 100%; }
.legal-card div[style*="overflow-x"] { -webkit-overflow-scrolling: touch; max-width: calc(100vw - 48px); }
.legal-card h2 { font-family: var(--font-headline); font-size: 1.3rem; color: var(--primary); margin: 0 0 .7rem; text-transform: uppercase; }
.legal-card p { line-height: 1.75; color: #444; margin-bottom: .8rem; }
.legal-card p:last-child { margin-bottom: 0; }
.legal-card ul { padding-left: 1.4rem; margin-bottom: .8rem; }
.legal-card ul li { line-height: 1.7; margin-bottom: .3rem; color: #444; }
.legal-card a:not(.legal-cta) { color: var(--primary); }
.legal-card a.btn-secondary:hover,
.legal-card a.btn:hover { color: var(--white); }

.legal-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.legal-cta {
  display: inline-block;
  font-family: var(--font-headline);
  background: var(--primary);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 11px 26px;
  border-radius: var(--radius-btn);
  transition: opacity .15s;
}
/* Tva CTA-knappar som star direkt efter varandra utan radcontainer satt ihop
   utan mellanrum. Marginalen sitter darfor pa knappen sjalv. */
.legal-cta { margin: 8px 10px 0 0; }
.legal-cta:last-child { margin-right: 0; }
.legal-cta-row .legal-cta { margin: 0; }

.legal-cta:hover { background: var(--primary-dark); color: var(--white); text-decoration: none; }
.legal-cta.secondary { background: var(--white); color: var(--primary); border: 2px solid var(--primary); }
.legal-cta.secondary:hover { background: var(--primary); color: var(--white); }

.contact-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: start; margin-top: 10px; }
.ski-contact-form label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 5px; color: var(--text); }
.ski-contact-form input,
.ski-contact-form textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: .95rem;
  margin-bottom: 14px;
  background: var(--white);
  transition: border-color .15s;
}
.ski-contact-form input:focus,
.ski-contact-form textarea:focus { outline: none; border-color: var(--primary); }
.ski-contact-form textarea { resize: vertical; min-height: 130px; }
.legal-link { color: var(--primary); font-weight: 600; }
.legal-link:hover { color: var(--primary-dark); }

@media (max-width: 640px) {
  .contact-layout { grid-template-columns: 1fr; }
  .legal-card { padding: 20px; }
}

/* ================================================
   FAQ PAGE
   ================================================ */
.faq-list { display: flex; flex-direction: column; gap: 6px; }

.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.faq-q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 16px 50px 16px 24px;
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .02em;
  position: relative;
  transition: background .15s;
}
.faq-q:hover { background: var(--bg); }
.faq-q::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--primary-mid);
  transition: transform .2s;
}
.faq-item.open .faq-q { background: var(--bg); }
.faq-item.open .faq-q::after { content: '−'; }

.faq-a {
  display: none;
  padding: 0 20px 18px 24px;
  border-top: 1px solid var(--border);
}
.faq-item.open .faq-a { display: block; }
.faq-a p {
  margin: 14px 0 0;
  font-size: .95rem;
  color: #3a3a3a;
  line-height: 1.75;
}

/* ================================================
   SCHEMA / SEO hidden
   ================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 900px) {
  .ort-layout { grid-template-columns: 1fr; }
  .ort-sidebar { position: static; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* Mobile menu scroll lock */
body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  [id] { scroll-margin-top: 84px; }
  .header-inner { min-height: auto; padding: 10px 0; align-items: center; }
  /* 72 px tok 14 % av mobilskjermen med header (5/10 2026) */
  .site-logo img { height: 52px; width: auto; }
  .site-logo { margin-top: 0; }
  .site-nav { display: none; }
  /* iOS: traffytan for ett fixed barn i en sticky foralder hamnar fel efter
     scroll, sa tryck efter tryck tar inte. Absolut placering foljer med sjalv. */
  .burger { display: flex; position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%); z-index: 1010;
    min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .burger span { pointer-events: none; }
  .hero-btns-desktop { display: none; }
  .ort-sidebar { position: static; }

  /* Hamburger: halv bredd, slide från höger */
  .mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    right: -70%;
    width: 65%;
    height: 100vh;
    z-index: 1000;
    /* Toppen maste ligga under headern (logga + 10px padding x2 + kantlinje),
       annars skyms forsta menyraden (Tobbe 2026-09-09, iPhone). */
    padding: 100px 24px 32px;
    border-top: none;
    box-shadow: -4px 0 20px rgba(0,0,0,.25);
    transition: right .25s ease;
    overflow-y: auto;
  }
    .mobile-nav.open { right: 0; }
  /* Nar menyn ar oppen maste headern (och darmed burgaren) ligga over overlayen. */
  body.menu-open .site-header { z-index: 1001; }
  .mobile-nav a { padding: 13px 0; }
}

@media (max-width: 640px) {
  .site-nav { display: none; }
  .burger { display: flex; }
  .hero .container { grid-template-columns: 1fr; min-height: auto; }
  .hero-text { padding: 24px 20px 0; text-align: center; }
  .hero-text p { display: none; }
  .hero-text div { justify-content: center; }
  .hero-image { min-height: 0; }
  .hero-image img { position: static; height: auto; }
  .hero-image::before { display: none; }
  .hero-below-text { display: block; padding: 20px 20px 0; text-align: center; color: rgba(255,255,255,.85); font-size: .95rem; }
  .hero-btns-mobile { display: flex; gap: 8px; justify-content: center; padding: 12px 12px 2px; }
  .hero-btns-mobile .btn { padding: 8px 14px; font-size: .78rem; white-space: nowrap; }

  /* Tobbe 2026-09-02: landsknapparna under infoboxen, "Se alle skisteder"
     under dem, och sasongsmarket sist i heron men fortfarande pa blatt. */
  .season-badge-desktop, .hero-lander-desktop, .hero-btns-mobile { display: none; }
  .season-badge-mobil { display: block; width: fit-content; margin: 14px auto 18px; }
  .hero-val-mobil { display: block; margin: 22px 0 4px; }
  .hero-val-mobil .hero-lander { justify-content: center; gap: 8px; }
  /* Chipsen star pa vit botten har, inte pa den bla heron. Padding satt sa
     traffytan blir 44 px - de ar sidans huvudnavigering pa telefon. */
  .hero-val-mobil .hero-chip { background: var(--bg, #eef2f5); color: var(--primary);
    border: 1px solid var(--border); padding: 10px 15px;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .hero-btns-mobil-under { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
  /* Samma pillerform och typsnitt som landschipsen, men gul och med skugga sa
     den lyfter fram ur raden. */
  .hero-btns-mobil-under .btn {
    font-family: var(--font-body); text-transform: none; letter-spacing: 0;
    font-size: .92rem; font-weight: 700; border-radius: 22px;
    padding: 12px 26px; white-space: nowrap; border-width: 1px;
    box-shadow: 0 3px 10px rgba(9,53,92,.22);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .hero-btns-desktop { display: none; }
  .ort-hero { height: 280px; }
  .footer-top { gap: 20px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .pistkarta-btns { flex-direction: column; }
  .relaterade-grid { grid-template-columns: 1fr 1fr; }
}

/* Snabbsvar/snabbfakta-block (AI-sok + featured snippets) */
.snabbsvar {
  background: var(--white, #fff);
  border: 1px solid var(--border);
  border-left: 5px solid var(--primary);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 18px 0 26px;
}
.snabbsvar-label {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--primary);
  margin-bottom: 6px;
}
.snabbsvar p { margin: 0; line-height: 1.65; color: var(--text, #333); font-size: .97rem; }
.snabbsvar p + p { margin-top: 8px; }
.snabbsvar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.snabbsvar-chips span {
  /* Langa chips som "270 km (Skicircus) / 400 km" far bryta rad, annars skjuter
     de ut hela sidan i sidled pa mobil. */
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary);
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Flyg ingar ej-notis (SnowTrex-orter/Frankrike: enbart boende+liftkort) */
.flyg-info-box {
  background: #fff8e6;
  border: 1px solid #f0d78c;
  border-left: 5px solid #d99a00;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 18px 0 26px;
}
.flyg-info-box strong {
  display: block;
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .8rem;
  color: #7a5900;
  margin-bottom: 6px;
}
.flyg-info-box p { margin: 0; line-height: 1.6; color: var(--text, #333); font-size: .92rem; }

/* ==== Resesattsswitch (med/utan flyg) - utrullad skarpt 2026-08-24 ==== */
.rs-switch{background:#fff;border:1px solid var(--border);border-left:4px solid var(--primary);
  border-radius:var(--radius);padding:14px 18px;margin:18px 0 0;}
.rs-ios{display:inline-flex;align-items:center;gap:13px;}
.rs-etikett{font-family:var(--font-headline);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:.82rem;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap;transition:color .18s;}
.rs-etikett{border:1.5px solid transparent;border-radius:99px;padding:5px 12px;}
.rs-etikett.pa{color:var(--primary);}
html.rs-flyg .rs-etikett.pa{color:#0f5c33;border-color:#0f5c33;background:#eaf5ee;}
html.rs-utan .rs-etikett.pa{color:#8a5a10;border-color:#c07d18;background:#fdf3e3;}
.rs-spar{position:relative;width:62px;height:34px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:#0f5c33;transition:background .25s ease;flex:0 0 auto;}
.rs-spar[data-lage="utan"]{background:#c07d18;}
.rs-knopp{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.4,.9,.6,1);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;}
.rs-spar[data-lage="utan"] .rs-knopp{transform:translateX(28px);}
.rs-info{font-size:.9rem;line-height:1.6;color:var(--muted);margin:11px 0 0;max-width:78ch;}
/* Full forklaring for den som inte valt an och nar valet just andrats.
   Har besokaren valt tidigare krymper den till en kort rad som orienterar
   utan att ta plats. Den forsvinner aldrig helt, eftersom ett reglage med tva
   ord inte sager vad det filtrerar. */
html.rs-tyst .rs-lang{display:none;}
.rs-kort-rad{display:none;}
html.rs-tyst .rs-kort-rad{display:block;}
.rs-info b{color:var(--primary);font-weight:700;}
/* Last lage: reglaget visar vad som galler men gar inte att vaxla. Sidan
   forklarar sjalv varfor, sa standardtexten stangs av. */
.rs-switch.rs-last .rs-spar{cursor:default;opacity:.8;}
.rs-switch.rs-last .rs-etikett{cursor:default;}
.rs-switch.rs-last .rs-etikett:not(.pa){opacity:.4;}
.rs-switch.rs-last .rs-info{display:none;}
/* Ortkort som bara galler ett resesatt. Egna klasser i stallet for
   rs-bara-*, sa att kortet behaller sin flex-layout nar det visas. */
.kort-bara-utan{display:none;}
/* Hela sektioner respektive chip som bara hor till utan flyg-laget */
.sektion-bara-utan{display:none;}
html.rs-utan .sektion-bara-utan{display:block;}
.chip-bara-utan{display:none;}
html.rs-utan .chip-bara-utan{display:inline-flex;}
html.rs-utan .kort-bara-utan{display:flex;}
html.rs-utan .kort-bara-flyg{display:none;}

/* Text och lankar som beror pa resesattet. Bada finns alltid i HTML:en,
   CSS visar den som matchar valet. */
.rs-bara-utan{display:none;}
html.rs-utan .rs-bara-flyg{display:none;}
/* revert tar tillbaka elementets normala display, sa div blir block, span
   inline och a inline-block. Slipper en regel per elementtyp, vilket var
   precis det som gjorde att transportrutans div:ar aldrig syntes. */
html.rs-utan .rs-bara-utan{display:revert;}
/* Hamburgermenyn: .mobile-nav a{display:block} vinner i specificitet over
   .rs-bara-utan, sa Frankrike-raden behover egna regler - block (inte revert)
   sa border-bottom-strecket ligger ratt. */
.mobile-nav a.rs-bara-utan{display:none;}
html.rs-utan .mobile-nav a.rs-bara-utan{display:block;}

/* Beskrivningsrad pa ortkorten (startsidan) - max 3 rader sa korten haller jamn hojd */
.ort-card-desc{font-size:.85rem;color:var(--muted);margin:6px 0 0;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* Ankarlankar pa desktop: headern ar sticky (~120px), utan detta hamnar
   rubriken bakom den vid interna hopp. Mobilen har redan 84px langre upp. */
@media (min-width: 769px){ [id]{ scroll-margin-top: 132px; } }

/* ==== Ortgalleri: bildkort som lankar vidare till ortssidorna ==== */
.ort-galleri{margin:34px 0 40px;}
.ort-galleri h2{margin-bottom:6px;}
.ort-galleri-ingress{color:var(--muted);margin:0 0 18px;max-width:76ch;}
.ort-galleri-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
/* Alle skisteder: filterrad (5/10 2026). To kort per rad pa mobil halverer siden. */
.as-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 30px;}
.as-sok{width:100%;max-width:320px;box-sizing:border-box;font:inherit;font-size:16px;font-weight:600;color:var(--primary);
  background:#fff;border:1px solid var(--border);border-radius:22px;padding:12px 16px;-webkit-appearance:none;appearance:none;}
.as-sok:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(9,53,92,.14);}
.as-lander{display:flex;flex-wrap:wrap;gap:8px;}
.as-land{cursor:pointer;font:inherit;font-weight:600;background:var(--bg,#eef2f5);color:var(--primary);border:1px solid var(--border);padding:9px 14px;}
.as-land.vald{background:var(--primary);color:#fff;border-color:var(--primary);}
.as-sektion[hidden],.as-utan-rubrik[hidden],.ort-galleri-kort[hidden]{display:none!important;}
.as-antal{flex-basis:100%;margin:0;color:var(--muted);font-size:.9rem;min-height:1.2em;}
.as-info{flex-basis:100%;margin:0;color:var(--muted);font-size:.92rem;max-width:76ch;}
@media (max-width:600px){
  .ort-galleri-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .ort-galleri-text{padding:20px 10px 8px;}
  .ort-galleri-text strong{font-size:.95rem;}
  .as-sok{max-width:none;}
  .as-lander{gap:6px;}
  .as-land{font-size:.85rem;padding:7px 11px;}
}
.ort-galleri-kort{position:relative;display:block;border-radius:12px;overflow:hidden;
  text-decoration:none;box-shadow:0 3px 12px rgba(0,0,0,.12);}
.ort-galleri-kort img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .35s;}
.ort-galleri-kort:hover img{transform:scale(1.05);}
.ort-galleri-text{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff;}
.ort-galleri-text strong{display:block;font-family:var(--font-headline);font-size:1.05rem;line-height:1.2;}
.ort-galleri-text small{opacity:.9;font-size:.8rem;display:block;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}

/* Sokfaltet pa pistkartesidan */
.pk-sok{margin:0 0 28px;}
.pk-sok-etikett{display:block;font-family:var(--font-headline);text-transform:uppercase;
  font-size:.8rem;letter-spacing:.04em;color:var(--muted);margin-bottom:6px;}
.pk-sok input{width:100%;max-width:420px;padding:12px 16px;font-size:1rem;
  border:2px solid var(--border);border-radius:var(--radius);background:#fff;}
.pk-sok input:focus{outline:none;border-color:var(--primary);}
.pk-traffar{font-size:.9rem;color:var(--muted);margin:8px 0 0;min-height:1.2em;}

/* Tva vagar fran flygplatsen: taxi eller hyrbil */
.tt-val{margin:0 0 14px;padding-left:20px;font-size:.9rem;line-height:1.6;}
.tt-val li{margin-bottom:8px;}
.tt-val li:last-child{margin-bottom:0;}

/* Kiwitaxi-transfer i rutan Sa tar du dig till X */
.kt-transfer{border-top:1px solid var(--border);padding-top:12px;margin-bottom:12px;}
.kt-rubrik{font-size:.9rem;margin:0 0 10px;}
.kt-widget:empty{display:none;}

/* Ett grid- eller flexbarn har min-width:auto som default, sa ett brett barn
   tvingar hela kolumnen bredare an skarmen. min-width:0 later det krympa. */
.ort-layout > *, .ort-main, .stl-scroll { min-width: 0; }
.ort-main img, .ort-main svg, .ort-main table { max-width: 100%; }

/* FAQ: ett bilde per landsavsnitt sa siden ikke blir en vegg av tekst. */
.faq-bild { margin: 0 0 14px; }
.faq-bild img { width: 100%; height: 170px; object-fit: cover; display: block;
  border-radius: var(--radius, 5px); }
.faq-bild figcaption { font-size: .78rem; color: var(--muted); margin-top: 6px; }
@media (max-width: 600px) { .faq-bild img { height: 130px; } }

/* Relaterte guider: like brede celler sa radene alltid fylles ut. */
.guidelankar { display: grid; gap: 10px; margin-bottom: 32px;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }
.guidelankar .btn { font-size: .85rem; padding: 10px 12px; text-align: center;
  white-space: normal; overflow-wrap: anywhere; }

/* Guidetabeller sveps i sidled i stallet for att spracka marginalen pa mobil. */
.hs-tabellsvep { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0 24px; }
.hs-tabell { width: 100%; min-width: 320px; border-collapse: collapse; font-size: .94rem;
  background: var(--white, #fff); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; }
.hs-tabell th { background: var(--bg); text-align: left; padding: 10px 14px; }
.hs-tabell td { padding: 10px 14px; border-top: 1px solid var(--border); vertical-align: top; }
@media (max-width: 600px) {
  .hs-tabell { font-size: .86rem; }
  .hs-tabell th, .hs-tabell td { padding: 8px 10px; }
}

/* Hero-CTA: primarknappen i gult, andra resesattet bredvid i blaa kontur */
.ort-hero-cta .btn + .btn { margin-left: 10px; }
.ort-hero-cta-info { font-size: .85rem; color: var(--muted); margin: 11px 0 0; }
.ort-hero-cta-info + .btn { margin-top: 14px; }
@media (max-width: 768px) {
  /* Mobil: bara den gula knappen ser ut som en knapp, det andra alternativet
     blir en textlank pa egen rad. Ingen display har - den styrs av rs-klasserna. */
  .ort-hero-cta .cta-andra { background: none; border: 0; box-shadow: none;
    padding: 6px 0 0; width: 100%; font-size: .92rem; text-decoration: underline;
    color: var(--primary); }
  .ort-hero-cta .btn + .btn { margin-left: 0; }
}

/* Senast uppdaterad ligger direkt under heron pa alla skarmar */
.uppdaterad-hero{font-size:.82rem;color:var(--muted);margin:14px 0 0;}
/* Guidemallens rytm: hero -> 14px -> dato -> 8px -> undertekst -> 26px -> innhold.
   datumrad-block nollar bottenpaddingen sa luckan inte dubbleras (Tobbe 29/8). */
.guide-undertext{color:var(--muted);font-size:1.02rem;margin:8px 0 0;max-width:1040px;}
.datumrad-block{padding-bottom:0;}
/* Mobil: datumraden lag 42 px under heron (32 px containerpadding + 10). En rad
   tomrum for mycket, sa toppaddingen krymps (Tobbe 2026-09-09, iPhone). */
@media (max-width: 768px){.datumrad-block{padding-top:8px;}}
.legal-container > .snabbsvar:first-child{margin-top:0;}
/* Hero-CTA:n ska lasas som en knapp, inte som en textrad */
.ort-hero-cta .btn{font-size:1rem;padding:12px 26px;box-shadow:0 4px 12px rgba(0,0,0,.18);}
/* Ortsidor pa mobil: centrerade hero-CTA:er */
@media (max-width: 768px){
  .ort-hero-cta{text-align:center;}
  .uppdaterad-hero{font-size:.78rem;margin:10px 0 0;text-align:center;}
  /* Finnes det en undertekst under datoen skal begge stille seg opp samme vei
     som brodteksten, ellers ser den sentrerte datolinjen feilplassert ut. */
  .datumrad-med-undertext .uppdaterad-hero{text-align:left;}
}

/* Guide-chips: tva rutor bredvid varandra pa smala skarmar (Tobbe 29/8) */
.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) {
  .chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chip-grid .btn, .chip-grid .legal-cta { text-align: center; padding: 10px 8px; font-size: .8rem; white-space: normal; }
}
/* Nedlastingstips under kartknappene */
.nedlasting-tips { font-size: .78rem; color: var(--muted, #6c757d); margin-top: 8px; max-width: 62ch; }
html.js .nedlasting-tips [data-os] { display: none; }
html.js.os-iphone  .nedlasting-tips [data-os="iphone"],
html.js.os-ipad    .nedlasting-tips [data-os="ipad"],
html.js.os-android .nedlasting-tips [data-os="android"],
html.js.os-desktop .nedlasting-tips [data-os="desktop"] { display: inline; }
.nedlasting-tips .ned-ikon { display: inline-block; vertical-align: -3px; margin: 0 1px; color: #0a84ff; }
.nedlasting-tips .ned-ikon-pc { color: var(--text, #212529); }
/* Transportboksen pa stedsidene */
.transport-boks { background: var(--bg, #eff4f7); border: 1px solid var(--border, #afc5d8);
  border-left: 5px solid var(--primary, #09355c); border-radius: var(--radius, 5px);
  padding: 16px 20px; margin: 10px 0 26px; }
.transport-boks p { margin-bottom: 12px; }
.transport-boks p:last-child { margin-bottom: 0; }

/* Klasslosa innehallslistor fick 0 padding av reseten -> punkterna hamnade
   utanfor vanstermarginalen (Tobbe 29/8). Ge dem indrag overallt i main. */
main ul:not([class]), main ol:not([class]) { padding-left: 1.4em; margin-bottom: 1rem; }

/* ================================================
   Sesongtidslinje (includes/sasongstidslinje.php)
   Portert fra skidresor.se. UTEN dette blokket faller SVG-en tilbake pa sin
   egen intrinsic-storrelse og blir bare drove hundre piksler bred (Tobbe 2/9,
   iPad: "gar ikke helt ut til hoyre marg").
   ================================================ */
.stl-wrap { margin: 18px 0 26px; }
.stl-topp { display: flex; justify-content: space-between; font-size: .78rem;
  color: var(--muted); margin-bottom: 5px; gap: 10px; }
.stl-topp span:last-child { text-align: right; }
.stl-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  min-width: 0; }
.stl-svg { width: 100%; display: block; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--border); }
/* Blokkene skal ga an a trykke pa og vise dato */
.stl-block { cursor: pointer; transition: opacity .12s; }
.stl-block:hover, .stl-block:focus { opacity: .78; outline: none; }
/* Tooltipen far en pil som peker opp mot blokken man trykket pa. */
.stl-tip { position: relative; margin: 12px 0 0; padding: 10px 13px; background: var(--bg);
  border-left: 4px solid var(--primary); border-radius: 4px; font-size: .85rem;
  line-height: 1.45; animation: stl-in .18s ease-out; }
.stl-tip::before { content: ''; position: absolute; top: -7px; left: var(--pil, 50%);
  transform: translateX(-50%); border-left: 7px solid transparent;
  border-right: 7px solid transparent; border-bottom: 7px solid var(--pilfarg, var(--primary)); }
@keyframes stl-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.stl-block.vald { stroke: #09355c; stroke-width: .5; }
.stl-man { position: relative; height: 18px; margin-top: 4px; font-size: .72rem; color: var(--muted); }
.stl-man span { position: absolute; transform: translateX(-2px); }
.stl-etiketter { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px;
  font-size: .8rem; color: var(--text); }
.stl-etiketter span { display: inline-flex; align-items: center; gap: 6px; }
.stl-etiketter i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
@media (max-width: 700px) {
  /* Ikke klem sammen tidslinjen - la den vaere 640px bred og scrolle i sideveien.
     Halve tidslinjen (pasken og de franske feriene) la utenfor skjermen uten at
     noe antydet at den gikk an a dra i - derfor skyggekanten i hoyre kant
     (granskningen 8/9 2026, L9). */
  .stl-scroll > * { min-width: 640px; }
  .stl-scroll {
    background:
      linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1) 12px) 100% 0 / 26px 100% no-repeat,
      linear-gradient(to left, rgba(9,53,92,.16), rgba(9,53,92,0)) 100% 0 / 26px 100% no-repeat;
    background-attachment: local, scroll;
  }
  .stl-man { font-size: .68rem; }
  .stl-etiketter { font-size: .76rem; gap: 5px 14px; }
  .stl-topp { font-size: .72rem; }
  .stl-scroll::-webkit-scrollbar { height: 6px; }
  .stl-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
}

/* Svajp-pilen: pa mobil ar tidslinjen 640 px bred och scrollar i sidled, men
   inget visade att den gick att dra. En pulserande pil i hoger kant plus en
   vit toning tacker det tills lasaren svept en gang (Tobbe 2026-09-09). */
.stl-ram { position: relative; }
.stl-svajp { display: none; }
@media (max-width: 700px) {
  .stl-ram::after { content: ''; position: absolute; top: 0; right: 0; bottom: 22px; width: 44px;
    border-radius: 0 var(--radius) var(--radius) 0; pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.92)); }
  .stl-svajp { display: inline-flex; align-items: center; gap: 3px; position: absolute; right: 8px; top: 42%;
    padding: 6px 9px 6px 12px; background: var(--primary); color: #fff; font-size: .74rem; font-weight: 700;
    letter-spacing: .02em; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none;
    white-space: nowrap; animation: stl-svajp 1.4s ease-in-out infinite; }
  .stl-svajp svg { width: 14px; height: 14px; }
  .stl-ram::after, .stl-svajp { transition: opacity .6s; }
  .stl-ram.svept::after, .stl-ram.svept .stl-svajp { opacity: 0; }
  @keyframes stl-svajp { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(6px, -50%); } }
}

/* Knappar i knapprader ar lika hoga (grid/flex stracker dem) - da ska texten
   sitta mitt i knappen aven i hojdled, inte langst upp (Tobbe 3/9 2026). */
.guidelankar .btn, .legal-cta-row .legal-cta, .legal-cta-row .btn, .pistkarta-btns .btn,
.chip-grid .btn, .chip-grid .legal-cta, .ort-cta-block .btn {
  /* inline-flex (6/10 2026): display:flex gjorde knappene i .ort-cta-block like brede
     som hele boksen pa desktop. I flex/grid-rader blir de blokk uansett. */
  display: inline-flex; align-items: center; justify-content: center; text-align: center; }

/* ---- Tillganglighet: synlig fokus och reduced motion (M12, 8/9 2026) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.stl-block:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Pa morka flater syns den primara fargen daligt, dar tar vi vit ram. */
.site-footer a:focus-visible,
.site-header a:focus-visible,
.ort-hero a:focus-visible {
  outline-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Presisering under bestillingsknappen om hvilket heiskort som inngar (C2). */
.ort-cta-block .ort-cta-note { font-size: .85rem; opacity: .85; margin-top: 6px; }

/* Kildeopplysning under sesongtidslinjen (L13, 8/9 2026). */
.stl-kilde { font-size: .78rem; color: var(--muted); margin: 8px 0 0; }

/* Knappraderna pusslas ihop (Tobbe 2026-09-09): knapparna far vaxa och fylla
   raden, sa att en kort knapp lagger sig bredvid en lang i stallet for att
   lamna ett tomt falt. Ligger SIST i filen sa att regeln vinner over
   .guidelankar-gridet och chip-grid pa mobil. */
.guidelankar, .chip-grid { display: flex; flex-wrap: wrap; }
.guidelankar .btn, .chip-grid > .btn, [style*="flex-wrap:wrap"] > .btn, [style*="flex-wrap: wrap"] > .btn { flex: 1 1 auto; }
/* ...men aldri bredere enn en vanlig knapp pa desktop (6/10 2026): en knapp som
   havnet alene pa en ny rad ble 974 px bred. */
@media (min-width: 601px) {
  .guidelankar .btn, .chip-grid > .btn, .chip-grid > .legal-cta, .legal-cta-row > .btn, .legal-cta-row > .legal-cta,
  [style*="flex-wrap:wrap"] > .btn, [style*="flex-wrap: wrap"] > .btn { max-width: 380px; }
}

/* Svajp-pilen som generell funktion (Tobbe 2026-09-09): varje tabell som ar
   bredare an mobilskarmen far en scrollbehallare, en pulserande pil i hoger
   kant och en vit toning, som tonar bort nar lasaren dragit en gang.
   Skriptet ligger i includes/end.php. Sportlovsgrafen (.stl-) och bilguiden
   (.kb-) har egna kopior av samma monster. */
.svajp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.svajp-ram { position: relative; }
.svajp-pil { display: none; }
@media (max-width: 720px) {
  .svajp-ram::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
    pointer-events: none; transition: opacity .6s;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.92)); }
  .svajp-pil { display: inline-flex; align-items: center; gap: 3px; position: absolute; right: 8px; top: 64px;
    padding: 6px 9px 6px 12px; background: var(--primary); color: #fff; font-size: .74rem; font-weight: 700;
    letter-spacing: .02em; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none;
    white-space: nowrap; z-index: 3; transition: opacity .6s; animation: svajp-pil 1.4s ease-in-out infinite; }
  .svajp-pil svg { width: 14px; height: 14px; }
  .svajp-ram.svept::after, .svajp-ram.svept .svajp-pil { opacity: 0; }
  @keyframes svajp-pil { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
}

/* ---- SnowTrex fran-priser (O1, 21/9 2026). Fylls av JS fran /priser/snowtrex.json ---- */
.st-fra[hidden], .st-boenden[hidden] { display: none !important; }
/* skidresor.se: platshallaren med rs-bara-utan far inte vinna over reglagets dolda lage */
.rs-bara-utan.ort-hero-pris { display: none; }
html.rs-utan .rs-bara-utan.ort-hero-pris { display: block; }
.ort-hero-pris { display: block; font-family: var(--font-headline); font-size: 1.15rem; font-weight: 700; color: var(--primary); margin: 12px 0 0; }
.ort-card-pris { display: block; margin-top: 6px; font-weight: 700; color: var(--primary); font-size: .9rem; }
.sidebar-pris { display: block; font-family: var(--font-headline); font-size: 1.35rem; font-weight: 700; color: var(--primary); margin: 0 0 10px; }
.st-boenden { margin: 0 0 40px; }
.st-boenden-intro { font-size: .9rem; color: var(--muted); margin-bottom: 16px; }
.st-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.st-kort { background: #fff; border: 1px solid #dfe7ee; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; }
.st-kort img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.st-kort-body { padding: 12px 14px; display: flex; flex-direction: column; flex: 1; gap: 3px; }
.st-kort h3 { font-size: 1rem; margin: 0 0 2px; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.st-kort .st-stj { color: #e0a800; font-size: .85rem; white-space: nowrap; }
.st-kort .st-stad, .st-kort .st-betyg, .st-kort .st-natt { font-size: .82rem; color: var(--muted); }
.st-kort .st-pris { font-family: var(--font-headline); font-size: 1.2rem; font-weight: 700; color: var(--primary); margin-top: auto; padding-top: 6px; }
.st-kort .btn { margin-top: 8px; text-align: center; font-size: .85rem; padding: 8px 12px; }
.st-alla { margin-top: 14px; font-size: .9rem; }
/* Bildgalleri i korten (23/9 2026): scroll-snap = svajp pa mobil, pilar for mus. */
.st-gal { position: relative; }
.st-gal-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.st-gal-scroll::-webkit-scrollbar { display: none; }
.st-gal-scroll img { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
/* Enhetliga svajppilar (23/9 2026): samma runda vita pil som utflyktskortens .akt-pil,
   alltid synlig, slacks i andarna (disabled) - sa mobilen ser att det gar att svajpa. */
.st-pil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.92); color: var(--primary, #09355c); font-size: 1.15rem; line-height: 34px; text-align: center; padding: 0; box-shadow: 0 2px 8px rgba(9,53,92,.3); transition: background .15s ease, opacity .15s ease; }
.st-pil:hover { background: #fff; }
.st-pil[disabled] { opacity: 0; pointer-events: none; }
.st-pil-prev { left: 8px; } .st-pil-next { right: 8px; }
.st-pil-liten { width: 26px; height: 26px; line-height: 26px; font-size: 1rem; }
.st-svep .st-pil-prev { left: -4px; } .st-svep .st-pil-next { right: -4px; }
.st-gal-n { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; padding: 2px 7px; border-radius: 10px; pointer-events: none; }
.st-kort .st-avst { font-size: .82rem; color: var(--muted); }
/* Veckopriser (23/9 2026): chips per avresedatum, raden svajpas i sidled. Skidhyra = rad i blocket. */
.st-hyra { font-size: .9rem; color: var(--text, #223); margin: -8px 0 16px; }
.st-hyra[hidden] { display: none !important; }
.st-veckor { margin: 8px 0 2px; }
.st-veckor-lbl { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; }
.st-svep { position: relative; }
/* Raden tonas ut i hogerkanten sa sista chipen syns "halv" = det finns mer att svajpa. */
.st-veckor-rad { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 18px 4px 0; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.st-veckor-rad::-webkit-scrollbar { display: none; }
.st-vecka { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; min-width: 66px; padding: 4px 7px 5px; border: 1px solid #dfe7ee; border-radius: 5px; font-size: .74rem; color: var(--muted); text-decoration: none; line-height: 1.25; background: #f7f9fb; }
.st-vecka i { font-style: normal; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #b45309; min-height: .9em; line-height: 1.1; margin-bottom: 2px; white-space: nowrap; }
.st-vecka b { font-size: .82rem; color: var(--primary); white-space: nowrap; }
.st-vecka:hover { border-color: var(--primary); }
.st-vecka-min { border-color: var(--primary); background: #fff; }
.st-vecka-lov { background: #fff7ed; border-color: #fdba74; }
.st-vecka-lov.st-vecka-min { border-color: var(--primary); }
/* Liftkortsvarianter (23/9 2026): hopfalld tabell i boendeblocket. */
.st-liftkort { margin: -6px 0 18px; font-size: .9rem; }
.st-liftkort[hidden] { display: none !important; }
.st-liftkort summary { cursor: pointer; font-weight: 700; color: var(--primary); }
.st-liftkort-n { font-weight: 400; color: var(--muted); }
.st-liftkort-intro { font-size: .85rem; color: var(--muted); margin: 8px 0; }
.st-liftkort table { border-collapse: collapse; width: 100%; max-width: 560px; font-size: .85rem; }
.st-liftkort th, .st-liftkort td { text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid #e6ecf1; vertical-align: top; }
.st-liftkort th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.st-liftkort td:last-child, .st-liftkort th:last-child { white-space: nowrap; text-align: right; padding-right: 0; }
/* ---- /SnowTrex fran-priser ---- */
/* ---- Sprakval for bestillingen (24/9 2026): ruta over sidan, to knapper ---- */
.st-sprak { position: fixed; inset: 0; z-index: 2000; background: rgba(9,53,92,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.st-sprak[hidden] { display: none !important; }
.st-sprak-ruta { position: relative; background: #fff; border-radius: 8px; padding: 26px 24px 18px; max-width: 440px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.st-sprak-ruta h3 { margin: 0 32px 8px 0; font-size: 1.15rem; text-transform: none; letter-spacing: 0; }
.st-sprak-ruta p { margin: 0 0 14px; font-size: .92rem; color: var(--text, #223); }
.st-sprak-x { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; background: none; font-size: 1.6rem; line-height: 34px; cursor: pointer; color: var(--muted); }
.st-sprak-knapper { display: flex; flex-direction: column; gap: 10px; }
.st-sprak-knapper .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 14px; text-align: center; }
.st-sprak-knapper .btn small { font-weight: 400; font-size: .78rem; opacity: .9; text-transform: none; letter-spacing: 0; }
.st-sprak-not { margin: 12px 0 0 !important; font-size: .78rem !important; color: var(--muted) !important; }

/* /billige-skiferier/: bestillingsrute med bilde (5/10 2026, samme som skidresor.se) */
.billig-boka{display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin:0 0 28px;box-shadow:0 3px 14px rgba(9,53,92,.08);}
.billig-boka img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
.billig-boka-text{padding:22px 22px 24px;}
.billig-boka-text h2{margin:0 0 10px;}
.billig-boka-text p{margin:0 0 16px;}
.billig-boka-knappar{display:flex;flex-wrap:wrap;gap:10px;}
.billig-boka-knappar .btn{text-align:center;}
.legal-card .billig-boka-knappar .btn-primary{color:#000;}
@media (min-width:820px){
  .billig-boka{grid-template-columns:5fr 6fr;align-items:stretch;}
  .billig-boka-text{padding:28px 30px;align-self:center;}
}
@media (max-width:600px){ .billig-boka-knappar .btn{flex:1 1 100%;} }

/* Kompakte stedskort pa mobil (5/10 2026): ett kort per rad gjorde forsiden ~57 000 px
   og landsidene ~24 000 px. To per rad, uten beskrivelse og "Les mer", pris beholdes. */
@media (max-width:600px){
  .orter-section .ort-grid, .ort-layout-land .ort-grid, main .ort-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .ort-grid .ort-card-body{padding:10px 10px 12px;}
  .ort-grid .ort-card-body h3{font-size:.95rem;line-height:1.2;}
  .ort-grid .ort-card-body h3 img{display:none;}
  .ort-grid .ort-card-body p{font-size:.78rem;}
  .ort-grid .ort-card-desc, .ort-grid .ort-card-arrow{display:none;}
  .ort-grid .ort-card-pris{font-size:.82rem;margin-top:4px;}
  .ort-grid .ort-card-img-placeholder{aspect-ratio:4/3;}
}

/* Sidefot: landknapper (6/10 2026) */
.footer-land{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:8px 0 28px;}
.footer-land-kort{display:flex;align-items:center;gap:10px;padding:12px 14px;min-height:56px;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.05);color:#fff;text-decoration:none;}
.footer-land-kort:hover{background:rgba(255,255,255,.12);text-decoration:none;color:#fff;}
.footer-land-kort img{border-radius:2px;flex:none;}
.footer-land-kort span{display:flex;flex-direction:column;line-height:1.25;}
.footer-land-kort strong{font-family:var(--font-headline);font-size:1rem;text-transform:uppercase;letter-spacing:.03em;font-weight:600;}
.footer-land-kort small{font-size:.8rem;opacity:.7;}
.footer-land-verktoy{border-color:var(--cta);}
@media (max-width:600px){
  .footer-land{grid-template-columns:1fr 1fr;}
  /* Guidelenkene: storre treffflate pa mobil */
  .footer-inline li{margin-bottom:0;}
  .footer-inline a{display:inline-block;padding:7px 0;}
}

/* Kompakt bestillingsrute pa guidesidene (6/10 2026) */
.bestill-ruta{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--border);border-left:5px solid var(--cta);border-radius:var(--radius);
  padding:16px 20px;margin:0 0 28px;box-shadow:0 2px 10px rgba(9,53,92,.06);}
.bestill-ruta-tekst{flex:1 1 320px;}
.bestill-ruta-tekst strong{display:block;font-family:var(--font-headline);text-transform:uppercase;letter-spacing:.02em;color:var(--primary);font-size:1.1rem;margin-bottom:2px;}
.bestill-ruta-tekst p{margin:0;font-size:.92rem;color:var(--muted);}
.bestill-ruta .btn{white-space:nowrap;color:#000;}
@media (max-width:600px){ .bestill-ruta .btn{flex:1 1 100%;text-align:center;} }

/* Sokresultatens namn direkt under sokrutan pa Alla orter (6/10 2026) */
.as-traffar{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;margin:0;}
.as-traffar:empty{display:none;}
.as-traffar a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;box-sizing:border-box;border-radius:22px;
  background:var(--primary);color:#fff;font-weight:600;font-size:.92rem;text-decoration:none;}
.as-traffar a:hover{background:var(--primary-dark,#062a49);color:#fff;text-decoration:none;}
.as-traffar a:first-child{box-shadow:0 0 0 3px var(--cta,#fbe17e);}
.as-traffar span{align-self:center;color:var(--muted);font-size:.88rem;}