/* OurBigPlanet Photos – fits the "journey" theme: Montserrat headings, Raleway text, warm brown ink on cream. */
.obp-photos {
  --obp-ink: #635647; --obp-muted: #8a7d6d; --obp-line: #eadfcd; --obp-card: #fff; --obp-dark: #2e2727;
  --obp-radius: 6px; --obp-shadow: 0 1px 2px rgba(60, 45, 30, .08), 0 6px 18px rgba(60, 45, 30, .10);
  color: var(--obp-ink); padding-bottom: 40px;
}
.obp-photos h1 { margin-bottom: 6px; }
.obp-lede { color: var(--obp-muted); font-size: 15px; margin: 0 0 18px; }
.obp-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 28px; }
.obp-stats span { border: 1px solid var(--obp-line); background: var(--obp-card); border-radius: 999px; padding: 4px 14px; font-size: 13px; }
.obp-stats b { font-family: Montserrat, sans-serif; }
.obp-crumbs { font-family: Montserrat, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--obp-muted); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 10px; }
.obp-crumbs a { color: var(--obp-muted); text-decoration: none; }
.obp-crumbs a:hover { color: var(--obp-ink); }

/* cards (regions, places) */
.obp-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding: 0 15px; }
.obp-cards-big { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.obp-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--obp-radius); overflow: hidden; background: #ddd;
  box-shadow: var(--obp-shadow); text-decoration: none !important; isolation: isolate; }
.obp-cards-big .obp-card { aspect-ratio: 16 / 10; }
.obp-ph { position: absolute; inset: -10px; background-size: cover; background-position: center; filter: blur(14px); transform: scale(1.05); }
.obp-card img, .obp-tile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0;
  transition: opacity .35s, transform .6s; margin: 0 !important; }
.obp-card img.in, .obp-tile img.in { opacity: 1; }
.obp-card:hover img { transform: scale(1.04); }
.obp-label { position: absolute; inset: auto 0 0 0; padding: 36px 14px 12px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); line-height: 1.3; }
.obp-label strong { display: block; font-family: Montserrat, sans-serif; font-size: 19px; font-weight: 700; }
.obp-cards-big .obp-label strong { font-size: 26px; }
.obp-label span { font-size: 12px; opacity: .92; }
.obp-country { margin: 30px 0 0; scroll-margin-top: 80px; }
.obp-country h2 { text-align: center; font-size: 26px; line-height: 1.2; margin: 0 0 14px; }
.obp-country h2 small { display: block; font-family: Raleway, sans-serif; font-weight: 500; font-size: 13px; color: var(--obp-muted); margin-top: 4px; }

/* place page */
.obp-stops { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.obp-pill { font-family: Montserrat, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--obp-line); background: var(--obp-card); color: var(--obp-ink) !important; border-radius: 999px; padding: 7px 14px; text-decoration: none !important; }
.obp-pill:hover { border-color: var(--obp-ink); }
.obp-grid { position: relative; margin: 0 15px; min-height: 200px; }
.obp-tile { position: absolute; display: block; overflow: hidden; border-radius: 4px; background: #e8dfd0; cursor: zoom-in; }
.obp-tile:hover img { transform: scale(1.03); }
.obp-tile:focus-visible { outline: 3px solid var(--obp-ink); outline-offset: 2px; }
.obp-play { position: absolute; right: 7px; bottom: 7px; display: flex; align-items: center; gap: 4px; background: rgba(0, 0, 0, .6); color: #fff;
  font: 600 11px/1 Montserrat, sans-serif; padding: 5px 8px 5px 6px; border-radius: 999px; }
.obp-play svg { width: 13px; height: 13px; }
.obp-noscript { columns: 4; }

/* lightbox */
.pswp { --pswp-bg: #141110; }
.pswp__obp-caption { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100% - 32px); background: rgba(0, 0, 0, .55);
  color: #fff; font: 500 14px/1.4 Raleway, sans-serif; padding: 8px 14px; border-radius: 999px; text-align: center; backdrop-filter: blur(6px); }
.pswp__obp-caption:empty { display: none; }
.pswp__button--original { width: auto !important; padding: 0 12px !important; display: flex !important; align-items: center; gap: 6px; color: #fff !important;
  font: 700 12px Montserrat, sans-serif; text-decoration: none !important; }
.pswp__button--original svg { width: 18px; height: 18px; }
.pswp__button--original small { font-weight: 400; opacity: .75; }
.obp-video { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.obp-video video { max-width: 100%; max-height: 100%; background: #000; }
.obp-bigplay { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(0, 0, 0, .55);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85) inset; pointer-events: none; transition: opacity .2s; }
.obp-bigplay::after { content: ''; position: absolute; left: 30px; top: 22px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #fff; }
.obp-video.playing .obp-bigplay { opacity: 0; }
.obp-vctrl { position: absolute; left: 12px; right: 12px; bottom: 64px; display: flex; align-items: center; gap: 10px; color: #fff;
  font: 600 12px/1 Montserrat, sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.obp-vbar { flex: 1; height: 28px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.obp-vbar::before { content: ''; position: absolute; left: 0; right: 0; }
.obp-vbar { background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)) center / 100% 4px no-repeat; border-radius: 2px; position: relative; }
.obp-vbar-fill { height: 4px; width: 0; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.obp-vtime { white-space: nowrap; min-width: 86px; text-align: right; }

@media (max-width: 767px) {
  .obp-cards, .obp-cards-big { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 0 10px; }
  .obp-cards-big { grid-template-columns: 1fr; }
  .obp-label strong { font-size: 16px; }
  .obp-grid { margin: 0 6px; }
  .obp-tile { border-radius: 2px; }
  .obp-noscript { columns: 2; }
}
@media (prefers-reduced-motion: reduce) { .obp-photos *, .pswp * { transition: none !important; } }