/* =============================================================
   Portfolio Hover Controls — grid overlay stylesheet
   The variables below are only fallbacks. The real values are
   written onto the block as inline custom properties by
   pf-portfolio-controls.php, driven by the sliders in the
   block sidebar (Portfolio hover panel).

   Selectors deliberately include ".entry.loop-entry": Kadence
   prints its block CSS after this file, so the extra class is
   what keeps these rules winning. Don't simplify them out.
   ============================================================= */

.pf-grid {
  --pf-hover: rgba(78, 44, 90, 0.72);
  --pf-hover-bg: linear-gradient(to top, var(--pf-hover) 0%, transparent 100%);
  --pf-title-v: flex-end;
  --pf-title-h: flex-start;
  --pf-title-align: left;
  --pf-title-color: #ffffff;
  --pf-pad: 20px;
  --pf-fade: 350ms;
  --pf-zoom: 1.04;
}

.pf-grid .entry.loop-entry {
  position: relative;
  overflow: hidden;
}

/* Image zoom on hover */
.pf-grid .entry.loop-entry .post-thumbnail-inner img {
  transition: transform var(--pf-fade) ease;
  will-change: transform;
}
.pf-grid .entry.loop-entry:hover .post-thumbnail-inner img,
.pf-grid .entry.loop-entry:focus-within .post-thumbnail-inner img {
  transform: scale(var(--pf-zoom));
}

/* The overlay */
.pf-grid .entry.loop-entry .entry-content-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: var(--pf-title-v);
  align-items: var(--pf-title-h);
  padding: var(--pf-pad);
  margin: 0;
  background: var(--pf-hover-bg);
  opacity: 0;
  transition: opacity var(--pf-fade) ease;
  pointer-events: none;
}
.pf-grid .entry.loop-entry:hover .entry-content-wrap,
.pf-grid .entry.loop-entry:focus-within .entry-content-wrap {
  opacity: 1;
}

/* The title */
.pf-grid .entry.loop-entry .entry-header { margin: 0; padding: 0; width: 100%; }
.pf-grid .entry.loop-entry .entry-title {
  margin: 0;
  padding: 0;
  text-align: var(--pf-title-align);
}
.pf-grid .entry.loop-entry .entry-title a {
  color: var(--pf-title-color);
  text-decoration: none;
  pointer-events: auto;
}
.pf-grid .entry.loop-entry .entry-footer { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pf-grid .entry.loop-entry .entry-content-wrap,
  .pf-grid .entry.loop-entry .post-thumbnail-inner img { transition: none; }
  .pf-grid .entry.loop-entry:hover .post-thumbnail-inner img { transform: none; }
}

/* Touch devices have no hover — show the title permanently */
@media (hover: none) {
  .pf-grid .entry.loop-entry .entry-content-wrap { opacity: 1; }
}

/* =============================================================
   The same hover, on a Kadence gallery.

   A gallery and a posts grid render nothing alike — ul/li/figure
   against article/div — so the selectors are separate, but every
   custom property above is shared. One hover on this site.

   Kadence ships its own caption behaviour
   (.kb-gallery-caption-style-bottom-hover). These rules replace
   it rather than sit next to it, which is why the caption is
   pulled out to inset:0 instead of being left at the bottom.
   ============================================================= */

.pf-gallery .kadence-blocks-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--pf-radius, 10px);
}

/* Image zoom on hover — same curve, same duration as the grid */
.pf-gallery .kadence-blocks-gallery-item .kb-gal-image-radius img {
  transition: transform var(--pf-fade) ease;
  will-change: transform;
}
.pf-gallery .kadence-blocks-gallery-item:hover .kb-gal-image-radius img,
.pf-gallery .kadence-blocks-gallery-item:focus-within .kb-gal-image-radius img {
  transform: scale(var(--pf-zoom));
}

