/* EJT Management - talent agency.
   Palette and type taken from the Elementor kit (post-7): beige #EAE8E2, navy #202E3D,
   warm grey #D7D3CB, Montserrat for headings and body, Poppins for small caps labels.

   NOTE: the original kit also sets body to "Nocturne Serif" and h1 to "Vilane" - neither
   family is ever loaded on this site, so both silently fall back to sans-serif. Montserrat
   is set explicitly here instead, which is what the page actually renders as. */

/* -------------------------------------------------- Fonts */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/montserrat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2'); }

/* -------------------------------------------------- Tokens */
:root {
  --beige: #EAE8E2;      /* --e-global-color-a07b695 */
  --navy:  #202E3D;      /* --e-global-color-accent / secondary */
  --warm:  #D7D3CB;      /* --e-global-color-d0eb5af */
  --white: #FFFFFF;
  --ink:   #000000;
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --label: 'Poppins', var(--sans);
  --pad:   clamp(20px, 5vw, 64px);
  --maxw:  1240px;
}

/* -------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--beige);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { width: min(100%, var(--maxw)); margin-inline: auto; padding-inline: var(--pad); }

/* Small caps label, the Poppins 12px uppercase style from the original. */
.label {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* -------------------------------------------------- Header */
.site-head {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 3vw, 38px) var(--pad);
}
.site-head .ig { display: grid; place-items: center; width: 34px; height: 34px; color: var(--navy); }
.site-head .ig svg { width: 20px; height: 20px; fill: currentColor; }
.site-head .brand img { width: clamp(64px, 8vw, 92px); }

.lang { display: flex; gap: 14px; }
.lang a {
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: .1em;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .3s, opacity .3s;
}
.lang a[aria-current="true"] { border-bottom-color: currentColor; }
.lang a:not([aria-current="true"]) { opacity: .55; }
.lang a:hover { opacity: 1; }

/* -------------------------------------------------- Hero blobs */
/* The original built these with a ThePlus "morphing layouts" widget backed by an inline
   SVG (viewBox 0 0 1400 700). The same paths are reused here as plain inline SVG, with the
   morph reduced to a slow CSS transform - no addon, no runtime library. */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(78vh, 760px);
  text-align: center;
  overflow: hidden;
  padding-inline: var(--pad);
}
.hero-blob {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-blob .blob-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* The chip path is centred on its own origin, so it gets its own square viewBox and is
   placed with CSS - dropping it into the main sliced viewBox put it wherever the crop fell. */
.hero-blob .blob-chip {
  position: absolute;
  top: 6%;
  right: 4%;
  width: clamp(70px, 9vw, 130px);
  height: auto;
  display: block;
}
@media (max-width: 820px) { .hero-blob .blob-chip { top: 3%; right: 2%; width: 64px; } }
/* The shapes genuinely morph now (SMIL animates the d attribute), so no transform fakery. */
.hero-blob .big, .hero-blob .chip { fill: var(--navy); }

/* Mark high, cue low - the original spaces them down the blob rather than stacking them. */
.hero-inner { position: relative; z-index: 1; display: grid; gap: clamp(60px, 14vh, 150px); justify-items: center; }
.hero-mark { width: clamp(120px, 16vw, 190px); }
.hero-tag { color: var(--beige); max-width: 46ch; }

.scroll-cue { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(234, 232, 226, .14); color: var(--beige); }
.scroll-cue svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8;
  animation: nudge 1.8s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(-3px); opacity: .5; }
  50%      { transform: translateY(4px);  opacity: 1; }
}

/* -------------------------------------------------- Talents */
.talents { display: flex; flex-direction: column; }

.talent {
  padding-block: clamp(48px, 9vh, 110px);
  padding-inline: var(--pad);
}
/* Alternating bands, as on the original: warm grey, navy, warm grey, navy... */
.talent:nth-child(odd)  { background: var(--warm); color: var(--navy); }
.talent:nth-child(even) { background: var(--navy); color: var(--beige); }

.talent-inner {
  width: min(100%, var(--maxw));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
/* Mirror every other row so the eye zig-zags down the page. */
.talent:nth-child(even) .talent-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.talent:nth-child(even) .talent-media { order: 2; }

/* Portrait floats on its own morphing blob, as on the original.
   Three details taken from the Elementor CSS rather than invented:
     - the image is capped at 420px (245px on mobile), not full-column width,
     - it is masked with ejt-talent-mask.svg, an organic egg echoing the EJT mark,
     - it floats with content_effect_floating: translateY 0 -> 2% -> 0 over 3s.
   The blob behind is deliberately larger so it stays visible around the portrait. */
.talent-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 1px;
}
.talent-blob {
  grid-area: 1 / 1;
  width: min(100%, 540px);
  height: auto;
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
}
.talent:nth-child(odd)  .talent-blob { fill: var(--beige); }
.talent:nth-child(even) .talent-blob { fill: #16222B; }

.talent-media img {
  grid-area: 1 / 1;
  z-index: 1;
  width: 100%;
  max-width: 360px;                      /* original caps at 420px; a little tighter
                                            so the blob reads as a halo behind it */
  aspect-ratio: 39.55 / 43.33;           /* the mask's own proportions */
  object-fit: cover;
  -webkit-mask: url('../img/talent-mask.svg') center / contain no-repeat;
          mask: url('../img/talent-mask.svg') center / contain no-repeat;
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2%); }
}

