/*
 * Visual Portfolio grid on the "Works" page.
 *
 * Loaded only on pages that contain the visual-portfolio/block, whose body gets
 * .daria-portfolio (inc/portfolio.php). The plugin is themed through its own
 * custom properties wherever it has one. The few properties set directly win
 * by specificity rather than load order: the plugin enqueues some of its sheets
 * while the block renders, so they may well print after this one.
 */

/* ── Page ────────────────────────────────────────────────────────────────── */

/* page.php caps .entry-content at a reading measure; the grid needs the whole
   shell. Anything written around the block keeps the measure. */
.daria-portfolio .entry-content { max-width: none; }
/* The block renders as <div class="wp-block-visual-portfolio"> (no "-block"). */
.daria-portfolio .entry-content > :not(.wp-block-visual-portfolio):not(.vp-portfolio) { max-width: 760px; }

.daria-portfolio .vp-portfolio {
  --vp-elements__gap: 44px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}

/* The plugin clips these for its own effects. Here that only ever cut off
   keyboard focus rings on the outer edge. */
.daria-portfolio .vp-portfolio .vp-portfolio__filter-wrap,
.daria-portfolio .vp-portfolio .vp-portfolio__items-wrap,
.daria-portfolio .vp-portfolio .vp-portfolio__item { overflow: visible; }

/* ── Filter: pills in the manner of .slider-button ───────────────────────── */

.daria-portfolio .vp-portfolio .vp-filter__style-default {
  --vp-filter-default--items__gap: 10px;
  --vp-filter-default--items__min-width: 0;
  --vp-filter-default--items__padding-v: .95em;
  --vp-filter-default--items__padding-h: 1.6em;
  --vp-filter-default--items__font-size: .72rem;
  --vp-filter-default--items__font-weight: 500;
  --vp-filter-default--items__line-height: 1.2;
  --vp-filter-default--items__letter-spacing: .12em;
  --vp-filter-default--items__text-transform: uppercase;
  --vp-filter-default--items__color: var(--ink);
  --vp-filter-default--items__background-color: transparent;
  --vp-filter-default--items__border-radius: 999px;
  --vp-filter-default--items-hover__color: var(--bg);
  --vp-filter-default--items-hover__background-color: var(--ink);
  --vp-filter-default--items-active__color: var(--bg);
  --vp-filter-default--items-active__background-color: var(--ink);
}

/* Border has no plugin variable; the transition is restated to include it. */
.daria-portfolio .vp-portfolio .vp-filter__style-default .vp-filter__item > * {
  border: 1px solid rgba(255,255,255,.24);
  font-family: var(--sans);
  transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}
.daria-portfolio .vp-portfolio .vp-filter__style-default .vp-filter__item > a:hover,
.daria-portfolio .vp-portfolio .vp-filter__style-default .vp-filter__item-active > * { border-color: var(--ink); }

/* The plugin sets outline: none on these links. */
.daria-portfolio .vp-portfolio .vp-filter__style-default .vp-filter__item > a:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}

/* ── Cards: Classic items style ──────────────────────────────────────────── */

.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default {
  /* 17px inside the 18px panel below, so the corners sit flush with its border. */
  --vp-items-style-default--image__border-radius: 17px;
  --vp-items-style-default--image-hover__transform: scale(1.03);
  --vp-items-style-default--image__transition-duration: .25s;
  --vp-items-style-default--image__transition-easing: ease-out;
  --vp-items-style-default--overlay__background: transparent;
  --vp-items-style-default--caption__color: var(--ink);
  --vp-items-style-default--caption__padding: 22px 2px 0;
  --vp-items-style-default--caption-items__gap: 12px;
  --vp-items-style-default--caption-links__color: inherit;
  --vp-items-style-default--caption-links-hover__color: var(--coral);
  --vp-items-style-default--meta-categories__font-size: .7rem;
  --vp-items-style-default--meta-categories__font-weight: 500;
  --vp-items-style-default--meta-categories__text-transform: uppercase;
  --vp-items-style-default--meta-categories__opacity: 1;
  --vp-items-style-default--meta-categories__gap: 0;
  --vp-items-style-default--meta-categories__separator: "\00a0·\00a0";
  --vp-items-style-default--meta-title__font-size: clamp(26px, 2.4vw, 34px);
  --vp-items-style-default--meta-excerpt__line-height: 1.55;
  --vp-items-style-default--meta-excerpt__opacity: 1;
}

/* The mockup sits on a slightly lighter panel. */
.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .vp-portfolio__item-img-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  transition: border-color .25s ease;
}
.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .vp-portfolio__item:hover .vp-portfolio__item-img-wrap { border-color: rgba(255,255,255,.3); }

/* The plugin flags a keyboard-focused card with this class (main.js) and
   removes every outline inside it. */
.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .vp-portfolio__item-focus-visible .vp-portfolio__item-img-wrap {
  border-color: var(--coral);
  box-shadow: 0 0 0 1px var(--coral);
}
.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .vp-portfolio__item-caption a:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 2px;
}

