/* Galwanizernia Chełmek: telefon i tablet. Ładowany jako ostatni arkusz.
   Zasada: mniej przewijania, jedna rzecz na raz, duże pola dotykowe. */

/* ============================================================ menu (≤1100) */
.m-menu[hidden] { display:none !important; }
@media (min-width:1101px) { .m-menu { display:none !important; } }
@media (max-width:1100px) {
  /* Stara lista rozwijana nie jest już używana na mniejszych ekranach. */
  .main-nav, .main-nav.is-open { display:none !important; }

  /* Ikona: dwie kreski różnej długości, zamieniają się w X. */
  .nav-toggle { position:relative; width:44px; height:44px; border:1px solid transparent; border-radius:12px; background:#ffffff08; transition:background .25s ease, border-color .25s ease; }
  .nav-toggle span { position:absolute; left:12px; width:20px; height:1.75px; margin:0; border-radius:2px; transition:transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1); }
  .nav-toggle span:nth-child(1) { top:17px; }
  .nav-toggle span:nth-child(2) { display:none; }
  .nav-toggle span:nth-child(3) { top:25px; width:13px; }
  .nav-toggle[aria-expanded="true"] { background:#ffffff12; border-color:var(--line-2); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { top:21px; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { top:21px; width:20px; transform:rotate(-45deg); }

  html.m-menu-open { overflow:hidden; }
  .m-menu {
    position:fixed; inset:82px 0 0; z-index:80; display:flex; flex-direction:column;
    padding:22px 20px max(20px, env(safe-area-inset-bottom));
    background:#0b0b0c; border-top:1px solid var(--line);
    overflow-y:auto; overscroll-behavior:contain;
    animation:mMenuIn .32s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes mMenuIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
  .m-menu-nav { max-width:560px; width:100%; margin-inline:auto; }
  .m-label { margin:0 0 10px; color:var(--muted-2); font:500 .66rem var(--font-mono); letter-spacing:.16em; text-transform:uppercase; }
  .m-label:not(:first-child) { margin-top:26px; }

  .m-tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .m-tile { display:flex; align-items:center; gap:11px; min-height:58px; padding:0 14px; border:1px solid var(--line); border-radius:14px; background:#ffffff05; color:var(--text); font-size:.98rem; font-weight:600; text-decoration:none; }
  .m-tile .menu-metal { flex:0 0 auto; width:22px; height:22px; border-radius:50%; }
  .m-tile[aria-current] { border-color:rgba(var(--page-rgb), .6); background:rgba(var(--page-rgb), .08); }

  .m-links { display:flex; flex-direction:column; }
  .m-link { display:flex; align-items:center; justify-content:space-between; min-height:54px; border-bottom:1px solid var(--line); color:var(--text); font-size:1.08rem; font-weight:500; text-decoration:none; }
  .m-link span { color:var(--muted-2); transition:transform .25s ease, color .25s ease; }
  .m-link:active span, .m-link:hover span { color:var(--page-accent); transform:translateX(3px); }
  .m-link[aria-current] { color:var(--page-accent); }

  .m-cta { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:560px; width:100%; margin:auto auto 0; padding-top:24px; }
  .m-cta .btn { justify-content:center; min-height:52px; border-radius:14px; font-size:.95rem; }
  .m-cta .btn span { display:none; }
  .m-quote { display:flex; align-items:center; justify-content:center; min-height:52px; border:1px solid var(--line-2); border-radius:14px; color:var(--text); font-weight:600; font-size:.95rem; text-decoration:none; }
}
@media (max-width:720px) { .m-menu { top:76px; } }
@media (prefers-reduced-motion:reduce) { .m-menu, .nav-toggle span { animation:none; transition:none; } }

/* ============================================================ telefon (≤720) */
@media (max-width:720px) {

  /* ---- nagłówek powłoki: metal jako tło, nic się nie wsuwa ---- */
  .material-hero { overflow:hidden; }
  .material-layout { position:relative; }
  .material-copy { position:relative; z-index:1; }
  .material-copy .breadcrumbs { display:none; }
  .material-copy .eyebrow { margin-top:28px; }
  .material-art { position:absolute; inset:0; width:auto; height:auto; min-height:0; margin:0; z-index:0; pointer-events:none; }
  .metal-block, main.is-entering .metal-block {
    left:auto; right:-110px; top:-10px; width:270px; margin:0; border-radius:26px;
    opacity:.26; animation:none !important;
    transform:rotate(-16deg) !important;
    -webkit-mask-image:linear-gradient(200deg, #000 30%, transparent 85%); mask-image:linear-gradient(200deg, #000 30%, transparent 85%);
  }
  .metal-block > span { display:none; }
  .material-lede { margin:18px 0; }
  .material-copy .btn { width:100%; justify-content:center; }
  .metal-switcher { margin-top:20px; }

  /* ---- galerie: przesuwane w bok zamiast długiej kolumny ---- */
  .finish-grid, .home-work-grid, #zaklad .gallery {
    display:flex !important; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:20px;
    margin-inline:-20px; padding:4px 20px 8px; scrollbar-width:none;
  }
  .finish-grid::-webkit-scrollbar, .home-work-grid::-webkit-scrollbar, #zaklad .gallery::-webkit-scrollbar { display:none; }
  .finish-grid > *, .home-work-grid > *, #zaklad .gallery > * { flex:0 0 80%; min-width:0; margin:0; scroll-snap-align:start; grid-column:auto !important; }
  .barrel-grid > * { flex-basis:62%; }
  .barrel-grid .photo-frame { aspect-ratio:4/5; }
  .comparison-grid .photo-frame { aspect-ratio:4/3; }
  .home-work-photo img { height:230px; }
  #zaklad .gal-media { aspect-ratio:4/3; }
  #zaklad .gal-card p { font-size:.88rem; }
  .gallery-jump, .finish-tag { display:none; }
  .gallery-subheading { margin-top:30px; }
  .gallery-subheading > p { margin-top:6px; }
  .finish-gallery, .home-work { padding-block:28px; }
  .gallery-actions { margin-top:18px; }

  /* ---- zamknięcie strony krócej ---- */
  .finale { padding-block:52px 44px; }
  .finale h2 { font-size:clamp(2.4rem,12vw,3.4rem); margin-bottom:14px; }
  .finale-lede { margin-bottom:24px; font-size:.95rem; line-height:1.6; }
  .finale-facts { display:none; }
  .finale .btn { width:100%; justify-content:center; }

  /* ---- sekcje szczegółów i modelu ---- */
  .material-details { padding-top:28px; padding-bottom:28px; }
  .metal-lab { padding-block:20px; }
}

/* ============================================================ skróty (≤720)
   Na telefonie zostaje tylko to, co potrzebne do decyzji: nagłówek, zdjęcia,
   konkretne dane i przycisk. Opisy pomocnicze, podpisy i powtórzenia znikają
   (zostają w kodzie strony, więc nie tracimy ich dla wyszukiwarek). */
.contact-call { display:none; }
@media (max-width:720px) {
  /* wspólne */
  .breadcrumbs { display:none !important; }
  main > .shell:first-child:has(> .breadcrumbs:only-child) { display:none; }
  .section-head { margin-bottom:22px; }
  .section-head h1, .section-head h2 { font-size:clamp(2rem,9vw,2.6rem); line-height:1.08; }
  .section { padding:30px 0 40px; }

  /* zamknięcie strony: tylko hasło, przycisk i telefon */
  .finale { padding-block:40px 36px; }
  .finale::before { display:none; }
  .finale .eyebrow, .finale-lede { display:none; }
  .finale h2 { font-size:clamp(2.2rem,11vw,3rem); margin-bottom:20px; }
  .finale-alt { margin-top:16px; }
  .compact-footer-top { padding-block:28px 18px; }

  /* strona główna */
  .compare-foot p, .compare-hint { display:none; }
  .home-work-heading .eyebrow { margin-bottom:8px; }

  /* strony powłok */
  .material-copy .hero-methods { display:none; }
  .gallery-heading > p, .gallery-subheading > p, .gallery-subheading .eyebrow { display:none; }
  .gallery-heading h2 { font-size:clamp(1.7rem,7.6vw,2.2rem); }
  .gallery-subheading { margin:22px 0 12px; }
  .gallery-subheading h3 { font-size:1.12rem; }
  .finish-photo figcaption small { display:none; }
  .finish-photo figcaption { padding-top:8px; }
  .gallery-actions .text-link { display:none; }
  .material-details > div:first-of-type > p:not(.eyebrow), .material-details .text-link { display:none; }
  .material-details h2 { font-size:1.5rem !important; margin-bottom:4px; }
  .material-details .spec li, .material-details .spec > div { padding-block:12px; }
  .material-caption { display:none; }

  /* jak pracujemy */
  .method-note, .process-photo figcaption { display:none; }
  .methods { gap:10px; }
  .method { padding:18px; }
  .method h3 { font-size:1.35rem; margin:6px 0 8px; }
  .method p { font-size:.93rem; line-height:1.55; margin:0; }
  .process-photo { margin-block:20px; }
  .process-caption h2 { font-size:1.6rem; }
  .step { padding-block:16px; }
  .step p { font-size:.93rem; line-height:1.55; }

  /* o firmie / informacje */
  .about .stats > div { padding:14px 10px; }
  .registry { font-size:.7rem; letter-spacing:.06em; }

  /* powłoki */
  .route-card { padding:14px; }
  .route-swatch { width:44px; height:44px; margin-block:12px; }
  .selection-note { font-size:.92rem; }

  /* kontakt: telefon od razu, krótki formularz bez kart i objaśnień */
  .contact-call { display:flex; width:100%; justify-content:center; min-height:52px; margin:0 0 22px; font-size:1rem; }
  .contact-reassurance, .form-head, .form-card > h3, .form-card > h3 + p, .quote-help, .required-note, #message-help { display:none; }
  .form-card { padding:0; border:0; background:none; box-shadow:none; }
  .form-card::before, .form-card::after { display:none; }
  .field-grid { grid-template-columns:1fr 1fr; gap:14px 10px; }
  .field-grid > * { grid-column:1 / -1; }
  .field-grid > .field:has(#phone), .field-grid > .field:has(#count) { grid-column:auto; }
  .field textarea { min-height:120px; }
  .form-consent { font-size:.74rem; line-height:1.5; }
  .contact-grid { gap:30px; }
  .contact-list { margin-bottom:18px; }
  .contact-list li { padding:12px 0; gap:14px; }
  .contact-list .v { font-size:.96rem; }
  .map-frame { height:210px; }
}
@media (max-width:720px) {
  .field label .opt { display:none; }
  /* telefon jest już w przycisku na górze, godziny w stopce */
  .contact-list li:nth-child(2), .contact-list li:nth-child(4) { display:none; }
  .contact-list li:nth-child(3) { border-bottom:0; }
}