/* 
* Meire Cerimonialista - Responsive Stylesheet
* Author: Developer
* Version: 1.0
*/

/* ===== MEDIA QUERIES ===== */

@media (max-width: 1400px) {
    /* Hero section adjustments */
    .hero-container {
        grid-template-columns: 42% 58%;
    }
    
    .title-line {
        font-size: 3.2rem;
    }
    
    .title-line.accent {
        font-size: 4.2rem;
    }
    
    .hero-description {
        font-size: var(--text-lg);
        max-width: 450px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
    /* Adjust container */
    .container {
        max-width: 960px;
    }

    /* Hero section */
    .hero {
        padding-top: 90px; /* Add padding equal to header height */
        min-height: 650px; /* Ensure minimum height on smaller screens */
    }
    
    .hero-container {
        grid-template-columns: 40% 60%;
        gap: var(--spacing-8);
    }
    
    .hero-visual {
        padding-top: 20px; /* Add extra space at the top */
    }
    
    .hero-image-wrapper {
        transform: translateY(0) rotate(-3deg); /* Remove the translateY */
        max-width: 100%; /* Ensure image doesn't overflow */
    }
    
    .hero-content {
        padding: var(--spacing-6);
    }
    
    .title-line {
        font-size: 3rem;
    }
    
    .title-line.accent {
        font-size: 3.8rem;
        margin-left: var(--spacing-4);
    }
    
    .hero-description {
        font-size: var(--text-lg);
        max-width: 420px;
        margin-bottom: var(--spacing-6);
    }
    
    /* Reduce decoration size */
    .ring-element {
        width: 120px;
        height: 120px;
    }
    
    .dot-grid {
        width: 80px;
        height: 80px;
    }
    
    /* Adjust scroll indicator */
    .scroll-indicator {
        bottom: 40px;
    }
    
    /* Section headers */
    .section-header h2 {
        font-size: var(--text-3xl);
    }
    
    /* Section headers */
    .section-header h2 {
        font-size: var(--text-3xl);
    }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
    /* Adjust container */
    .container {
        max-width: 720px;
    }
    
    /* Header and navigation */
    .nav-list {
        gap: var(--spacing-4);
    }
    
    /* Hero section */
    .hero {
        min-height: auto; /* Allow height to be flexible */
        height: auto; /* Change from 100vh to auto */
        padding-bottom: 60px; /* Add bottom padding */
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: var(--spacing-8);
        padding-top: var(--spacing-8);
    }

    .init3DPhotoEffect {
        display: block !important;
    }
    
    .hero-visual {
        grid-row: 1;
        height: auto;
        min-height: 300px;
        max-height: 50vh;
        margin-bottom: var(--spacing-4);
    }
    
    .hero-image-wrapper {
        max-width: 70%;
        margin: 0 auto;
        aspect-ratio: 3/4; /* Maintain aspect ratio */
    }
    
    .hero-content {
        grid-row: 2;
        text-align: center;
        padding: 0 var(--spacing-4) var(--spacing-8);
        max-width: 600px;
        margin: 0 auto;
    }
    
    .hero-description {
        margin: 0 auto var(--spacing-6);
        max-width: 100%; /* Allow text to use full width */
    }
    
    .hero-tagline {
        margin: 0 auto var(--spacing-4);
    }
    
    .title-line.accent {
        margin-left: 0; /* Center the accent line */
    }
    
    /* Adjust scroll indicator */
    .scroll-indicator {
        bottom: 20px; /* Position higher */
    }
    
    /* About section */
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .about-image {
        max-width: 500px;
        margin: 0 auto;
    }

    .about-photo-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 400px;
        margin: 40px auto 60px;
        position: relative;
        z-index: 2;
        overflow: visible;
    }
    
    /* Garantir que a estrutura do frame esteja correta */
    .about-photo-frame {
        display: block;
        opacity: 1;
        visibility: visible;
        height: auto;
        width: 100%;
        position: relative;
        transform: rotate(-3deg); /* Manter o efeito de rotação */
    }
    
    /* Garantir que a imagem seja exibida corretamente */
    .about-photo {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        opacity: 1;
        visibility: visible;
    }
    
    /* Services section */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Portfolio grid */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Testimonials */
    .testimonials-controls {
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Contact section */
    .contact-content {
        flex-direction: column;
        gap: var(--spacing-8);
    }
    
    .contact-info, .contact-form {
        width: 100%;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-8);
    }
}


