/**
 * Responsive Styles for MGN-containers Design System
 * Адаптивные стили для различных размеров экранов
 */

/* ========================================
   Extra Small Devices (phones, < 480px)
   ======================================== */

@media (max-width: 479px) {
  /* Container */
  .container {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }

  /* Typography */
  h1 {
    font-size: var(--font-size-2xl);
  }

  h2 {
    font-size: var(--font-size-xl);
  }

  h3 {
    font-size: var(--font-size-lg);
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  /* Buttons */
  .btn {
    width: 100%;
    justify-content: center;
  }

  .btn-block {
    width: 100%;
  }

  /* Cards */
  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-4);
  }

  /* Forms */
  .form-group {
    margin-bottom: var(--spacing-4);
  }

  /* Tables */
  .table-responsive {
    border: 0;
  }

  /* Modal */
  .modal-dialog {
    margin: var(--spacing-2);
  }

  .modal-content {
    border-radius: var(--radius-md);
  }

  /* Navbar */
  .navbar {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .navbar-brand {
    font-size: var(--font-size-lg);
  }

  /* Hero */
  .hero {
    padding: var(--spacing-12) 0;
  }

  /* Grid */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }

  /* Feature Card */
  .feature-card {
    padding: var(--spacing-6);
  }

  /* Product Card */
  .product-image {
    height: 160px;
  }

  /* Pagination */
  .pagination {
    justify-content: center;
  }

  /* Breadcrumb */
  .breadcrumb {
    padding: var(--spacing-2) var(--spacing-3);
  }

  /* Toast */
  .toast {
    left: var(--spacing-2);
    right: var(--spacing-2);
    max-width: none;
  }

  /* Dropdown */
  .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    margin-top: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Input Group */
  .input-group {
    flex-direction: column;
  }

  .input-group .form-control,
  .input-group .input-group-text {
    width: 100%;
    border-radius: var(--radius-md);
    margin-left: 0;
  }

  .input-group > .form-control:not(:first-child),
  .input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    margin-top: -1px;
  }

  .input-group > .form-control:not(:last-child),
  .input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
}

/* ========================================
   Small Devices (landscape phones, 480px - 639px)
   ======================================== */

@media (min-width: 480px) and (max-width: 639px) {
  /* Container */
  .container {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  /* Typography */
  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  .hero-title {
    font-size: var(--font-size-4xl);
  }

  /* Buttons */
  .btn {
    width: auto;
  }

  /* Cards */
  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-5);
  }

  /* Grid */
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }

  /* Product Card */
  .product-image {
    height: 180px;
  }
}

/* ========================================
   Small Devices (landscape phones, ≥ 640px)
   ======================================== */

@media (min-width: 640px) {
  /* Container */
  .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Grid */
  .grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Flex */
  .flex-sm-row {
    flex-direction: row;
  }

  .flex-sm-column {
    flex-direction: column;
  }

  /* Display */
  .d-sm-none {
    display: none;
  }

  .d-sm-inline {
    display: inline;
  }

  .d-sm-inline-block {
    display: inline-block;
  }

  .d-sm-block {
    display: block;
  }

  .d-sm-flex {
    display: flex;
  }

  .d-sm-grid {
    display: grid;
  }

  /* Text */
  .text-sm-center {
    text-align: center;
  }

  .text-sm-left {
    text-align: left;
  }

  .text-sm-right {
    text-align: right;
  }

  /* Spacing */
  .m-sm-0 { margin: 0; }
  .m-sm-4 { margin: var(--spacing-4); }
  .m-sm-8 { margin: var(--spacing-8); }

  .p-sm-0 { padding: 0; }
  .p-sm-4 { padding: var(--spacing-4); }
  .p-sm-8 { padding: var(--spacing-8); }

  /* Navbar */
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-sm .navbar-toggler {
    display: none;
  }

  /* Modal */
  .modal-sm .modal-dialog {
    max-width: 350px;
  }
}

/* ========================================
   Medium Devices (tablets, ≥ 768px)
   ======================================== */

