/* ============================================
   TABLET FIXES (768px - 992px)
   Оптимизация для планшетов: iPad, Android планшеты
   ============================================ */

@media (min-width: 768px) and (max-width: 992px) {
    
    /* Основные настройки */
    html,
    body {
        font-size: 15px;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    body {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 25rem !important;
        position: relative !important;
    }
    
    main {
        overflow: visible !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    footer {
        position: relative !important;
        z-index: 1 !important;
        margin-top: 2rem !important;
    }
    
    .container {
        max-width: 100%;
        padding: 0 2rem;
    }
    
    /* ===== NAVIGATION ===== */
    /* REMOVED to prevent conflicts with main navbar styles */
    /* All navbar styles should be in styles_new.css only */
    
    /* ===== HERO SECTION ===== */
    .hero {
        min-height: 70vh;
        padding: 8rem 0 4rem 0 !important;
        overflow: visible !important;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
        justify-items: center;
        overflow: visible !important;
    }
    
    .hero-title {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    .hero-subtitle {
        font-size: clamp(1.1rem, 3vw, 1.3rem);
    }
    
    .hero-text {
        text-align: center !important;
        margin: -13rem auto 0 auto !important;
        margin-left: 15% !important;
        position: relative !important;
        width: 100% !important;
        transform: translateZ(0) !important;
        will-change: auto !important;
        backface-visibility: hidden !important;
        -webkit-font-smoothing: antialiased !important;
    }
    
    .hero-buttons {
        transform: translateZ(0) !important;
        will-change: auto !important;
        backface-visibility: hidden !important;
    }
    
    .hero-title {
        transform: translateZ(0) !important;
        will-change: auto !important;
    }
    
    html body .hero .hero-content .hero-image {
        max-width: 600px !important;
        width: 600px !important;
        margin: 0 auto !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    html body .hero .hero-content .hero-image .image-container {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    html body .hero .hero-content .hero-image .hero-photo,
    html body .hero .hero-content .hero-image img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Убираем скругление верхних углов картинки - применяем ко ВСЕМ элементам */
    html body section.hero .hero-content .hero-image .image-container,
    html body section.hero .hero-content .hero-image .image-container *,
    html body section.hero .hero-content .hero-image .image-container picture,
    html body section.hero .hero-content .hero-image .image-container source,
    html body section.hero .hero-content .hero-image .image-container img,
    html body section.hero .hero-content .hero-image .image-container .hero-photo,
    html body section.hero .hero-content .hero-image .image-container .image-overlay {
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }
    
    html body section.hero .hero-content .hero-image .image-container {
        border-radius: 0px 0px 20px 20px !important;
        overflow: hidden !important;
    }
    
    .hero-content {
        align-items: flex-start !important;
        padding-top: 0 !important;
    }
    
    /* ===== NEWS PAGE ===== */
    .news-hero {
        height: 35vh !important;
        min-height: 250px !important;
        max-height: 35vh !important;
        align-items: flex-end !important; /* Place content lower */
        padding-bottom: 6rem !important; /* Push content lower */
        overflow: hidden !important;
    }
    
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .news-card.featured {
        grid-column: 1 / -1;
    }
    
    /* ===== GALLERY ===== */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* ===== INTERVIEWS ===== */
    .interviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .interview-card {
        flex-direction: column;
        height: auto;
    }
    
    .interview-image {
        width: 100%;
        height: 250px;
    }
    
    /* ===== COLLABORATIONS ===== */
    .collaborations-grid-blue {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .collaboration-block {
        flex-direction: column;
        gap: 2rem;
    }
    
    .collaboration-block.reverse {
        flex-direction: column;
    }
    
    /* ===== ABOUT PAGE ===== */
    .about-hero-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .about-image {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .professional-info {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    /* ===== TIMELINE ===== */
    .timeline-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* ===== LINKS & SOCIAL ===== */
    .links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .social-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
    
    /* ===== FOOTER ===== */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
    
    .footer-logo {
        grid-column: 1 / -1;
        text-align: center;
    }
    
    /* ===== TICKER ===== */
    .gallery-ticker-wrapper {
        height: 110% !important; /* Changed from 200px to 110% to make ticker taller */
    }
    
    .ticker-item img {
        height: 100%;
    }
    
    /* ===== BUTTONS ===== */
    .btn-primary,
    .btn-secondary {
        padding: 1rem 2.5rem !important;
        font-size: 1.05rem !important;
    }
    
    /* ===== TYPOGRAPHY ===== */
    .section-title {
        font-size: clamp(2.5rem, 5vw, 3rem);
    }
    
    h1 { font-size: clamp(2rem, 5vw, 2.5rem); }
    h2 { font-size: clamp(1.75rem, 4vw, 2rem); }
    h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); }
    
    /* ===== SPACING ===== */
    section {
        padding: 4rem 0;
    }
    
    /* ===== EXPLORE SECTION ===== */
    .quick-links {
        margin-top: -30rem !important;
        position: relative;
    }
    
    /* ===== MODAL ===== */
    .gallery-modal .modal-container {
        max-width: 90vw;
        padding: 2rem;
    }
    
    .modal-image-wrapper {
        max-width: 85vw;
        max-height: 75vh;
    }
    
    /* ===== MUSIC PAGE ===== */
    .spotify-section {
        padding: 3rem 0;
    }
    
    .spotify-players {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* ===== BIRTHDAY PAGE ===== */
    .birthday-content {
        max-width: 600px;
        padding: 2rem;
    }
    
    .birthday-title {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
    }
    
}