@media (max-width: 820px) {
  .talent-media img { max-width: 245px; }   /* original mobile cap */
  .talent-blob { width: min(100%, 330px); }
}

.talent-name { font-size: clamp(1.6rem, 2.4vw + .9rem, 2.5rem); font-weight: 600; line-height: 1.1; }
.talent-handle { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  text-decoration: none; opacity: .8; transition: opacity .3s; }
.talent-handle:hover { opacity: 1; }
.talent-handle svg { width: 15px; height: 15px; fill: currentColor; }
.talent-bio { margin-top: clamp(14px, 2vh, 22px); }
.talent-bio p + p { margin-top: .9em; }

/* Expand/collapse, replacing the addon's "Czytaj więcej". <details> works with no JS and
   is keyboard accessible; the marker is hidden and replaced by the styled summary. */
.talent-more { margin-top: 14px; }
.talent-more > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  list-style: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.talent-more > summary::-webkit-details-marker { display: none; }
.talent-more > summary::after { content: '↓'; transition: transform .3s; }
.talent-more[open] > summary::after { transform: rotate(180deg); }
.talent-more[open] > summary { margin-bottom: 12px; }

.talent-link {
  display: inline-block;
  margin-top: 18px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity .3s;
}
.talent-link:hover { opacity: .65; }

@media (max-width: 820px) {
  .talent-inner,
  .talent:nth-child(even) .talent-inner { grid-template-columns: 1fr; }
  .talent:nth-child(even) .talent-media { order: 0; }
}

/* -------------------------------------------------- Talent detail page */
.detail { padding-block: clamp(36px, 7vh, 90px); }
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}
.detail-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 50% 50% 48% 52% / 44% 46% 54% 56%; }
.detail h1 { font-size: clamp(2rem, 3.4vw + 1rem, 3.2rem); font-weight: 600; line-height: 1.1; }
.detail-bio { margin-top: clamp(16px, 3vh, 28px); }
.detail-bio p + p { margin-top: .9em; }
.back-link { display: inline-block; margin-top: 28px; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 3px; }
@media (max-width: 820px) { .detail-grid { grid-template-columns: 1fr; } }

/* Bilingual detail page: one URL carries both bios, the toggle swaps which is shown. */
.bio-switch { display: flex; gap: 10px; margin-top: 18px; }
.bio-switch button {
  font: inherit;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  opacity: .5;
  transition: opacity .25s, background .25s;
}
.bio-switch button[aria-pressed="true"] { opacity: 1; background: rgba(32, 46, 61, .1); }
[data-lang-panel][hidden] { display: none !important; }

/* -------------------------------------------------- Footer */
.site-foot {
  margin-top: auto;
  background: var(--beige);
  padding: clamp(38px, 7vh, 84px) var(--pad) 0;
}
.site-foot-inner {
  width: min(100%, var(--maxw));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-foot-inner > * { width: 33.333%; }
.site-foot ul { list-style: none; padding: 0; }
.site-foot a { text-decoration: none; transition: opacity .3s; }
.site-foot a:hover { opacity: .6; }
.site-foot .col-mark { text-align: center; }
.site-foot .col-mark img { width: 78px; margin-inline: auto; }
.site-foot .col-legal { text-align: end; }

.site-copy {
  margin-top: clamp(28px, 5vh, 56px);
  background: var(--navy);
  color: var(--beige);
  padding: 22px var(--pad);
}
.site-copy-inner {
  width: min(100%, var(--maxw));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: .85rem;
}
.site-copy a { text-decoration: none; }
.site-copy a:hover { text-decoration: underline; }
.site-copy .ig svg { width: 18px; height: 18px; fill: currentColor; }

@media (max-width: 820px) {
  .site-foot-inner { flex-direction: column; text-align: center; }
  .site-foot-inner > * { width: 100%; }
  .site-foot .col-legal { text-align: center; }
  .site-copy-inner { flex-direction: column; text-align: center; }
}

/* -------------------------------------------------- Legal pages */
.legal { padding-block: clamp(32px, 6vh, 72px); }
.legal-body { max-width: 74ch; }
.legal-body h1 { font-size: clamp(1.9rem, 3vw + 1rem, 2.8rem); font-weight: 600; margin-bottom: .6em; }
.legal-body h2 { font-size: 1.35rem; font-weight: 600; margin: 1.8em 0 .5em; }
.legal-body h3 { font-size: 1.1rem; font-weight: 600; margin: 1.4em 0 .4em; }
.legal-body p, .legal-body ul, .legal-body ol { margin-bottom: 1em; }
.legal-body ul, .legal-body ol { padding-left: 1.3em; }
.legal-body li { margin-bottom: .35em; }
.legal-body a { text-decoration: underline; }
.legal-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; font-size: .95em; }
.legal-body th, .legal-body td { border: 1px solid rgba(32, 46, 61, .2); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-body .scroll-x { overflow-x: auto; }

/* -------------------------------------------------- 404 */
.nf { flex: 1; display: grid; place-content: center; text-align: center; padding: 4em var(--pad); }
.nf h1 { font-size: clamp(56px, 13vw, 130px); font-weight: 600; line-height: 1; }
.nf p { margin: .6em 0 1.4em; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue svg, .talent-media img { animation: none; }
  /* SMIL ignores prefers-reduced-motion, so freeze the morphs explicitly. */
  .hero-blob animate, .talent-blob animate { display: none; }
}