/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ============================================================
   Responsywność – klasy pomocnicze.
   Widoki używają stylów inline, dlatego reguły mają !important.
   md = tablet (<= 900px), sm = telefon (<= 640px)
   ============================================================ */

html, body { overflow-x: clip; }
img { max-width: 100%; }

@media (max-width: 900px) {
  .r-cols-1-md { grid-template-columns: 1fr !important; }
  .r-cols-2-md { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-gap-md    { gap: 2rem !important; }
  .r-rows-auto { grid-template-rows: none !important; grid-auto-rows: 280px; }
  .r-rows-auto > * { grid-column: auto !important; grid-row: auto !important; }
  .r-pad-card  { padding: 3rem 2rem !important; }
  .r-h-auto-md { height: auto !important; }
}

@media (max-width: 640px) {
  .r-cols-1-sm { grid-template-columns: 1fr !important; }
  .r-cols-2-sm { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-gap-sm    { gap: 1.25rem !important; }
  .r-section   { padding-top: 3rem !important; padding-bottom: 3rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
  .r-pad-card  { padding: 2.25rem 1.25rem !important; }
  .r-pad-sm    { padding: 1.25rem !important; }
  .r-mb-sm     { margin-bottom: 2rem !important; }
  .r-hide-sm   { display: none !important; }
  .r-wrap-sm   { flex-wrap: wrap !important; }
  .r-col-sm    { flex-direction: column !important; align-items: stretch !important; }
  .r-full-sm   { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .r-center-sm { text-align: center !important; justify-content: center !important; }
  .r-static-sm { position: static !important; transform: none !important; }
  .r-h-auto-sm { height: auto !important; }
  .r-rows-auto { grid-auto-rows: 260px; }
}