/* SULYAP — openly licensed photos (images pilot, Oct 2026). Own file: no edits to style.css. */

/* ── Province hero photo ─────────────────────────────────── */
.province-hero.has-photo { min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-top: 64px; padding-bottom: 34px; }
.province-hero.has-photo > * { position: relative; z-index: 1; }
.province-hero.has-photo > .province-hero-back,
.province-hero.has-photo > .province-hero-search { position: absolute; z-index: 2; }
.province-hero.has-photo > .province-hero-back { top: 20px; left: 16px; margin: 0; background: rgba(0,0,0,0.45); color: #fff; }
.province-hero-photo { position: absolute !important; inset: 0; z-index: 0 !important; }
.province-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.province-hero-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.78) 100%); }
.province-hero.has-photo .province-hero-name { text-shadow: 0 2px 12px rgba(0,0,0,0.55); }
.province-hero.has-photo .province-hero-region { color: rgba(255,255,255,0.9); text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.province-hero-credit { position: absolute !important; right: 8px; bottom: 6px; z-index: 2 !important; max-width: 80%;
  font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,0.78); text-align: right; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.province-hero-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.4); }
@media (min-width: 768px) { .province-hero.has-photo { min-height: 360px; } }

/* ── Credits under photos ────────────────────────────────── */
.img-licensed { margin: 0; position: relative; }
.img-licensed figcaption, .img-credit { font-size: 11px; line-height: 1.4; color: rgba(255,255,255,0.55); }
.img-licensed figcaption { padding: 5px 16px 0; }
.img-licensed figcaption a, .img-credits a { color: rgba(252,209,22,0.85); text-decoration: none; }
.img-licensed figcaption a:hover, .img-credits a:hover { text-decoration: underline; }

/* place / dish cards: existing image rules (180px / 160px, cover) apply to the <img> */
.block-place-card .place-card-image.img-licensed img,
.block-dish-card .dish-card-image.img-licensed img { width: 100%; height: 190px; object-fit: cover; display: block; background: #1b1b1b; }
@media (min-width: 768px) {
  .block-place-card .place-card-image.img-licensed img,
  .block-dish-card .dish-card-image.img-licensed img { height: 260px; }
}

/* inline figure (festival / culture photo) */
.block-image.img-figure { aspect-ratio: auto; margin: 16px 0; }
.block-image.img-figure img { width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 8px; display: block; }
.block-image.img-figure figcaption { padding: 6px 2px 0; }

/* species card with photo: photo left on wide screens, on top on phones */
.species-card.has-photo { display: flex; gap: 14px; align-items: flex-start; }
.species-photo { flex: 0 0 200px; }
.species-photo img { width: 200px; height: 150px; object-fit: cover; border-radius: 8px; display: block; background: #1b1b1b; }
.species-photo figcaption { padding: 4px 0 0; font-size: 10.5px; }
.species-body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) {
  .species-card.has-photo { flex-direction: column; }
  .species-photo { flex-basis: auto; width: 100%; }
  .species-photo img { width: 100%; height: 190px; }
}

/* page credits box reuses .province-sources styling */
.img-credits li { margin-bottom: 6px; }
.img-credits-note { font-size: 11.5px; color: rgba(255,255,255,0.5); margin: 8px 0 0; }

/* /credits/ page */
.credits-list { list-style: none; padding: 0; margin: 18px 0 0; }
.credits-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.credits-item img { width: 120px; height: 80px; object-fit: cover; border-radius: 6px; flex: 0 0 120px; }
.credits-alt { font-weight: 600; color: #fff; font-size: 14px; }
.credits-item .img-credit { font-size: 12.5px; }
.credits-where { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.credits-where a, .credits-item .img-credit a { color: #FCD116; }

/* feature pages (Hayop, Pista, Panahon): lazy <img> fills the existing photo boxes */
.hayop-card-photo, .pista-card-photo, .pista-cal-photo { position: relative; overflow: hidden; }
.hayop-card-photo > img, .pista-card-photo > img, .pista-cal-photo > img, .ptile > .ptile-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ptile-tint { z-index: 1; }
.feat-credit { padding: 6px 14px 0; }
.page-img-credits { max-width: 1100px; margin: 28px auto 0; padding: 0 18px; }