.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .vp-portfolio__item-meta-categories {
  font-family: var(--sans);
  letter-spacing: .14em;
  line-height: 1.4;
  color: var(--muted);
}
.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .vp-portfolio__item-meta-title {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.02em;
}
.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .vp-portfolio__item-meta-excerpt {
  max-width: 46ch;
  font-size: .95rem;
  color: var(--muted);
}

/* The live site's domain under the title (the meta.php override). Plain text,
   so the whole line follows the card's hover rather than a hover of its own.
   It belongs to the title, so it sits closer than the caption's item gap. */
.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .vp-portfolio__item-meta-title:has(+ .daria-portfolio-site) { margin-bottom: 8px; }
.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .daria-portfolio-site {
  display: block;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--muted);
  overflow-wrap: anywhere;
  transition: color .25s ease;
}
.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .daria-portfolio-site__arrow {
  margin-left: .1em;
  font-size: .85em;
}
.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .vp-portfolio__item:hover .daria-portfolio-site,
.daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .vp-portfolio__item-focus-visible .daria-portfolio-site { color: var(--ink); }

/* ── Reel: the case's video inside the phone of the card ─────────────────── */

/* A case with a video gets .daria-reel right after its <img>, inside the link
   (inc/portfolio.php). The reel covers the whole image box, and the boxes
   below are the phone's screen and island in the reel mockup, in % of its
   1600×1000 canvas (madebydaria-porto/tools/reel_geometry.json). The reel
   stays invisible until the video really plays (portfolio.js adds
   .is-playing), so a card is the plain mockup, cover on the screen, whenever
   nothing plays: before the first frame, when paused, under reduced motion. */
.daria-portfolio .vp-portfolio .daria-reel {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  /* Zooms with the image on hover: the same transform, timing and origin
     (the centre of the same box), taken from the plugin's variables above. */
  transform: var(--vp-items-style-default--image__transform, none);
  transition:
    opacity .4s ease,
    transform var(--vp-items-style-default--image__transition-duration, .25s) var(--vp-items-style-default--image__transition-easing, ease-out);
}
.daria-portfolio .vp-portfolio .vp-portfolio__item:hover .daria-reel,
.daria-portfolio .vp-portfolio .vp-portfolio__item-focus-visible .daria-reel { transform: var(--vp-items-style-default--image-hover__transform, none); }
.daria-portfolio .vp-portfolio .daria-reel.is-playing { opacity: 1; }

/* The plugin zooms every video inside the image box around its own centre.
   This one rides on the reel's zoom instead, so it is reset here. */
.daria-portfolio .vp-portfolio .vp-portfolio__item .daria-reel .daria-reel__video {
  position: absolute;
  left: 37.6875%;
  top: 6%;
  width: 24.625%;
  height: 85%;
  display: block;
  border-radius: 15.736% / 7.2941%;
  /* Whole frame with black bars, like the cover in the mockup: the screen is
     taller than the 9:16 reels, and cover-fit cut the text at their sides. */
  object-fit: contain;
  background: #000;
  transform: none;
  transition: none;
}
.daria-portfolio .vp-portfolio .daria-reel__island {
  position: absolute;
  left: 46.0625%;
  top: 7.1%;
  width: 7.875%;
  height: 3.7%;
  border-radius: 999px;
  background: #000;
}

/* ── Columns: 3 / 2 / 1 at the theme's breakpoints ───────────────────────── */

/* The plugin sizes grid items from JS at its own breakpoints (768 / 576).
   Isotope measures the items, so plain widths are all it needs; the plugin
   re-lays the grid out on resize. */
.daria-portfolio .vp-portfolio[data-vp-layout="grid"][data-vp-grid-columns="3"] .vp-portfolio__item-wrap { width: 33.3333%; }

/* The no-Isotope fallback in portfolio.js hides items with [hidden]. */
.daria-portfolio .vp-portfolio .vp-portfolio__item-wrap[hidden] { display: none; }

@media (max-width: 900px) {
  .daria-portfolio .vp-portfolio[data-vp-layout="grid"][data-vp-grid-columns="3"] .vp-portfolio__item-wrap { width: 50%; }
}

@media (max-width: 600px) {
  .daria-portfolio .vp-portfolio { --vp-elements__gap: 32px; }
  .daria-portfolio .vp-portfolio .vp-filter__style-default {
    --vp-filter-default--items__gap: 8px;
    --vp-filter-default--items__padding-h: 1.3em;
  }
  .daria-portfolio .vp-portfolio[data-vp-layout="grid"][data-vp-grid-columns="3"] .vp-portfolio__item-wrap { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .daria-portfolio .vp-portfolio .vp-portfolio__items-style-default {
    --vp-items-style-default--image-hover__transform: none;
    --vp-items-style-default--image__transition-duration: 0s;
  }
  .daria-portfolio .vp-portfolio .vp-filter__style-default .vp-filter__item > *,
  .daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .vp-portfolio__item-img-wrap,
  .daria-portfolio .vp-portfolio .vp-portfolio__items-style-default .daria-portfolio-site,
  .daria-portfolio .vp-portfolio .daria-reel,
  .daria-portfolio .vp-portfolio .vp-portfolio__items,
  .daria-portfolio .vp-portfolio .vp-portfolio__items-wrap,
  .daria-portfolio .vp-portfolio .vp-portfolio__layout-elements { transition: none; }
}