/**
 * Responsive CSS
 * 
 * @package Cantos_do_Rosario
 * @since 1.0.0
 */

/* ==========================================================================
   Desktop Large (1440px+)
   ========================================================================== */

@media (min-width: 1440px) {
  .section-container {
    max-width: 1600px;
  }
  
  h1 {
    font-size: 3rem;
  }
  
  h2 {
    font-size: 2.5rem;
  }
}

/* ==========================================================================
   Tablet Landscape (1024px - 1279px)
   ========================================================================== */

@media (max-width: 1279px) {
  .section-container {
    max-width: 1200px;
  }
  
  .cultural-icons-left,
  .cultural-icons-right {
    width: 70px;
  }
  
  .cultural-icon {
    width: 50px;
    height: 50px;
  }
}

/* ==========================================================================
   Tablet Portrait (768px - 1023px)
   ========================================================================== */

@media (max-width: 1023px) {
  /* Hide cultural icons on tablets */
  .cultural-icons-left,
  .cultural-icons-right {
    display: none;
  }
  
  /* Hide floating card on tablets */
  .card-floating {
    display: none;
  }
  
  /* Adjust header */
  .header-container {
    flex-wrap: wrap;
    gap: var(--espacamento-sm);
  }
  
  .site-logo .rosario-text {
    font-size: 2rem;
  }
  
  .site-logo .cantos-text {
    font-size: 1rem;
  }
  
  /* Navigation */
  .main-navigation ul {
    gap: var(--espacamento-sm);
  }
  
  /* Search */
  .header-search {
    order: 3;
    flex-basis: 100%;
    max-width: 100%;
  }
  
  /* Audio Player */
  .audio-player-widget {
    order: 4;
    flex-basis: 100%;
    min-width: auto;
  }
  
  /* Typography */
  h1 {
    font-size: 2.25rem;
  }
  
  h2 {
    font-size: 1.875rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  /* Sunburst Title */
  .sunburst-title {
    font-size: 2rem;
  }
  
  /* Cards */
  .card-image {
    height: 200px;
  }
  
  /* Gallery Grid */
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--espacamento-sm);
  }
  
  /* Map */
  .map-container {
    height: 400px;
  }
  
  /* Sections */
  .section {
    padding: var(--espacamento-lg) var(--espacamento-md);
  }
}

/* ==========================================================================
   Mobile Large (640px - 767px)
   ========================================================================== */

@media (max-width: 767px) {
  /* Header */
  .site-header {
    padding: var(--espacamento-sm);
  }
  
  .header-container {
    gap: var(--espacamento-sm);
  }
  
  .site-logo .rosario-text {
    font-size: 1.75rem;
  }
  
  .site-logo .cantos-text {
    font-size: 0.9rem;
  }
  
  .site-logo .subtitle {
    font-size: 0.6rem;
  }
  
  /* Navigation - Mobile Menu */
  .main-navigation {
    display: none;
  }
  
  .main-navigation.active {
    display: block;
  }
  
  /* Search */
  .header-search input[type="search"] {
    font-size: 0.9rem;
    padding: 10px 40px 10px 15px;
  }
  
  /* Audio Player */
  .audio-player-widget {
    padding: var(--espacamento-xs);
    gap: var(--espacamento-xs);
  }
  
  .audio-player-cover {
    width: 50px;
    height: 50px;
  }
  
  .audio-player-title {
    font-size: 0.8rem;
  }
  
  .audio-player-subtitle {
    font-size: 0.7rem;
  }
  
  .audio-player-controls svg {
    width: 20px;
    height: 20px;
  }
  
  .audio-player-controls .play-pause svg {
    width: 28px;
    height: 28px;
  }
  
  /* Typography */
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  h4 {
    font-size: 1.25rem;
  }
  
  h5 {
    font-size: 1.1rem;
  }
  
  h6 {
    font-size: 1rem;
  }
  
  /* Sunburst Title */
  .sunburst-title {
    font-size: 1.75rem;
    padding: var(--espacamento-sm) var(--espacamento-md);
  }
  
  .sunburst-effect {
    width: 200px;
    height: 200px;
  }
  
  /* Buttons */
  .btn {
    padding: 10px 24px;
    font-size: 0.9rem;
  }
  
  /* Cards */
  .card {
    margin-bottom: var(--espacamento-md);
  }
  
  .card-image {
    height: 180px;
  }
  
  .card-content {
    padding: var(--espacamento-sm);
  }
  
  .card-title {
    font-size: 1.25rem;
  }
  
  /* Carousel */
  .carousel-slide {
    flex-direction: column;
    padding: var(--espacamento-md);
  }
  
  .carousel-btn {
    width: 45px;
    height: 45px;
  }
  
  .carousel-btn svg {
    width: 20px;
    height: 20px;
  }
  
  /* Gallery Grid */
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--espacamento-sm);
  }
  
  .gallery-item img {
    height: 150px;
  }
  
  /* Map */
  .map-container {
    height: 300px;
  }
  
  /* Sections */
  .section {
    padding: var(--espacamento-md) var(--espacamento-sm);
  }
  
  /* Footer */
  .site-footer {
    padding: var(--espacamento-md) var(--espacamento-sm);
  }
  
  .social-links {
    gap: var(--espacamento-sm);
  }
  
  .social-link {
    width: 45px;
    height: 45px;
  }
  
  .social-link svg {
    width: 20px;
    height: 20px;
  }
  
  /* Scroll to Top */
  .scroll-to-top {
    width: 45px;
    height: 45px;
    bottom: 20px;
    right: 20px;
  }
  
  .scroll-to-top svg {
    width: 20px;
    height: 20px;
  }
}

