/* Becses Darab – célzott tablet- és mobilfinomhangolás */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  position: relative;
}

.hero,
.call-strip,
.section,
.process-section,
.gallery-section,
.contact-section,
.site-footer {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.gallery-section,
.gallery-viewport {
  overflow-x: clip;
}

.gallery-viewport {
  width: 100%;
  contain: paint;
}

.container,
.header-inner,
.hero-grid,
.call-strip-inner,
.item-grid,
.estate-grid,
.process-layout,
.gallery-heading,
.contact-grid,
.footer-inner {
  min-width: 0;
  max-width: 100%;
}

.hero-grid > *,
.contact-grid > *,
.estate-grid > *,
.process-layout > *,
.call-strip-inner > * {
  min-width: 0;
}

.call-strip a,
.call-strip a span,
.contact-card,
.contact-card strong,
.purchase-list li,
.process-full-copy {
  overflow-wrap: anywhere;
}

@media (min-width: 681px) and (max-width: 1024px) {
  html { scroll-padding-top: 82px; }
  .container { width: min(calc(100% - 64px), var(--container)); }
  .header-inner { min-height: 82px; }
  .main-nav {
    top: 100%;
    max-height: calc(100vh - 82px);
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
  }
  .hero { padding: 76px 0 86px; }
  .hero-grid { gap: 48px; }
  h1 { max-width: 720px; font-size: clamp(3.7rem, 8.2vw, 5.2rem); }
  .art-frame { width: 100%; max-width: none; aspect-ratio: 16 / 7; }
  .art-frame > img { object-position: 50% 47%; }
  .section,
  .gallery-section { padding-block: 88px; }
  .section-heading { margin-bottom: 44px; }
  .item-card { min-height: 240px; padding: 30px; }
  .estate-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
    gap: 32px;
  }
  .process-layout,
  .contact-grid { gap: 64px; }
  .process-full-copy {
    margin-top: 46px;
    padding-top: 44px;
    column-gap: 40px;
  }
  .gallery-card {
    width: clamp(280px, 42vw, 390px);
    height: clamp(360px, 55vw, 500px);
  }
  .contact-options { grid-template-columns: 1fr 1fr; }
  .availability { grid-column: 1 / -1; }
  .contact-form { padding: 38px; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 70px; }
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }
  body.menu-open { touch-action: none; }
  .container { width: min(calc(100% - 32px), var(--container)); }
  .header-inner { min-height: 70px; gap: 12px; }
  .site-header {
    overflow: visible;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .main-nav {
    top: 100%;
    max-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.is-open {
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    padding: 12px 16px calc(22px + env(safe-area-inset-bottom));
  }
  .main-nav > a:not(.nav-phone) {
    min-height: 52px;
    display: flex;
    align-items: center;
  }
  .nav-phone { min-height: 64px; justify-content: center; }
  .brand { min-width: 0; gap: 10px; }
  .brand-mark { width: 40px; height: 40px; flex: 0 0 40px; }
  .brand-copy { min-width: 0; }
  .brand-copy strong {
    overflow: hidden;
    font-size: 1.12rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .menu-toggle { width: 48px; height: 48px; flex: 0 0 48px; }
  .hero { padding: 48px 0 56px; }
  .hero::before { display: none; }
  .hero-grid { gap: 38px; }
  .eyebrow { margin-bottom: 17px; font-size: .66rem; letter-spacing: .14em; }
  h1 {
    margin-bottom: 20px;
    font-size: clamp(2.45rem, 12vw, 3.45rem);
    line-height: 1.01;
  }
  h2 { font-size: clamp(2rem, 10vw, 2.85rem); line-height: 1.08; }
  h3 { font-size: 1.3rem; }
  .hero-lead { margin-bottom: 26px; font-size: 1rem; line-height: 1.65; }
  .hero-actions { gap: 10px; margin-bottom: 28px; }
  .button { min-height: 54px; padding-inline: 18px; }
  .art-frame { width: 100%; aspect-ratio: 16 / 11; }
  .art-frame > img { object-position: 50% 49%; }
  .art-caption {
    right: 16px;
    bottom: 13px;
    left: 16px;
    font-size: .65rem;
  }
  .call-strip-inner { min-height: 148px; padding-block: 24px; }
  .call-strip p strong { font-size: 1.35rem; }
  .call-strip a span { font-size: 1.85rem; }
  .section,
  .gallery-section { padding-block: 64px; }
  .section-heading { margin-bottom: 36px; }
  .section-heading > p,
  .estate-grid > div,
  .process-full-copy { font-size: 1rem; line-height: 1.72; }
  .item-card { min-height: 0; padding: 26px 24px; }
  .item-icon { margin-bottom: 22px; }
  .purchase-details { margin-top: 48px; padding-top: 38px; }
  .purchase-details > h3 { margin-bottom: 22px; font-size: 1.65rem; }
  .purchase-list { margin-bottom: 38px; }
  .purchase-list li {
    min-height: 0;
    padding: 15px 8px 15px 31px;
    line-height: 1.5;
  }
  .estate-grid { gap: 28px; }
  .bonus-card { padding: 27px 23px; }
  .bonus-card strong { font-size: 2.25rem; }
  .process-layout { gap: 42px; }
  .process-list li { padding: 23px 0; }
  .process-full-copy {
    margin-top: 8px;
    padding-top: 38px;
    column-count: 1;
  }
  .process-full-copy .process-emphasis { padding-left: 16px; }
  .gallery-heading { gap: 10px; margin-bottom: 30px; }
  .gallery-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gallery-viewport::-webkit-scrollbar { display: none; }
  .gallery-track {
    width: max-content;
    padding-inline: 16px;
    animation: none;
  }
  .gallery-card {
    width: min(78vw, 310px);
    height: min(104vw, 420px);
    scroll-snap-align: center;
  }
  .gallery-card span {
    right: 16px;
    bottom: 16px;
    left: 16px;
    font-size: 1rem;
  }
  .lightbox { align-items: center; padding: 58px 12px 84px; }
  .lightbox figure { width: 100%; max-width: 100%; }
  .lightbox figure img { width: 100%; max-height: calc(100dvh - 190px); }
  .lightbox figcaption { padding-inline: 4px; font-size: .9rem; }
  .lightbox-arrow {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: 58px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    font-size: 2.6rem;
    transform: none;
  }
  .lightbox-prev { left: calc(50% - 67px); }
  .lightbox-next { right: calc(50% - 67px); }
  .contact-grid { gap: 38px; }
  .contact-card { min-height: 104px; gap: 13px; }
  .contact-card > span:last-child,
  .contact-card strong { min-width: 0; }
  .contact-card strong { overflow-wrap: anywhere; white-space: normal; }
  .contact-form {
    padding: 24px 18px;
    box-shadow: 0 12px 34px rgba(28, 40, 34, .08);
  }
  .form-heading { margin-bottom: 24px; }
  .form-heading h3 { font-size: 1.7rem; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea { font-size: 16px; }
  .photo-upload > button { min-height: 120px; padding: 17px 12px; }
  .photo-upload button small { max-width: 260px; line-height: 1.45; }
  .photo-previews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { gap: 22px; }
  .footer-links { gap: 12px; }
  .mobile-call {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    min-height: 56px;
  }
}

@media (max-width: 380px) {
  .container { width: min(calc(100% - 24px), var(--container)); }
  h1 { font-size: 2.3rem; }
  .brand-copy strong { font-size: 1.02rem; }
  .contact-card { padding-inline: 13px; }
  .contact-card-icon { width: 38px; height: 38px; }
  .contact-form { padding-inline: 14px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .main-nav.is-open { grid-template-columns: 1fr 1fr; }
  .main-nav > a:not(.nav-phone),
  .nav-phone { min-height: 48px; margin-top: 0; }
  .lightbox { padding-block: 12px; }
  .lightbox figure img { max-height: calc(100dvh - 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation: none; }
}
@media (max-width: 980px) {
  .call-strip-actions { justify-content: center; width: 100%; }
  .call-strip-actions > a { min-width: min(100%, 250px); }
  .viber-card { padding: 18px; }
}

@media (max-width: 640px) {
  .call-strip-actions { display: grid; grid-template-columns: 1fr; }
  .call-strip-actions > a,
  .call-strip-actions .viber-inline { width: 100%; min-width: 0; }
  .viber-actions { display: grid; grid-template-columns: 1fr; }
  .viber-actions a { overflow-wrap: anywhere; }
}