/* The veil, and the caption inside it */
.pf-gallery .kadence-blocks-gallery-item figcaption,
.pf-gallery .kadence-blocks-gallery-item .kadence-blocks-gallery-item__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: var(--pf-title-v);
  align-items: var(--pf-title-h);
  margin: 0;
  padding: var(--pf-pad);
  background: var(--pf-hover-bg);
  color: var(--pf-title-color);
  text-align: var(--pf-title-align);
  opacity: 0;
  transition: opacity var(--pf-fade) ease;
  pointer-events: none;
  transform: none;
}
.pf-gallery .kadence-blocks-gallery-item:hover figcaption,
.pf-gallery .kadence-blocks-gallery-item:focus-within figcaption,
.pf-gallery .kadence-blocks-gallery-item:hover .kadence-blocks-gallery-item__caption,
.pf-gallery .kadence-blocks-gallery-item:focus-within .kadence-blocks-gallery-item__caption {
  opacity: 1;
}

/* A gallery with captions switched off still gets veil and zoom — the veil is
   the affordance that says "this is a preview", with or without words. */
.pf-gallery .kb-gallery-figure.kadence-blocks-gallery-item-hide-caption::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pf-hover-bg);
  opacity: 0;
  transition: opacity var(--pf-fade) ease;
  pointer-events: none;
  border-radius: inherit;
}
.pf-gallery .kadence-blocks-gallery-item:hover .kb-gallery-figure.kadence-blocks-gallery-item-hide-caption::after,
.pf-gallery .kadence-blocks-gallery-item:focus-within .kb-gallery-figure.kadence-blocks-gallery-item-hide-caption::after {
  opacity: 1;
}
.pf-gallery .kb-gallery-figure { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .pf-gallery .kadence-blocks-gallery-item figcaption,
  .pf-gallery .kadence-blocks-gallery-item .kb-gal-image-radius img { transition: none; }
  .pf-gallery .kadence-blocks-gallery-item:hover .kb-gal-image-radius img { transform: none; }
}

/* Touch devices have no hover — show the caption permanently */
@media (hover: none) {
  .pf-gallery .kadence-blocks-gallery-item figcaption,
  .pf-gallery .kadence-blocks-gallery-item .kadence-blocks-gallery-item__caption { opacity: 1; }
}

/* =============================================================
   core/gallery — the same hover, on WordPress's own gallery.

   Core nests one <figure class="wp-block-image"> per tile inside
   <figure class="wp-block-gallery">, and puts the caption *under*
   the image. Parity means lifting that caption into the veil, and
   giving caption-less tiles the veil anyway — a preview that only
   sometimes reacts is worse than one that never does.
   ============================================================= */

.pf-gallery-core .wp-block-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--pf-radius, 10px);
}

.pf-gallery-core .wp-block-image img {
  display: block;
  transition: transform var(--pf-fade) ease;
  will-change: transform;
}

.pf-gallery-core .wp-block-image:hover img,
.pf-gallery-core .wp-block-image:focus-within img {
  transform: scale(var(--pf-zoom));
}

/* The caption stops being a line of text under the picture and becomes the
   veil's label, exactly as the projects grid treats its title. */
.pf-gallery-core .wp-block-image figcaption {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: var(--pf-pad);
  display: flex;
  flex-direction: column;
  justify-content: var(--pf-title-v);
  align-items: var(--pf-title-h);
  text-align: var(--pf-title-align);
  color: var(--pf-title-color);
  background: var(--pf-hover-bg);
  opacity: 0;
  transition: opacity var(--pf-fade) ease;
  pointer-events: none;
  overflow: hidden;
}

.pf-gallery-core .wp-block-image:hover figcaption,
.pf-gallery-core .wp-block-image:focus-within figcaption {
  opacity: 1;
}

/* A tile with no caption still has to react to the pointer. */
.pf-gallery-core .wp-block-image:not(:has(figcaption))::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pf-hover-bg);
  opacity: 0;
  transition: opacity var(--pf-fade) ease;
  pointer-events: none;
}

.pf-gallery-core .wp-block-image:not(:has(figcaption)):hover::after,
.pf-gallery-core .wp-block-image:not(:has(figcaption)):focus-within::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pf-gallery-core .wp-block-image img,
  .pf-gallery-core .wp-block-image figcaption,
  .pf-gallery-core .wp-block-image::after { transition: none; }
  .pf-gallery-core .wp-block-image:hover img { transform: none; }
}

/* Touch devices have no hover — show the caption permanently. */
@media (hover: none) {
  .pf-gallery-core .wp-block-image figcaption { opacity: 1; }
}