/* ============================================================
   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
   ============================================================ */

/* More vertical push from top for the info row (portfolio · selected) */
section#top > div.absolute[class*="top-24"] {
  top: 7rem !important;           /* was top-24 = 6rem */
}
@media (min-width: 768px) {
  section#top > div.absolute[class*="top-24"] {
    top: 8rem !important;         /* was md:top-28 = 7rem */
  }
}

/* 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 — GLASSMORPHISM SUBTITLE / BODY CARD

   Target: the div that already has .backdrop-blur-\[3px\]
   inside the hero section. We upgrade its blur, add a real
   semi-transparent background, sharp border, and shadow.

   Selector: section#top + .backdrop-blur-\[3px\]
   (Tailwind compiled this class — it's in the CSS output)
   ============================================================ */

section#top .backdrop-blur-\[3px\] {
  /* Stronger glass effect */
  --tw-backdrop-blur: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;

  /* Glass background — works over both light and dark hero photos */
  background: rgba(255, 255, 255, 0.11) !important;

  /* Subtle glass border */
  border: 1px solid rgba(255, 255, 255, 0.22) !important;

  /* Rounded corners — upgrade from 3px to 14px */
  border-radius: 14px !important;

  /* Generous padding */
  padding: 20px 24px !important;

  /* Depth shadow */
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.20),
    0 1px 0 rgba(255, 255, 255, 0.12) inset !important;

  /* Width cap */
  max-width: min(92vw, 660px) !important;
}

@media (min-width: 768px) {
  section#top .backdrop-blur-\[3px\] {
    padding: 24px 32px !important;
    border-radius: 16px !important;
    max-width: min(88vw, 660px) !important;
    /* On desktop the card becomes flex row — give items more gap */
    gap: 2rem !important;
  }
}

/* Ensure text inside glass card is fully readable (not dimmed by parent) */
section#top .backdrop-blur-\[3px\] p,
section#top .backdrop-blur-\[3px\] span {
  opacity: 1 !important;
}

/* Force ink color on the subtitle paragraph (was text-ink/80 on desktop = 80% opacity) */
section#top .backdrop-blur-\[3px\] .font-display {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* Body text was text-ink/80 on mobile and text-ink on md — make fully opaque everywhere */
section#top .backdrop-blur-\[3px\] .font-sans {
  color: var(--ink) !important;
}

/* CTA button inside glass: more top margin */
section#top .backdrop-blur-\[3px\] > div:last-child {
  margin-top: 1.5rem !important;
}
@media (min-width: 768px) {
  section#top .backdrop-blur-\[3px\] > div:last-child {
    margin-top: 0 !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;
}

/* Custom cursor (.cursor-dot) must stay above the admin logo modal (z:10000).
   Default in main CSS is z-index:9999 — bump to 10002. */
.cursor-dot {
  z-index: 10002 !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;
}