/*
 * DREVENICE LIPTOV - Responsive Stylesheet
 * Mobile-first responsive design for all devices
 * Breakpoints: Mobile (<768px), Tablet (768-1024px), Desktop (>1024px)
 */

/* ========================================
   MOBILE STYLES (< 768px)
   ======================================== */

@media (max-width: 767px) {

    /* --- TYPOGRAPHY --- */

    :root {
        /* Smaller font sizes for mobile */
        --font-size-3xl: 2rem;           /* 32px instead of 42px */
        --font-size-2xl: 1.5rem;         /* 24px instead of 32px */
        --font-size-xl: 1.25rem;         /* 20px instead of 24px */
    }

    h1 {
        font-size: 2rem;                 /* 32px */
        line-height: 1.3;
    }

    h2 {
        font-size: 1.5rem;               /* 24px */
        line-height: 1.3;
    }

    h3 {
        font-size: 1.25rem;              /* 20px */
    }

    p {
        font-size: 1rem;                 /* 16px */
        margin-bottom: 1rem;
    }

    /* --- LAYOUT --- */

    .container {
        padding: 0 1rem;                 /* Tighter padding on mobile */
    }

    .section {
        padding: 3rem 0;                 /* Less vertical padding */
    }

    /* --- GRID SYSTEM --- */

    /* All grids become single column on mobile */
    .grid-2,
    .grid-3,
    .grid-4,
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Feature items - reduce icon size on mobile */
    .feature-icon {
        font-size: 3rem;                 /* 48px instead of 64px */
    }

    .feature-item {
        padding: 1.5rem 1rem;
    }

    /* --- HEADER & NAVIGATION --- */

    .header .container {
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
    }

    .logo-img {
        height: 50px;                    /* Smaller logo */
    }

    /* Schovaj celý <nav> element (nie len ul) — inak ostáva vo flex flow a posúva button */
    .header nav {
        display: none;
        width: 100%;
        order: 3;
    }

    .header nav.nav-open {
        display: block;
    }

    .nav-menu {
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin-top: 1rem;
        display: flex;
    }

    .nav-menu li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--color-gray-light);
    }

    .nav-menu a {
        display: block;
        padding: 1rem;
        width: 100%;
    }

    .nav-menu a.active {
        background-color: var(--color-light);
        color: var(--color-primary);
    }

    /* Mobile menu toggle button */
    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--color-dark);
        cursor: pointer;
        padding: 0.5rem;
        margin-left: auto;
    }

    /* --- HERO SECTION --- */

    .hero {
        height: 70vh;                    /* Shorter on mobile */
        min-height: 400px;
    }

    .hero h1 {
        font-size: 1.75rem;              /* 28px */
        margin-bottom: 1rem;
    }

    .hero .subtitle {
        font-size: 1rem;                 /* 16px */
        margin-bottom: 1.5rem;
    }

    .hero-content {
        padding: 1rem;
    }

    /* Carousel controls */
    .carousel-prev,
    .carousel-next {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .carousel-dots {
        bottom: 1rem;
    }

    /* --- BUTTONS --- */

    .btn {
        padding: 0.875rem 1.5rem;        /* Slightly smaller */
        font-size: 0.9375rem;            /* 15px */
    }

    .btn-large {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    /* Make CTA buttons full-width on mobile for easy tapping */
    .hero .btn,
    .cta-section .btn {
        width: 100%;
        max-width: 300px;
    }

    /* --- CARDS --- */

    .card {
        margin-bottom: 1.5rem;
    }

    .card-content {
        padding: 1rem;
    }

    .card-title {
        font-size: 1.25rem;
    }

    /* --- APARTMENT DETAIL PAGE --- */

    .apartment-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .apartment-price {
        margin-top: 1rem;
        width: 100%;
    }

    /* Gallery - 2 columns instead of 3 */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    /* Calendar */
    .fc {
        font-size: 0.875rem;
    }

    .fc .fc-toolbar {
        flex-direction: column;
        gap: 1rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1.125rem;
    }

    /* --- REVIEWS PAGE --- */

    .typewriter-container h1 {
        font-size: 1.75rem;
    }

    .typewriter {
        min-height: 2rem;
        font-size: 1rem;
    }

    /* --- CONTACT PAGE --- */

    .contact-info,
    .contact-form {
        padding: 1.5rem;
    }

    form input,
    form textarea {
        font-size: 1rem;                 /* Prevent zoom on iOS */
    }

    /* --- FOOTER --- */

    .footer {
        padding: 2rem 0;
    }

    .footer-content {
        grid-template-columns: 1fr;     /* Single column on mobile */
        gap: 2rem;
        text-align: center;
    }

    .footer-content > div {
        margin-bottom: 1.5rem;
    }

    .footer .grid-3,
    .footer .grid-4 {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .footer-column {
        margin-bottom: 1.5rem;
    }

    /* Center footer links on mobile */
    .footer ul {
        text-align: center;
    }

    .footer-bottom {
        font-size: 0.875rem;
        padding-top: 1rem;
    }

    /* --- BREADCRUMB --- */

    .breadcrumb {
        font-size: 0.875rem;
        padding: 0.75rem 0;
    }

    /* --- TABLES (if any) --- */

    table {
        font-size: 0.875rem;
    }

    /* --- AMENITIES LIST --- */

    .amenities-list {
        grid-template-columns: 1fr;
    }

    /* --- UTILITIES --- */

    .text-center-mobile {
        text-align: center;
    }

    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }
}

/* ========================================
   SMALL MOBILE STYLES (< 480px)
   Extra small screens
   ======================================== */

@media (max-width: 479px) {

    h1 {
        font-size: 1.5rem;               /* 24px */
    }

    h2 {
        font-size: 1.25rem;              /* 20px */
    }

    .container {
        padding: 0 0.75rem;
    }

    .logo-img {
        height: 40px;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    /* Gallery - single column on very small screens */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* ========================================
   TABLET STYLES (768px - 1024px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* --- TYPOGRAPHY --- */

    h1 {
        font-size: 2.25rem;              /* 36px */
    }

    h2 {
        font-size: 1.75rem;              /* 28px */
    }

    /* --- LAYOUT --- */

    .container {
        padding: 0 1.5rem;
    }

    .section {
        padding: 4rem 0;
    }

    /* --- GRID SYSTEM --- */

    /* 2-column grids stay as 2 columns */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 3-column grids become 2 columns */
    .grid-3,
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 4-column grids become 2 columns */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Feature items on tablet */
    .feature-icon {
        font-size: 3.5rem;               /* 56px */
    }

    /* --- HEADER & NAVIGATION --- */

    .logo-img {
        height: 55px;
    }

    .nav-menu {
        gap: 1.5rem;
    }

    .nav-menu a {
        font-size: 0.9375rem;            /* 15px */
    }

    /* --- HERO SECTION --- */

    .hero {
        height: 80vh;
    }

    .hero h1 {
        font-size: 2.25rem;              /* 36px */
    }

    .hero .subtitle {
        font-size: 1.125rem;             /* 18px */
    }

    /* --- GALLERY --- */

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* --- FOOTER --- */

    .footer-content {
        grid-template-columns: repeat(2, 1fr);   /* 2 columns on tablet */
        text-align: left;
    }

    .footer-content > div:last-child {
        grid-column: 1 / -1;                     /* Last div spans full width */
        text-align: center;
    }

    .footer .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   DESKTOP STYLES (> 1024px)
   Optimizations for large screens
   ======================================== */

@media (min-width: 1025px) {

    /* --- HOVER EFFECTS --- */

    .card:hover {
        transform: translateY(-8px);
    }

    .nav-menu a {
        position: relative;
    }

    .nav-menu a::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--color-primary);
        transition: width var(--transition-normal);
    }

    .nav-menu a:hover::after,
    .nav-menu a.active::after {
        width: 100%;
    }

    /* --- GALLERY --- */

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* --- UTILITIES --- */

    .hide-desktop {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }
}

/* ========================================
   LANDSCAPE MOBILE (Horizontal phones)
   ======================================== */

@media (max-width: 896px) and (orientation: landscape) {

    .hero {
        height: auto;
        min-height: 100vh;
        padding: 3rem 0;
    }

    .nav-menu {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {

    .header,
    .footer,
    .btn,
    .carousel-prev,
    .carousel-next,
    .carousel-dots {
        display: none !important;
    }

    .hero {
        height: auto;
        min-height: 0;
        page-break-after: always;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    h1 {
        font-size: 24pt;
    }

    h2 {
        font-size: 18pt;
    }

    a {
        text-decoration: underline;
        color: #000;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus states for keyboard navigation */
@media (min-width: 768px) {
    a:focus,
    button:focus,
    input:focus,
    textarea:focus {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #d65f2a;
        --color-dark: #000000;
        --color-gray: #333333;
    }

    .btn {
        border: 2px solid currentColor;
    }
}