/* ============================================================
   TAM DE DESIGN — Visual Tweaks Override v1.0
   Deploy to: /var/www/snisar/assets/tweaks.css
   Load AFTER index-fiObxZFG.css in index.html
   ============================================================ */

/* ============================================================
   SECTION 1 — HERO H1: "tam de" TOP / "design" CENTERED BELOW

   The JSX already renders two <span class="block"> children inside h1.
   "tam de" = first span.block, "design" = second span.block.
   The h1 is flex-column by default (since Bebas is block-level).
   We just need to center the second child.
   ============================================================ */

section#top h1.font-bebas {
  display: flex !important;
  flex-direction: column !important;
}

/* Both spans left-aligned with page edge — "design" sits directly under "tam de" */
section#top h1.font-bebas > span.block:first-child,
section#top h1.font-bebas > span.block:last-child {
  align-self: flex-start !important;
  display: block !important;
  width: max-content !important;
}

/* NOTE: actual horizontal scaling of "DESIGN" to match "TAM DE" width
   is done at runtime by /assets/tweaks.js — it measures real rendered
   widths and applies an exact scaleX. CSS just sets layout basics. */
section#top h1.font-bebas > span.block:last-child {
  letter-spacing: 0 !important;
}

/* ============================================================
   SECTION 2 — HERO SPACING: more generous breathing room
   ============================================================ */

/* Hide info row (portfolio stats) — hidden behind h1 anyway */
section#top > div.absolute[class*="top-24"] {
  display: none !important;
}

/* Hero title + subtitle wrapper: more horizontal breathing room */
section#top .absolute.inset-0.flex > div {
  padding-left: clamp(1rem, 4vw, 2.5rem) !important;
  padding-right: clamp(1rem, 4vw, 2.5rem) !important;
}

/* More space between h1 and the subtitle card */
section#top h1.font-bebas {
  margin-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}

/* ============================================================
   SECTION 3 — HERO SUBTITLE CARD: no glass, floating text
   Remove all blur/background/border. Text floats over photo.
   ============================================================ */

section#top .backdrop-blur-\[3px\] {
  --tw-backdrop-blur: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Desktop: gap between subtitle text and button (flex-row) */
@media (min-width: 768px) {
  section#top .backdrop-blur-\[3px\] {
    gap: 3rem !important;
  }
}

/* Ensure text is fully opaque */
section#top .backdrop-blur-\[3px\] p,
section#top .backdrop-blur-\[3px\] span {
  opacity: 1 !important;
}

/* Ink color on subtitle */
section#top .backdrop-blur-\[3px\] .font-display {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* ============================================================
   SECTION 4 — MOBILE-SPECIFIC POLISH (< 640px)
   ============================================================ */

@media (max-width: 639px) {
  /* Slightly larger hero title on small phones for impact */
  section#top h1.font-bebas {
    font-size: 20vw !important;
    line-height: 0.86 !important;
  }

  /* Compact glass card */
  section#top .backdrop-blur-\[3px\] {
    padding: 14px 16px !important;
    border-radius: 10px !important;
    max-width: 91vw !important;
  }

  /* Top info bar — push down a bit more so it clears the nav */
  section#top > div.absolute[class*="top-24"] {
    top: 6rem !important;
  }
}

/* ============================================================
   SECTION 5 — STACKING CONTEXT SAFETY
   Prevents blur from leaking outside the hero section
   ============================================================ */

section#top {
  isolation: isolate !important;
}

/* Disable custom cursor — show native OS cursor */
.cursor-dot,
.cursor-dot * {
  display: none !important;
  opacity: 0 !important;
}

html, body, #root,
*, *:hover,
*::before, *::after {
  cursor: default !important;
}

a, [href], button, [role="button"],
[tabindex="0"], label, select, summary,
a:hover, [href]:hover, button:hover, [role="button"]:hover {
  cursor: pointer !important;
}

