/* Responsive Styles */

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        width: 85%;
        max-width: 1140px;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    html {
        font-size: 15px;
    }

    .container {
        width: 95%;
    }

    .section {
        padding: var(--spacing-xl) 0;
    }

    .about-content,
    .tours-content,
    .museum-content {
        gap: var(--spacing-lg);
    }

    /* Adjust spacing for better tablet appearance */
    h1 {
        font-size: calc(var(--font-size-4xl) * 1.2);
    }

    header {
        padding: var(--spacing-xl) 0;
    }

    /* Adjust decorative elements for tablets */
    .section::before {
        width: 150px;
        height: 150px;
    }

    /* Museum specific styling */
    .museum-content {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }

    .museum-item {
        max-width: 550px;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    html {
        font-size: 14px;
    }

    h1 {
        font-size: calc(var(--font-size-4xl) * 1.8);
        /* Significantly larger */
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 0 var(--spacing-md);
    }

    h2 {
        font-size: var(--font-size-xl);
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    h3 {
        font-size: var(--font-size-lg);
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* Change layout to stack vertically on mobile */
    .about-content,
    .tours-content {
        flex-direction: column;
    }

    .about-text,
    .about-image,
    .tours-text,
    .tours-images {
        width: 100%;
        min-width: unset;
    }

    .museum-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .museum-item {
        max-width: 100%;
    }

    .museum-item picture {
        height: 400px;
    }

    .museum-item-content {
        padding: var(--spacing-lg);
    }

    .image-placeholder {
        height: 250px;
    }

    /* Adjust header for small devices */
    header .container {
        flex-direction: column;
        text-align: center;
    }

    .language-switcher {
        margin-top: var(--spacing-md);
    }

    /* Improve contact section on small devices */
    .contact-details {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-item {
        margin-bottom: var(--spacing-md);
    }

    /* Reduce size of decorative elements */
    .section::before {
        width: 100px;
        height: 100px;
        opacity: 0.1;
    }

    /* Fix paragraph spacing on mobile */
    .container {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    header {
        padding: var(--spacing-lg) 0;
    }

    .section {
        padding: var(--spacing-lg) 0;
    }

    h1 {
        font-size: calc(var(--font-size-4xl) * 1.6);
        /* Still very large for small devices */
    }

    h2 {
        font-size: var(--font-size-lg);
    }

    h2::after {
        height: 2px;
    }

    .image-placeholder {
        height: 200px;
    }

    .tours-images {
        flex-direction: column;
    }

    .container {
        padding: var(--spacing-sm);
        width: 100%;
    }

    /* Improve paragraph spacing on very small devices */
    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    p {
        padding-left: var(--spacing-xs);
        padding-right: var(--spacing-xs);
    }

    .lang-btn img {
        width: 20px;
        height: 20px;
    }

    /* Optimize spacing for very small screens */
    p {
        margin-bottom: var(--spacing-md);
        font-size: var(--font-size-base);
    }

    /* Improve museum item display */
    .museum-item {
        padding: var(--spacing-md);
    }

    /* Ensure footer is properly styled */
    footer {
        padding: var(--spacing-md) 0;
    }

    footer p {
        font-size: var(--font-size-sm);
    }

    /* Museum specific styles for small devices */
    .museum-item picture {
        height: 300px;
    }
}

/* Fix for very small devices (less than 375px) */
@media (max-width: 374.98px) {
    html {
        font-size: 13px;
    }

    h1 {
        font-size: calc(var(--font-size-4xl) * 1.4);
        /* Still large enough to be prominent */
    }

    .container {
        padding: var(--spacing-xs);
    }

    .image-placeholder {
        height: 150px;
    }

    /* Museum specific styles for tiny devices */
    .museum-item picture {
        height: 250px;
    }
}