@media (min-width: 768px) {
  /* Container */
  .container-md {
    max-width: 720px;
  }

  /* Typography */
  h1 {
    font-size: var(--font-size-4xl);
  }

  .hero-title {
    font-size: var(--font-size-5xl);
  }

  /* Section */
  section {
    padding: var(--spacing-16) 0;
  }

  section-sm {
    padding: var(--spacing-10) 0;
  }

  section-lg {
    padding: var(--spacing-20) 0;
  }

  /* Cards */
  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-6);
  }

  /* Forms */
  .form-row {
    margin-right: calc(var(--spacing-4) * -0.5);
    margin-left: calc(var(--spacing-4) * -0.5);
  }

  .form-row > .col,
  .form-row > [class*="col-"] {
    padding-right: calc(var(--spacing-4) * 0.5);
    padding-left: calc(var(--spacing-4) * 0.5);
  }

  /* Grid */
  .grid-cols-md-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-cols-md-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-md-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-md-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Flex */
  .flex-md-row {
    flex-direction: row;
  }

  .flex-md-column {
    flex-direction: column;
  }

  /* Display */
  .d-md-none {
    display: none;
  }

  .d-md-inline {
    display: inline;
  }

  .d-md-inline-block {
    display: inline-block;
  }

  .d-md-block {
    display: block;
  }

  .d-md-flex {
    display: flex;
  }

  .d-md-grid {
    display: grid;
  }

  /* Text */
  .text-md-center {
    text-align: center;
  }

  .text-md-left {
    text-align: left;
  }

  .text-md-right {
    text-align: right;
  }

  /* Spacing */
  .m-md-0 { margin: 0; }
  .m-md-4 { margin: var(--spacing-4); }
  .m-md-8 { margin: var(--spacing-8); }

  .p-md-0 { padding: 0; }
  .p-md-4 { padding: var(--spacing-4); }
  .p-md-8 { padding: var(--spacing-8); }

  /* Navbar */
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-md .navbar-toggler {
    display: none;
  }

  /* Modal */
  .modal-lg .modal-dialog {
    max-width: 800px;
  }

  /* Hero */
  .hero {
    padding: var(--spacing-24) 0;
  }

  /* Feature Card */
  .feature-card {
    padding: var(--spacing-10);
  }

  /* Product Card */
  .product-image {
    height: 220px;
  }
}

/* ========================================
   Large Devices (desktops, ≥ 1024px)
   ======================================== */

@media (min-width: 1024px) {
  /* Container */
  .container-lg {
    max-width: 960px;
  }

  /* Typography */
  h1 {
    font-size: var(--font-size-5xl);
  }

  .hero-title {
    font-size: var(--font-size-6xl);
  }

  /* Section */
  section {
    padding: var(--spacing-20) 0;
  }

  section-sm {
    padding: var(--spacing-12) 0;
  }

  section-lg {
    padding: var(--spacing-24) 0;
  }

  /* Grid */
  .grid-cols-lg-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-cols-lg-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-lg-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Flex */
  .flex-lg-row {
    flex-direction: row;
  }

  .flex-lg-column {
    flex-direction: column;
  }

  /* Display */
  .d-lg-none {
    display: none;
  }

  .d-lg-inline {
    display: inline;
  }

  .d-lg-inline-block {
    display: inline-block;
  }

  .d-lg-block {
    display: block;
  }

  .d-lg-flex {
    display: flex;
  }

  .d-lg-grid {
    display: grid;
  }

  /* Text */
  .text-lg-center {
    text-align: center;
  }

  .text-lg-left {
    text-align: left;
  }

  .text-lg-right {
    text-align: right;
  }

  /* Spacing */
  .m-lg-0 { margin: 0; }
  .m-lg-4 { margin: var(--spacing-4); }
  .m-lg-8 { margin: var(--spacing-8); }

  .p-lg-0 { padding: 0; }
  .p-lg-4 { padding: var(--spacing-4); }
  .p-lg-8 { padding: var(--spacing-8); }

  /* Navbar */
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }

  /* Modal */
  .modal-xl .modal-dialog {
    max-width: 1140px;
  }

  /* Hero */
  .hero {
    padding: var(--spacing-32) 0;
  }

  /* Feature Card */
  .feature-card {
    padding: var(--spacing-12);
  }

  /* Product Card */
  .product-image {
    height: 240px;
  }

  /* Table */
  .table-responsive-lg {
    display: table;
    width: 100%;
    overflow-x: auto;
  }
}

/* ========================================
   Extra Large Devices (large desktops, ≥ 1280px)
   ======================================== */

