@import url("design.css");

/* Fælles feriedagbogsdesign. Reference: Norge 2025. */
.feriedagbog { margin:0; background:var(--ferie-background); color:var(--ferie-text); font-family:var(--ferie-font); line-height:var(--ferie-line-height); }
.feriedagbog *, .feriedagbog *::before, .feriedagbog *::after { box-sizing:border-box; }
.diary-main { max-width:var(--ferie-content-width); margin:auto; padding:30px 18px; }
.diary-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:9px; width:100%; margin:0 0 35px; padding:20px 0 0; position:static; background:transparent; }
.diary-nav a, .diary-back { display:inline-flex; align-items:center; justify-content:center; max-width:100%; background:#fff; color:var(--ferie-accent); border:1px solid #d8e4e8; border-radius:var(--ferie-button-radius); padding:var(--ferie-button-padding); font:13px/1.5 Arial,sans-serif; text-decoration:none; box-shadow:0 2px 7px #173a4810; transition:background .15s,color .15s; }
.diary-nav a:hover, .diary-nav a:focus-visible, .diary-back:hover, .diary-back:focus-visible { background:#28637b; color:#fff; outline-offset:2px; }
.diary-entry { padding:20px 0 40px; border-bottom:1px solid #ddd; scroll-margin-top:20px; }
.diary-heading { font-size:22px; font-weight:400; margin:22px 0; }
.diary-text { background:#fff; padding:clamp(20px,4vw,45px); border:1px solid var(--ferie-border); border-radius:var(--ferie-radius); box-shadow:var(--ferie-shadow); font-size:var(--ferie-body-size); line-height:var(--ferie-line-height); overflow-wrap:anywhere; }
.diary-text--lines { white-space:pre-line; }
.diary-text p { margin:0 0 1.15em; }
.diary-text p:last-child { margin-bottom:0; }
.diary-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(225px,100%),1fr)); gap:16px; margin-top:26px; }
.diary-gallery figure { margin:0; min-width:0; }
.diary-gallery > a { display:block; min-width:0; }
.diary-gallery img, .diary-gallery video { width:100%; height:225px; object-fit:cover; border-radius:9px; display:block; background:#111; }
.diary-gallery video { object-fit:contain; }
/* Bevar ubeskårne miniaturevisninger, også når kildefilens navn ændres til WebP. */
.diary-gallery img[data-thumbnail-fit="contain"] { object-fit:contain; }
.diary-gallery img { cursor:zoom-in; }
.diary-gallery figcaption { font:14px/1.5 Arial,sans-serif; color:#53605e; margin:8px 2px; overflow-wrap:anywhere; }
.diary-top { display:inline-block; margin-top:12px; font:14px/1.5 Arial,sans-serif; color:var(--ferie-accent); text-decoration:none; }
.diary-footer { text-align:center; padding:40px 18px; color:#657; }
.diary-lightbox { display:none; position:fixed; inset:0; background:#000e; z-index:10; align-items:center; justify-content:center; flex-direction:column; padding:40px 55px; }
.diary-lightbox.open { display:flex; }
.diary-lightbox img { max-width:100%; max-height:82vh; object-fit:contain; }
.diary-lightbox p { color:#fff; text-align:center; font:14px/1.5 Arial,sans-serif; max-height:15vh; overflow:auto; margin:8px 0; }
.diary-lightbox button { position:absolute; background:#ffffff25; color:#fff; border:0; font-size:35px; cursor:pointer; padding:8px 14px; }
.diary-lightbox .close { top:12px; right:15px; }
.diary-lightbox .prev { left:5px; }
.diary-lightbox .next { right:5px; }
@media(max-width:600px) {
  .diary-heading { font-size:20px; }
  .diary-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .diary-gallery img, .diary-gallery video { height:150px; }
  .diary-lightbox { padding:30px 35px; }
}

/* Retur til ferieoversigten, før titel og datonavigation. */
.diary-back { position:static; margin:0 0 20px; }

/* Fælles varianter til de eksisterende dagbøgers HTML og billedvisere. */
.diary-nav-inner { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.diary-editorial { display:none; }
.diary-text + .diary-text { margin-top:20px; }
.diary-paragraph-lines { white-space:pre-line; }
.diary-gallery button { display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.diary-gallery .map-figure img { object-fit:contain; background:transparent; cursor:default; }
.diary-gallery .video, .diary-gallery .video-tile { position:relative; min-width:0; }
.diary-gallery video:fullscreen { width:100%; height:100%; object-fit:contain; }
.diary-gallery .video-fullscreen { position:absolute; top:7px; right:7px; width:auto; padding:5px 8px; border:1px solid #ffffff99; border-radius:5px; background:#29383be8; color:white; font:12px Arial,sans-serif; }
.diary-lightbox--hidden-toggle:not([hidden]) { display:flex; }
.diary-lightbox[hidden] { display:none; }
.diary-lightbox :is(#caption,#lightcap,.viewcap) { color:white; text-align:center; font:14px/1.5 Arial,sans-serif; max-height:15vh; overflow:auto; padding:8px 0; }
.diary-dialog { border:0; background:#000e; color:white; padding:40px 55px; max-width:100vw; max-height:100vh; }
.diary-dialog::backdrop { background:#000d; }
.diary-dialog img { display:block; max-width:calc(100vw - 110px); max-height:82vh; object-fit:contain; }
.diary-dialog button { position:absolute; background:#ffffff25; color:white; border:0; font:30px Arial,sans-serif; cursor:pointer; padding:8px 14px; }
.diary-dialog .close { top:5px; right:5px; }
.diary-dialog .prev { left:5px; top:45%; }
.diary-dialog .next { right:5px; top:45%; }
.diary-header .top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:24px; font:13px Arial,sans-serif; }
.diary-header .langs { display:flex; flex-wrap:wrap; gap:8px; }
.diary-header .langs button { border:1px solid #d8e4e8; border-radius:30px; padding:7px 13px; background:white; color:var(--ferie-accent); font:13px/1.5 Arial,sans-serif; cursor:pointer; }
.diary-header .langs button.active { background:#28637b; color:white; }
@media(max-width:600px) {
  .diary-dialog { padding:40px 35px; }
  .diary-dialog img { max-width:calc(100vw - 70px); }
}

/* Topbåndet ligger direkte i body og følger skærmens fulde bredde. */
body.feriedagbog > .diary-header { width:100%; margin:0; }
.diary-header > .top, .diary-header > .hero-inner, .diary-header > .hero { max-width:960px; margin-left:auto; margin-right:auto; }

/* Dagbogens returknap afslutter topbåndet; informationssider beholder deres layout. */