/* NazzAR 16. Canonical responsive layout for the reviewed components.
 * Decorative and tutorial media, words and illustrations are not replaced.
 * Font metrics, text zoom and a phone's changing height must not position body text.
 * See docs/CHANGES_RU.md for deliberate mobile differences (touch vs hover).
 */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:24px; }
body { min-width:0; }
button,a { touch-action:manipulation; }
section[id] { scroll-margin-top:24px; }
.hero-transition { position:absolute; bottom:0; left:0; right:0; height:220px; z-index:7; pointer-events:none; }
.hero-transition .learn-more-hit { pointer-events:auto; }

/* The three content rails clip only at the viewport edge. Padding is part of
   the scrollable content, not a stationary wall. Native snapping handles touch. */
.feature-carousel > .feature-track,
.object-carousel > .object-track,
.extra-carousel > .feature-extra {
  display:flex; align-items:stretch; width:100%; margin:0;
  overflow-x:auto; overflow-y:hidden; box-sizing:border-box;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--edge);
  padding-inline:var(--edge); padding-block:0;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; touch-action:pan-x pan-y;
}
.feature-track > .feature-card,.feature-extra > .feature-card,.object-track > .object-card {
  scroll-snap-align:start; scroll-snap-stop:normal;
}
.extra-carousel { width:100vw; max-width:none; margin-inline:calc(50% - 50vw); }
.extra-carousel > .feature-extra::-webkit-scrollbar { display:none; }

/* One control component for feature, extras, locations and the About gallery.
   Its geometry no longer grows when a dot becomes active. Arrows are also
   available on touch devices; swipe remains fully native. */
.unified-carousel-controls.carousel-controls,
.unified-carousel-controls.extra-controls,
.unified-carousel-controls.object-controls,
.unified-carousel-controls.about-controls {
  display:flex; align-items:center; justify-content:center;
  width:max-content; max-width:calc(100vw - 32px); height:44px;
  margin:36px auto 0; padding:0; gap:28px; visibility:visible;
}
.unified-carousel-controls.is-static { display:none; }
.unified-carousel-controls > button.carousel-nav-button {
  display:grid; place-items:center; position:relative; flex:0 0 33px;
  width:33px; height:44px; min-width:33px; min-height:44px;
  margin:0; padding:0; border:0; border-radius:50%; background:transparent;
  cursor:pointer; opacity:1; visibility:visible;
}
.unified-carousel-controls > button.carousel-nav-button::before { content:none; }
.unified-carousel-controls > button.carousel-nav-button > img { display:block; width:33px; height:33px; }
.unified-carousel-controls > button.carousel-nav-button:disabled { visibility:visible; opacity:1; pointer-events:none; cursor:default; }
.unified-carousel-controls > button.carousel-nav-button:disabled > img { visibility:hidden; }
/* Figma disabled navigation: 25 px circle, inset 4 px in the 33 px icon
   slot (453:1597 / 453:1773). Native disabled semantics stay intact. */
.unified-carousel-controls > button.carousel-nav-button:disabled::before {
  content:""; position:absolute; left:50%; top:50%; width:25px; height:25px;
  border:0; border-radius:50%; background:#333336; transform:translate(-50%,-50%);
}
/* Figma 453:1618: fixed circles under a separate moving dash. Eight
   positions occupy nine circles; longer rails scroll this window and retain
   every physical position. Prototype transition is 150 ms, linear. */
