/* ==========================================================================
   MOBILE LAYER  -  polskiebarymleczne.pl
   --------------------------------------------------------------------------
   Loaded after style_modern.css. Every rule below lives inside
   @media (max-width: 768px), so anything wider than a phone renders exactly
   what it rendered before this file existed. The one exception is the
   .back-to-top base rule, which hides a new element on desktop.

   The problem this solves: the phone layout was the desktop layout in one
   column. 16 000px of scroll, roughly twenty screens, most of it padding and
   the empty space that desktop grid alignment reserves inside cards.
   ========================================================================== */

/* The back-to-top button markup is on every page and main.js already drives
   it. It is a mobile affordance only, so above the breakpoint it does not
   exist as far as the layout is concerned. */
.back-to-top { display: none; }

@media (max-width: 768px) {

  /* ==========================================================
     1. RHYTHM
     Section padding, card padding and corner radius were all
     sized for a 1280px canvas. On 375px they are the page.
     ========================================================== */
  :root {
    --spacing-80: 48px;   /* .section padding, .footer bottom */
    --radius-cards: 24px; /* 40px on a 160px card reads as a blob */
  }

  html {
    -webkit-text-size-adjust: 100%;  /* stop iOS inflating body copy in landscape */
  }

  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .section { padding: 48px 0; }

  .dotted-divider { margin: 28px 0; }

  /* Every section heading carries an inline margin-bottom: 40px. */
  .section .text-heading-lg,
  .text-heading-lg[style] { margin-bottom: 24px !important; }

  /* ==========================================================
     2. TYPOGRAPHY
     ========================================================== */
  /* Fluid rather than fixed: one value tuned for a 375px phone looks
     undersized at 768px, which is still inside this query. */
  .text-heading-lg {
    font-size: clamp(30px, 7.5vw, 46px);
    letter-spacing: 0.01em;
  }

  .text-heading { font-size: 23px; }

  /* The city-page h1 carries an inline clamp(4rem, 8vw, 7rem) = 64px, which
     is wider than the screen for "Warszawa". */
  section.section:not(.hero) h1.text-display { font-size: 50px !important; }

  section.section:not(.hero):has(h1.text-display) {
    padding-top: 28px !important;
    padding-bottom: 20px !important;
  }

  /* Seven stacked shadows, the outermost blurred 160px, repainted on every
     scroll frame. Four shadows keep the neon and stop the jank. */
  .neon-red,
  h1.text-display[style*="text-shadow"] {
    text-shadow:
      0 0 4px #fff,
      0 0 10px #ff3333,
      0 0 22px #ff0000,
      0 0 44px #cc0000 !important;
  }

  /* ==========================================================
     3. NAVIGATION
     The bar scrolled away and never came back, so search and the
     menu were unreachable from anywhere below the fold.
     ========================================================== */
  .navbar-wrapper {
    position: sticky;
    top: 0;
    z-index: 900;
    padding: 10px 16px !important;
    background-color: rgba(40, 36, 33, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .navbar-wrapper img[alt="Home"] { height: 34px !important; }

  .lang-toggle {
    font-size: 15px;
    gap: 6px;
    margin-right: 0 !important;
  }

  .hamburger-btn,
  .search-toggle-btn { padding: 8px; }

  .mobile-menu-content { gap: 24px; }
  .mobile-menu-content .close-btn { top: 12px; right: 12px; }

  /* The dropdown is anchored to the search icon, which sits ~140px in from
     the right edge; a 320px panel hanging off it runs off the left of the
     screen. Pin it to the viewport instead. */
  .search-dropdown {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
  }

  .search-results { max-height: 50vh; }

  /* ==========================================================
     4. HERO
     ========================================================== */
  .hero-viewport { min-height: 0; }

  .hero { padding-bottom: 28px; }

  .hero-grid { gap: 20px; }

  .hero-content { gap: 18px; }

  /* The image wrapper is inline-styled height:100%, which in a one-column
     auto-height grid lets the rotating dish claim ~400px on its own. */
  .hero-grid > div:last-child { height: auto !important; }

  .hero-grid > div:last-child img {
    width: 70% !important;
    height: auto !important;
    max-height: 250px;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-grid > div:last-child img { animation: none !important; }
  }

  /* The hero paragraph is inline-clamped to 2.5vh, which on a tall phone is
     20px and runs to four lines. */
  .hero-content p {
    font-size: 17px !important;
    line-height: 1.5;
  }

  /* box-sizing is content-box here, so a bare min-height adds to the padding
     instead of absorbing it: 46 + 26 = a 72px button. */
  .btn-primary,
  .btn-secondary {
    box-sizing: border-box;
    padding: 13px 22px;
    font-size: 15px;
    min-height: 46px;
  }

  /* ==========================================================
     5. ABOUT CARDS
     auto-fit minmax(320px) forces a 320px track into a 311px
     container, so each card overhung its own grid by 9px.
     ========================================================== */
  .card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
  }

  .content-card,
  .stat-card {
    padding: 24px;
    gap: 14px;
  }

  .card-header-wrap { gap: 12px; }

  /* Reserved so three cards line their headings up side by side. In one
     column there is nothing to line up with, so it is just a blank 2em. */
  .content-card .text-heading { min-height: 0; }

  .stat-card p { font-size: 16px !important; }

  /* ==========================================================
     6. CITY GRID
     Eight 3:4 cards in one column was 3 557px, four and a half
     screens. Two square columns is about 700px.
     ========================================================== */
  .city-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 24px;
  }

  .city-card {
    aspect-ratio: 1 / 1;
    padding: 12px;
  }

  .city-card__name {
    font-size: clamp(21px, 5.5vw, 34px);
    margin-bottom: 6px;
  }

  .city-card__count {
    font-size: 11px;
    padding: 3px 8px;
    line-height: 1.35;
  }

  /* The gradient started at the very top; over a square card that washed out
     the photo entirely. */
  .city-card__overlay {
    background: linear-gradient(to bottom, transparent 35%, var(--color-obsidian));
  }

  /* ==========================================================
     7. FILTER STRIPS
     Seven pills wrapped to four centred rows. One row that
     scrolls sideways, bleeding to both screen edges so it reads
     as swipeable.
     ========================================================== */
  .dish-filters,
  .bar-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 8px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 20px;
    padding: 2px 20px 10px;
    scroll-snap-type: x proximity;
    scroll-padding-left: 20px;   /* without this the snap ignores the gutter and
                                    parks the first pill flush to the screen edge */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dish-filters::-webkit-scrollbar,
  .bar-filters::-webkit-scrollbar { display: none; }

  .dish-filter-btn,
  .bar-filter-btn {
    box-sizing: border-box;   /* same content-box trap as the hero buttons */
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    font-size: 13px;
    min-height: 42px;
  }

  .bar-filter-count {
    flex: 0 0 auto;
    font-size: 13px;
    align-self: center;
  }

  /* ==========================================================
     8. DISH BOARD
     One dish, one row: a small plate, the name and the whole
     description, on the page itself instead of in a card.
     ========================================================== */
  #menu > p {
    font-size: 16px !important;
    margin-bottom: 20px !important;
  }

  /* The phone's navbar is sticky too (60px), so the pills park under it and a
     jump has to clear both. The fade would widen this scroller, so it goes. */
  .dish-filters {
    top: 60px;
    border-bottom: 1px solid rgba(247, 246, 242, 0.12);
  }
  .dish-filters::after { display: none; }

  .menu-group { margin-top: 36px; scroll-margin-top: 128px; }
  .menu-group__head { margin-bottom: 0; }

  .dish-board { display: block; }

  .dish {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    row-gap: 4px;
    padding: 16px 0;
    background: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(247, 246, 242, 0.2);
    scroll-margin-top: 128px;
  }

  .dish__plate { grid-row: 1 / 3; align-self: start; }

  .dish__plate img {
    width: 100%;
    box-shadow:
      0 0 0 2px #fff2f2,
      0 0 6px 2px rgba(255, 30, 30, 0.8),
      0 0 14px 3px rgba(220, 20, 60, 0.45);
  }

  .dish__name { font-size: 23px; margin-top: 0; }
  .dish__polish { font-size: 14px; margin-top: 3px; }
  .dish__desc { font-size: 15px; line-height: 1.45; }
  .dish:target { outline-offset: -1px; }

  /* ==========================================================
     9. CITY PAGES - map and bar cards
     ========================================================== */
  #map { height: 340px !important; }

  #bar-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .bar-card { padding: 20px; }

  .bar-card__header {
    padding-right: 44px;
    margin-bottom: 12px;
  }

  /* All three of these reserve space so that cards sitting next to each
     other line up their addresses, hours and buttons. One column, one card
     per row: the reservations are pure empty space, ~110px per card over
     twelve cards on the Warsaw page. */
  .bar-card__name {
    font-size: 26px;
    min-height: 0;
  }

  .bar-card__description {
    font-size: 15px;
    min-height: 0;
    -webkit-line-clamp: 3;
    margin-bottom: 16px;
  }

  .bar-card__hours-grid { min-height: 0; }

  .bar-card__maps-link {
    padding: 12px 16px;
    margin-top: 14px;
  }

  .bar-card__number {
    top: 12px;
    right: 12px;
  }

  /* ==========================================================
     9b. CONTACT FORM AND RECIPE PAGE
     Only the phone-sized trimming lives here. The box-sizing that
     these fields and the bigos photo frame were missing is fixed in
     contact.html, en/contact.html and en/bigos.html themselves, so
     it holds at every width rather than only below this breakpoint.
     !important is still needed because those pages carry their own
     <style> block later in the <head> than this file's <link>, so at
     equal specificity theirs wins.
     ========================================================== */
  .form-input,
  .form-textarea { padding: 13px 14px !important; }

  .contact-form { gap: 18px; }

  #recipe .container > div[style*="width: 100%"] {
    padding: 16px !important;
    margin-bottom: 24px !important;
  }

  #recipe .content-card { margin-bottom: 24px !important; }

  #recipe ul { font-size: 16px !important; line-height: 1.7 !important; }

  main[style*="padding-top"] {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }

  /* ==========================================================
     10. FOOTER
     ========================================================== */
  .footer { padding-bottom: 40px; }

  .footer-inner {
    padding-top: 24px;
    gap: 14px;
  }

  /* ==========================================================
     11. BACK TO TOP
     main.js has driven #back-to-top since it was written; no page
     ever contained the element and no loaded stylesheet styled it.
     On a page this long it earns its place.
     ========================================================== */
  .back-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 800;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--color-ember);
    color: var(--color-obsidian);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* A narrow phone gets tighter gutters; the grids stay two-up. */
@media (max-width: 480px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .dish-filters,
  .bar-filters {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
  }
}