/* ============================================================
   SECTION 6 — ARCHIVE CTA SIZE
   "Дивитись усі роботи →" in #projects section was 8vw mobile
   / 5vw desktop (huge). Bring down to a readable scale.
   Selector targets the exact CTA via its unique size class combo.
   ============================================================ */

section#projects .text-\[8vw\].md\:text-\[5vw\] {
  font-size: 4.5vw !important;
}
@media (min-width: 768px) {
  section#projects .text-\[8vw\].md\:text-\[5vw\] {
    font-size: 3vw !important;
  }
}
@media (min-width: 1280px) {
  section#projects .text-\[8vw\].md\:text-\[5vw\] {
    font-size: 2.4vw !important;
  }
}

/* ============================================================
   SECTION 7 — SERVICES CARD TITLE SIZE
   h3 in #services article cards: was 8vw / 9vw / 3.6vw.
   Long titles like "Авторський нагляд та комплектація" overflow
   into ellipsis. Reduce sizes ~25% so they still fit on 2 lines.
   ============================================================ */

section#services article h3.font-bebas {
  font-size: 6.2vw !important;  /* was 8vw */
}
@media (min-width: 640px) {
  section#services article h3.font-bebas {
    font-size: 6.5vw !important;  /* was 9vw */
  }
}
@media (min-width: 768px) {
  section#services article h3.font-bebas {
    font-size: 2.7vw !important;  /* was 3.6vw */
  }
}

/* ============================================================
   SECTION 8 — CONTACT HUGE TITLE "ЗАДИЗАЙНИМО РАЗОМ" IN ONE LINE
   Was: huge1 + huge2 as two stacked <span class="block">.
   Now: both inline so they render on one line.
   Also reduce font-size since the new word is much longer
   ("ЗАДИЗАЙНИМО РАЗОМ" = 17 chars vs old "ЗБУДУЙМО" 8 chars).
   ============================================================ */

section#contact h2.font-bebas {
  font-size: clamp(1.4rem, 5vw, 2.4rem) !important;
  white-space: nowrap;
  overflow: visible;
  letter-spacing: 0.02em !important;  /* reduce default 0.06em tracking */
}
@media (min-width: 640px) {
  section#contact h2.font-bebas {
    font-size: clamp(2rem, 6vw, 4rem) !important;
  }
}
@media (min-width: 768px) {
  section#contact h2.font-bebas {
    font-size: clamp(2.5rem, 6.5vw, 5.5rem) !important;
  }
}
@media (min-width: 1280px) {
  section#contact h2.font-bebas {
    font-size: clamp(3rem, 6vw, 6.5rem) !important;
  }
}

/* Make both span.block children render inline (one line) */
section#contact h2.font-bebas > span.block {
  display: inline !important;
}

/* Force a space between huge1 and huge2 */
section#contact h2.font-bebas > span.block:first-child::after {
  content: " ";
  white-space: pre;
}

/* "?" after РАЗОМ — Bebas Neue's punctuation is too thin compared to letters.
   Thicken it with text-stroke so visual weight matches the bold caps. */
section#contact h2.font-bebas > span.block:last-child > span.text-ink {
  -webkit-text-stroke: 0.06em currentColor !important;
  text-stroke: 0.06em currentColor;
  font-size: 1.05em;
}

/* ============================================================
   SECTION 9 — PROJECT DETAIL MODAL: 2× WIDER

   Clicking a project opens a modal. The panel inside is capped
   at Tailwind max-w-4xl (56rem / 896px). Double it to 112rem so
   the project window opens twice as wide on desktop.

   Backdrop  = div.fixed.inset-0.z-[90]  (z-[90] is unique to it)
   Panel     = its direct child div.max-w-4xl
   min(...,94vw) keeps a small margin so it never goes edge-to-edge.
   ============================================================ */

.fixed.inset-0.z-\[90\] > .max-w-4xl {
  max-width: min(112rem, 94vw) !important;  /* 2× of 56rem */
}

