/* Grundlæggende indstillinger */
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f1ea; /* En let "rustik" creme-farve */
  color: #333;
  overflow-x: hidden;
}

/* HERO SEKTION - Det her styrer toppen */
/* HEADER SEKTION - Tekst over billede */
.header-container {
  text-align: center;
  background: #f4f1ea; /* Samme farve som baggrunden, så det blender ind */
  padding-top: 40px;   /* Luft i toppen */
}

.header-text {
  max-width: 800px;
  margin: 0 auto 30px auto; /* Centreret tekst med 30px luft ned til billedet */
  padding: 0 20px;
}

.main-title {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.5rem); /* Lidt større tekst nu hvor den står frit */
  color: #333;
  font-weight: 700;
  line-height: 1.2;
}

.lead-text {
  margin: 10px 0 0 0;
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  color: #7d6b63; /* En flot brun nuance der matcher resten */
  font-weight: 500;
}

.hero-image-container {
  width: 100%;
  max-width: 1100px; /* Samme bredde som resten af indholdet */
  margin: 0 auto;    /* Centrer billedet */
  height: auto;      /* Lad højden tilpasse sig billedet */
  max-height: 500px; /* Men stop det fra at blive ENORMT på store skærme */
  overflow: hidden;  /* Skjuler det der stikker ud hvis vi beskærer */
  border-radius: 12px; /* Runde hjørner på billedet ser lækkert ud her */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* En lille skygge for dybde */
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Sikrer at billedet fylder rammen ud */
  object-position: center 20%; /* Fokuserer stadig på ansigterne */
  display: block;
}

/* Mobil-tilpasning specifikt for headeren */
@media (max-width: 720px){
  .header-container {
    padding-top: 20px;
  }
  
  .hero-image-container {
    max-height: 250px; /* Mindre højde på mobilen så man hurtigt ser indholdet */
    border-radius: 0;  /* På helt små skærme kan det se godt ud at gå helt til kant */
  }
}

/* LAYOUT GRID */
.main-container {
  max-width: 1100px;
  margin: 40px auto; 
  padding: 0 20px;
}

.layout-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* To kolonner på computer */
  gap: 25px;
  align-items: start;
}

/* KORT DESIGN */
.card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.time-badge {
  background: #8b5e3c; /* Varm rustik brun */
  color: white;
  padding: 6px 15px;
  border-radius: 8px;
  font-weight: bold;
}

.event-row {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.btn-primary {
  display: block;
  text-align: center;
  background: #8b5e3c;
  color: white;
  text-decoration: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: bold;
  margin: 15px 0;
}

.wishlist-link {
  display: inline-block;
  color: #8b5e3c;
  font-weight: bold;
  text-decoration: none;
  padding: 5px 0;
}

.bottom-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-top: 30px;
}

.site-footer {
  text-align: center;
  padding: 40px;
  color: #7d6b63;
}

.divider { border: 0; border-top: 1px solid #eee; margin: 15px 0; }
.small { font-size: 0.9rem; color: #7d6b63; }

/* RESPONSIVE TILPASNINGER */

/* Tablet og mindre */
@media (max-width: 900px){
  .layout-grid {
    grid-template-columns: 1fr; /* En kolonne på små skærme */
  }
}

/* Mobil */
@media (max-width: 720px){
  .hero-header { height: 280px; } /* Hero bliver lavere på mobilen */
  
  .event-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .time-badge {
    align-self: flex-start;
  }
}