/* eZephyr v2 — portfolio screenshots and project pages (Milestones 6C–6E).
 * Real screenshots of live client sites, presented the same way everywhere. Screenshots are
 * never cropped, stretched or edited: every frame keeps the image's own 16:10 aspect ratio,
 * and the frames are drawn in CSS. Screenshots appear only on the portfolio cards (/work/,
 * Website Development); the project pages (/work/<client>/) are introductions that send
 * visitors to the live website (founder decision, Milestone 6E).
 *
 *   .ez-browser     a browser window: .ez-browser__bar (dots + domain) above an <img>
 *   .ez-stage       a soft brand-colour backdrop that frames a screenshot (cards)
 *   .ez-tone--*     the project's colour (card stage, project-page facts panel)
 *   .ps-*           project page (introduction)
 */

.ez-tone--sky { --tone: color-mix(in srgb, var(--ez-sky) 45%, #fff); }
.ez-tone--yellow { --tone: color-mix(in srgb, var(--ez-yellow) 45%, #fff); }
.ez-tone--lilac { --tone: color-mix(in srgb, var(--ez-lilac) 45%, #fff); }
.ez-tone--stone { --tone: color-mix(in srgb, var(--ez-stone) 50%, #fff); }
.ez-tone--sea { --tone: color-mix(in srgb, var(--ez-sea-light) 30%, #fff); }

/* ---------- Browser window ---------- */
.ez-browser {
  display: block;
  overflow: hidden;
  border: 2px solid var(--ez-ink);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 36px -20px rgba(49, 49, 50, 0.55);
}
.ez-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 2.4em;
  padding-inline: 0.9em;
  border-bottom: 1px solid rgba(49, 49, 50, 0.22);
  background: #f4f2ee;
  font: 600 clamp(9px, 0.9vw, 12px)/1 var(--ez-font-body);
  color: var(--ez-ink-soft);
}
.ez-browser__dots { display: flex; gap: 0.45em; flex: none; }
.ez-browser__dots i { width: 0.8em; height: 0.8em; border-radius: 50%; background: #d4d1cb; }
.ez-browser__url {
  overflow: hidden;
  min-width: 0;
  margin-inline: auto;
  padding: 0.4em 1.4em;
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* width/height attributes give the 16:10 box before the image loads; height: auto keeps it true. */
.ez-browser img { display: block; width: 100%; height: auto; }

/* ---------- Stage: a quiet backdrop with even margins, the whole screenshot visible ---------- */
.ez-stage {
  display: block;
  padding: clamp(18px, 6%, 40px);
  background: var(--tone, var(--ez-sky-light));
}

@media (prefers-reduced-motion: no-preference) {
  .ez-stage .ez-browser { transition: transform 0.45s var(--ez-ease-out), box-shadow 0.45s var(--ez-ease-out); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.wk-card, .sv-proj):hover .ez-stage .ez-browser { transform: translateY(-5px); box-shadow: 0 26px 40px -20px rgba(49, 49, 50, 0.6); }
}

/* ================= Project page: one composed introduction =================
 * Title, description and the two actions on the left; the facts on the project's colour on
 * the right (below on phones and tablets); project navigation along the foot. The block fills
 * most of the screen so the short page reads as intended, not as missing content. */
.ps-wrap { width: min(100% - 2 * var(--ez-gutter), var(--ez-max)); margin-inline: auto; }

.ps-intro { background: var(--ez-paper); }
.ps-intro__inner {
  display: flex;
  flex-direction: column;
  min-height: min(82svh, 820px);
  padding-block: clamp(20px, 3.5vw, 44px) 0;
}
.ps-intro__grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
  margin-block: clamp(36px, 7vw, 104px) clamp(40px, 7vw, 96px);
}
@media (min-width: 900px) { .ps-intro__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }

.ps-hero__eyebrow {
  display: inline-block;
  padding: 5px 11px 4px;
  border-radius: 3px;
  background: var(--ez-yellow);
  font: 400 0.875rem/1.2 var(--ez-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ps-hero__title {
  margin-top: 16px;
  font: 400 clamp(2.75rem, 7.5vw, 6rem)/0.92 var(--ez-font-display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.ps-hero__meta { margin-top: 14px; font-weight: 700; font-size: 1.125rem; letter-spacing: 0.02em; color: var(--ez-ink-soft); }
.ps-hero__intro { max-width: 38rem; margin-top: clamp(18px, 2.4vw, 28px); font-size: var(--ez-text-lead); line-height: 1.5; }
.ps-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: clamp(24px, 3vw, 36px); }

/* Facts: a panel in the project's colour; optionally the client's logo at the top (only with
   the client's permission, and only the client's own file, unaltered). */
.ps-panel {
  padding: clamp(6px, 1vw, 10px) clamp(20px, 2.4vw, 30px);
  border: 2px solid var(--ez-ink);
  border-radius: 10px;
  background: var(--tone, var(--ez-sky-light));
}
.ps-panel__logo {
  margin: 0;
  padding-block: clamp(16px, 2vw, 22px) clamp(14px, 1.8vw, 20px);
  border-bottom: 1.5px solid rgba(49, 49, 50, 0.4);
}
.ps-panel__logo img { display: block; width: clamp(140px, 14vw, 184px); height: auto; }
.ps-facts { display: grid; margin: 0; }
.ps-facts > div { padding-block: clamp(14px, 1.6vw, 18px); }
.ps-facts > div + div { border-top: 2px solid var(--ez-ink); }
/* Tablets: the panel spans the page, so two facts to a row. */
@media (min-width: 600px) and (max-width: 899px) {
  .ps-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 32px); }
  .ps-facts > div:nth-child(2) { border-top: 0; }
}
.ps-facts dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ez-ink); }
.ps-facts dd { margin: 4px 0 0; font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.2 var(--ez-font-display); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.ps-facts a { color: inherit; text-decoration: underline; text-decoration-color: var(--ez-sea); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.ps-facts a:hover { text-decoration-color: var(--ez-ink); }
.ps-facts a:focus-visible { outline: 3px solid var(--ez-ink); outline-offset: 3px; }

/* Visit-the-live-site link */
.ps-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  font-family: var(--ez-font-display);
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ez-ink);
  text-decoration: underline;
  text-decoration-color: var(--ez-sea-light);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}
.ps-live:hover { text-decoration-color: var(--ez-ink); }
.ps-live:focus-visible { outline: 3px solid var(--ez-ink); outline-offset: 3px; }

/* Project navigation: back to all work, on to the next project */
.ps-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: auto; padding-block: clamp(18px, 2.6vw, 28px); border-top: 3px solid var(--ez-ink); }
.ps-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font: 400 1.125rem/1.2 var(--ez-font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ez-ink);
  text-decoration: none;
}
.ps-nav a:hover span:not([aria-hidden]) { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.ps-nav a:focus-visible { outline: 3px solid var(--ez-ink); outline-offset: 3px; }
.ps-nav small { display: block; font: 700 0.75rem/1.2 var(--ez-font-body); letter-spacing: 0.08em; color: var(--ez-ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  .ps-hero__title { animation: ez-rise 0.8s var(--ez-ease-out) both 0.08s; }
  .ps-hero__intro, .ps-hero__actions { animation: ez-rise 0.8s var(--ez-ease-out) both 0.3s; }
  .ps-panel { animation: ez-rise 0.8s var(--ez-ease-out) both 0.42s; }
}

/* Milestone 7A: a project's scope can have several parts, one per line. */
.ps-scopes { margin: 0; padding: 0; list-style: none; }
.ps-scopes li + li { margin-top: 6px; }