/* css/inspiracje.css — page-specific rules for the Inspiracje page (owner: I/inspiracje)
   Loaded on inspiracje.html only. Shared chrome (.container, .tool-header, tokens,
   buttons) stays in site.css (Q) — do not redefine .container here.
   2026-10-01 v3 split: content centered via .container (already wrapping the whole
   page in template/pages/inspiracje.html); one tile per row at every width (owner
   spec, unchanged); typography/padding tightened with clamp() so the grid reads
   elegant from 390 up to 1920 instead of a single fixed size stretched both ways.
   NOTE for lead at merge: these rules were moved out of site.css's old ".insp-*"
   block (~line 335-357 pre-split) — drop that block from site.css to avoid a
   double-definition (harmless duplicate today since the values match, but it's
   dead weight once this file is linked everywhere). */

.insp-group { margin-bottom: clamp(28px, 4vw, 48px); }
.insp-group__title {
  font-family: var(--font-facet); font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; font-size: clamp(.95rem, .85rem + .4vw, 1.1rem);
  margin-bottom: clamp(12px, 2vw, 18px); color: var(--fg-base);
}

.insp-grid { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 2vw, 18px); }

.insp-card {
  display: block; padding: clamp(16px, 2.4vw, 26px); font-family: var(--font-body);
  color: inherit; text-decoration: none; cursor: pointer;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.insp-card:hover { border-color: rgba(46,127,216,.55); box-shadow: 0 10px 34px rgba(19,79,166,.16); transform: translateY(-3px); }
.insp-card:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

.insp-card__title {
  font-family: var(--font-facet); font-weight: 700;
  font-size: clamp(.92rem, .86rem + .25vw, 1.04rem);
  margin-bottom: 5px; color: var(--fg-base);
}

.insp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.insp-tag { font-size: 10px; font-family: var(--font-facet); }

.insp-card__note {
  font-family: var(--font-body); font-size: clamp(.82rem, .78rem + .15vw, .88rem);
  color: var(--fg-muted); line-height: 1.55; margin-top: 6px; max-width: 64ch;
}
.insp-card__look {
  font-family: var(--font-body); font-size: clamp(.75rem, .72rem + .1vw, .8rem);
  color: var(--fg-subtle); margin-top: 8px; max-width: 64ch;
}
.insp-card__look strong { font-family: var(--font-facet); color: var(--fg-base); }

/* 2026-10-02 v4 hero background: the linked site's hero (assets/inspiracje/*.webp,
   bin/capture-heroes) sits behind the tile, blurred and faint, under a white scrim
   so text keeps WCAG AA. Tiles without a hero simply have no .insp-card__media. */
.insp-card { isolation: isolate; }
.insp-card > :not(.insp-card__media) { position: relative; z-index: 1; }
.insp-card__media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.insp-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  opacity: .16; filter: blur(3px); transform: scale(1.06); /* scale hides the blur's soft edge */
  transition: opacity .45s ease, filter .45s ease;
}
.insp-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.66) 55%, rgba(255,255,255,.5) 100%);
}
.insp-card:focus-visible .insp-card__media img { opacity: .24; filter: blur(1.5px); }
/* 2026-10-02 owner fix: on HOVER only (not focus-visible — a11y keeps the
   gentler reveal above) the hero rises much more noticeably, left-to-right:
   ~90% visible at the right edge, fading toward the left. Overrides the
   rest-state ::after scrim + img opacity/blur above for hover only. */
.insp-card:hover .insp-card__media img { opacity: .92; filter: blur(0); transform: scale(1.03); }
.insp-card:hover .insp-card__media::after {
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.08) 100%);
}
/* AA: fg-subtle (#6B7A93) is 4.3:1 even on plain white; fg-muted keeps >= 4.5 over the hero */
.insp-card__look { color: var(--fg-muted); }
@media (prefers-reduced-motion: reduce) {
  .insp-card__media img { transition: none; }
}

/* narrow phones (390 and below): tighten padding further so a card doesn't
   feel like it's fighting the viewport edge */
@media (max-width: 420px) {
  .insp-card { padding: 16px 14px; }
  .insp-card__title { font-size: .92rem; }
  .insp-group__title { font-size: .95rem; }
}