/* ==========================================================================
   pages.css — inner pages: page header, work filters + viewer,
   studio sections, booking form
   ========================================================================== */

/* Page header ------------------------------------------------------------ */
.phead {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--sp-10) + var(--sp-6)) var(--sp-9);
}
.phead__inner { position: relative; z-index: 1; display: grid; gap: var(--sp-6); }
.phead__title { max-width: 12ch; }
.phead__title em { font-family: var(--f-serif); font-weight: 400; }
.phead__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--sp-5); }
.phead__lead { max-width: 44ch; }

/* Work page -------------------------------------------------------------- */
.filters {
  position: sticky;
  inset-block-start: 96px;
  z-index: var(--z-raised);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-block-end: var(--sp-8);
  padding: 6px;
  border-radius: var(--r-pill);
}
.filters .chip { border-color: transparent; }
.work-grid--all .wcard { transition: opacity var(--d-mid) var(--ease-out), transform var(--d-mid) var(--ease-out); }
.work-grid--all .wcard.is-out { opacity: 0; transform: scale(0.96) translateY(20px); }
.work-grid--all .wcard[hidden] { display: none; }
.work-empty { color: var(--fg-2); }

/* Project viewer (dialog) */
.viewer {
  inline-size: min(1100px, calc(100% - 2 * var(--gutter)));
  max-block-size: calc(100% - 2 * var(--gutter));
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  color: #f5f2ff;
  background: rgba(16, 7, 40, 0.72);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: auto;
}
.viewer::backdrop { background: rgba(5, 2, 15, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.viewer[open] { animation: viewer-in 0.7s var(--ease-out); }
@keyframes viewer-in { from { opacity: 0; transform: translateY(40px) scale(0.97); } }

/* Studio page ------------------------------------------------------------ */
.manifesto { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-8); align-items: start; }
.manifesto__media { position: sticky; inset-block-start: 18vh; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; display: grid; place-items: center; background: radial-gradient(80% 70% at 50% 40%, #2a0f78, #07031a); }
.manifesto__media img { inline-size: 76%; filter: drop-shadow(0 0 40px rgba(170, 90, 255, 0.6)); }
.manifesto__media .vf { color: rgba(255, 255, 255, 0.6); }
.manifesto__media .t-mono { position: absolute; inset-block-end: 26px; inset-inline-start: 30px; color: rgba(255, 255, 255, 0.7); }
.manifesto__text { display: grid; gap: var(--sp-6); }
.manifesto__text p { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); }
.manifesto__text p:first-child { font-size: var(--fs-h4); line-height: 1.3; color: var(--fg); font-weight: 500; letter-spacing: -0.02em; }
@media (max-width: 860px) {
  .manifesto { grid-template-columns: 1fr; }
  .manifesto__media { position: relative; inset-block-start: 0; aspect-ratio: 4 / 3; }
}

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.value { display: grid; gap: var(--sp-4); align-content: start; padding: var(--sp-7) var(--sp-6); border-radius: var(--r-lg); min-block-size: 320px; }
.value__icon { inline-size: 54px; block-size: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; }
.value__icon svg { inline-size: 26px; }
.value h3 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.02em; }
.value p { color: var(--fg-2); }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } .value { min-block-size: 0; } }

.kit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.kit__item { display: grid; gap: var(--sp-2); padding: var(--sp-6); background: var(--bg-2); }
.kit__item b { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.02em; }
.kit__item span { color: var(--fg-3); }
@media (max-width: 960px) { .kit { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kit { grid-template-columns: 1fr; } }

/* Contact / booking ------------------------------------------------------ */
.book { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.contact-card { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-md); transition: transform var(--d-mid) var(--ease-out); }
.contact-card:hover { transform: translateY(-4px); }
.contact-card__icon { flex: none; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--grad-brand); color: #fff; }
.contact-card__icon svg { inline-size: 22px; }
.contact-card small { display: block; color: var(--fg-3); }
.contact-card b { font-weight: 600; letter-spacing: -0.01em; }
.form { display: grid; gap: var(--sp-6); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-xl); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.form__status { color: var(--fg-2); }
.form__status.is-ok { color: #1fb46a; }
@media (max-width: 960px) {
  .book { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }