/**
 * Joshua One Portfolio/Projects Assets
 * Portfolio page UX hints (scoped)
 *
 * Goal:
 * - Keep project item title overlays visible on the Portfolio page, so users immediately
 *   understand each item is clickable.
 *
 * Notes:
 * - Styles apply only to elements that have been enhanced by the companion JS
 *   (j1ppa-portfolio-item / j1ppa-portfolio-link).
 * - This avoids interfering with the built-in [jo_projects_portfolio] grid, which already
 *   supports always-visible titles via its own CSS.
 */

.j1ppa-portfolio-item,
a.j1ppa-portfolio-link {
  cursor: pointer;
}

.j1ppa-portfolio-item {
  position: relative;
}

/* Force overlay containers visible (best-effort for common builders/widgets). */
.j1ppa-portfolio-item [class*="overlay"],
.j1ppa-portfolio-item [class*="caption"],
.j1ppa-portfolio-item [class*="content"],
.j1ppa-portfolio-item [class*="info"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Some widgets animate the title separately from the overlay container. */
.j1ppa-portfolio-item [class*="title"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  /* Improve readability over bright imagery */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 10px 26px rgba(0, 0, 0, 0.65) !important;
}

/* Add the "Click to view" line under title nodes (only when enabled). */
body.j1ppa-click-to-view-on .j1ppa-portfolio-item [class*="title"]:not(.j1ppa-fallback-title)::after {
  content: "Click to view";
  display: block;
  margin-top: 6px;
  font-size: 0.5em; /* about half the title size */
  font-style: normal;
  font-weight: inherit;
  text-align: left;
  color: #ffffff;
  line-height: 1.2;
  opacity: 0.95;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 10px 26px rgba(0, 0, 0, 0.65);
}

/* The injected hint line (JS fallback when no title-class exists) */
.j1ppa-click-to-view {
  display: block;
  margin-top: 6px;
  font-size: 0.5em; /* about half the title size */
  font-style: normal;
  font-weight: inherit;
  text-align: left;
  color: #ffffff;
  line-height: 1.2;
  opacity: 0.95;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 10px 26px rgba(0, 0, 0, 0.65);
}

/*
 * Fallback overlay injected by JS only if we cannot reliably find an existing title node.
 */
.j1ppa-fallback-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(0);
  opacity: 1;
  transition: none;
  pointer-events: none;
}

.j1ppa-fallback-title {
  display: block;
  font-size: 1em;
  line-height: 1.25;
  font-weight: 600;
  text-align: left;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 10px 26px rgba(0, 0, 0, 0.65);
}