/**
 * RESPONSIVE.CSS
 * Media queries et adaptations mobile-first
 * Breakpoints: 640px, 768px, 1024px, 1280px
 */

/* ============================================
   MOBILE FIRST (base)
   ============================================ */

/* Styles de base dans layout.css et components.css */

/* ============================================
   SMALL SCREENS (≥ 640px)
   ============================================ */

@media (min-width: 640px) {

    /* Hero */
    .hero__title {
        font-size: 3.5rem;
    }

    /* Cards */
    .grid--sm-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Forms */
    .form__row--2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }

    /* Filters */
    .filters__group {
        min-width: 120px;
    }
}

/* ============================================
   MEDIUM SCREENS (≥ 768px - Tablet)
   ============================================ */

@media (min-width: 768px) {

    /* Section spacing */
    .section {
        padding: var(--spacing-20) 0;
    }

    /* Typography */
    .hero__title {
        font-size: 4rem;
    }

    .section__title {
        font-size: 2.5rem;
    }

    /* Header */
    .header__toggle {
        display: none;
    }

    .header__menu {
        display: flex;
    }

    /* Stats */
    .stats__value {
        font-size: 3rem;
    }

    /* Property cards */
    .property-card__features {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Services */
    .service-card {
        padding: var(--spacing-10);
    }

    /* Testimonials */
    .testimonial-card {
        padding: var(--spacing-8);
    }

    /* Forms */
    .form__row--3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-4);
    }

    /* Filters */
    .filters__actions {
        margin-left: auto;
    }

    /* Footer */
    .footer__bottom {
        flex-direction: row;
    }
}

/* ============================================
   LARGE SCREENS (≥ 1024px - Desktop)
   ============================================ */

@media (min-width: 1024px) {

    /* Container */
    .container {
        padding: 0 var(--spacing-8);
    }

    /* Hero */
    .hero__title {
        font-size: 4.5rem;
    }

    .hero__description {
        font-size: 1.25rem;
    }

    /* Section title */
    .section__title {
        font-size: 3rem;
    }

    /* Stats */
    .stats__grid {
        gap: var(--spacing-12);
    }

    .stats__value {
        font-size: 3.5rem;
    }

    /* Grid layouts */
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

    /* Property cards */
    .property-card__content {
        padding: var(--spacing-6);
    }

    /* Services */
    .service-card__icon {
        width: 80px;
        height: 80px;
    }

    /* Forms */
    .form__row--4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-4);
    }
}

/* ============================================
   EXTRA LARGE SCREENS (≥ 1280px)
   ============================================ */

@media (min-width: 1280px) {

    /* Hero */
    .hero__title {
        font-size: 5rem;
    }

    /* Container max width */
    .container {
        max-width: var(--container-max-width);
    }

    /* Spacing */
    .section {
        padding: var(--spacing-24) 0;
    }
}

/* ============================================
   MOBILE SPECIFIC OVERRIDES
   ============================================ */

/* Hide mobile menu (visible via JS) */
@media (max-width: 767px) {

    .header__brand-meta {
        display: none;
    }

    .header__toggle {
        display: flex;
    }

    .header__menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        background-color: var(--color-bg-light);
        padding: var(--spacing-6);
        gap: var(--spacing-4);
        transform: translateX(100%);
        transition: transform var(--transition-base) var(--ease-out);
        box-shadow: var(--shadow-lg);
    }

    #language-switcher,
    .header .language-switcher,
    .header .comparator-badge {
        width: 100%;
        justify-content: center;
    }

    .header .language-switcher__trigger,
    .header .language-switcher__menu {
        width: 100%;
    }

    .header__menu--open {
        transform: translateX(0);
    }

    .header__link {
        width: 100%;
        padding: var(--spacing-3);
        font-size: var(--font-size-lg);
    }

    /* Hero mobile adjustments */
    .hero {
        min-height: auto;
        padding: var(--spacing-20) 0 var(--spacing-16);
    }

    .hero__title {
        font-size: 2.5rem;
    }

    .hero__description {
        font-size: 1.125rem;
    }

    /* Stats - stack vertically */
    .stats__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }

    /* Forms - stack all */
    .form__row--2,
    .form__row--3,
    .form__row--4 {
        grid-template-columns: 1fr;
    }

    /* Grid - single column */
    .grid--2,
    .grid--3,
    .grid--4,
    .grid--auto-fit {
        grid-template-columns: 1fr;
    }

    /* Filters - vertical stack */
    .filters {
        flex-direction: column;
    }

    .filters__group {
        min-width: 100%;
    }

    .filters__actions {
        width: 100%;
    }

    .filters__actions .btn {
        flex: 1;
    }

    /* Footer - stack columns */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--spacing-4);
        text-align: center;
    }

    /* Property cards */
    .property-card__actions {
        flex-direction: column;
    }

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

    /* Section spacing mobile */
    .section {
        padding: var(--spacing-12) 0;
    }

    .section__title {
        font-size: 2rem;
    }

    /* Toast notifications */
    .toast {
        left: var(--spacing-4);
        right: var(--spacing-4);
        bottom: var(--spacing-4);
    }

    /* Modal/Dialog full width */
    .modal {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }
}

/* ============================================
   TOUCH DEVICE SPECIFIC
   ============================================ */

@media (hover: none) and (pointer: coarse) {

    /* Disable hover effects on touch devices */
    .card:hover,
    .property-card:hover,
    .service-card:hover {
        transform: none;
    }

    /* Always show card actions on touch */
    .property-card__actions {
        opacity: 1;
        transform: translateY(0);
        position: static;
        margin-top: var(--spacing-4);
    }

    .property-card__overlay {
        display: none;
    }

    /* Larger tap targets */
    .btn,
    .header__link,
    .property-card__action {
        min-height: 44px;
        min-width: 44px;
    }

    /* Disable animations that don't work well with touch */
    .ripple:active::after {
        display: none;
    }
}

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

@media print {

    /* Hide non-essential elements */
    .header,
    .footer,
    .filters,
    .btn,
    .property-card__actions,
    .property-card__favorite,
    .toast {
        display: none !important;
    }

    /* Reset background and text colors */
    body,
    .section,
    .card,
    .property-card {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }

    /* Ensure text is readable */
    a[href]:after {
        content: " (" attr(href) ")";
    }

    /* Page breaks */
    .section {
        page-break-inside: avoid;
    }

    .property-card {
        page-break-inside: avoid;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
    }
}

/* ============================================
   LANDSCAPE ORIENTATIONS
   ============================================ */

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

    /* Reduce hero height on mobile landscape */
    .hero {
        min-height: auto;
        padding: var(--spacing-12) 0;
    }

    /* Compact stats */
    .stats__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-4);
    }

    .stats__value {
        font-size: 2rem;
    }
}