/* ============================================================
   GALAXY — Rezomy Core bridge
   Loaded after core.css + sections.css. Only adapts the template to
   WordPress and to real, variable-length resume data; the visual
   language itself stays in the two original stylesheets.
   ============================================================ */

/* the public shell (app.css) forces a light canvas with !important; Galaxy owns this page */
html body.rz-resume-document-page.rz-galaxy-document-page{background:var(--k-800)!important;color:var(--ink);font-family:var(--fa)}
/* the shell's wrapper is painted light and is a stacking context (z-index:1); Galaxy's
   header lives outside it, so the opening titles inside it would sit under the header */
body.rz-galaxy-document-page #rz-public-resume-root.rz-public-resume-wrap{background:transparent!important;position:static!important;
  z-index:auto!important;min-height:0!important;padding:0!important}

/* resume fonts chosen in the Studio replace the template stack */
.rz-galaxy-document-page h1,.rz-galaxy-document-page h2,.rz-galaxy-document-page h3,
.rz-galaxy-document-page h4{font-family:var(--gx-heading,var(--fa))}
.rz-galaxy-document-page .hero__name{font-family:var(--gx-name,var(--gx-heading,var(--fa)))}

/* the WordPress toolbar is fixed; keep the sticky header below it */
body.admin-bar .hdr{top:32px}
@media (max-width:782px){body.admin-bar .hdr{top:46px}}
@media (max-width:600px){body.admin-bar .hdr{top:0}}

/* motion switched off in the resume design behaves like reduced motion */
[data-motion="off"]{--m:.001}
[data-motion="off"] .js-rv .rv{opacity:1;transform:none;transition:none}
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}

/* grids sized by how many items the owner actually entered */
@media (min-width:768px){
  .stats[style*="--gx-n"]{grid-template-columns:repeat(var(--gx-n),minmax(0,1fr))}
}
@media (min-width:1280px){
  .svc[style*="--gx-n"]{grid-template-columns:repeat(var(--gx-n),minmax(0,1fr))}
  .prc[style*="--gx-n"]{grid-template-columns:repeat(var(--gx-n),minmax(0,1fr))}
  .tl__row[style*="--gx-n"]{grid-template-columns:repeat(var(--gx-n),minmax(0,1fr))}
}

/* background section (education, certificates, languages, notes) */
.gx-sub{font-size:clamp(16px,1.3vw,20px);font-weight:620;color:var(--c-100)}
.gx-note .lead{max-width:72ch}
.awd__i .gx-ext{margin-inline-start:auto;width:32px;height:32px;flex:none;border-radius:10px;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);
  transition:border-color var(--t-hover),background var(--t-hover)}
.awd__i .gx-ext:hover{border-color:var(--line-hi);background:rgba(47,107,255,.10)}
.awd__i .gx-ext svg{width:14px;height:14px}
[dir="rtl"] .awd__i .gx-ext svg{transform:scaleX(-1)}

/* owner shortcut back to the Studio */
.hdr__cta .gx-edit{border-style:dashed}
@media (max-width:1279px){.hdr__cta .gx-edit{display:none}}

/* project cards without an uploaded cover keep a calm surface */
.pcard.is-noimg,.dt__hero.is-noimg,.g-media.is-noimg{
  background:linear-gradient(150deg,var(--g-blue-800),var(--g-blue-950) 60%,var(--k-800))}
.is-noimg img{opacity:0}

