.destination-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-with-photo, .detail-with-photo { position: relative; isolation: isolate; overflow: hidden; background: var(--deep); }
.hero-with-photo > .destination-photo, .detail-with-photo > .destination-photo { position: absolute; inset: 0; z-index: -2; }
.hero-with-photo > .destination-photo { left: 26%; width: 74%; }
.hero-with-photo::before, .hero-with-photo::after { display: none; }
.hero-with-photo > .hero-shade, .detail-with-photo > .hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #122b4a 0%, #122b4aed 26%, #122b4a70 60%, #122b4a38 100%); }
.detail-with-photo > .hero-shade { background: linear-gradient(90deg, #122b4ae6 0%, #122b4aa6 42%, #122b4a3d 100%), linear-gradient(0deg, #122b4ab3 0%, transparent 62%); }
.hero-with-photo .hero-copy, .hero-with-photo .hero-caption,
.detail-with-photo p:not(.eyebrow), .detail-with-photo .back-link, .detail-with-photo .breadcrumbs li, .detail-with-photo .breadcrumbs a { color: #f3f0e7; }
.hero-with-photo .hero-text-link:hover { color: var(--sand); }

/* Photo credits: a quiet label on each image that opens to the full attribution. */
.photo-credit { color: var(--muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.photo-credit > summary { display: inline-flex; max-width: 100%; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.photo-credit > summary::-webkit-details-marker { display: none; }
.photo-credit > summary:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
.credit-icon { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.credit-creator { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-credit > p { margin: 0; }
.photo-credit a { color: var(--lake); text-underline-offset: 2px; }

.card-shell, .lake-tile-shell { position: relative; }
.card-shell > .photo-credit, .lake-tile-shell > .photo-credit { position: absolute; z-index: 3; top: 10px; right: 10px; left: 10px; text-align: right; pointer-events: none; }
.card-shell > .photo-credit > summary, .lake-tile-shell > .photo-credit > summary { max-width: 74%; padding: 3px 10px 3px 8px; border-radius: 999px; background: #122b4ab8; color: #fff; font-size: 10.5px; font-weight: 600; pointer-events: auto; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .15s; }
.card-shell > .photo-credit > summary:hover, .lake-tile-shell > .photo-credit > summary:hover, .card-shell > .photo-credit[open] > summary, .lake-tile-shell > .photo-credit[open] > summary { background: #122b4af2; }
.card-shell > .photo-credit .credit-label, .card-shell > .photo-credit .credit-license,
.lake-tile-shell > .photo-credit .credit-label, .lake-tile-shell > .photo-credit .credit-license { display: none; }
.card-shell > .photo-credit > p, .lake-tile-shell > .photo-credit > p { width: fit-content; max-width: min(100%, 300px); margin: 6px 0 0 auto; padding: 11px 13px; border-radius: 4px; background: #0d213bf2; box-shadow: 0 12px 30px #0d213b40; color: #e3e9f0; text-align: left; pointer-events: auto; }
.card-shell > .photo-credit a, .lake-tile-shell > .photo-credit a, .hero-credit .photo-credit a { color: var(--sand); }

.hero-credit { position: absolute; z-index: 3; right: 0; bottom: 14px; left: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.hero-credit .photo-credit { position: relative; max-width: 100%; color: #ffffffb3; pointer-events: auto; }
.hero-credit .photo-credit > summary { padding: 3px 0; }
.hero-credit .photo-credit > summary:hover, .hero-credit .photo-credit[open] > summary { color: #fff; }
.hero-credit .photo-credit > p { position: absolute; right: 0; bottom: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); max-width: none; margin: 0; padding: 12px 14px; border-radius: 4px; background: #0d213bf2; box-shadow: 0 12px 30px #0d213b59; color: #e3e9f0; font-size: 11px; line-height: 1.6; }
.hero .hero-credit { justify-content: flex-start; }
.hero .hero-credit .photo-credit > p { right: auto; left: 0; }

.lake-tile-shell, .card-shell { min-width: 0; }
.lake-tile-shell { display: flex; height: 100%; flex-direction: column; }
.lake-tile-shell > .lake-tile { flex: 1; }
.art-with-photo { height: 190px; flex-shrink: 0; }
.art-with-photo .destination-photo, .tile-with-photo .destination-photo { position: absolute; inset: 0; }
.art-with-photo::before, .art-with-photo::after, .tile-with-photo::before, .tile-with-photo::after { display: none; }
.tile-with-photo .destination-photo { z-index: 0; }
.tile-with-photo::after { display: block; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; transform: none; background: linear-gradient(180deg, #122b4a70 0%, #122b4a40 25%, #122b4aed 100%); }
.tile-with-photo .lake-number, .tile-with-photo .lake-tile-summary { color: #f3f0e7; }
.destination-photo { transition: transform .6s ease; }
.card-shell:hover .destination-photo, .lake-tile:hover .destination-photo { transform: scale(1.035); }
@media (max-width: 767.98px) {
  .hero-with-photo > .destination-photo { left: 0; width: 100%; }
  .hero-with-photo > .hero-shade { background: linear-gradient(90deg, #122b4ad9, #122b4a70); }
}
@media (prefers-reduced-motion: reduce) {
  .card-shell:hover .destination-photo, .lake-tile:hover .destination-photo { transform: none; }
}