/* 
   Gallery Mobile CSS - All Responsive Overrides (CONSOLIDATED)
   NO colors (those go in gallery-theme.css)
   NO base structure (those go in gallery-core.css)
   
   This file contains ALL @media queries and mobile-specific adjustments
   Organized by breakpoint for easy maintenance
   
   CONSOLIDATED: Original gallery-mobile.css + landing-page.css mobile styles
*/

/* =================================
   MOBILE BREAKPOINT STRATEGY
   ================================= */

/*
Mobile-first approach:
- Base styles in other files assume mobile
- 768px+ = Tablet
- 1024px+ = Desktop
- 1200px+ = Large Desktop

Common device breakpoints:
- 480px = Large phones
- 768px = Tablets
- 1024px = Small laptops
- 1200px = Desktop
*/

/* =================================
   LARGE PHONE (480px and up)
   ================================= */

@media (min-width: 480px) {
    /* Container Adjustments */
    .container {
        padding: 0 24px;
    }
    
    /* Hero Section */
    .landing-hero {
        padding: 30px 40px;
    }
    
    .landing-hero h1 {
        font-size: 2rem;
    }
    
    /* Image Grids */
    .gallery-grid-auto {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .thumbnail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Buttons */
    .btn,
    .gallery-button {
        padding: 14px 28px;
        font-size: 1.1rem;
    }
    
    /* Search Input */
    .search-input {
        font-size: 18px;
        padding: 0 20px;
    }
    
    .search-input::placeholder {
        font-size: 16px;
    }
    
    /* Landing Page Specific - 480px+ */
    /* Hero Stats */
    .hero-stats {
        flex-direction: row;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    /* Action Cards */
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Notification Items */
    .hero-update-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }
    
    .update-icon {
        margin-top: 2px;
    }
    
    .update-action {
        margin-left: 8px;
        align-self: flex-start;
    }
    
    /* Form Elements */
    .add-tag-form {
        gap: 14px;
    }
    
    .tag-input {
        font-size: 15px;
        padding: 12px 14px;
    }
}

/* =================================
   TABLET (768px and up)
   ================================= */

@media (min-width: 768px) {
    /* Typography Scale Up */
    h1 { font-size: 3rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 1.8rem; }
    
    /* Container System */
    .container {
        padding: 0 32px;
    }
    
    .container-narrow {
        padding: 0 24px;
    }
    
    /* Landing Page Layout */
    .landing-main-content {
        padding: 40px 20px;
    }
    
    /* Grid Systems */
    .gallery-grid {
        gap: 25px;
    }
    
    .gallery-grid-auto {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .gallery-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid-3 { grid-template-columns: repeat(3, 1fr); }
    
    .preview-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .thumbnail-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
    
    /* Image Cards */
    .image-card {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .image-info {
        padding: 20px;
    }
    
    /* Hero Section */
    .landing-hero {
        padding: 40px 50px;
        margin: 30px auto 50px auto;
    }
    
    .landing-hero h1 {
        font-size: 2.5rem;
    }
    
    .hero-stats {
        gap: 40px;
    }
    
    .hero-updates {
        max-width: 700px;
    }
    
    /* Featured Artwork */
    .featured-artwork {
        padding: 40px;
    }
    
    .featured-image-container {
        max-width: 600px;
    }
    
    .featured-content h3 {
        font-size: 2rem;
    }
    
    /* Value Section */
    .value-section {
        padding: 40px;
    }
    
    /* Conversion Prompt */
    .cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
    
    /* Navigation */
    .nav-btn {
        padding: 15px 25px;
        font-size: 1.1rem;
    }
    
    .navigation {
        gap: 20px;
        margin: 40px 0;
    }
    
    /* Pagination */
    .pagination {
        gap: 8px;
    }
    
    .page-btn {
        padding: 12px 18px;
        font-size: 1rem;
    }
    
    /* Search & Filter */
    .search-filter-container {
        padding: 32px 24px;
    }
    
    .search-controls-row {
        flex-wrap: nowrap;
    }
    
    .filter-controls-row {
        grid-template-columns: repeat(3, 1fr) auto;
        align-items: end;
    }
    
    .filter-actions {
        justify-content: flex-start;
    }
    
    /* Tags */
    .tag {
        height: 32px;
        font-size: 13px;
    }
    
    .tag-left {
        padding: 0 10px 0 14px;
    }
    
    .tag-right {
        padding: 0 10px;
        font-size: 16px;
    }
    
    .add-tag-btn {
        height: 32px;
        padding: 0 14px;
        font-size: 13px;
    }
    
    /* User Interface */
    .user-auth-header {
        padding: 10px 24px;
    }
    
    .login-btn {
        padding: 10px 20px;
        font-size: 15px;
    }
    
    .user-greeting {
        font-size: 14px;
    }
    
    .user-menu-btn {
        padding: 8px 16px;
        font-size: 15px;
    }
    
    /* Notifications */
    .notifications-container {
        padding: 25px;
    }
    
    .notifications-block {
        padding: 30px;
    }
    
    /* Form Elements */
    .form-control {
        padding: 14px 16px;
        font-size: 1.1rem;
    }
    
    .form-row {
        gap: 20px;
    }
    
    /* Landing Page Specific - 768px+ */
    /* Featured Image Container */
    .featured-image-container {
        max-width: 400px;
    }
    
    .featured-image-container img {
        max-height: 350px;
    }
    
    .featured-content h3 {
        font-size: 1.8rem;
    }
    
    /* Value Section */
    .value-points {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    /* Quick Actions */
    .quick-actions {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* CTA Buttons */
    .btn-primary, .btn-secondary {
        width: auto;
        max-width: none;
    }
    
    /* Notifications */
    .recent-notifications {
        margin: 25px auto;
        padding: 25px;
    }
    
    .notification-item {
        padding: 15px;
    }
    
    /* Hero Updates */
    .hero-actions {
        flex-direction: row;
        gap: 0;
    }
    
    .action-separator {
        display: inline;
    }
}

/* =================================
   DESKTOP (1024px and up)
   ================================= */

@media (min-width: 1024px) {
    /* Typography Scale */
    h1 { font-size: 3.5rem; }
    h2 { font-size: 3rem; }
    
    /* Grid Adjustments */
    .gallery-grid-auto {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
    
    .gallery-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .gallery-grid-5 { grid-template-columns: repeat(5, 1fr); }
    
    .preview-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
    
    .thumbnail-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
    
    /* Hero Scaling */
    .landing-hero h1 {
        font-size: 3rem;
    }
    
    .hero-stats {
        gap: 50px;
    }
    
    /* Featured Artwork */
    .featured-image-container {
        max-width: 700px;
    }
    
    .featured-content h3 {
        font-size: 2.2rem;
    }
    
    /* Search Controls */
    .search-controls-row {
        flex-wrap: nowrap;
    }
    
    .right-controls {
        white-space: nowrap;
    }
    
    /* Navigation Enhancement */
    .nav-btn {
        padding: 16px 30px;
        font-size: 1.2rem;
    }
    
    /* User Interface */
    .user-dropdown {
        min-width: 260px;
    }
    
    .dropdown-item {
        padding: 12px 16px;
        font-size: 1rem;
    }
    
    /* Landing Page Specific - 1024px+ */
    /* Search Container */
    .search-filter-container {
        padding: 32px 24px;
        margin-bottom: 40px;
    }
    
    /* Search Input */
    .search-input {
        font-size: 20px;
        padding: 0 32px;
    }
    
    .search-input::placeholder {
        font-size: 18px;
    }
    
    /* Filter Controls */
    .filter-controls-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        padding: 24px;
    }
    
    /* Featured Artwork */
    .featured-image-container {
        max-width: 500px;
    }
    
    .featured-image-container img {
        max-height: 400px;
    }
    
    .featured-content h3 {
        font-size: 2rem;
    }
    
    .featured-meta {
        font-size: 1.1rem;
    }
    
    /* Value Section */
    .value-section {
        padding: 50px;
    }
    
    .value-points {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
    
    /* Quick Actions */
    .quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Section Headers */
    .section-title {
        font-size: 2.2rem;
    }
    
    .section-subtitle {
        font-size: 1.2rem;
    }
}

/* =================================
   LARGE DESKTOP (1200px and up)
   ================================= */

@media (min-width: 1200px) {
    /* Container Maximum */
    .container {
        max-width: 1200px;
        padding: 0 40px;
    }
    
    .container-wide {
        max-width: 1400px;
        padding: 0 40px;
    }
    
    /* Grid Scaling */
    .gallery-grid {
        gap: 30px;
    }
    
    .gallery-grid-auto {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
    
    .preview-grid {
        gap: 30px;
    }
    
    .thumbnail-grid {
        gap: 30px;
    }
    
    /* Hero Maximum */
    .landing-hero {
        padding: 50px 60px;
    }
    
    /* Featured Content */
    .featured-artwork {
        padding: 50px;
    }
    
    .featured-image-container {
        max-width: 800px;
    }
    
    /* Search Enhancement */
    .search-filter-container {
        padding: 40px 32px;
    }
    
    /* Navigation Spacing */
    .navigation {
        gap: 30px;
        margin: 50px 0;
    }
    
    /* Landing Page Specific - 1200px+ */
    /* Landing Page Hero */
    .landing-hero {
        padding: 50px 60px;
        margin: 40px auto 60px auto;
    }
    
    .landing-hero h1 {
        font-size: 2.5rem;
    }
    
    .hero-tagline, .last-visit {
        font-size: 1.2rem;
    }
    
    /* Main Content */
    .landing-main-content {
        padding: 60px 50px;
    }
    
    /* Preview Grid - Maximum 5 columns */
    .preview-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 30px;
    }
    
    /* Search Container */
    .search-filter-container {
        padding: 40px 32px;
        margin-bottom: 50px;
    }
    
    /* Filter Controls */
    .filter-controls-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        padding: 30px;
    }
    
    /* Featured Artwork */
    .featured-image-container {
        max-width: 600px;
    }
    
    .featured-image-container img {
        max-height: 450px;
    }
    
    .featured-content h3 {
        font-size: 2.2rem;
    }
    
    /* Value Section */
    .value-section {
        padding: 60px;
    }
    
    .value-points {
        gap: 50px;
    }
    
    /* Quick Actions */
    .quick-actions {
        grid-template-columns: repeat(5, 1fr);
    }
    
    /* Section Headers */
    .section-title {
        font-size: 2.5rem;
    }
    
    /* Hero Stats */
    .hero-stats {
        gap: 50px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

/* =================================
   MOBILE-SPECIFIC OVERRIDES
   Styles that only apply to mobile devices
   ================================= */

@media (max-width: 767px) {
    /* Force Mobile Layout */
    .desktop-only {
        display: none !important;
    }
    
    /* Typography Mobile */
    h1 { font-size: 1.8rem; line-height: 1.1; }
    h2 { font-size: 1.5rem; line-height: 1.2; }
    h3 { font-size: 1.3rem; }
    
    /* Container Mobile */
    .container {
        padding: 0 15px;
    }
    
    /* Landing Page Main Content Mobile */
    .landing-main-content {
        padding: 25px 15px;
    }
    
    .landing-section {
        margin-bottom: 30px;
    }
    
    /* Single Column Grids */
    .gallery-grid-2,
    .gallery-grid-3,
    .gallery-grid-4,
    .gallery-grid-5 {
        grid-template-columns: 1fr;
    }
    
    .gallery-grid-auto {
        grid-template-columns: 1fr;
    }
    
    .gallery-grid {
        gap: 15px;
    }
    
    /* Preview and Thumbnail Grids Mobile */
    .preview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .thumbnail-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Hero Mobile */
    .landing-hero {
        padding: 20px 15px;
        margin: 15px auto 25px auto;
        border-radius: 8px;
    }
    
    .landing-hero h1 {
        font-size: 1.6rem;
        margin-bottom: 6px;
    }
    
    .welcome-back {
        font-size: 1.4rem;
    }
    
    .hero-tagline {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 15px;
    }
    
    /* Hero Updates Mobile */
    .hero-updates {
        margin: 15px auto;
        max-width: 100%;
    }
    
    .hero-update-item {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }
    
    .update-icon {
        margin-top: 0;
    }
    
    .update-action {
        margin-left: 0;
        align-self: flex-start;
    }
    
    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    
    .action-separator {
        display: none;
    }
    
    /* Stats Mobile */
    .stat-number {
        font-size: 1.4rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    /* Featured Artwork Mobile */
    .featured-artwork {
        padding: 20px 15px;
    }
    
    .featured-image-container {
        max-width: 300px;
    }
    
    .featured-image-container img {
        max-height: 250px;
    }
    
    .featured-content h3 {
        font-size: 1.5rem;
    }
    
    .featured-meta {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    .featured-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .featured-favorite-section {
        gap: 6px;
    }
    
    .favorite-popularity {
        font-size: 0.8rem;
    }
    
    /* Quick Actions Mobile */
    .quick-actions {
        grid-template-columns: 1fr;
    }
    
    /* Value Section Mobile */
    .value-section {
        padding: 25px;
    }
    
    .value-points {
        grid-template-columns: 1fr;
    }
    
    /* Conversion Prompt Mobile */
    .conversion-prompt {
        padding: 20px;
        margin: 15px 0 25px 0;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary, 
    .btn-secondary {
        width: 100%;
        max-width: 250px;
    }
    
    /* Announcements Mobile */
    .announcements-bar {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    
    .announcement-item {
        flex-direction: column;
        gap: 4px;
    }
    
    .announcement-date {
        margin-left: 0;
    }
    
    /* Section Headers Mobile */
    .section-header {
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .section-title {
        font-size: 1.6rem;
        text-align: center;
        margin-bottom: 8px;
    }
    
    .section-subtitle {
        font-size: 1rem;
        margin-top: 5px;
    }
    
    /* Navigation Mobile */
    .navigation {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
        margin: 20px 0;
    }
    
    .nav-btn.prev,
    .nav-btn.next,
    .nav-btn.center {
        justify-self: center;
    }
    
    .nav-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
        min-height: 44px;
    }
    
    /* Pagination Mobile */
    .pagination {
        justify-content: center;
        gap: 3px;
    }
    
    .page-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
        min-width: 40px;
    }
    
    /* Button Groups Mobile */
    .btn-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .btn,
    .gallery-button {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        padding: 12px 20px;
        font-size: 1rem;
    }
    
    /* Form Mobile */
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 16px;
    }
    
    /* Search Mobile */
    .search-filter-container {
        padding: 20px 10px;
        margin-bottom: 25px;
    }
    
    .search-input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0 16px;
    }
    
    .search-input::placeholder {
        font-size: 14px;
    }
    
    .search-controls-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .popular-tags-section {
        justify-content: center;
        width: 100%;
    }
    
    .popular-tags-container {
        justify-content: center;
    }
    
    .right-controls {
        justify-content: center;
        width: 100%;
    }
    
    .tag-filter-btn {
        font-size: 11px;
        padding: 5px 10px;
    }
    
    .filter-controls-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 15px;
    }
    
    /* Tags Mobile */
    .tag-container {
        gap: 4px;
    }
    
    .tag {
        max-width: 140px;
        font-size: 11px;
        height: 26px;
    }
    
    .tag-left {
        padding: 0 6px 0 10px;
    }
    
    .tag-right {
        padding: 0 6px;
        font-size: 13px;
    }
    
    .add-tag-btn {
        height: 26px;
        font-size: 11px;
        padding: 0 10px;
    }
    
    .tag-more {
        height: 26px;
        font-size: 10px;
        padding: 0 8px;
    }
    
    .add-tag-dropdown {
        left: 10px !important;
        right: 10px;
        min-width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }
    
    .tag-input,
    .category-select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px;
    }
    
    .add-tag-buttons {
        flex-direction: column;
    }
    
    .add-tag-submit,
    .add-tag-cancel {
        padding: 12px 16px;
        font-size: 15px;
    }
    
    /* Filter Bar Mobile */
    .filter-bar {
        padding: 12px 15px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 0 -10px 15px -10px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .filter-tags {
        width: 100%;
    }
    
    .filter-tag {
        padding: 8px 14px;
        font-size: 14px;
    }
    
    /* Favorites Mobile */
    .favorite-btn-inline {
        width: 28px;
        height: 28px;
        padding: 0;
        border-radius: 50%;
    }
    
    .favorite-btn-inline .heart-icon {
        width: 16px;
        height: 16px;
    }
    
    /* Hide favorite text on mobile */
    .favorite-btn-inline .favorite-text {
        display: none;
    }
    
    .gallery-favorite-btn-enhanced {
        padding: 12px 24px;
        font-size: 14px;
        width: 100%;
        max-width: 250px;
    }
    
    .favorite-count {
        font-size: 12px;
    }
    
    /* User Interface Mobile */
    .user-auth-header {
        padding: 6px 12px;
        min-height: 40px;
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .gallery-breadcrumbs {
        font-size: 12px;
        order: 1;
    }
    
    .auth-status {
        margin-left: 0;
        order: 2;
    }
    
    .user-greeting {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .user-dropdown {
        right: -1rem;
        left: -1rem;
        min-width: auto;
    }
    
    .login-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    
    .user-menu-btn {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
    
    /* Notifications Mobile */
    .notifications-container {
        padding: 15px 10px;
    }
    
    .notifications-block {
        padding: 20px 15px;
    }
    
    .notification-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .notification-date {
        align-self: flex-end;
    }
    
    .notification-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .notification-actions {
        align-self: flex-end;
    }
    
    .notifications-pagination {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Recent Notifications Mobile */
    .recent-notifications {
        margin: 20px 10px;
        padding: 15px;
    }
    
    .notifications-title {
        font-size: 1rem;
    }
    
    .notification-title {
        font-size: 0.9rem;
    }
    
    .notification-message {
        font-size: 0.85rem;
    }
    
    /* Status Messages Mobile */
    .status-message {
        margin-bottom: 12px;
        font-size: 13px;
    }
    
    .status-content {
        padding: 0 15px;
        gap: 6px;
    }
    
    .status-icon {
        font-size: 14px;
    }
    
    .status-close {
        min-height: 44px; /* iOS touch target minimum */
        min-width: 44px;
        width: 44px;
        height: 44px;
    }
    
    /* Image Cards Mobile */
    .image-card {
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    
    .image-info {
        padding: 12px;
    }
    
    .image-title {
        font-size: 1rem;
        margin-bottom: 6px;
    }
    
    .image-metadata {
        font-size: 0.8rem;
        margin-bottom: 10px;
    }
    
    /* Section Mobile */
    .section {
        padding: 25px 0;
        margin-bottom: 20px;
    }
}

/* =================================
   SMALL MOBILE (480px and below)
   ================================= */

@media (max-width: 480px) {
    /* Ultra Mobile Typography */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.2rem; }
    
    /* Ultra Compact Container */
    .container {
        padding: 0 10px;
    }
    
    /* Landing Page Mobile */
    .landing-main-content {
        padding: 20px 10px;
    }
    
    /* Hero Ultra Mobile */
    .landing-hero {
        padding: 15px 10px;
        margin: 10px auto 20px auto;
    }
    
    .landing-hero h1 {
        font-size: 1.4rem;
    }
    
    .hero-tagline {
        font-size: 0.85rem;
    }
    
    /* Stats Ultra Mobile */
    .stat-number {
        font-size: 1.2rem;
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
    
    /* Featured Artwork Ultra Mobile */
    .featured-artwork {
        padding: 15px 10px;
    }
    
    .featured-content h3 {
        font-size: 1.2rem;
    }
    
    /* Value Section Ultra Mobile */
    .value-section {
        padding: 20px 15px;
    }
    
    .value-title {
        font-size: 1.5rem;
    }
    
    /* Conversion Prompt Ultra Mobile */
    .conversion-prompt {
        padding: 15px 10px;
    }
    
    .prompt-text {
        font-size: 1rem;
    }
    
    /* Single Column Everything */
    .preview-grid,
    .thumbnail-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    /* Navigation Ultra Mobile */
    .nav-btn {
        padding: 10px 15px;
        font-size: 0.85rem;
    }
    
    /* Button Ultra Mobile */
    .btn,
    .gallery-button {
        padding: 10px 16px;
        font-size: 0.9rem;
        max-width: 100%;
    }
    
    /* Form Ultra Mobile */
    .form-control {
        padding: 10px 12px;
    }
    
    /* Image Cards Ultra Mobile */
    .image-info {
        padding: 10px;
    }
    
    .image-title {
        font-size: 0.9rem;
    }
    
    .image-metadata {
        font-size: 0.75rem;
    }
    
    /* Tags Ultra Mobile */
    .tag {
        height: 24px;
        font-size: 10px;
        max-width: 120px;
    }
    
    .add-tag-dropdown {
        left: 5px !important;
        right: 5px;
        min-width: calc(100% - 10px);
        max-width: calc(100% - 10px);
    }
    
    /* Search Ultra Mobile */
    .search-filter-container {
        padding: 15px 5px;
    }
    
    .search-input {
        padding: 0 12px;
        font-size: 16px;
    }
    
    /* User Interface Ultra Mobile */
    .user-auth-header {
        padding: 4px 8px;
    }
    
    .login-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .user-dropdown {
        right: -0.5rem;
        left: -0.5rem;
    }
    
    /* Notifications Ultra Mobile */
    .notifications-container {
        padding: 10px 5px;
    }
    
    .notifications-block {
        padding: 15px 10px;
    }
    
    .notification-title {
        font-size: 1rem;
    }
    
    .notification-message {
        font-size: 0.85rem;
    }
    
    /* Landing Page Specific Ultra Mobile */
    .landing-section {
        margin-bottom: 20px;
    }
    
    .hero-stats {
        gap: 10px;
    }
    
    .section-title {
        font-size: 1.3rem;
    }
}

/* =================================
   LANDSCAPE PHONE OPTIMIZATION
   ================================= */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical padding in landscape */
    .landing-hero {
        padding: 15px 30px;
    }
    
    .featured-artwork {
        padding: 20px 30px;
    }
    
    .section {
        padding: 20px 0;
    }
    
    .navigation {
        margin: 20px 0;
    }
    
    /* Compact navigation for landscape */
    .nav-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
    
    /* Hide or reduce hero stats in landscape */
    .hero-stats {
        gap: 20px;
    }
    
    .stat-number {
        font-size: 1.3rem;
    }
    
    /* Compact hero updates in landscape */
    .hero-updates {
        margin: 10px auto;
    }
    
    .hero-update-item {
        padding: 8px;
    }
    
    /* Optimize for landscape phones/tablets */
    .preview-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    /* Landscape-specific hero adjustments */
    .landing-hero h1 {
        font-size: 1.4rem;
    }
    
    .hero-stats {
        flex-direction: row;
        justify-content: center;
    }
}

/* =================================
   PRINT OPTIMIZATIONS
   ================================= */

@media print {
    /* Hide Interactive Elements */
    .btn,
    .gallery-button,
    .add-tag-btn,
    .filter-bar,
    .favorite-btn-inline,
    .user-dropdown,
    .status-message,
    .search-filter-container,
    .navigation,
    .pagination,
    .announcements-bar,
    .conversion-prompt,
    .cta-buttons,
    .hero-actions,
    .user-auth-header,
    .filters-toggle-btn,
    .sort-controls,
    .quick-actions,
    .notifications-container {
        display: none !important;
    }
    
    /* Optimize for Print */
    .container {
        max-width: none;
        padding: 0;
    }
    
    .image-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .gallery-grid,
    .preview-grid,
    .thumbnail-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Typography for Print */
    h1, h2, h3 {
        break-after: avoid;
        color: #000 !important;
    }
    
    .section {
        break-inside: avoid;
    }
    
    /* Landing page print optimization */
    .landing-hero {
        padding: 20px;
        margin: 10px 0;
        page-break-inside: avoid;
    }
    
    .landing-hero h1,
    .section-title,
    .featured-content h3 {
        color: #000 !important;
    }
    
    .featured-artwork {
        padding: 20px;
        page-break-inside: avoid;
    }
    
    .value-section {
        padding: 20px;
    }
    
    /* Compact spacing for print */
    .landing-main-content {
        padding: 20px 0;
    }
    
    .landing-section {
        margin-bottom: 30px;
    }
    
    /* Make thumbnail cards match larger preview card size for print */
    .preview-card,
    .thumbnail-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* =================================
   TOUCH DEVICE OPTIMIZATIONS
   ================================= */

@media (hover: none) and (pointer: coarse) {
    /* Touch-friendly sizing */
    .btn,
    .gallery-button,
    .tag,
    .favorite-btn-inline,
    .action-card,
    .preview-card,
    .thumbnail-card {
        min-height: 44px; /* iOS minimum touch target */
        min-width: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .image-card:hover,
    .btn:hover,
    .tag:hover,
    .preview-card:hover,
    .thumbnail-card:hover,
    .action-card:hover,
    .featured-image-container:hover,
    .hero-action-link:hover,
    .notification-item:hover,
    .value-point:hover,
    .activity-stat:hover {
        transform: none;
    }
    
    /* Larger touch targets for small elements */
    .tag-right,
    .filter-remove,
    .status-close {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Increase tap area for links */
    .breadcrumb-link,
    .title-link,
    .dropdown-item,
    .section-action,
    .hero-action-link,
    .update-action,
    .context-link,
    .benefits-link {
        padding: 8px 4px;
    }
    
    /* Touch-friendly CTA buttons */
    .btn-primary,
    .btn-secondary {
        min-height: 48px;
    }
    
    /* Touch-friendly favorite buttons */
    .gallery-favorite-btn-enhanced {
        min-height: 48px;
    }
    
    /* Touch-friendly search input */
    .search-input-container {
        min-height: 48px;
    }
    
    .search-input {
        height: 48px;
    }
    
    .search-submit-btn {
        width: 48px;
        height: 48px;
    }
}

/* =================================
   HIGH CONTRAST MODE SUPPORT
   ================================= */

@media (prefers-contrast: high) {
    /* Enhanced borders for accessibility */
    .preview-card,
    .thumbnail-card,
    .action-card,
    .featured-artwork,
    .value-section,
    .conversion-prompt,
    .recent-notifications,
    .announcements-bar {
        border-width: 3px;
    }
    
    .btn-primary,
    .btn-secondary,
    .tag,
    .favorite-btn-inline,
    .filter-tag {
        border-width: 3px;
    }
    
    .status-message {
        border-width: 3px;
    }
    
    .status-message.status-success,
    .status-message.status-error,
    .status-message.status-info {
        border-left-width: 6px;
    }
    
    /* High contrast notification items */
    .notification-item,
    .hero-update-item {
        border-width: 2px;
    }
}

/* =================================
   REDUCED MOTION SUPPORT
   ================================= */

@media (prefers-reduced-motion: reduce) {
    /* Disable animations and transitions */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Remove transform effects */
    .preview-card:hover,
    .thumbnail-card:hover,
    .action-card:hover,
    .btn:hover,
    .gallery-button:hover,
    .featured-image-container:hover,
    .hero-action-link:hover,
    .notification-item:hover,
    .value-point:hover,
    .activity-stat:hover,
    .achievement-badge:hover,
    .context-link:hover,
    .benefits-link:hover {
        transform: none;
    }
    
    /* Remove status message transitions */
    .status-close {
        transition: none;
    }
    
    /* Remove conversion prompt animation */
    .conversion-prompt {
        animation: none;
    }
    
    /* Remove slide animations */
    .filter-bar {
        animation: none;
    }
    
    .add-tag-dropdown {
        animation: none;
    }
}

/* =================================
   HIGH DPI DISPLAYS
   ================================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp rendering on retina displays */
    .tag,
    .favorite-btn-inline,
    .btn-primary,
    .btn-secondary,
    .action-card {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Optimize image rendering */
    .preview-card img,
    .thumbnail-card img,
    .featured-image-container img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}