/* server-rendered fallback, visible only when scripts cannot run */
.gx-nojs{max-width:760px;margin:0 auto;padding:96px 24px;color:var(--ink);font-family:var(--fa);line-height:2}
.gx-nojs h1{font-size:32px;margin-bottom:8px}
.gx-nojs p{color:var(--ink-2)}
.gx-nojs a{color:#9FC0FF;text-decoration:underline}

/* ============================================================
   3.15 — video is a first-class medium
   ============================================================ */
/* in-page jumps land below the sticky header */
#app section[id]{scroll-margin-top:84px}

/* player: the frame takes the film's shape (set inline by app.js); the picture is
   never cropped — any space left shows a blurred, darkened copy of its own still */
.reel{background:#03060c}
.reel__bg{position:absolute;inset:-8%;width:116%!important;height:116%!important;max-width:none;object-fit:cover;
  filter:blur(26px) brightness(.42) saturate(1.15);pointer-events:none}
.reel__poster{object-position:var(--fx,50%) var(--fy,50%)}
.reel.is-fit .reel__poster{object-fit:contain!important}
.reel.is-frame .reel__poster{display:none}
.reel__v{object-fit:contain!important;background:transparent!important;opacity:0;transition:opacity calc(300ms*var(--m)) var(--ease);cursor:pointer}
.reel.is-started .reel__v,.reel.is-frame .reel__v{opacity:1}
.reel.is-started .reel__poster{opacity:0}
.reel.is-started:not(.is-playing) .reel__shade{opacity:.55}
/* the control bar is a timeline: it runs left to right, like an editor's */
.pbar{direction:ltr}
@media (hover:none){
  .reel.is-started .pbar{opacity:1;transform:none}
  .reel.is-started .reel__top{opacity:0}
}
/* fullscreen: the whole box fills the screen, the film stays whole */
.reel:fullscreen,.reel.is-fs{aspect-ratio:auto!important;width:100vw!important;height:100vh!important;max-height:none;border-radius:0!important;background:#000}
.reel:-webkit-full-screen{aspect-ratio:auto!important;width:100vw!important;height:100vh!important;border-radius:0!important;background:#000}
.reel:fullscreen .g-media,.reel:-webkit-full-screen .g-media{border-radius:0!important}
.reel:fullscreen .reel__v,.reel:-webkit-full-screen .reel__v{opacity:1}
.reel:fullscreen .pbar,.reel:-webkit-full-screen .pbar{padding-bottom:max(12px,env(safe-area-inset-bottom));padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}
.reel:fullscreen .reel__top,.reel:-webkit-full-screen .reel__top{padding-top:max(16px,env(safe-area-inset-top))}
.gx-fs .hdr{visibility:hidden}

/* project cards */
.pcard__media{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:var(--g-blue-950)}
.pcard__img{object-position:var(--fx,50%) var(--fy,50%)}
.pcard__bg{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;filter:blur(22px) brightness(.5) saturate(1.1);pointer-events:none}
.pcard.is-fit .pcard__img{object-fit:contain}
.pcard.is-fit:hover .pcard__img,.pcard.is-fit:focus-visible .pcard__img{transform:none}
.pcard__frame{background:#03060c}
.pcard__pv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;
  transition:opacity calc(360ms*var(--m)) var(--ease)}
.pcard.is-previewing .pcard__pv{opacity:1}
.pcard__vid{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;
  background:rgba(4,10,22,.66);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:11px;line-height:1;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pcard__vid svg{width:12px;height:12px}
.pcard__vid .mono{letter-spacing:.06em}
.pcard__t{text-shadow:0 1px 14px rgba(0,0,0,.45)}

/* case study */
.var__ph{display:grid;place-items:center;width:100%;aspect-ratio:16/9;background:linear-gradient(150deg,var(--g-blue-800),var(--g-blue-950));color:rgba(207,224,255,.8)}
.var__ph svg{width:26px;height:26px}
.gal{display:block;columns:2 260px;column-gap:var(--s2)}
.gal figure{break-inside:avoid;margin:0 0 var(--s2);display:block}
.gal img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}

/* tools — still dark and heavy, now readable at a glance */
.sec-note{color:rgba(242,238,229,.64)}
.tool{border-color:rgba(255,255,255,.13);background:linear-gradient(150deg,rgba(16,40,84,.40),rgba(8,14,28,.52))}
.tool:hover{border-color:rgba(120,160,255,.46);background:linear-gradient(150deg,rgba(22,56,120,.48),rgba(8,14,28,.55))}
.tool__mk{min-width:34px;width:auto;height:34px;padding:0 6px;border-color:rgba(120,160,255,.40);
  background:rgba(18,52,120,.55);color:#DCE7FF;font-size:11.5px}
.tool .tool__tx{display:grid;gap:3px;min-width:0;font:inherit;font-size:inherit;letter-spacing:0;text-transform:none;color:inherit}
.tool b{font-family:var(--en),var(--fa);font-size:14px;font-weight:620;line-height:1.4;letter-spacing:0;text-transform:none;
  color:var(--c-100);overflow-wrap:anywhere;unicode-bidi:plaintext}
.tool .tool__lv{font-family:var(--fa);font-size:12px;line-height:1.6;letter-spacing:0;text-transform:none;color:rgba(184,208,255,.86);unicode-bidi:plaintext}

@media (max-width:767px){
  /* a card takes the shape of its own still (clamped), so nothing important is cut */
  .pgrid .pcard{height:auto!important;aspect-ratio:var(--car,1.6);min-height:212px}
  .pcard--big,[dir="rtl"] .pcard--big{border-start-start-radius:40px;border-start-end-radius:var(--r-card)}
  [dir="ltr"] .pcard--big{border-start-end-radius:40px;border-start-start-radius:var(--r-card)}
  .pcard__vg{background:linear-gradient(180deg,rgba(4,9,18,.12) 0%,rgba(4,9,18,0) 34%,rgba(3,7,15,.92) 100%)}
  .gal{columns:1}
  .tool{padding:12px}
  .tool b{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .pcard__pv{display:none}
}

/* the case-study player may be narrower than the panel (vertical films): the frame
   carries the curve and the shadow, its wrapper stays out of sight */
.dt>.g5{background:transparent!important;box-shadow:none!important;overflow:visible!important;border-radius:0!important}
.dt__hero{box-shadow:var(--sh-media);overflow:hidden;width:100%}

/* availability chip under the portrait: as wide as its words (up to the screen), an ellipsis only for very long text */
.av__pill{width:max-content;max-width:min(86vw,360px)}
.av__pill>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}