.photo-view > * { 
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

.photo-view > p > img { 
    margin-top: 1.25rem;
}

.photo-view > p {
    margin: 0;
    padding: 0;
}


.photo {
    padding-top: var(--content-gap);
    flex: 100%;
    flex-wrap: wrap;
    display: flex;
}

.photo-view {
    flex: 100%;
    align-items: center;
    margin-right: 10pt;

    text-align: center;

    figure {
        margin-bottom: 10px;
    }
}

/* ───────────────────────────────
   Card container  (article > a)
   ─────────────────────────────── */
.travel-entry-overview > a {
  /* layout */
  display: flex;
  flex-direction: column;        /* mobile-first: vertical stack   */
  width: 100%;
  height: 100%;

  /* looks like a card, not a link */
  text-decoration: none;
  color: inherit;
}

/* keep the card itself looking nice */
.travel-entry-overview {
  cursor: pointer;
  position: relative;
  margin-bottom: var(--gap);
  padding: var(--gap);
  background: var(--entry);
  border-radius: var(--radius);
  transition: transform .1s;
  border: 1px solid var(--border);
  border-left: .3rem solid #32dbea;
}

/* ───────────────────────────────
   Image wrapper
   ─────────────────────────────── */
.photo-travel-entry {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);

  /* mobile: give the hero image a fixed height
     so it does not dominate small screens      */
  height: 250px;
  width: 100%;
}

/* hero <img> fills its wrapper and crops nicely */
.photo-travel-entry img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ───────────────────────────────
   Text wrapper
   ─────────────────────────────── */
.text-travel-entry {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* typography tweaks (unchanged) */
.text-description-entry {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: .5rem;
  color: var(--primary);
}

.text-content-entry {
  padding-block: 1rem 1.25rem;   /* shorthands ↓↑ */
  font-size: smaller;
}

/* ───────────────────────────────
   Breakpoint ≥ 768 px
   ─────────────────────────────── */
@media (min-width: 768px) {
  /* side-by-side layout */
  .travel-entry-overview > a {
    flex-direction: row;
    align-items: stretch;        /* both columns same height */
  }

  /* image takes ±40 %, text the rest */
  .photo-travel-entry { flex: 0 0 40%; height: auto; }
  .text-travel-entry  { flex: 1 1 60%; }
}

.photo-sidebar {
    flex: 100%;

    .date {
        font-size: 10pt;
        color: var(--primary);
    }

    p {
        margin-top: 0;
    }

    position: relative;
    margin-bottom: var(--gap);
    padding: var(--gap);
    background: var(--entry);
    border-radius: var(--radius);
    transition: transform 0.1s;
    border: 1px solid var(--border);
    border-left-color: #32ea38;
    border-left-width: 0.3rem;
}


.travel-overview {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--gap);
    
    p {
        margin-top: 0px;
    }

    .travel-info {
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 10px;
    }

    .date {
        font-size: 10pt;
        color: var(--primary);
        display: flex;
        flex-direction: row;
        gap: var(--gap);
    }

    .photo-meta {
        flex: 45%;
    }

    ul {
        list-style-position: outside;
        margin-left: 0.8rem;
        margin-top: 0.4rem;

        padding-left: 0.0rem;   /* tweak to taste */
    }

    .description {
        font-size: 0.2em;
    }

    #map {
        flex: 55%;
        border-radius: var(--radius);
        overflow: hidden;
    }

    position: relative;
}

@media (max-width: 768px) {
    .travel-overview {
        flex-direction: column;
        gap: var(--gap);
    }

    .travel-overview .photo-meta,
    .travel-overview #map {
        width: 100%;
    }

    .travel-overview #map {
        display: block;
        min-height: 250px;
        min-width: 240px;
        height: 40vh;
    }
}


.title-list {
    margin-bottom: 10px;
    margin-top: 30px;
}

.medium-zoom-overlay {
    background-color: var(--code-bg);
}

.medium-zoom-overlay,
.medium-zoom-image--opened {
  z-index: 10;
}


figure {
    margin: 0;

    picture {
        position: relative;

        &:hover {
            .img-action {
                visibility: visible;
                opacity: 1;
            }
        }
    }

}

figure.fit-view {
    img {
        max-width: 100%;
        max-height: calc(90vh - 10vh);
    }
}


figure.max-width {
    img {
        max-height: 100%;
    }
}

.img-action {
    position: absolute;
    /* transform: translate(180%); */
    z-index: 1;
    background-color: var(--code-bg);
    padding: 5px 5px 5px 5px;
    box-shadow: 0 .5px 2px #40404480, 0 4px 8px #00000080;
    border-radius: 8px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}



.model-viewer {
    width: 100%;
    height: calc(90vh - 10vh);
}

@media (max-width: 768px) {
    .iframe-video iframe {
        height: unset !important;
    }

    .sketchfab iframe {
        height: calc(70vh) !important;
    }

    .model-viewer {
        height: calc(70vh) !important;
    }
}

.img-action {
    background-color: var(--code-bg) !important;
}