@media (min-width: 1280px) {
  /* Container */
  .container-xl {
    max-width: 1140px;
  }

  /* Grid */
  .grid-cols-xl-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-cols-xl-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-xl-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-xl-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Flex */
  .flex-xl-row {
    flex-direction: row;
  }

  .flex-xl-column {
    flex-direction: column;
  }

  /* Display */
  .d-xl-none {
    display: none;
  }

  .d-xl-inline {
    display: inline;
  }

  .d-xl-inline-block {
    display: inline-block;
  }

  .d-xl-block {
    display: block;
  }

  .d-xl-flex {
    display: flex;
  }

  .d-xl-grid {
    display: grid;
  }

  /* Text */
  .text-xl-center {
    text-align: center;
  }

  .text-xl-left {
    text-align: left;
  }

  .text-xl-right {
    text-align: right;
  }

  /* Spacing */
  .m-xl-0 { margin: 0; }
  .m-xl-4 { margin: var(--spacing-4); }
  .m-xl-8 { margin: var(--spacing-8); }

  .p-xl-0 { padding: 0; }
  .p-xl-4 { padding: var(--spacing-4); }
  .p-xl-8 { padding: var(--spacing-8); }

  /* Navbar */
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}

/* ========================================
   2XL Devices (≥ 1536px)
   ======================================== */

@media (min-width: 1536px) {
  /* Container */
  .container {
    max-width: 1400px;
  }

  /* Grid */
  .grid-cols-2xl-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-cols-2xl-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-2xl-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-2xl-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Flex */
  .flex-2xl-row {
    flex-direction: row;
  }

  .flex-2xl-column {
    flex-direction: column;
  }

  /* Display */
  .d-2xl-none {
    display: none;
  }

  .d-2xl-inline {
    display: inline;
  }

  .d-2xl-inline-block {
    display: inline-block;
  }

  .d-2xl-block {
    display: block;
  }

  .d-2xl-flex {
    display: flex;
  }

  .d-2xl-grid {
    display: grid;
  }

  /* Text */
  .text-2xl-center {
    text-align: center;
  }

  .text-2xl-left {
    text-align: left;
  }

  .text-2xl-right {
    text-align: right;
  }

  /* Spacing */
  .m-2xl-0 { margin: 0; }
  .m-2xl-4 { margin: var(--spacing-4); }
  .m-2xl-8 { margin: var(--spacing-8); }

  .p-2xl-0 { padding: 0; }
  .p-2xl-4 { padding: var(--spacing-4); }
  .p-2xl-8 { padding: var(--spacing-8); }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  /* Hide elements */
  .no-print,
  .navbar,
  .btn,
  .pagination,
  .toast,
  .modal-backdrop {
    display: none !important;
  }

  /* Reset colors */
  body {
    background-color: var(--color-white);
    color: var(--color-black);
  }

  /* Links */
  a {
    color: var(--color-black);
    text-decoration: underline;
  }

  /* Cards */
  .card {
    border: 1px solid var(--color-gray-300);
    box-shadow: none;
    page-break-inside: avoid;
  }

  /* Tables */
  .table {
    border-collapse: collapse;
  }

  .table th,
  .table td {
    border: 1px solid var(--color-gray-300);
  }

  /* Images */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Page breaks */
  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }
}

/* ========================================
   Touch Devices
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets for touch devices */
  .btn {
    min-height: 48px;
    min-width: 48px;
  }

  .nav-link {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .tab {
    padding: var(--spacing-4) var(--spacing-6);
  }

  /* Remove hover effects */
  .btn:hover,
  .nav-link:hover,
  .tab:hover {
    transform: none;
  }
}

/* ========================================
   Grid System
   ======================================== */

.grid {
  display: grid;
  gap: var(--spacing-6);
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-gap-1 { gap: var(--spacing-1); }
.grid-gap-2 { gap: var(--spacing-2); }
.grid-gap-3 { gap: var(--spacing-3); }
.grid-gap-4 { gap: var(--spacing-4); }
.grid-gap-5 { gap: var(--spacing-5); }
.grid-gap-6 { gap: var(--spacing-6); }
.grid-gap-8 { gap: var(--spacing-8); }

/* ========================================
   Responsive Spacing
   ======================================== */

@media (max-width: 639px) {
  .section-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-6);
  }

  .section-subtitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-6);
  }

  .section-header {
    margin-bottom: var(--spacing-8);
  }
}

/* ========================================
   Responsive Typography
   ======================================== */

