/**
 * sf-mobile-home.css — MOBILE (phone) layout parity for the HEADER (all pages)
 * and the HOME page, modelled on the reference stalingradfront.com mobile
 * behaviour. It changes LAYOUT/BEHAVIOUR only — the vintage look (sepia cards,
 * red skewed logo/labels, Georgia serif, dark chrome) is intentionally kept.
 *
 * Everything lives inside @media (max-width: 768px); desktop is never touched.
 * Loaded LAST (inc/sf-mobile-home-css.php, priority 9999) so it wins the cascade.
 *
 * Reference mobile header (390px wide, 150px tall):
 *   Row 1 (top-right): Login · language · [cart]        (we are inquiry-only: no cart)
 *   Row 2:            [ small SF logo ]      hamburger · search
 */

/* --------------------------------------------------------------------------
   `.sf-mobilebar` wraps the search popover + hamburger in the markup. On
   desktop it must be invisible to layout so the header flex row is unchanged —
   display:contents makes its children flex items of `.sf-header-tools` exactly
   as before. (Mobile re-homes it below.)
   -------------------------------------------------------------------------- */
.sf-mobilebar { display: contents; }

@media (max-width: 768px) {
  /* ====================================================================
     HEADER — two-row arrangement like the reference.
     ==================================================================== */
  .sf-header {
    height: auto;
    min-height: 150px;
  }

  /* header-main becomes a plain block; children are absolutely placed against
     `.sf-header` (position:relative). */
  .sf-header-main {
    position: static;
    display: block;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  /* Row 1 — Login + language, right-aligned. (search + hamburger are pulled
     out via `.sf-mobilebar` below, so only these two flow here.) */
  .sf-header-tools {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 12px 14px 0;
  }

  /* Touch-friendly tap targets (>=40px). */
  .sf-header-tools .sf-tool-summary,
  .sf-header-tools .sf-lang {
    min-height: 40px;
  }

  /* Row 2 (left) — the SF logo, scaled down to the reference's ~170px width
     (318 * 0.56 ≈ 178). Scaling keeps the red skewed banner + text perfectly
     proportioned; the box is absolutely placed so it never affects flow. */
  .sf-logo {
    position: absolute;
    left: 12px;
    top: 56px;
    width: 318px;
    height: 124px;
    transform: scale(0.56);
    transform-origin: left top;
  }

  /* Row 2 (right) — hamburger + search cluster on the logo row. */
  .sf-mobilebar {
    display: flex;
    /* DOM order is search → hamburger; reverse so it reads hamburger → search
       left-to-right, matching the reference. */
    flex-direction: row-reverse;
    position: absolute;
    right: 10px;
    top: 60px;
    z-index: 6;
    align-items: center;
    gap: 10px;
  }
  .sf-mobilebar .sf-tool-summary {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 8px 12px;
  }
  /* Icon-only hamburger (drop the "Menu" word) to match the reference ≡. */
  .sf-hamburger span { display: none; }
  /* Make sure the drawer trigger is visible on phones (chrome.css already
     reveals it <=980, this keeps it robust). */
  .sf-hamburger { display: inline-flex; }
  .sf-tool-icon { width: 18px; height: 18px; }

  /* Divider line sits between the two rows (reference has one). */
  .sf-menu-line { top: 52px; }

  /* Popover forms: keep them inside the viewport (they anchor to the right of
     their trigger, which is now near the screen edge). */
  .sf-header-form {
    right: 0;
    max-width: calc(100vw - 24px);
  }
  .sf-search-tool .sf-header-form { width: min(280px, calc(100vw - 24px)); }

  /* ====================================================================
     HOME — spacing / column parity. The vintage cards & labels stay.
     ==================================================================== */

  /* Hero caption — smaller so it doesn't crowd the mobile hero. */
  .sf-home-hero-caption { font-size: 15px; }

  /* Field-finds carousel — a touch more slide, less arrow gutter. Stays
     swipeable with the ‹ › arrows. */
  .sf-finds { padding: 0 38px; }

  /* (The former "Recently added" product block was removed from
     front-page.php entirely — home carries no product loop, like the
     reference.) */

  /* About us — the reference renders this as a LIGHT band (white background,
     dark serif text, italic serif heading), not a dark card. Match it. */
  .sf-home-about-preview article {
    border: 0;
    border-radius: 0;
    background: #f5f2ea;
    box-shadow: none;
    color: #1c1c1c;
  }
  .sf-home-about-preview article p {
    color: #262626;
  }
  .sf-home-about-preview article h2,
  .sf-home-about-preview article h2 a {
    color: #111;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  /* "Read more" as a plain quiet link (the reference ends with a plain "…"). */
  .sf-home-about-preview article > a {
    min-height: 40px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #8c2d26;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* SHOP tile labels — single line with ellipsis, like the reference
     ("Insignia & Accesso…"), instead of wrapping to two lines. */
  .sf-shop-tile-label-text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hero — like the reference mobile: the photo BLEEDS UP under the
     translucent header (starts at the very top of the page), anchored top so
     the ruins skyline reads; the old 0.92 wash is lightened so the photo is
     actually visible. padding-top keeps the INFORMATION popup below the
     header controls. */
  .sf-home-hero {
    margin-top: -150px;
    min-height: 580px;
    padding-top: 170px;
    background:
      linear-gradient(180deg, rgba(20, 24, 25, 0.35), rgba(20, 24, 25, 0.5)),
      url("/legacy-assets/home/stalingrad-winter-1943.jpg") center top / cover;
  }

  /* No red tap-flash on the logo / tiles (iOS/Android default highlight). */
  a,
  button,
  summary {
    -webkit-tap-highlight-color: transparent;
  }

  /* SHOP category tiles — 2-col photo tiles with the red skewed label, exactly
     like the reference mobile. (Layout only; the tile styling is untouched.) */
  .sf-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Section headings: keep the "View all →" on its own line, not squashed. */
  .sf-home-section-head {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
}