/* ============================================================
   SECTION 10 — TEAM PHOTOS: grayscale by default, color on hover
   The React component sets grayscale via inline style — !important
   overrides inline styles so CSS wins.
   .team-card = wrapper div (has Tailwind .group class too)
   .team-photo = the <img> inside
   ============================================================ */

.team-photo {
  filter: grayscale(100%) !important;
  transition: filter 0.45s ease !important;
}

.team-card:hover .team-photo,
.group:hover .team-photo {
  filter: grayscale(0%) brightness(1.05) !important;
}

/* ============================================================
   SECTION 11 — HERO SUBTITLE: font size, hide body, push down
   Desktop: flex-row (text left, button right) — native layout.
   ============================================================ */

section#top .backdrop-blur-\[3px\] .font-display {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-size: 13px !important;
  white-space: normal !important;
  line-height: 1.7 !important;
  -webkit-text-fill-color: var(--ink) !important;
}
@media (min-width: 768px) {
  section#top .backdrop-blur-\[3px\] .font-display {
    font-size: 15px !important;
  }
}

/* Hide body paragraph — only tagline + button shown */
section#top .backdrop-blur-\[3px\] p.font-sans {
  display: none !important;
}

/* Text above button, both centered — all screen sizes */
section#top .backdrop-blur-\[3px\] {
  display: flex !important;
  margin-top: calc(2.5rem + 5cm) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  width: 100% !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

section#top .backdrop-blur-\[3px\] > div:first-child {
  width: auto !important;
  max-width: 560px !important;
  flex-shrink: 1 !important;
}

section#top .backdrop-blur-\[3px\] > div:last-child {
  margin-top: 0 !important;
  flex-shrink: 0 !important;
}

@media (max-width: 767px) {
  section#top .backdrop-blur-\[3px\] {
    margin-top: 34vh !important;
    gap: 1.5rem !important;
  }
  section#top .backdrop-blur-\[3px\] > div:first-child {
    max-width: 88vw !important;
  }
}

/* ============================================================
   SECTION 14 — CONTACT: prevent links/text from disappearing on hover
   ============================================================ */
section#contact a.link-underline,
section#contact a.link-underline:hover,
section#contact a.link-underline:focus {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}
section#contact li * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   SECTION 17 — FIX: величезна прогалина між #projects і #team
   React по дефолту ставить py-32 (8rem) на обидві секції.
   Зменшуємо padding щоб між ними був нормальний відступ.
   ============================================================ */

section#projects {
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}
section#team {
  padding-top: clamp(2rem, 4vw, 3rem) !important;
}

/* ============================================================
   SECTION 18 — FIX: назва hero не залазить на nav-кнопки
   h1 стартує від самого верху секції і заходить за fixed header.
   Додаємо padding-top щоб відійти від nav (≈80px висота nav).
   overflow-x: hidden обрізає можливий горизонтальний виступ DESIGN.
   ============================================================ */

section#top {
  overflow-x: hidden !important;
}

section#top .absolute.inset-0.flex > div {
  padding-top: clamp(5rem, 10vh, 8rem) !important;
}

/* Hero: use the shipped image and reserve room for the bottom ticker.
   Normal document flow lets the section grow on short/zoomed viewports. */
#top .hero-photo::before {
  background-image: url(/assets/hero-interior.png) !important;
  transform: none !important;
}

section#top {
  height: auto !important;
  min-height: 100svh;
}

#top > .absolute.inset-0.flex {
  position: relative !important;
  inset: auto !important;
  min-height: 100svh;
  padding-top: 0 !important;
  align-items: stretch !important;
}

#top > .absolute.inset-0.flex > div {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  gap: clamp(2rem, 5vh, 4rem);
  padding-bottom: calc(40px + clamp(2rem, 5vh, 4rem)) !important;
}

section#top h1.font-bebas {
  margin-bottom: 0 !important;
}

section#top .backdrop-blur-\[3px\] {
  margin-top: auto !important;
}