/* ========================================
   Responsive CSS
   ======================================== */

/* ========================================
   Mobile First Approach
   ======================================== */

/* Base Styles (Mobile First - < 768px) */
:root {
  --font-size-base: var(--font-size-md);
  --spacing-base: var(--spacing-md);
}

/* Mobile Breakpoint (< 768px) */
@media (max-width: 767px) {
  /* Grid Layout - 2 Columns */
  .content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
  }

  /* Font Sizes */
  html {
    font-size: 14px;
  }

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

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

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

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

  h5 {
    font-size: var(--font-size-md);
  }

  h6 {
    font-size: var(--font-size-sm);
  }

  /* Spacing */
  :root {
    --spacing-base: var(--spacing-sm);
  }

  .container {
    padding: 0 var(--spacing-sm);
  }

  .header,
  .footer {
    padding: var(--spacing-sm);
  }

  /* Touch Targets - Minimum 44x44px */
  .btn,
  .nav__item,
  .grid-item,
  .form__input,
  .form__select,
  .form__textarea,
  .pagination__item,
  .search,
  .language-selector {
    min-width: 44px;
    min-height: 44px;
  }

  /* Navigation */
  .nav {
    padding: var(--spacing-sm);
  }

  .nav__list {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .nav__item {
    padding: var(--spacing-sm);
    text-align: center;
  }

  /* Header */
  .header {
    padding: var(--spacing-sm);
  }

  .header__logo {
    font-size: var(--font-size-xl);
  }

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

  /* Footer */
  .footer {
    padding: var(--spacing-sm);
    text-align: center;
  }

  .footer__content {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  /* Forms */
  .form__group {
    margin-bottom: var(--spacing-md);
  }

  .form__label {
    font-size: var(--font-size-sm);
  }

  .form__input,
  .form__select,
  .form__textarea {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  /* Video Player */
  .video-player {
    padding: var(--spacing-sm);
  }

  .video-player__controls {
    padding: var(--spacing-sm);
  }

  /* Content Grid */
  .grid-item {
    border-radius: var(--border-radius-md);
  }

  .grid-item__title {
    font-size: var(--font-size-sm);
  }

  .grid-item__description {
    font-size: var(--font-size-xs);
  }

  /* Buttons */
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /* Language Selector */
  .language-selector {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  /* Pagination */
  .pagination {
    gap: var(--spacing-xs);
  }

  .pagination__item {
    min-width: 44px;
    min-height: 44px;
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
  }

  /* Search */
  .search {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  /* Modal */
  .modal {
    padding: var(--spacing-sm);
  }

  .modal__content {
    padding: var(--spacing-md);
  }

  /* Alerts */
  .alert {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  /* Badge */
  .badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
}

/* Tablet Breakpoint (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Grid Layout - 4 Columns */
  .content-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-lg);
  }

  /* Font Sizes */
  html {
    font-size: 15px;
  }

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

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

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

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

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

  h6 {
    font-size: var(--font-size-md);
  }

  /* Spacing */
  :root {
    --spacing-base: var(--spacing-md);
  }

  .container {
    padding: 0 var(--spacing-md);
  }

  .header,
  .footer {
    padding: var(--spacing-md);
  }

  /* Navigation */
  .nav {
    padding: var(--spacing-md);
  }

  .nav__list {
    flex-direction: row;
    gap: var(--spacing-md);
  }

  .nav__item {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Header */
  .header {
    padding: var(--spacing-md);
  }

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

  .header__title {
    font-size: var(--font-size-xl);
  }

  /* Footer */
  .footer {
    padding: var(--spacing-md);
  }

  .footer__content {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-lg);
  }

  /* Forms */
  .form__group {
    margin-bottom: var(--spacing-lg);
  }

  .form__label {
    font-size: var(--font-size-md);
  }

  .form__input,
  .form__select,
  .form__textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-md);
  }

  /* Video Player */
  .video-player {
    padding: var(--spacing-md);
  }

  .video-player__controls {
    padding: var(--spacing-md);
  }

  /* Content Grid */
  .grid-item {
    border-radius: var(--border-radius-lg);
  }

  .grid-item__title {
    font-size: var(--font-size-md);
  }

  .grid-item__description {
    font-size: var(--font-size-sm);
  }

  /* Buttons */
  .btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-md);
  }

  /* Language Selector */
  .language-selector {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-md);
  }

  /* Pagination */
  .pagination {
    gap: var(--spacing-sm);
  }

  .pagination__item {
    min-width: 44px;
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-md);
  }

  /* Search */
  .search {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-md);
  }

  /* Modal */
  .modal {
    padding: var(--spacing-md);
  }

  .modal__content {
    padding: var(--spacing-lg);
  }

  /* Alerts */
  .alert {
    padding: var(--spacing-md);
    font-size: var(--font-size-md);
  }

  /* Badge */
  .badge {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
}