/* ==========================================================================
   Mobile Medium (480px - 639px)
   ========================================================================== */

@media (max-width: 639px) {
  /* Header */
  .site-logo .rosario-text {
    font-size: 1.5rem;
  }
  
  .site-logo .cantos-text {
    font-size: 0.85rem;
  }
  
  /* Typography */
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  /* Sunburst Title */
  .sunburst-title {
    font-size: 1.5rem;
    padding: var(--espacamento-sm);
  }
  
  /* Cards */
  .card-image {
    height: 160px;
  }
  
  /* Gallery Grid */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Carousel */
  .carousel-btn {
    width: 40px;
    height: 40px;
  }
  
  .carousel-btn svg {
    width: 18px;
    height: 18px;
  }
  
  /* Pagination */
  .pagination a,
  .pagination span {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Mobile Small (< 480px)
   ========================================================================== */

@media (max-width: 479px) {
  /* Header */
  .site-header {
    padding: var(--espacamento-xs);
  }
  
  .site-logo .rosario-text {
    font-size: 1.3rem;
  }
  
  .site-logo .cantos-text {
    font-size: 0.75rem;
  }
  
  .site-logo .subtitle {
    display: none;
  }
  
  /* Search */
  .header-search input[type="search"] {
    font-size: 0.85rem;
    padding: 8px 35px 8px 12px;
  }
  
  .header-search button {
    right: 8px;
  }
  
  .header-search .search-icon {
    width: 20px;
    height: 20px;
  }
  
  /* Audio Player */
  .audio-player-widget {
    flex-wrap: wrap;
  }
  
  .audio-player-cover {
    width: 40px;
    height: 40px;
  }
  
  .audio-player-info {
    flex-basis: calc(100% - 50px);
  }
  
  .audio-player-controls {
    flex-basis: 100%;
    justify-content: center;
    margin-top: var(--espacamento-xs);
  }
  
  /* Typography */
  body {
    font-size: 0.9rem;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.35rem;
  }
  
  h3 {
    font-size: 1.15rem;
  }
  
  h4 {
    font-size: 1rem;
  }
  
  /* Sunburst Title */
  .sunburst-title {
    font-size: 1.25rem;
    padding: var(--espacamento-xs) var(--espacamento-sm);
  }
  
  .sunburst-effect {
    width: 150px;
    height: 150px;
  }
  
  /* Buttons */
  .btn {
    padding: 8px 20px;
    font-size: 0.85rem;
  }
  
  /* Cards */
  .card-image {
    height: 140px;
  }
  
  .card-content {
    padding: var(--espacamento-xs);
  }
  
  .card-title {
    font-size: 1.1rem;
  }
  
  /* Gallery Grid */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--espacamento-xs);
  }
  
  .gallery-item img {
    height: 200px;
  }
  
  /* Map */
  .map-container {
    height: 250px;
  }
  
  /* Sections */
  .section {
    padding: var(--espacamento-sm) var(--espacamento-xs);
  }
  
  /* Footer */
  .site-footer {
    padding: var(--espacamento-sm) var(--espacamento-xs);
    font-size: 0.85rem;
  }
  
  .social-links {
    gap: var(--espacamento-xs);
  }
  
  .social-link {
    width: 40px;
    height: 40px;
  }
  
  .social-link svg {
    width: 18px;
    height: 18px;
  }
  
  /* Carousel */
  .carousel-btn {
    width: 35px;
    height: 35px;
  }
  
  .carousel-btn svg {
    width: 16px;
    height: 16px;
  }
  
  .carousel-controls {
    padding: 0 var(--espacamento-xs);
  }
  
  /* Scroll to Top */
  .scroll-to-top {
    width: 40px;
    height: 40px;
    bottom: 15px;
    right: 15px;
  }
  
  .scroll-to-top svg {
    width: 18px;
    height: 18px;
  }
  
  /* Tags/Categories */
  .tag,
  .category {
    padding: 4px 10px;
    font-size: 0.75rem;
  }
  
  /* Pagination */
  .pagination {
    gap: var(--espacamento-xs);
  }
  
  .pagination a,
  .pagination span {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
  
  /* Modal */
  .modal-content {
    max-width: 95%;
    max-height: 95%;
  }
  
  .modal-close {
    width: 35px;
    height: 35px;
    font-size: 20px;
  }
}

/* ==========================================================================
   Landscape Orientation (Mobile)
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .site-header {
    padding: var(--espacamento-xs);
  }
  
  .audio-player-widget {
    display: none;
  }
  
  .section {
    padding: var(--espacamento-sm);
  }
  
  .map-container {
    height: 300px;
  }
}

/* ==========================================================================
   High DPI / Retina Displays
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize images for retina displays */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ==========================================================================
   Reduced Motion (Accessibility)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Dark Mode (Optional)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Uncomment to enable dark mode support */
  /*
  :root {
    --cor-texto-escuro: #E8E8E8;
    --cor-texto-claro: #B8B8B8;
    --cor-branco: #1A1A1A;
    --cor-bege: #2A2A2A;
  }
  
  body {
    background-color: #1A1A1A;
    color: #E8E8E8;
  }
  
  .card {
    background-color: #2A2A2A;
  }
  */
}