/* ==========================================================================
   YORU — wallpaper cards · editorial grid · featured prints
   ========================================================================== */
.wp-card { position: relative; margin: 0; min-width: 0; }
.wp-card__frame { position: relative; }
.wp-media {
  position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar, 1.7778);
  background: var(--c, var(--bg-2)); isolation: isolate;
  clip-path: inset(0 0 100% 0); transition: clip-path 1.25s var(--ease-film), filter .7s var(--ease-out), opacity .7s;
}
.wp-card.is-in .wp-media, .wp-card--archive .wp-media, .no-reveal .wp-media { clip-path: inset(0 0 0 0); }
.wp-media::before {
  content: ""; position: absolute; inset: -12%; z-index: 0;
  background: var(--ph, none) center / cover no-repeat, var(--c, var(--bg-2));
  filter: blur(18px); transition: opacity .7s var(--ease-out);
}
.wp-media.is-loaded::before { opacity: 0; }
.wp-media__inner { position: absolute; inset: 0; z-index: 1; display: block; }
.wp-media__inner picture { display: contents; }
.wp-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1); transition: opacity .8s var(--ease-film), transform 1.6s var(--ease-film);
}
.wp-media.is-loaded .wp-img { opacity: 1; }
.wp-card:hover .wp-img, .wp-media:focus-visible .wp-img { transform: scale(1.035); }
.wp-media.is-flown, [data-media].is-flown { visibility: hidden; }
/* image failed to load (404/403 on the file) */
.wp-media.is-error .wp-img, [data-media].is-error img { opacity: 0 !important; }
.wp-media.is-error::after, [data-media].is-error::after {
  content: "ERR — IMAGE UNAVAILABLE"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 8px; text-align: center;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em; color: var(--red);
  background: repeating-linear-gradient(-45deg, rgba(210, 33, 46, .06) 0 6px, transparent 6px 12px), var(--bg-2);
  border: 1px solid rgba(210, 33, 46, .35);
}

/* hover reveal */
.wp-reveal {
  position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(10px, 1.1vw, 16px);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory);
  background: linear-gradient(180deg, rgba(8, 8, 8, .55), rgba(8, 8, 8, 0) 34%, rgba(8, 8, 8, 0) 62%, rgba(8, 8, 8, .66));
  opacity: 0; transition: opacity .55s var(--ease-out); pointer-events: none;
}
.wp-reveal > * { transform: translateY(6px); transition: transform .7s var(--ease-out); }
.wp-card:hover .wp-reveal, .wp-media:focus-visible .wp-reveal { opacity: 1; }
.wp-card:hover .wp-reveal > *, .wp-media:focus-visible .wp-reveal > * { transform: none; }
.wp-reveal__top { display: flex; justify-content: space-between; gap: 10px; }
.wp-reveal__title { font-weight: 700; }
.wp-reveal__title b { color: var(--red); font-weight: 500; }
.wp-reveal__view { align-self: center; justify-self: center; padding: 10px 14px; border: 1px solid var(--ivory-60); border-radius: 999px; font-size: 9px; letter-spacing: .24em; }
.has-pointer .wp-card:hover .wp-reveal__view { opacity: 0; } /* the cursor shows VIEW */
.wp-reveal__bot { color: var(--ivory-80); }

/* actions (separate click targets from the image) */
.wp-card__actions {
  position: absolute; right: clamp(8px, 1vw, 14px); bottom: clamp(8px, 1vw, 14px); z-index: 3;
  display: flex; gap: 6px; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
.wp-card:hover .wp-card__actions, .wp-card:focus-within .wp-card__actions { opacity: 1; transform: none; }
@media (hover: none) { .wp-card__actions { opacity: 1; transform: none; } }
.dl-btn, .save-btn {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 11px; background: rgba(8, 8, 8, .72); border: 1px solid var(--line-2); color: var(--ivory);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: border-color .3s, color .3s, background-color .3s;
}
.dl-btn:hover { border-color: var(--red); background: var(--red); }
.save-btn.is-compact { padding: 8px 10px; font-size: 12px; line-height: 1; }
.save-btn:hover, .save-btn[aria-pressed="true"] { color: var(--red); border-color: var(--red); }

/* metadata under the image */
.wp-card__meta { display: flex; gap: 12px; align-items: baseline; margin-top: 10px; font-size: 9.5px; color: var(--ivory-60); }
.wp-card__meta b { color: var(--red); font-weight: 500; }
.wp-card__t { color: var(--ivory-80); }
.wp-card__meta .dim:last-child { margin-left: auto; }
.wp-card__meta--run .dim:last-child { margin-left: 0; }

/* dimming of neighbours */
.wp-group.is-dim .wp-card:not(.is-hot) .wp-media { filter: brightness(.45) saturate(.75); }

/* ---------- editorial grid ---------- */
.wgrid {
  position: relative; z-index: 1; max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); row-gap: clamp(46px, 9vh, 120px);
  align-items: start;
}
.wgrid > .wp-card { margin-top: var(--mt, 0); }

/* ---------- featured print (tilt) ---------- */
.wp-tilt { transform-origin: 50% 50%; }
.wp-card--feature .wp-media { box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
.wp-card--feature .wp-media__inner { transform: scale(1.025); }

/* ---------- archive tag ---------- */
.wp-tag { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 3px 6px; font-size: 8.5px; background: rgba(8, 8, 8, .7); color: var(--ivory-80); }

@media (max-width: 760px) {
  .wgrid { grid-template-columns: 1fr; row-gap: 54px; }
  .wgrid > .wp-card { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 0 !important; }
  .wgrid > .wp-card.is-narrow { width: 74%; }
  .wgrid > .wp-card.is-narrow.is-right { margin-left: auto; }
  .wp-reveal { opacity: 1; background: linear-gradient(180deg, rgba(8, 8, 8, 0) 58%, rgba(8, 8, 8, .6)); }
  .wp-reveal > * { transform: none; }
  .wp-reveal__top, .wp-reveal__view { visibility: hidden; }
  .wp-group.is-dim .wp-card:not(.is-hot) .wp-media { filter: none; }
}