/* Desktop Breakpoint (1200px+) */
@media (min-width: 1200px) {
  /* Grid Layout - 6 Columns */
  .content-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--spacing-xl);
  }

  /* Font Sizes */
  html {
    font-size: 16px;
  }

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

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

  h3 {
    font-size: var(--font-size-3xl);
  }

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

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

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

  /* Spacing */
  :root {
    --spacing-base: var(--spacing-lg);
  }

  .container {
    padding: 0 var(--spacing-lg);
  }

  .header,
  .footer {
    padding: var(--spacing-lg);
  }

  /* Navigation */
  .nav {
    padding: var(--spacing-lg);
  }

  .nav__list {
    flex-direction: row;
    gap: var(--spacing-lg);
  }

  .nav__item {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  /* Header */
  .header {
    padding: var(--spacing-lg);
  }

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

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

  /* Footer */
  .footer {
    padding: var(--spacing-lg);
  }

  .footer__content {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-xl);
  }

  /* Forms */
  .form__group {
    margin-bottom: var(--spacing-xl);
  }

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

  .form__input,
  .form__select,
  .form__textarea {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
  }

  /* Video Player */
  .video-player {
    padding: var(--spacing-xl);
  }

  .video-player__controls {
    padding: var(--spacing-xl);
  }

  /* Content Grid */
  .grid-item {
    border-radius: var(--border-radius-xl);
  }

  .grid-item__title {
    font-size: var(--font-size-lg);
  }

  .grid-item__description {
    font-size: var(--font-size-md);
  }

  /* Buttons */
  .btn {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
  }

  /* Language Selector */
  .language-selector {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
  }

  /* Pagination */
  .pagination {
    gap: var(--spacing-md);
  }

  .pagination__item {
    min-width: 44px;
    min-height: 44px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
  }

  /* Search */
  .search {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
  }

  /* Modal */
  .modal {
    padding: var(--spacing-lg);
  }

  .modal__content {
    padding: var(--spacing-xl);
  }

  /* Alerts */
  .alert {
    padding: var(--spacing-lg);
    font-size: var(--font-size-lg);
  }

  /* Badge */
  .badge {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-md);
  }
}

/* Large Desktop Breakpoint (1920px+) */
@media (min-width: 1920px) {
  /* Font Sizes */
  html {
    font-size: 18px;
  }

  h1 {
    font-size: calc(var(--font-size-5xl) * 1.2);
  }

  h2 {
    font-size: calc(var(--font-size-4xl) * 1.2);
  }

  h3 {
    font-size: calc(var(--font-size-3xl) * 1.2);
  }

  h4 {
    font-size: calc(var(--font-size-2xl) * 1.2);
  }

  h5 {
    font-size: calc(var(--font-size-xl) * 1.2);
  }

  h6 {
    font-size: calc(var(--font-size-lg) * 1.2);
  }

  /* Grid Layout - 6 Columns with larger spacing */
  .content-grid {
    gap: var(--spacing-2xl);
  }

  /* Spacing */
  :root {
    --spacing-base: var(--spacing-xl);
  }

  .container {
    padding: 0 var(--spacing-xl);
  }

  .header,
  .footer {
    padding: var(--spacing-xl);
  }

  /* Navigation */
  .nav {
    padding: var(--spacing-xl);
  }

  .nav__list {
    gap: var(--spacing-xl);
  }

  .nav__item {
    padding: var(--spacing-lg) var(--spacing-xl);
  }

  /* Header */
  .header {
    padding: var(--spacing-xl);
  }

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

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

  /* Footer */
  .footer {
    padding: var(--spacing-xl);
  }

  .footer__content {
    gap: var(--spacing-2xl);
  }

  /* Forms */
  .form__group {
    margin-bottom: var(--spacing-2xl);
  }

  .form__label {
    font-size: var(--font-size-xl);
  }

  .form__input,
  .form__select,
  .form__textarea {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-size-xl);
  }

  /* Video Player */
  .video-player {
    padding: var(--spacing-2xl);
  }

  .video-player__controls {
    padding: var(--spacing-2xl);
  }

  /* Content Grid */
  .grid-item {
    border-radius: var(--border-radius-xl);
  }

  .grid-item__title {
    font-size: var(--font-size-xl);
  }

  .grid-item__description {
    font-size: var(--font-size-lg);
  }

  /* Buttons */
  .btn {
    padding: var(--spacing-lg) var(--spacing-2xl);
    font-size: var(--font-size-xl);
  }

  /* Language Selector */
  .language-selector {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-size-xl);
  }

  /* Pagination */
  .pagination {
    gap: var(--spacing-lg);
  }

  .pagination__item {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-size-xl);
  }

  /* Search */
  .search {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-size-xl);
  }

  /* Modal */
  .modal {
    padding: var(--spacing-xl);
  }

  .modal__content {
    padding: var(--spacing-2xl);
  }

  /* Alerts */
  .alert {
    padding: var(--spacing-xl);
    font-size: var(--font-size-xl);
  }

  /* Badge */
  .badge {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
  }
}