@media (max-width: 639px) {
  .display-1 {
    font-size: var(--font-size-4xl);
    line-height: 1.2;
  }

  .display-2 {
    font-size: var(--font-size-3xl);
    line-height: 1.2;
  }

  .display-3 {
    font-size: var(--font-size-2xl);
    line-height: 1.2;
  }

  .display-4 {
    font-size: var(--font-size-xl);
    line-height: 1.2;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .display-1 {
    font-size: var(--font-size-5xl);
    line-height: 1.2;
  }

  .display-2 {
    font-size: var(--font-size-4xl);
    line-height: 1.2;
  }

  .display-3 {
    font-size: var(--font-size-3xl);
    line-height: 1.2;
  }

  .display-4 {
    font-size: var(--font-size-2xl);
    line-height: 1.2;
  }
}

@media (min-width: 1024px) {
  .display-1 {
    font-size: var(--font-size-6xl);
    line-height: 1.2;
  }

  .display-2 {
    font-size: var(--font-size-5xl);
    line-height: 1.2;
  }

  .display-3 {
    font-size: var(--font-size-4xl);
    line-height: 1.2;
  }

  .display-4 {
    font-size: var(--font-size-3xl);
    line-height: 1.2;
  }
}

/* ========================================
   Responsive Tables
   ======================================== */

@media (max-width: 767px) {
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    display: block;
  }

  .table thead {
    display: none;
  }

  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    margin-bottom: var(--spacing-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
  }

  .table td {
    text-align: right;
    padding-left: 50%;
    position: relative;
    border-top: 1px solid var(--color-gray-200);
  }

  .table td::before {
    content: attr(data-label);
    position: absolute;
    left: var(--spacing-4);
    width: 45%;
    padding-right: var(--spacing-4);
    white-space: nowrap;
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }

  .table td:last-child {
    border-bottom: 0;
  }
}

/* ========================================
   Responsive Modals
   ======================================== */

@media (max-width: 575px) {
  .modal-dialog {
    margin: var(--spacing-2);
    max-width: none;
  }

  .modal-content {
    border-radius: var(--radius-md);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--spacing-4);
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-footer .btn {
    width: 100%;
  }
}

/* ========================================
   Responsive Forms
   ======================================== */

@media (max-width: 575px) {
  .form-row {
    flex-direction: column;
  }

  .form-row > .col,
  .form-row > [class*="col-"] {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .input-group {
    flex-direction: column;
  }

  .input-group .form-control,
  .input-group .input-group-text {
    width: 100%;
    border-radius: var(--radius-md);
    margin-left: 0;
  }

  .input-group > .form-control:not(:first-child),
  .input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    margin-top: -1px;
  }

  .input-group > .form-control:not(:last-child),
  .input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
}

/* ========================================
   Responsive Cards
   ======================================== */

@media (max-width: 575px) {
  .card {
    margin-bottom: var(--spacing-4);
  }

  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-4);
  }

  .card-actions {
    flex-direction: column;
  }

  .card-actions .btn {
    width: 100%;
  }
}

/* ========================================
   Responsive Hero
   ======================================== */

@media (max-width: 767px) {
  .hero {
    padding: var(--spacing-16) 0;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  .hero-actions {
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .hero-actions .btn {
    width: 100%;
  }
}

/* ========================================
   Responsive Feature Cards
   ======================================== */

@media (max-width: 767px) {
  .feature-card {
    padding: var(--spacing-6);
  }

  .feature-icon {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-2xl);
  }

  .feature-title {
    font-size: var(--font-size-lg);
  }
}

/* ========================================
   Responsive Product Cards
   ======================================== */

@media (max-width: 575px) {
  .product-image {
    height: 180px;
  }

  .product-body {
    padding: var(--spacing-4);
  }

  .product-footer {
    flex-direction: column;
    padding: var(--spacing-4);
  }

  .product-footer .btn {
    width: 100%;
  }
}

/* ========================================
   Responsive Alerts
   ======================================== */

@media (max-width: 575px) {
  .alert {
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
  }

  .alert-heading {
    font-size: var(--font-size-base);
  }
}

/* ========================================
   Responsive Breadcrumbs
   ======================================== */

@media (max-width: 575px) {
  .breadcrumb {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    line-height: 1.3;
  }

  .breadcrumb-item {
    display: inline-flex;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    padding-right: var(--spacing-1);
  }
}