/*
 * FjordPuls: Media Queries & Responsiveness
 * File: fjordpuls3.css
 * Description: Contains all media queries to ensure the site is fully
 * responsive and adapts gracefully to different screen sizes.
 */

/* -----------------------------------------
 * BASE ADAPTATIONS FOR LARGER SCREENS
 * ----------------------------------------- */

/* Medium screens and up (Tablets) */
@media (min-width: 768px) {
    /* Increase vertical padding for sections on larger screens */
    section {
        padding-top: 5rem; /* 80px */
        padding-bottom: 5rem; /* 80px */
    }

    /* Give hero text a bit more space */
    #home .hero-content {
        padding: 0 2rem;
    }
}

/* Large screens and up (Laptops/Desktops) */
@media (min-width: 1024px) {
    /* Slightly increase base font size for better readability on large monitors */
    html {
        font-size: 17px;
    }

    section {
        padding-top: 6rem; /* 96px */
        padding-bottom: 6rem; /* 96px */
    }

    /* Increase heading sizes */
    h1, .text-4xl {
        font-size: 3.5rem; /* ~56px */
        line-height: 1.1;
    }

    h2, .text-3xl {
        font-size: 2.5rem; /* ~40px */
        line-height: 1.2;
    }
}

/* Extra large screens and up */
@media (min-width: 1280px) {
     html {
        font-size: 18px;
    }
    
    h1, .text-4xl {
        font-size: 4.25rem; /* ~68px */
    }
}


/* -----------------------------------------
 * COMPONENT-SPECIFIC ADAPTATIONS
 * ----------------------------------------- */

/* About App Section - adjust image grid */
@media (max-width: 1023px) {
    #om-app .lg\:w-1\/2 { /* Target the two columns in the "About App" section */
        text-align: center;
    }

    #om-app ul {
        text-align: left;
        display: inline-block; /* Center the list block */
    }
}

/* Contact form layout */
@media (max-width: 767px) {
    /* On mobile, ensure the contact info and form stack cleanly */
    #kontakt .md\:grid-cols-2 {
        gap: 3rem; /* Increase gap for stacked layout */
    }
}

/* Policy Pages Layout */
@media (max-width: 767px) {
    .policy-container {
        padding: 1.5rem;
        margin: 1rem;
    }

    .policy-container h1 {
        font-size: 2rem; /* Adjust heading size for mobile */
    }
}


/* -----------------------------------------
 * HOVER BEHAVIOR ON TOUCH DEVICES
 * ----------------------------------------- */

/* Disable distracting hover effects on devices that don't support hover */
@media (hover: none) and (pointer: coarse) {
    .hotel-card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }
    
    .card-zoom-effect:hover img {
        transform: none;
    }

    .btn-primary:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }
}