.unified-carousel-controls .carousel-dot-window {
  --dot-step:25px; flex:0 0 auto;
  width:calc(var(--visible-positions,8) * var(--dot-step) + 9px);
  height:44px; position:relative; overflow:hidden;
}
.unified-carousel-controls .carousel-dot-strip {
  position:relative; margin:0; padding:0; height:44px;
  width:calc(var(--position-count,8) * var(--dot-step) + 9px);
  transform:translateX(calc(var(--dot-start,0) * var(--dot-step)));
  transition:transform 150ms linear;
}
.unified-carousel-controls button.carousel-page-dot {
  display:block; position:absolute; left:calc(var(--dot-index) * var(--dot-step)); top:0;
  width:var(--dot-step); height:44px; min-width:0; min-height:44px;
  margin:0; padding:0; border:0; border-radius:0; background:transparent;
  cursor:pointer; visibility:visible; opacity:1;
}
.unified-carousel-controls button.carousel-page-dot::before { content:none; }
.unified-carousel-controls button.carousel-page-dot > span,
.unified-carousel-controls .carousel-end-dot {
  display:block; position:absolute; top:17.5px; left:0;
  width:9px; height:9px; border-radius:4.5px; background:#333336;
}
.unified-carousel-controls .carousel-end-dot { left:calc(var(--dot-index) * var(--dot-step)); pointer-events:none; }
.unified-carousel-controls .carousel-active-dash {
  display:block; position:absolute; left:0; top:17.5px;
  width:calc(var(--dot-step) + 9px); height:9px; border-radius:4.5px;
  background:#fff; pointer-events:none;
  transform:translateX(calc(var(--active-index,0) * var(--dot-step)));
  transition:transform 150ms linear;
}
@media(max-width:768px) { .unified-carousel-controls .carousel-dot-window { --dot-step:20px; } }
@media(prefers-reduced-motion:reduce) {
  .unified-carousel-controls .carousel-dot-strip,.unified-carousel-controls .carousel-active-dash { transition:none; }
}
.unified-carousel-controls button:focus-visible { outline:2px solid #1977f3; outline-offset:-2px; }
.feature-track.is-dragging,.object-track.is-dragging,.feature-extra.is-dragging { scroll-snap-type:none; scroll-behavior:auto; }

/* Flowing cards: long titles must never overlap the description or actions. */
.feature-card .feature-body { min-width:0; flex:1 1 auto; }
.feature-body > h3,.feature-extra .feature-body > h3 { height:auto; min-height:0; }
.feature-body > p { height:auto; }
.object-card .object-title { height:auto; overflow:visible; }
.object-card .object-actions { margin-top:auto; grid-template-rows:minmax(40px,auto) minmax(40px,auto) minmax(44px,auto); }
.object-card .object-actions > a { white-space:normal; min-height:40px; height:auto; padding-block:9px; text-align:center; }
.object-card .object-actions > a.object-map { white-space:nowrap; padding:0; margin-top:0; }
.object-card .object-actions > a.object-map > span { white-space:nowrap; }
.object-card .object-photo > .city-badge { background:rgba(255,255,255,.5); }

/* Descriptions follow their actual title height. No fixed baseline can collide
   after Arial/Onest substitution or increased browser text size. */
.benefit-grid article { height:auto; min-height:0; min-width:0; }
.benefit-grid article > h3 { height:auto; margin:0; }
.benefit-grid article > p { position:static; height:auto; margin-top:24px; }
.contact-card,.contact-card p,.contact-method { height:auto; min-width:0; }
.contact-card a,.footer-contact a { overflow-wrap:anywhere; }

/* Match the same optical shape at any mobile width: scale the full source SVG
   proportionally, and overlap its rounded TOP edge with the hero's black body.
   The old 390x113 box letterboxed the 360x113 SVG and exposed its upper corners. */
@media(max-width:768px) {
  .hero {
    --hero-tail:calc(100vw * .313888889);
    --hero-circle:calc(100vw * .263888889);
    height:auto; min-height:0; overflow:visible; background:var(--surface);
  }
  .hero::before { bottom:calc(var(--hero-tail) - 32px); }
  .hero-content {
    position:relative; width:100%; max-width:none; height:auto;
    margin:0; padding:454px 30px 0; background:none;
  }
  .hero-content h1 { position:relative; inset:auto; width:100%; margin:0; height:auto; font-size:33px; line-height:1.35; }
  .hero-content .hero-copy { position:relative; inset:auto; width:100%; margin:28px 0 0; font-size:15px; line-height:1.4; }
  .hero-content .hero-tags { position:relative; inset:auto; width:100%; height:auto; margin:60px 0 0; gap:17px; }
  .hero-tags > .tag { flex:none; max-width:100%; min-height:24px; height:auto; padding-block:4px; white-space:normal; line-height:16px; }
  .hero-content .hero-buttons {
    position:relative; inset:auto; transform:none; width:100%; height:auto;
    margin:100px 0 0; display:flex; flex-direction:column; gap:24px;
  }
  .hero-content .hero-buttons > .primary-button { height:auto; min-height:44px; padding:12px 16px; line-height:20px; text-align:center; }
  .hero-transition { position:relative; height:var(--hero-tail); margin-top:30px; }
  .hero-bottom.hero-bottom-mobile { width:100%; height:100%; object-fit:contain; }
  .hero-transition .learn-more-hit { width:var(--hero-circle); height:var(--hero-circle); }
  .features-section { margin-top:0; min-height:0; padding:70px 0; }
  .features-section h2 { max-width:none; font-size:26px; line-height:1.27; margin:0 30px 40px; }
  .features-section .features-subtitle { margin:65px 30px 40px!important; font-size:22px!important; line-height:1.28!important; max-width:none; }
  .feature-carousel,.extra-carousel,.object-carousel {
    --rail-card:min(300px,calc(100vw - 60px));
    --rail-edge:calc((100vw - var(--rail-card))/2);
  }
  .feature-carousel > .feature-track,.object-carousel > .object-track,.extra-carousel > .feature-extra {
    scroll-padding-inline:var(--rail-edge); padding-inline:var(--rail-edge); gap:10px;
    width:100%; max-width:none;
  }
  .feature-track > .feature-card,.feature-extra > .feature-card,.object-track > .object-card {
    width:var(--rail-card); max-width:var(--rail-card); flex:0 0 var(--rail-card);
    height:auto; border-radius:20px;
  }
  .feature-card .feature-media { height:auto; aspect-ratio:718/776; }
  .feature-media > video { position:relative; display:block; width:100%; height:100%; object-fit:cover; }
  .feature-card .feature-body,.feature-extra .feature-body { padding:12px 26px 30px; }
  .feature-body > h3,.feature-extra .feature-body > h3 { font-size:20px; line-height:1.3; }
  .feature-body > p,.feature-extra .feature-body > p { font-size:15px; line-height:1.4; margin-top:20px; }
  .unified-carousel-controls.carousel-controls,.unified-carousel-controls.extra-controls,
  .unified-carousel-controls.object-controls,.unified-carousel-controls.about-controls { margin-top:24px; height:44px; max-width:calc(100vw - 32px); gap:12px; }
  .object-track > .object-card { min-height:600px; padding-bottom:24px; }
  .object-card > .object-title { min-height:0; margin:24px 24px 0; font-size:21px; line-height:1.3; }
  .object-card .object-actions { padding:28px 24px 0; gap:10px; grid-template-rows:minmax(44px,auto) minmax(44px,auto) minmax(44px,auto); }
  .object-card .object-actions > a { min-height:44px; font-size:15px; line-height:1.3; }
  .object-card .object-actions > a.object-map { min-height:44px; height:44px; font-size:12px; }
  .objects-section { padding-block:70px; }
  .objects-section .object-carousel { margin-top:50px; }
  .museum-section { min-height:0; height:auto; padding:70px 0; }
  .museum-intro { min-height:0; height:auto; margin:30px 0 60px; }
  .benefit-grid { row-gap:64px; margin-top:70px; }
  .benefit-grid > article:nth-child(n) { min-height:0; height:auto; }
  .benefit-grid > article:nth-child(n) > h3 { font-size:20px; line-height:1.3; height:auto; }
  .benefit-grid > article:nth-child(n) > p { position:static; inset:auto; margin:22px 0 0!important; font-size:15px; line-height:1.4; height:auto; }
  .museum-shell > .wide-button.consultation-button { width:min(300px,100%); min-height:44px; height:auto; padding:12px 16px; margin:64px auto 0; font-size:15px; line-height:20px; }
  .contact-card { height:auto; min-height:0; gap:36px; }
  .contact-card > div,.contact-card .contact-method { min-width:0; height:auto; margin-inline:0; }
  .contact-card h3 { height:auto; line-height:1.3; }
  .contact-card p { height:auto; line-height:1.5; }
  .contact-card .contact-method p { margin-top:16px; }
  .contact-card .contact-method > span { margin:0; }
  .footer-contact,.footer-inner,.copyright { height:auto; }
  .about-text { height:auto; min-height:0; }
  .about-track { width:100%; padding:0; scroll-padding-inline:0; }
  .about-track .about-slide { flex:0 0 100%; max-width:none; }
  .guide-showcase .guide-header h2 { font-size:clamp(28px,7.5vw,34px); line-height:1.18; }
}
@media(max-width:359px) {
 .hero-content h1 { font-size:29px; }
 .feature-card .feature-body,.feature-extra .feature-body { padding-inline:22px; }
 .feature-body > h3,.feature-extra .feature-body > h3 { font-size:19px; }
}
/* Focus may move to an element before a smooth transition; Safari must still be
   able to close media in both portrait and landscape, with no page scroll leak. */
.action-dialog.media-dialog { max-height:calc(100vh - 60px); max-height:calc(100dvh - 60px); }
.media-dialog .dialog-video { max-height:calc(100vh - 108px); max-height:calc(100dvh - 108px); }
@media(prefers-reduced-motion:reduce) {
 .unified-carousel-controls *, .feature-track,.feature-extra,.object-track { scroll-behavior:auto!important; transition:none!important; }
}
/* Long words and enlarged system text can wrap instead of escaping a column. */
.hero-content h1,.hero-copy,.feature-body,.benefit-grid h3,.benefit-grid p,
.object-card .object-title,.contact-card,.about-text,.stat-card,.guide-showcase .guide-description {
  overflow-wrap:anywhere;
}
.stat-card h3 { white-space:normal; }
.guide-showcase .guide-store strong,.guide-showcase .guide-store small { white-space:normal; }

/* v18 requested contact outline and phone carousel controls. */
.contact-card { background:transparent; border:1px solid #6a6a6d; }
@media(max-width:768px) {
 .unified-carousel-controls > button.carousel-nav-button { display:none; }
 .unified-carousel-controls { gap:0; justify-content:center; }
}