/* Local fixes for the static copy.
   On mobile (< lg / 1024px) the video+description block is positioned
   absolute over a decorative grid sibling, but its parent isn't tall
   enough — so the block overflows downward and overlaps the
   "Надежная покупка" section below.

   Solution: take the overlay out of absolute mode on mobile and hide
   the decorative grid (it exists only to give the absolute child a
   positioning frame at desktop sizes). */
@media (max-width: 1023px) {
  .relative.w-full > .absolute.left-0.top-0.grid.grid-cols-8 {
    position: static !important;
  }
  .relative.w-full:has(> .absolute.left-0.top-0.grid.grid-cols-8) > .grid-area-1111 {
    display: none !important;
  }
}

/* H1 hero title. On desktop fit "РУССКИЙ КОД — ФИЗТЕХ" on one line.
   On mobile/tablet allow normal wrapping so the text is not clipped by overflow-x:hidden. */
main#hero h1 {
  letter-spacing: 0.05em !important;
  margin-top: 1rem !important;
}
@media (min-width: 1024px) {
  main#hero h1 {
    white-space: nowrap;
    letter-spacing: 0.08em !important;
  }
}
@media (min-width: 1280px) {
  main#hero h1 {
    font-size: clamp(1.75rem, 2.6vw, 3rem) !important;
    letter-spacing: 0.06em !important;
    margin-top: 1.25rem !important;
  }
}

/* Smooth scrolling for the in-page nav anchors. */
html { scroll-behavior: smooth; }
#hero, #gallery, #contact, #order {
  scroll-margin-top: calc(var(--header-height, 80px) + 16px);
}

/* === Scroll-reveal (AP-style): slow, generous fade + slide-up. ===
   Hides every text/image element by default, JS toggles .reveal-in when in viewport. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(36px);
    transition:
      opacity 1.4s cubic-bezier(.2,.7,.2,1),
      transform 1.4s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
  }
  .reveal.reveal-in {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Burger menu: smooth slide-down + fade ===
   Keep Tailwind's `hidden` (display:none) active when closed.
   Only animate when opened — slide-down from -12px + fade-in over 0.35s. */
#burger-menu:not(.hidden) {
  animation: burgerOpen 0.35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes burgerOpen {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Burger menu items: breathing room, no dividers === */
#burger-menu > menu {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  padding: 32px 8px;
}
#burger-menu > menu > li,
#burger-menu > menu > div {
  border: none !important;
  padding: 14px 24px !important;
  min-height: 0 !important;
  list-style: none;
}
#burger-menu > menu > li a,
#burger-menu > menu > div a {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 0.25s ease-out, transform 0.25s ease-out;
  display: inline-block;
}
#burger-menu > menu > li a:hover,
#burger-menu > menu > div a:hover,
#burger-menu > menu > li a:active,
#burger-menu > menu > div a:active {
  color: #E32626;
  transform: translateX(8px);
}

/* === Burger icon morph: smooth ≡ → × using <line> elements ===
   Uses viewBox 0 0 24 24, lines at y=6, 12, 18. Origin is SVG center (12,12). */
#burger-btn svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}
#burger-btn svg .burger-l1,
#burger-btn svg .burger-l2,
#burger-btn svg .burger-l3 {
  transition:
    transform 0.4s cubic-bezier(.6,.05,.3,1),
    opacity 0.25s ease-out,
    stroke 0.25s ease-out;
  transform-origin: 12px 12px;
}
#burger-btn[aria-expanded="true"] {
  color: #E32626 !important;
}
#burger-btn[aria-expanded="true"] svg .burger-l1 {
  /* Top line: move down 6, rotate 45° around center */
  transform: translateY(6px) rotate(45deg);
}
#burger-btn[aria-expanded="true"] svg .burger-l2 {
  opacity: 0;
  transform: scaleX(0);
}
#burger-btn[aria-expanded="true"] svg .burger-l3 {
  /* Bottom line: move up 6, rotate -45° */
  transform: translateY(-6px) rotate(-45deg);
}

