/* =========================================
   Slavic Roots – Mobile CSS (FINAL)
   Load with: media="(max-width: 900px)"
   Master rule: Mobile matches Desktop logic.
   - Photo grids stay 2 columns (no 1-column collapse)
   - Only spacing/typography + stacking of flex sections
   - No image order, no asset changes
   ========================================= */

:root{
  --container-pad: 16px;
}

/* Container padding (keeps layout clean on phones) */
.container{
  width: 100%;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Header / Nav: keep same structure, just scale */
header{ padding: 18px 0; }

nav{ gap: 12px; }

.brand{ gap: 10px; min-width: 0; }
.brand img{ width: 48px; height: 48px; border-radius: 10px; }

.name strong{ font-size: 1rem; }
.name span{ font-size: .86rem; }

/* Nav links: finger-friendly */
.navlinks{
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;

  /* bleibt konsistent, style.css macht rechts-Align stabil */
}
.navlinks a{
  padding: 10px 12px;
  border-radius: 10px;
}

/* Hero: stack text + media, but keep photo grid logic */
.hero{ padding: 26px 0; }
.heroCard{ border-radius: 18px; }
.heroGrid{
  flex-direction: column; /* stack blocks */
  gap: 16px;
  padding: 16px;
}
.heroMedia{ margin-top: 10px; }

/* Typography */
.hero h1{ font-size: clamp(1.8rem, 6vw, 2.2rem); }
.lead{ font-size: 1.02rem; }
.smallNote{ font-size: .92rem; }

/* Buttons / badges spacing */
.ctas{ flex-wrap: wrap; gap: 10px; }
.badges{ flex-wrap: wrap; gap: 10px; }

/* Keep icons consistent */
.btn svg{ width: 18px; height: 18px; flex: 0 0 18px; display: block; }
.btn.grab svg{ width: 44px; height: 18px; flex: 0 0 auto; }

/* Sections: keep same design, reduce spacing */
.section{ padding: 24px 0; }
.section h1{ font-size: clamp(1.7rem, 5.8vw, 2.1rem); margin-bottom: 10px; }
.section h2{ font-size: 1.25rem; margin-bottom: 8px; }

/* Cards */
.cardPad{ padding: 16px; }

/* TwoCol stacks, but DOES NOT touch image grid definitions */
.twoCol{
  flex-direction: column;
  gap: 16px;
}

/* Paragraph spacing – tighter like the rest */
p{ margin: 8px 0; }
.smallNote{ margin-top: 8px; }

/* Contact mobile: Text nicht “auseinanderziehen” */
.contactGrid p{ margin: 8px 0; }
.contactNote{ font-size: 1rem; margin-top: 8px; }

/* =========================================
   PHOTO GRID LAW (MOBILE)
   - Keep 2 columns ALWAYS for these grids
   - 4 tiles stay 2x2, 12 tiles stay 2 columns
   ========================================= */
.mosaic.square-grid{
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mosaic img{
  border-radius: 14px;
}

/* Bottom-two images: ALWAYS 2 columns (no 1-column drop) */
.bottom-two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bottom-two img{
  border-radius: 14px;
}

/* Wide banner: keep as-is, just safe rounding */
.wideBanner img{
  border-radius: 14px;
}

/* Map on contact page */
.map-container iframe{
  min-height: 320px;
  border-radius: 14px;
}

/* Footer mobile: enger */
.footer{
  padding: 22px 0;
  border-radius: 18px 18px 0 0;
}
.footerGrid{
  flex-direction: column;
  gap: 16px;
}
.footer h2{ margin-bottom: 8px; }
.footer p{ margin: 6px 0; }
.footer .badges{ margin-top: 8px; gap: 10px; }
.footer .smallNote{ font-size: .9rem; }