/* Responsive Styles for Art Styles Page */

/* Tablet Styles */
@media screen and (max-width: 1024px) {
  .pageTitle {
    font-size: 3rem;
  }

  .stylesGrid {
    padding: 0 30px 60px;
    gap: 25px;
  }

  .styleCard {
    min-width: 280px;
  }

  .modalBody {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .modalImage {
    order: -1;
  }

  .modalImage img {
    height: 250px;
  }
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
  .pageTitle {
    font-size: 2.5rem;
  }

  .pageSubtitle {
    font-size: 1.1rem;
    padding: 0 20px;
  }

  .filterButtons {
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
  }

  .filterBtn {
    padding: 10px 18px;
    font-size: 0.9rem;
  }

  .stylesGrid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    padding: 0 20px 60px;
    gap: 20px;
  }

  .styleImage {
    height: 200px;
  }

  .styleInfo {
    padding: 20px;
  }

  .styleName {
    font-size: 1.3rem;
  }

  .modalContent {
    width: 95%;
    max-height: 90vh;
  }

  .modalBody {
    padding: 20px;
    gap: 15px;
  }

  .modalInfo h2 {
    font-size: 1.8rem;
  }

  .modalInfo p {
    font-size: 1rem;
  }

  .tryNowBtn {
    padding: 14px 28px;
    font-size: 1rem;
  }
}

/* Small Mobile Styles */
@media screen and (max-width: 480px) {
  .stylesHeader {
    padding: 30px 15px;
  }

  .pageTitle {
    font-size: 2rem;
  }

  .pageSubtitle {
    font-size: 1rem;
  }

  .filterSection {
    padding: 15px;
  }

  .filterButtons {
    width: 100%;
    justify-content: center;
  }

  .filterBtn {
    padding: 8px 16px;
    font-size: 0.85rem;
    flex: 1;
    text-align: center;
    min-width: 70px;
  }

  .stylesGrid {
    grid-template-columns: 1fr;
    padding: 0 15px 60px;
    gap: 15px;
  }

  .styleCard {
    min-width: unset;
  }

  .styleImage {
    height: 180px;
  }

  .styleInfo {
    padding: 18px;
  }

  .styleName {
    font-size: 1.2rem;
  }

  .styleDescription {
    font-size: 0.9rem;
  }

  .modalContent {
    width: 98%;
    margin: 10px;
  }

  .modalBody {
    padding: 15px;
  }

  .modalInfo h2 {
    font-size: 1.5rem;
  }

  .modalInfo p {
    font-size: 0.95rem;
  }

  .modalDetails h4 {
    font-size: 1.1rem;
  }

  .tryNowBtn {
    padding: 12px 24px;
    font-size: 0.95rem;
    width: 100%;
    justify-content: center;
  }

  .closeModal {
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
  }
}

/* Very Small Mobile Styles */
@media screen and (max-width: 360px) {
  .pageTitle {
    font-size: 1.8rem;
  }

  .filterBtn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .styleImage {
    height: 160px;
  }

  .styleInfo {
    padding: 15px;
  }

  .modalBody {
    padding: 12px;
  }

  .modalImage img {
    height: 180px;
  }
}

/* Landscape Mobile */
@media screen and (max-height: 600px) and (orientation: landscape) {
  .stylesHeader {
    padding: 20px 15px;
  }

  .pageTitle {
    font-size: 2rem;
  }

  .modalContent {
    max-height: 95vh;
  }

  .modalBody {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .modalImage img {
    height: 200px;
  }
}

/* High DPI Displays */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .styleImage img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .styleCard {
    animation: none;
  }

  .styleCard:hover {
    transform: none;
  }

  .styleCard:hover .styleImage img {
    transform: none;
  }

  .tryNowBtn:hover {
    transform: none;
  }

  * {
    transition: none !important;
  }
}
