/* ============================================================
   Website UI kit — page layout
   Kit-local composition styles (not shipped via styles.css).
   Uses the design tokens; components carry their own styling.
   ============================================================ */

body { background: var(--bg); color: var(--text); }
main { display: block; }

/* Smooth in-page navigation. scroll-padding-top offsets anchor targets below
   the 64px sticky header so section tops never hide behind it. Disabled for
   users who prefer reduced motion. */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Section intros: the component caps .ls-intro at 56ch, which forces long
   Ukrainian serif titles (e.g. «Міждисциплінарний шлях») to wrap/break. On
   desktop let the title use the full content width; keep the grey lead
   paragraph at a readable measure. */
@media (min-width: 768px) {
  .ls-intro:not(.ls-intro--center) { max-width: none; }
  .ls-intro__lead { max-width: 56ch; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--section-y); }
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.hero__name { font-family: var(--font-display); font-size: var(--display-1); font-weight: 500; line-height: 0.95; letter-spacing: var(--tracking-tight); }
.hero__name em { font-style: italic; font-weight: 400; }
.hero__desc { font-size: var(--text-lg); line-height: 1.5; color: var(--text-muted); max-width: 46ch; }
.hero__cta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.hero__stats { display: flex; gap: clamp(1.5rem, 1rem + 2vw, 3rem); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--line); width: 100%; }
.hero__media { position: relative; }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { max-width: 420px; }
}

/* ---------- Bio ---------- */
.bio__body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); margin-top: var(--space-9); }
.bio__col p { color: var(--text-muted); margin-bottom: var(--space-4); }
.bio__col p:last-child { margin-bottom: 0; }
.bio__tags { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
@media (max-width: 760px) { .bio__body { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ---------- Directions ---------- */
.directions__list { margin-top: var(--space-8); border-bottom: 1px solid var(--line); }

/* ---------- Mission band (dark) ---------- */
.mission { background: var(--bg); padding-block: clamp(5rem, 3rem + 8vw, 11rem); }
.mission__inner { display: flex; flex-direction: column; gap: var(--space-6); align-items: center; text-align: center; }
.mission__quote { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.75rem); line-height: 1.16; letter-spacing: var(--tracking-tight); max-width: 20ch; margin: 0; color: var(--text); }
.mission__quote em { font-style: italic; color: var(--accent); }
.mission__sig { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-subtle); }

/* ---------- Portfolio / Model profile ---------- */
.profile { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 1rem + 4vw, 5rem); margin-top: var(--space-9); align-items: start; }
.profile__media { position: sticky; top: 100px; }
.profile__group { margin-bottom: var(--space-8); }
.profile__h, .contacts__h { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--space-4); }
.profile__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-5); }
.profile__langs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); }
@media (max-width: 820px) {
  .profile { grid-template-columns: 1fr; }
  .profile__media { position: static; max-width: 360px; }
  .profile__langs { grid-template-columns: 1fr; }
}

.portfolio__brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); margin-top: var(--space-10); }
.portfolio__gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); margin-top: var(--space-8); align-items: start; }
/* Grid items default to min-width:auto, so each figure/card derives its
   min-content width from the intrinsic image and overflows its track (the
   right column bleeds off-screen on mobile). min-width:0 lets them shrink to
   the track; the figure's own overflow:hidden then clips the cover image. */
.portfolio__gallery > .ls-figure { width: 100%; min-width: 0; }
.portfolio__brands > .ls-bcard { min-width: 0; }
/* <figure> carries a UA-default `margin: 1em 40px`; base.css resets p/h/img
   but not figure, so every .ls-figure was offset 40px and the right grid
   column overflowed. Reset it (the design assumes flush figures). */
.ls-figure { margin: 0; }
.ls-figure, .ls-figure__img { min-width: 0; }
@media (max-width: 820px) {
  .portfolio__brands, .portfolio__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Projects ---------- */
.projects__list { margin-top: var(--space-8); border-bottom: 1px solid var(--line); }

/* ---------- Events ---------- */
.events { background: var(--bg-alt); }
.events__list { margin-top: var(--space-8); border-bottom: 1px solid var(--line); }
.events__note { margin-top: var(--space-6); font-size: var(--text-sm); font-style: italic; color: var(--text-muted); max-width: 62ch; }

/* ---------- Contacts ---------- */
.contacts__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.contacts__lead { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.contacts__group { margin-bottom: var(--space-8); }
.contacts__social { margin-top: var(--space-2); }
@media (max-width: 760px) { .contacts__inner { grid-template-columns: 1fr; } }

/* ---------- Entrance animation ---------- */
@media (prefers-reduced-motion: no-preference) {
  .u-section > .u-container > * { animation: rise var(--dur-slow) var(--ease-out) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---------- Overflow safeguards ----------
   Long Ukrainian words in the large serif display can exceed a narrow
   viewport. Grid/flex text children default to min-width:auto, so their
   min-content size (a single long word) blows out the track and forces a
   horizontal scrollbar. Allow those children to shrink and let long
   display words wrap. Purely defensive — no visual change on desktop. */
/* Final guard: clip (not scroll) any sub-pixel horizontal overflow so no
   stray element can produce a horizontal scrollbar. `clip` — unlike `hidden`
   — does not create a scroll container, so the sticky header keeps working. */
body { overflow-x: clip; }
.hero__text, .bio__col, .profile__data, .contacts__lead, .contacts__data,
.ls-dcard__row, .ls-pcard__main, .ls-event { min-width: 0; }
.hero__name, .ls-intro__title, .mission__quote, .ls-pcard__domain,
.ls-dcard__title, .ls-bcard__name, .ls-event__title, .ls-footer__brand {
  overflow-wrap: break-word;
}

/* Header: on narrow screens drop the decorative kick and tighten the gap so
   the brand + contact button + burger cluster never exceeds the viewport. */
@media (max-width: 560px) {
  .ls-header__inner { gap: var(--space-3); }
  .ls-brand__kick { display: none; }
}

/* ---------- Mobile burger menu ----------
   The bundled SiteHeader toggles an `open` state but never rendered a menu;
   Site.jsx now uses a local header that renders .ls-header__menu. These styles
   make it a hairline dropdown under the sticky bar (mobile only). */
.ls-header__menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg);
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid var(--line);
  padding: var(--space-2) var(--section-x) var(--space-6);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
  z-index: var(--z-nav);
}
.ls-header__menu.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.ls-header__menu nav { display: flex; flex-direction: column; }
.ls-header__menu nav a {
  font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--w-medium);
  color: var(--text-muted); letter-spacing: 0.01em;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line-faint);
}
.ls-header__menu nav a:hover,
.ls-header__menu nav a[aria-current="true"] { color: var(--text); }
.ls-header__menu-lang { margin-top: var(--space-5); }
@media (min-width: 861px) { .ls-header__menu { display: none; } }

/* Burger animates to an X when the menu is open (two hairline bars). */
.ls-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.ls-header__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }