/* ============================================
   ANDRE BOOMRAADER — kortene i en sveiperad (VillageCarousel)
   Rullingen, telleren og pilene eier Sveiperad (sveiperad.css). Her staar
   seksjonen, overskriften og kortet (mobilgjennomgang, okt 2026).
   ============================================ */
.carousel-section {
  padding: var(--space-3xl) 0 var(--space-5xl);
  overflow: hidden;
}

.carousel-section.is-hidden {
  display: none;
}

/* ── Header ── */
.carousel-header {
  display: block;
  padding: 0 var(--space-xl);
  max-width: var(--container-max);
  margin: 0 auto var(--space-2xl);
}

.carousel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.carousel-eyebrow::after {
  content: '';
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, var(--color-gold), transparent);
}

.carousel-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
}

.carousel-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-secondary);
  max-width: 540px;
  margin: var(--space-sm) 0 0;
}

/* Dark stage override */
.home-villages-stage .carousel-subtitle {
  color: rgba(250, 248, 245, 0.55);
}

/* Raden begynner der overskriften begynner, og sporet gaar ut i margen. */
.carousel-rad {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.carousel-rad .sveiperad { --sveiperad-luft: var(--space-xl); }

/* ── Village Card ── */
.village-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-cream);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.04);
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    border-color var(--duration-normal);
}

@media (hover: hover) {
  .village-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(125, 211, 192, 0.3);
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.04),
      0 16px 32px rgba(0, 0, 0, 0.08),
      0 32px 64px rgba(0, 0, 0, 0.06),
      0 0 0 1px rgba(125, 211, 192, 0.1);
  }

  .village-card:hover .village-card-image img {
    transform: scale(1.06);
  }
}

.village-card-image {
  position: relative;
  height: clamp(180px, 14vw, 280px);
  overflow: hidden;
}

.village-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out-expo);
}

.village-card-body {
  padding: var(--space-xl);
  position: relative;
  background: linear-gradient(
    135deg,
    var(--color-cream) 0%,
    rgba(143, 184, 202, 0.08) 100%
  );
}

/* Subtle colored accent line at top of card body */
.village-card-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-xl);
  width: 40px;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-aurora),
    var(--color-gold)
  );
  border-radius: var(--radius-full);
}

.village-card-title,
.village-card-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.village-card-location {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.village-card-location::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-size: contain;
  flex-shrink: 0;
}

.village-card-description,
.village-card-tagline {
  font-size: var(--text-sm);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.village-card-meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.village-card-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.village-card-meta span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-aurora);
}

/* Alignment tweak for village pages */
.village-page .carousel-section {
  padding: var(--space-xl) 0 var(--space-3xl);
}

.village-page .carousel-header {
  /* Overskriften står i lesebredden (1060), på kant med kildene over;
     bare raden går kant til kant (Tom 19. okt 2026). Boksen er
     border-box, så sidepolstringen legges til: med 1060 rett på sto
     teksten 32 px lenger inn enn kildene. */
  max-width: calc(1060px + 2 * var(--space-xl));
  /* Sidemargen fra grunnregelen beholdes: nullstilt sto overskriften
     kant i kant med skjermen fra 769 til ca. 1200 px. */
  margin-bottom: var(--space-lg);
}

/* Raden bruker hele skjermbredden (Tom 19. okt 2026): innrammet til
   1200 px ble det fjerde kortet kuttet midt på siden, med tom plass på
   begge sider. Nå begynner første kort ved sidemargen, på linje med
   overskriften, og kuttet skjer i skjermkanten, der det leser som en
   invitasjon til å sveipe. Sidepolstringen fra .carousel-rad holder
   vinduet (som stikker --sveiperad-luft ut) innenfor skjermen. */
.village-page .carousel-rad { max-width: none; }

/* ── Responsive: 1200px ── */
@media (max-width: 1200px) {
  .village-card-body {
    padding: var(--space-lg);
  }

  .village-card-body::before {
    left: var(--space-lg);
  }

  .village-card-title,
  .village-card-name {
    font-size: var(--text-xl);
  }

}

/* ── Responsive: 768px (mobile) ── */
@media (max-width: 768px) {
  .carousel-section {
    padding: var(--space-xl) 0 var(--space-2xl);
  }

  /* Venstrestilt, paa linje med raden under (mobilgjennomgang, okt 2026). */
  .carousel-header {
    margin-bottom: var(--space-sm);
    padding: 0 var(--space-lg);
  }

  .carousel-subtitle {
    max-width: none;
  }

  .carousel-title {
    line-height: var(--linje-display);
  }

  .carousel-rad { padding: 0 var(--space-lg); }
  .carousel-rad .sveiperad { --sveiperad-luft: var(--space-lg); }

  .village-card-image {
    height: 170px;
  }
}

/* Mobil: seksjonsluften (styles.css, --mobil-seksjon). */
@media (max-width: 767px) {
  .village-page .carousel-section { padding-bottom: var(--mobil-seksjon); }
}