/*
Theme Name:         Commercis Media - Responsive Styles
Theme URI:          https://commercis.com
Description:        Responsive styles for Commercis Media WordPress theme
Author:             Commercis Media Team
Author URI:         https://commercis.com
Version:            1.0.0
Text Domain:        commercis-media
*/

/* ============================================
   VIDEO BANNER RESPONSIVE STYLES
   ============================================ */

/* Responsive video sizing */
@media (max-width:1500px) {
  .video-banner-container {
    height: 500px;
  }
}

/* Responsive video sizing */
@media (max-width: 768px) {
  .video-banner-container {
    height: 400px;
    padding-bottom: 75%;
    /* 4:3 aspect ratio for mobile */
  }

  .video-content {
    padding: 1rem;
  }

  .video-title {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }

  .video-description {
    font-size: clamp(0.8rem, 3vw, 1rem);
  }

  .video-btn {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
  }

  .video-play-btn svg {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 480px) {
  .video-banner-container {
    padding-bottom: 100%;
    /* 1:1 aspect ratio for very small screens */
  }

  .video-content {
    padding: 0.75rem;
  }

  .video-play-btn svg {
    width: 48px;
    height: 48px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

  .video-play-btn,
  .video-placeholder,
  .video-element,
  .video-overlay,
  .video-btn {
    transition: none;
    animation: none;
  }

  .video-play-btn {
    animation: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .video-overlay {
    background: rgba(0, 0, 0, 0.8);
  }

  .video-play-btn svg circle {
    fill: #000;
    stroke: #fff;
    stroke-width: 2px;
  }
}

/* Print styles */
@media print {
  .video-banner {
    display: none;
  }
} 

/* ============================================
   LATEST POST RESPONSIVE STYLES
   ============================================ */

/* Responsive for latest post */
@media (max-width: 768px) {
  .latest-post-container {
    flex-direction: column;
  }

  .latest-content {
    padding: 20px;
  }

  .latest-title {
    font-size: 1.8rem;
  }

  .latest-excerpt {
    font-size: 1rem;
    max-width: 100%;
  }
}

/* ============================================
   PAGINATION RESPONSIVE STYLES
   ============================================ */

/* Responsive Pagination */
@media (max-width: 768px) {
  .pagination {
    margin: 30px 0;
  }

  .pagination-list {
    gap: 8px;
  }

  .pagination-item {
    min-width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .pagination-list {
    gap: 4px;
  }

  .pagination-item {
    min-width: 35px;
    height: 35px;
    font-size: 0.8rem;
  }
}

/* ============================================
   CATEGORY TABS RESPONSIVE STYLES
   ============================================ */

/* Tablet view */
@media (min-width: 769px) and (max-width: 991px) {
  .category-tab-nav {
    gap: 10px;
  }

  .category-tab {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

/* Large screen responsiveness for category tabs */
@media (min-width: 992px) {
  .category-tab-nav {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .category-tab-nav {
    flex-wrap: wrap;
    gap: 8px;
  }

  .category-tab {
    padding: 6px 12px;
    font-size: 0.85rem;
  }
}

/* ============================================
   SECTION RESPONSIVE STYLES
   ============================================ */

@media (max-width: 768px) {
  .h-section {
    padding: 20px 0px;
  }

  .section-title {
    font-size: 1.5rem;
  }
}

/* ============================================
   SLIDER RESPONSIVE STYLES
   ============================================ */

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .slider-swiper .slide-content {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .slider-swiper .slide-title {
    color: #ffffff;
  }
}

/* Mobile Swiper Improvements */
@media (max-width: 768px) {
  .slider-swiper .slide-content {
    padding: 1rem;
    font-size: 1.3rem;
  }

  .slider-swiper .slide-title {
    font-size: 1.1rem;
  }
}

/* ============================================
   INSIGHTS RESPONSIVE STYLES
   ============================================ */

/* Responsive Design */
@media (max-width: 991px) {
  .insights-hero-title {
    font-size: 2.25rem;
  }

  .insights-hero-description {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .insights-hero-banner {
    padding: 40px 24px !important;
    border-radius: 12px;
  }

  .insights-hero-title {
    font-size: 1.8rem;
  }

  .insights-hero-description {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .insights-hero-title {
    font-size: 1.5rem;
  }

  .insights-hero-description {
    font-size: 0.95rem;
  }
}

/* ============================================
   VIDEO RESTRICTION RESPONSIVE STYLES
   ============================================ */

/* Responsive Content Restriction */
@media (max-width: 860px) {
  .video-wrapper {
    max-width: 100%;
  }
}

/* Responsive Content Restriction */
@media (max-width: 768px) {
  .restriction-message {
    padding: 30px 24px;
  }

  .restriction-title {
    font-size: 1.5rem;
  }

  .restriction-description {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .restriction-message {
    padding: 24px 20px;
  }

  .restriction-title {
    font-size: 1.3rem;
  }

  .restriction-description {
    font-size: 0.95rem;
  }
}

/* ============================================
   SINGLE POST RESPONSIVE STYLES
   ============================================ */

/* Responsive Design */
@media (max-width: 991px) {
  .post-title {
    font-size: 2.75rem;
  }

  .post-meta {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .single-post-hero {
    min-height: 50vh;
  }

  .post-title {
    font-size: 2.25rem;
  }

  .post-content {
    padding: 30px 20px;
  }
}

@media (max-width: 480px) {
  .post-title {
    font-size: 1.875rem;
  }

  .post-meta {
    font-size: 0.85rem;
  }

  .post-content {
    padding: 20px 15px;
  }
}

/* ============================================
   VIDEO THUMBNAIL RESPONSIVE STYLES
   ============================================ */

/* Responsive video thumbnail */
@media (max-width: 768px) {
  .play-button-circle {
    width: 60px;
    height: 60px;
  }

  .play-button-icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .play-button-circle {
    width: 50px;
    height: 50px;
  }

  .play-button-icon {
    width: 20px;
    height: 20px;
  }
}

/* ============================================
   CATEGORY HERO RESPONSIVE STYLES
   ============================================ */

/* Responsive Category Hero */
@media (max-width: 991px) {

  .category-hero-content .category-title,
  .category-hero-content h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {

  .category-hero-content .category-title,
  .category-hero-content h1 {
    font-size: 2rem;
  }

  .category-hero-description {
    font-size: 1rem;
  }

  .subscribe-wrap p {
    margin: 0;
    flex-direction: column;
  }

  .newsletter-email {
    width: 100%;
  }


}

@media (max-width: 480px) {

  .category-hero-content .category-title,
  .category-hero-content h1 {
    font-size: 1.5rem;
  }

  .category-hero-description {
    font-size: 0.95rem;
  }
}

/* ============================================
   AUDIO PLAYER RESPONSIVE STYLES
   ============================================ */

/* Responsive Audio Player */
@media (max-width: 768px) {
  .featured-audio {
    margin: 30px 0;
    padding: 20px;
  }

  .audio-player {
    flex-direction: column;
    gap: 15px;
  }

  .audio-controls {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .audio-controls {
    flex-direction: column;
    gap: 15px;
  }

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

/* ============================================
   FOOTER RESPONSIVE STYLES
   ============================================ */

/* Responsive Footer */
@media (max-width: 991px) {
  .category-hero-banner {
    flex-direction: column;
  }

  .footer-widgets {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .footer-newsletter {
    padding: 40px 0;
  }

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

  .footer-widget {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .footer-newsletter {
    padding: 30px 20px;
  }

  .newsletter-form {
    flex-direction: column;
    gap: 10px;
  }

  .newsletter-input {
    width: 100%;
  }
}

/* ============================================
   SEARCH PAGE RESPONSIVE STYLES
   ============================================ */

/* Search Hero Section */
@media (max-width: 768px) {
  .search-title {
    font-size: 2rem;
  }

  .search-form {
    max-width: 100%;
  }
}

/* Responsive Search Pagination */
@media (max-width: 768px) {
  .search-results-section {
    flex-direction: column;
  }

  .search-result-item {
    flex-direction: column-reverse;
  }

  .search-result-thumbnail {
    width: 100%;
  }

  .binduz-er-back-to-top {
    right: -78px !important;
  }

  .search-pagination {
    margin-top: 30px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .search-pagination {
    margin-top: 30px;
    margin-bottom: 20px;
  }
}

/* Responsive Search Page */
@media (max-width: 991px) {
  .search-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .search-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .search-title {
    font-size: 1.5rem;
  }
}

/* ============================================
   TAG PAGE RESPONSIVE STYLES
   ============================================ */

/* Responsive Tag Page */
@media (max-width: 991px) {
  .tag-hero-section {
    padding: 60px 0;
    margin-top: 80px;
  }

  .tag-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .tag-hero-section {
    padding: 50px 0;
    margin-top: 60px;
  }

  .tag-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .tag-hero-section {
    padding: 40px 0;
    margin-top: 40px;
  }

  .tag-title {
    font-size: 1.5rem;
  }
}