/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    .about-photo-container {
        max-width: 300px;
        margin: 0 auto 2rem;
        height: auto;
    }
    
    .about-photo-frame {
        height: auto;
        aspect-ratio: 3/4;
        transform: none; /* Remover rotação em telas menores */
    }
    
    /* Desativar efeitos 3D que podem causar problemas */
    .photo-layers-container,
    .photo-original {
        transform: none !important;
    }
    
    /* Garantir que a animação reveal não afete a visibilidade */
    .about-photo-container.reveal {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* Ajustar o badge de experiência para garantir visibilidade */
    .experience-badge {
        width: 80px;
        height: 80px;
        bottom: -5px;
        right: -5px;
        z-index: 5;
    }
    /* Adjust container */
    .container {
        max-width: 540px;
    }
    
    /* Hero section */
    .hero-container {
        padding-top: var(--spacing-6);
    }
    
    .hero-visual {
        min-height: 250px;
    }
    
    .hero-image-wrapper {
        max-width: 80%;
    }
    
    .title-line {
        font-size: 2.5rem;
    }
    
    .title-line.accent {
        font-size: 3.2rem;
    }
    
    .hero-description {
        font-size: var(--text-base);
        line-height: 1.5;
    }
    
    .btn-hero {
        padding: var(--spacing-3) var(--spacing-6);
    }
    
    /* Remove scroll indicator on mobile */
    .scroll-indicator {
        display: none;
    }
    
    /* Header and navigation */
    .header .container {
        height: 70px;
    }
    
    .logo {
        max-width: 180px; /* Limit logo size */
    }
    
    .menu-toggle {
        display: block;
    }
    
    .nav-list {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: var(--white);
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-6) 0;
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all var(--transition-normal);
        z-index: 1000; /* Ensure it's above other content */
    }
    
    .nav-list.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .nav-list li {
        width: 100%;
        text-align: center;
    }
    
    .nav-link {
        color: var(--primary-color);
        padding: var(--spacing-3) 0;
        display: block;
    }
    
    /* Section padding */
    section {
        padding: var(--spacing-16) 0;
    }
    
    .section-header {
        margin-bottom: var(--spacing-8);
    }
    
    /* Services section */
    .services-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Portfolio grid */
    .portfolio-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Contact form */
    .form-row.two-columns {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
        text-align: center;
    }
    
    .footer-logo, .footer-links, .footer-services, .footer-newsletter {
        width: 100%;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-4);
        text-align: center;
    }
    
    /* Floating elements */
    .floating-element {
        display: none;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    /* Adjust container */
    .container {
        width: 100%;
        padding: 0 var(--spacing-4);
    }
    
    /* Hero section */
    .hero {
        padding-top: 80px; /* Adjust for smaller header */
        padding-bottom: 40px;
    }
    
    .hero-container {
        gap: var(--spacing-4);
    }
    
    .hero-visual {
        min-height: 200px;
        margin-bottom: 0;
    }
    
    .hero-image-wrapper {
        max-width: 90%; /* Make image take up more width */
        aspect-ratio: 1/1.2; /* Make image more square on very small screens */
    }
    
    .hero-content {
        padding: 0 var(--spacing-3) var(--spacing-6);
    }
    
    .hero-tagline {
        font-size: var(--text-xs);
        letter-spacing: 2px;
        padding-left: var(--spacing-6);
    }
    
    .hero-tagline::before {
        width: 15px;
    }
    
    .title-line {
        font-size: 1.8rem;
    }
    
    .title-line.accent {
        font-size: 2.2rem;
    }
    
    .hero-description {
        font-size: var(--text-sm);
        margin-bottom: var(--spacing-4);
    }
    
    .btn-hero {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--text-sm);
    }
    
    /* Typography */
    h1 {
        font-size: var(--text-3xl);
    }
    
    h2 {
        font-size: var(--text-2xl);
    }
    
    h3 {
        font-size: var(--text-xl);
    }
    
    /* Section header */
    .section-header h2 {
        font-size: var(--text-2xl);
    }
    
    /* Portfolio filter */
    .portfolio-filter {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-2);
    }
    
    .filter-btn {
        width: 100%;
        max-width: 200px;
    }
    
    /* About section */
    .about-stats {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    /* Contact section */
    .social-media {
        flex-direction: column;
        align-items: center;
    }
    
    /* Back to top button */
    .back-to-top {
        right: 20px;
        bottom: 20px;
    }
    
    /* Form fields */
    .form-field {
        margin-bottom: var(--spacing-4);
    }
    
    /* Contact card adjustments */
    .contact-card {
        padding: var(--spacing-4);
    }
    .about-photo-container {
        max-width: 250px;
    }
    
    /* Simplificar a foto para garantir visibilidade */
    .about-photo-container.reveal,
    .about-photo-frame {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Remover efeitos que podem interferir na exibição */
    .photo-shine,
    .photo-shadow-layer,
    .photo-shine-layer,
    .photo-border-layer {
        display: none;
    }
    
    /* Reduzir tamanho do badge em telas muito pequenas */
    .experience-badge {
        width: 70px;
        height: 70px;
    }
    
    .experience-number {
        font-size: var(--text-xl);
    }
    
    .experience-text {
        font-size: calc(var(--text-xs) - 1px);
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 375px) {
    /* Hero section */
    .hero {
        padding-top: 70px;
        padding-bottom: 30px;
    }
    
    .hero-container {
        padding-top: var(--spacing-4);
    }
    
    .hero-visual {
        min-height: 180px;
    }
    
    .hero-image-wrapper {
        max-width: 85%;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Lighter shadow */
    }
    
    .hero-content {
        padding: 0 var(--spacing-2) var(--spacing-4);
    }
    
    .title-line {
        font-size: 1.6rem;
    }
    
    .title-line.accent {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: var(--text-xs);
        line-height: 1.4;
    }
    
    .btn-hero {
        width: 100%; /* Make button full width */
        justify-content: center;
        font-size: var(--text-xs);
        padding: var(--spacing-2) var(--spacing-3);
    }
    
    /* Header adjustments */
    .header .container {
        height: 60px;
        padding: 0 var(--spacing-2);
    }
    
    .logo {
        max-width: 160px;
    }
    
    /* Buttons */
    .btn-primary, .btn-secondary {
        font-size: var(--text-xs);
        padding: var(--spacing-2) var(--spacing-3);
        width: 100%; /* Make buttons full width on very small screens */
    }
    
    /* Contact info */
    .contact-item {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-icon {
        margin-bottom: var(--spacing-2);
    }
    
    /* Forms */
    .field-icon {
        width: 36px; /* Smaller icon area */
    }
    
    .field-input input, 
    .field-input textarea, 
    .field-input select {
        font-size: var(--text-sm); /* Smaller font in inputs */
    }
}

/* Orientation specific adjustments */
@media (max-height: 700px) and (orientation: landscape) {
    .hero {
        height: auto;
        min-height: 550px;
    }
    
    .hero-container {
        padding-top: var(--spacing-8);
        padding-bottom: var(--spacing-8);
    }
    
    .hero-visual {
        max-height: 300px;
    }
    
    .hero-image-wrapper {
        max-width: 50%;
        aspect-ratio: 3/4;
    }
    
    .title-line {
        font-size: 2.2rem;
    }
    
    .title-line.accent {
        font-size: 2.8rem;
    }
    
    .hero-description {
        margin-bottom: var(--spacing-4);
    }
}

/* Fix for very tall mobile devices */
@media (min-height: 800px) and (max-width: 576px) {
    .hero {
        min-height: 650px;
    }
    
    .hero-visual {
        min-height: 250px;
    }
}

/* Specific fix for devices like iPhone X */
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) {
    .hero {
        min-height: 600px;
    }
}

.init3DPhotoEffect {
    display: none !important;
}