/* Flexible Font Sizes for All Breakpoints */
/* Using clamp() for fluid typography */
:root {
  --font-size-h1: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
  --font-size-h2: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
  --font-size-h3: clamp(var(--font-size-xl), 3vw, var(--font-size-3xl));
  --font-size-h4: clamp(var(--font-size-lg), 2.5vw, var(--font-size-2xl));
  --font-size-h5: clamp(var(--font-size-md), 2vw, var(--font-size-xl));
  --font-size-h6: clamp(var(--font-size-sm), 1.5vw, var(--font-size-lg));
}

h1 {
  font-size: var(--font-size-h1);
}

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

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

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

/* Touch Target Minimums for All Breakpoints */
/* Mobile: 44x44px minimum */
/* Tablet: 44x44px minimum */
/* Desktop: 44x44px minimum */
.btn,
.nav__item,
.grid-item,
.form__input,
.form__select,
.form__textarea,
.pagination__item,
.search,
.language-selector,
.checkbox,
.radio,
.range,
.progress__bar {
  min-width: 44px;
  min-height: 44px;
}

/* High Resolution Displays */
@media (min-resolution: 2dppx) {
  html {
    font-size: 18px;
  }

  .content-grid {
    gap: var(--spacing-lg);
  }

  .grid-item {
    border-radius: var(--border-radius-lg);
  }
}

/* Print Styles */
@media print {
  .header,
  .footer,
  .nav,
  .btn,
  .grid-item__overlay,
  .grid-item__actions,
  .grid-item__badge {
    display: none !important;
  }

  .content-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--spacing-md);
  }

  .grid-item {
    border: 1px solid #000;
    break-inside: avoid;
  }

  body {
    background-color: #fff;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}

/* RTL Support for Arabic */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .nav__list {
  flex-direction: row-reverse;
}

[dir="rtl"] .grid-item__overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.4), transparent);
}

[dir="rtl"] .grid-item__badge {
  left: var(--spacing-sm);
  right: auto;
}

[dir="rtl"] .grid-item__categories {
  padding-right: var(--spacing-lg);
  padding-left: 0;
}

[dir="rtl"] .grid-item__thumbnail img {
  transform: scaleX(-1);
}

[dir="rtl"] .grid-item:hover .grid-item__thumbnail img {
  transform: scale(1.05) scaleX(-1);
}

/* RTL Mobile (< 768px) */
@media (max-width: 767px) and (dir="rtl") {
  .content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* RTL Tablet (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) and (dir="rtl") {
  .content-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* RTL Desktop (1200px+) */
@media (min-width: 1200px) and (dir="rtl") {
  .content-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
/* RTL Support for Arabic */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .nav__list {
  flex-direction: row-reverse;
}

[dir="rtl"] .grid-item__overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.4), transparent);
}

[dir="rtl"] .grid-item__badge {
  left: var(--spacing-sm);
  right: auto;
}

[dir="rtl"] .grid-item__categories {
  padding-right: var(--spacing-lg);
  padding-left: 0;
}

[dir="rtl"] .grid-item__thumbnail img {
  transform: scaleX(-1);
}

[dir="rtl"] .grid-item:hover .grid-item__thumbnail img {
  transform: scale(1.05) scaleX(-1);
}

/* RTL Mobile (< 768px) */
@media (max-width: 767px) and (dir="rtl") {
  .content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* RTL Tablet (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) and (dir="rtl") {
  .content-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* RTL Desktop (1200px+) */
@media (min-width: 1200px) and (dir="rtl") {
  .content-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}