/** Fix style for metronic 9.4.11+ (from 9.4.10 as base OK **/

/* Fix for Metronic update — restoring removed lg: utilities */

/* =====================================================
   Fix for Metronic update (Tailwind v4 breaking changes)
   Restores removed responsive utility classes
   ===================================================== */

/* --- sm (width >= 40rem / 640px) --- */
@media (width >= 40rem) {
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:flex-row    { flex-direction: row; }
  .sm\:flex-wrap   { flex-wrap: wrap; }
  .sm\:flex-nowrap { flex-wrap: nowrap; }
  .sm\:items-center  { align-items: center; }
  .sm\:justify-end   { justify-content: flex-end; }
  .sm\:max-w-full    { max-width: 100%; }
  .sm\:ms-8 { margin-inline-start: calc(var(--spacing) * 8); }
  .sm\:ps-8 { padding-inline-start: calc(var(--spacing) * 8); }
}

/* --- md (width >= 48rem / 768px) --- */
@media (width >= 48rem) {
  .md\:flex-1      { flex: 1; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:max-w-\[60\%\] { max-width: 60%; }
  .md\:w-80        { width: calc(var(--spacing) * 80); }
}

/* --- lg (width >= 64rem / 1024px) --- */
@media (width >= 64rem) {
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
  .lg\:m-5     { margin: calc(var(--spacing) * 5); }
  .lg\:p-10    { padding: calc(var(--spacing) * 10); }
  .lg\:p-16    { padding: calc(var(--spacing) * 16); }
  .lg\:p-7     { padding: calc(var(--spacing) * 7); }
  .lg\:p-12    { padding: calc(var(--spacing) * 12); }
  .lg\:border  { border-style: var(--tw-border-style); border-width: 1px; }
  .lg\:border-border  { border-color: var(--border); }
  .lg\:rounded-xl     { border-radius: calc(var(--radius) + 4px); }
  .lg\:grid-cols-1    { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:flex-col       { flex-direction: column; }
  .lg\:flex-nowrap    { flex-wrap: nowrap; }
  .lg\:justify-end    { justify-content: flex-end; }
}

/* --- xl (width >= 80rem / 1280px) --- */
@media (width >= 80rem) {
  .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .xl\:bg-cover    { background-size: cover; }
  .xl\:flex-row    { flex-direction: row; }
  .xl\:flex-nowrap { flex-wrap: nowrap; }
  .xl\:max-w-96    { max-width: calc(var(--spacing) * 96); }
  .xl\:me-14       { margin-inline-end: calc(var(--spacing) * 14); }
  .xl\:me-16       { margin-inline-end: calc(var(--spacing) * 16); }
  .xl\:min-w-24    { min-width: calc(var(--spacing) * 24); }
}

/* --- Arbitrary values (не генерируются в статическом билде) --- */
.max-w-\[370px\] { max-width: 370px; }
.max-w-\[380px\] { max-width: 380px; }
.max-w-\[420px\] { max-width: 420px; }
.max-w-\[440px\] { max-width: 440px; }

/* --- bg-top --- */
.bg-top { background-position: top; }