/* Contextual Previous/Next navigation — additive only. The container/slot/
   link/back structure (.plocal-profile-navigation and its children) is the
   existing, already-responsive-tested PLOCAL component from
   business-profile.css; this file only adds the optional small preview
   thumbnail, activated by the .plocal-profile-navigation__link--with-thumb
   modifier so the base icon-only styling is never overridden. */

.plocal-profile-navigation__link--with-thumb {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 228px;
  max-width: 100%;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--profile-line, rgba(12, 44, 122, 0.14));
  border-radius: 16px;
  background: var(--color-white, #fff);
  box-shadow: 0 14px 34px rgba(8, 29, 77, .1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.plocal-profile-navigation__link--with-thumb:hover,
.plocal-profile-navigation__link--with-thumb:focus-visible {
  border-color: var(--theme-color, #24bdc7);
  box-shadow: 0 18px 40px rgba(8, 29, 77, .16);
  transform: translateY(-3px);
}

.plocal-profile-navigation__slot--next .plocal-profile-navigation__link--with-thumb {
  flex-direction: column-reverse;
  text-align: right;
}

.plocal-profile-navigation__thumb {
  display: block;
  width: 100%;
  height: 118px;
  flex: 0 0 118px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--profile-line, rgba(12, 44, 122, 0.12));
  background: var(--theme-color-light, #eaf8f8);
}

.plocal-profile-navigation__link--with-thumb .plocal-profile-navigation__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 2px 4px 4px;
}

.plocal-profile-navigation__link--with-thumb .plocal-profile-navigation__meta span {
  color: var(--profile-muted, #66738d);
  font-size: 9px;
  letter-spacing: .12em;
}

.plocal-profile-navigation__link--with-thumb .plocal-profile-navigation__meta strong {
  display: none;
}

.plocal-profile-navigation__link--with-thumb .plocal-profile-navigation__meta {
  padding: 2px 4px 3px;
}

.plocal-profile-navigation--fallback {
  justify-content: center;
  border-top: 1px solid var(--profile-line, rgba(12, 44, 122, 0.18));
}

.plocal-profile-navigation--fallback .plocal-profile-navigation__back {
  color: #fff;
  background: var(--profile-ink, #0c2c7a);
}

.plocal-profile-navigation--fallback .plocal-profile-navigation__back i {
  margin-left: 8px;
}

@media (max-width: 568px) {
  .plocal-profile-navigation__thumb {
    height: 96px;
    flex-basis: 96px;
  }

  .plocal-profile-navigation__link--with-thumb {
    width: 100%;
  }
}