  /* ─── Flash-fix ─── */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #252525;
    background: #fdfdfd;
    margin: 0;
    padding: 0;

    /* Start usynlig for at undgå flash ved indlæsning */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in;
}

/* Denne klasse tilføjes via JavaScript når siden er klar */
body.is-ready {
    opacity: 1;
    visibility: visible;
}

/* Hold resten af din eksisterende CSS herunder... */
body.has-fixed-header { padding-top: 80px; }

    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    h1 {
      color: #595959;
      margin-bottom: 0.5rem;
    }

    .ad-header {
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
    }

.ad-info { flex: 40%; }
.ad-image { flex: 60%; }


    .ad-image img {
      width: 100%;
      border-radius: 12px;
      object-fit: cover;
    }

    .ad-meta p {
      margin: 0.25rem 0;
      color: #555;
    }


    .description, .race-info {
      margin-top: 20px;
      padding: 20px;
      border-radius: 12px;
    }
.description {
  margin-top: 20px;
  padding: 0;         /* fjern indvendig padding */
  border: none;       /* fjern kant */
  background: none;   /* fjern baggrund */
  color: #252525;     /* evt. samme som body */
  font-size: 1rem;
  line-height: 1.5;
}

    .race-info {
      background: #fdfdfd;
      border: 1px solid #c1c1c1;
      color: #4c534e;
      font-weight: 600;
    }

    .puppy-list, .related-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 24px;
      margin-top: 40px;
    }



.puppy-card img {
    width: auto;
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    margin-bottom: 0.25rem;
    cursor: pointer;
    object-fit: contain;

    /* tilføj smooth transition */
    transition: transform 0.3s ease;
}

.puppy-card img:hover {
    transform: scale(1.05); /* zoom ind ved hover */
}



    .map-container {
      margin-top: 40px;
      border-radius: 12px;
      overflow: hidden;
      height: 300px;
    }

.report-btn {
    display: inline-block;
    margin-top: 20px;
    font-weight: 600;
    text-decoration: underline;  /* kun underline, ingen baggrund */
    color: #e0e0e0;             /* rød tekst */
    background: none;            /* fjern baggrund */
    border: none;                /* ingen kant */
    padding: 0;                  /* ingen ekstra padding */
    cursor: pointer;             /* cursor pointer */
    transition: color 0.2s,  transform 0.15s;
}

.report-btn:hover {
    color: #c0392b;             /* lidt mørkere rød ved hover */
        transform: scale(1.05);
}
.share-btn {
    display: inline-block;
    margin-top: 20px;
    font-weight: 600;
    text-decoration: none;   /* fjernet underline */
    color: #3498db;
    cursor: pointer;
    transition: color 0.2s, transform 0.15s;
}

.share-btn:hover {
    color: #1d6fa5;
    transform: scale(1.05);
}







      /* Galleri grid */
.gallery-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

/* Enkelt galleri-item */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover-effekt: zoom og skygge */
.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Besked hvis galleriet er tomt */
.gallery-preview p {
    grid-column: 1 / -1;
    color: #888;
    font-style: italic;
    text-align: center;
}



      .ad-meta-grid {
  display: flex;
  align-items: flex-start;  /* Billedet holder sig på linje */
  gap: 2rem;
  margin-top: 1rem;
}

.ad-meta-left {
  flex: 1; /* tager alt pladsen, der er tilbage */
}

.ad-meta-right {
  display: inline-block;   /* fit-content */
  background: none;        /* ingen baggrund */
  border: none;            /* ingen kant */
  border-radius: 0;        /* ingen afrunding */
  padding: 0;              /* ingen ekstra padding */
  white-space: nowrap;     /* forhindrer linjeskift */
  color: #252525;          /* samme som body tekst */
  font-weight: 600;        /* lidt fremhævning */
  text-align: left;        /* venstrestillet tekst */
}






.stambook-image {
    text-align: center;
}

.stambook-image img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.stambook-image img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}