/* Prevent horizontal scrollbar / right white strip — the hero image's natural aspect can push
   parent containers wider than the viewport on narrow screens. */
html, body { overflow-x: hidden; max-width: 100vw; }
main, footer, header { max-width: 100%; }

/* КОРПУС / МЕХАНИЗМ / Hero / etc — sticky image column was max-height limited, causing the gray
   spacer color to show through the gap below the image. Force the column to fill the row height. */
@media (min-width: 640px) {
  .sm\:grid-cols-2 > .sm\:sticky,
  .md\:grid-cols-2 > .md\:sticky,
  .lg\:grid-cols-2 > .lg\:sticky {
    max-height: none !important;
    height: 100% !important;
    min-height: 100%;
  }
}

/* Carousel arrow buttons — ensure they are clickable above the image and have a clearer hit area
   on mobile / tablet. */
#gallery button:has(svg[viewBox="0 0 81 17"]) {
  position: relative;
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  padding: 16px;
  min-width: 50px;
  min-height: 50px;
}

/* Make the row containing "Логотип Физтеха выложен..." have a clearer bottom border. */
[title="Декор"], div:has(> [title="Декор"]) + div {
  border-bottom: 1px solid #e7e7e7 !important;
}

/* Order button — extend the wrapper so the longer text fits at the same font size as price. */
button > div.grid.grid-cols-2.items-center > div.z-0 {
  white-space: nowrap;
  text-align: center;
}
div.grid.w-60:has(button > div.grid.grid-cols-2) {
  width: 100% !important;
  max-width: 320px;
}
@media (min-width: 1024px) {
  div.grid.w-60:has(button > div.grid.grid-cols-2) {
    width: auto !important;
    min-width: 360px;
    max-width: none;
  }
}

/* Watch sound button: on touch devices :hover state sticks after tap, keeping the icon red
   even after we toggled the sound off. Disable hover-red on touch-primary devices. */
@media (hover: none) {
  button[id^="headlessui-switch"][role="switch"]:hover {
    color: inherit !important;
  }
  button[id^="headlessui-switch"][role="switch"]:not([data-headlessui-state="checked"]) {
    color: rgb(69, 63, 69) !important;
  }
  button[id^="headlessui-switch"][role="switch"]:not([data-headlessui-state="checked"]) * {
    color: inherit !important;
  }
}

/* Mobile/tablet: shrink any 8-col decorative grids (with no media inside) to 1 row. */
@media (max-width: 1023px) {
  div[class*="auto-rows-[calc(100vw/8)]"][class*="grid-cols-8"]:not(:has(img)):not(:has(video)):not(:has(a)):not(:has(button)):not(:has(p)) > div:nth-child(n+9) {
    display: none !important;
  }
}



/* Header Ракета logo sizing — fits inside --header-height (80–90px) with padding.
   Uses max-height as a safety net so it can never overflow the header. */
.header-raketa-logo { height: 28px !important; max-height: calc(var(--header-height, 80px) - 24px); width: auto !important; }
@media (min-width: 1024px) {
  .header-raketa-logo { height: 44px !important; }
}
@media (min-width: 1280px) {
  .header-raketa-logo { height: 52px !important; }
}

/* Header Физтех-Союз partner logo — same constraint, slightly bigger than Ракета. */
.header-physunion-logo { display: none !important; }
@media (min-width: 1024px) {
  .header-physunion-logo {
    display: block !important;
    height: 52px !important;
    max-height: calc(var(--header-height, 80px) - 20px);
    width: auto !important;
    max-width: 240px;
  }
}
@media (min-width: 1280px) {
  .header-physunion-logo {
    height: 60px !important;
    max-width: 280px;
  }
}

/* Footer 3 logos column: center logos horizontally on every size.
   Each <a> wrapper is also a flex container so its inner img/svg is centered. */
footer > div:first-child {
  text-align: center;
}
footer > div:first-child > a,
footer > div:first-child > div > a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
footer > div:first-child img,
footer > div:first-child svg {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}