/**
 * Land Category & Archive Styles
 * Styles for land property displays, category pages, and archive
 *
 * @package JHG Theme
 * @version 1.0
 */

/* =============================================================================
   Property Card Styles
   ============================================================================= */

.property-card {
    @apply overflow-hidden transition-all duration-300 bg-gray-800 border border-gray-700 rounded-lg;
}

.property-card:hover {
    @apply shadow-xl border-lbyellow;
    box-shadow: 0 20px 25px -5px rgba(234, 179, 8, 0.1), 0 10px 10px -5px rgba(234, 179, 8, 0.04);
}

.property-card-link {
    @apply block h-full;
}

.property-image {
    @apply relative overflow-hidden;
    aspect-ratio: 16 / 9;
}

.property-image-img {
    @apply object-cover w-full h-full transition-transform duration-500;
}

.property-card:hover .property-image-img {
    @apply scale-110;
}

.property-overlay {
    @apply absolute inset-0 transition-opacity duration-300 opacity-0 bg-gradient-to-t from-black/60 via-transparent to-transparent;
}

.property-card:hover .property-overlay {
    @apply opacity-100;
}

.property-content {
    @apply p-5;
}

.property-title {
    @apply mb-3 text-lg font-bold text-white line-clamp-2;
}

.property-address {
    @apply flex items-start mb-3 text-sm text-gray-400;
}

.property-address i {
    @apply flex-shrink-0 mt-0.5 mr-2 text-lbyellow;
}

.property-address span {
    @apply line-clamp-2;
}

.property-footer {
    @apply flex items-center justify-between pt-4 mt-4 text-sm font-semibold border-t border-gray-700 text-lbyellow;
}

.property-card:hover .property-footer {
    @apply gap-2;
}

.property-link-text {
    @apply transition-all duration-300;
}

.property-footer i {
    @apply transition-transform duration-300;
}

.property-card:hover .property-footer i {
    @apply translate-x-1;
}

/* Category Badge Animations */
.property-card .absolute.top-4 {
    @apply transition-all duration-300;
}

.property-card:hover .absolute.top-4.left-4 {
    @apply scale-105;
}

.property-card:hover .absolute.top-4.right-4 {
    @apply scale-105;
}


/* =============================================================================
   Search Form Styles
   ============================================================================= */

.search-form {
    @apply relative;
}

.search-input-wrapper {
    @apply relative flex items-center gap-2 p-2 transition-all duration-300 bg-gray-800 border-2 border-gray-700 rounded-lg;
}

.search-input-wrapper:focus-within {
    @apply border-lbyellow;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
}

.search-icon {
    @apply flex-shrink-0 ml-3 text-xl text-gray-400;
}

.search-input {
    @apply flex-1 px-4 py-3 text-base text-white placeholder-gray-400 bg-transparent border-none outline-none;
}

.search-button {
    @apply flex items-center gap-2 px-6 py-3 text-sm font-semibold text-black transition-all duration-300 rounded-md bg-lbyellow hover:bg-yellow-500;
}

.search-button:hover {
    @apply scale-105;
}

.search-button-icon {
    @apply transition-transform duration-300;
}

.search-button:hover .search-button-icon {
    @apply translate-x-1;
}


/* =============================================================================
   Category Filter Styles
   ============================================================================= */

.category-filter-wrapper {
    @apply flex items-center justify-center;
}

.category-filter-wrapper .inline-flex {
    @apply flex-wrap items-center justify-center gap-2 p-2 bg-gray-800 rounded-lg;
}

.category-filter-wrapper a {
    @apply px-4 py-2 text-sm font-medium transition-all duration-300 rounded-md;
}

.category-filter-wrapper a:not(.active) {
    @apply text-gray-300 bg-gray-900 hover:bg-gray-700 hover:text-white;
}

.category-filter-wrapper a.active,
.category-filter-wrapper a[class*="bg-lbyellow"] {
    @apply font-bold text-black bg-lbyellow;
}


/* =============================================================================
   Pagination Styles
   ============================================================================= */

.pagination {
    @apply flex items-center justify-center gap-2;
}

.pagination .page-numbers {
    @apply px-4 py-2 text-sm font-medium text-gray-300 transition-all duration-300 bg-gray-800 border border-gray-700 rounded-md hover:bg-gray-700 hover:text-white hover:border-lbyellow;
}

.pagination .page-numbers.current {
    @apply text-black border-lbyellow bg-lbyellow;
}

.pagination .page-numbers.dots {
    @apply bg-transparent border-transparent hover:bg-transparent hover:border-transparent;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    @apply flex items-center justify-center;
}


/* =============================================================================
   Loading Animation
   ============================================================================= */

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}


/* =============================================================================
   Utility Classes
   ============================================================================= */

/* Line clamp utilities */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =============================================================================
   Responsive Styles
   ============================================================================= */

@media (max-width: 768px) {
    /* Property Cards - Mobile */
    .property-card {
        @apply text-sm;
    }

    .property-title {
        @apply text-base;
    }

    .property-content {
        @apply p-4;
    }

    /* Search Form - Mobile */
    .search-input-wrapper {
        @apply flex-col items-stretch gap-2;
    }

    .search-button {
        @apply justify-center w-full;
    }

    .search-icon {
        @apply ml-0;
    }

    /* Category Filter - Mobile */
    .category-filter-wrapper .inline-flex {
        @apply flex-col items-stretch w-full;
    }

    .category-filter-wrapper a {
        @apply justify-center text-center;
    }

    /* Pagination - Mobile */
    .pagination {
        @apply gap-1;
    }

    .pagination .page-numbers {
        @apply px-3 py-1.5 text-xs;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet adjustments */
    .property-card {
        @apply text-sm;
    }
}

@media (min-width: 1025px) {
    /* Desktop enhancements */
    .property-card {
        transform: translateY(-4px);
    }
}


/* =============================================================================
   Print Styles
   ============================================================================= */

@media print {
    .property-card {
        @apply break-inside-avoid;
        page-break-inside: avoid;
    }

    .search-form,
    .category-filter-wrapper,
    .pagination {
        display: none;
    }
}


/* =============================================================================
   Accessibility Enhancements
   ============================================================================= */

/* Focus visible styles */
.property-card-link:focus-visible {
    @apply outline-none ring-2 ring-lbyellow ring-offset-2 ring-offset-black;
}

.category-filter-wrapper a:focus-visible,
.pagination .page-numbers:focus-visible {
    @apply outline-none ring-2 ring-lbyellow ring-offset-2 ring-offset-gray-900;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .property-card,
    .property-image-img,
    .property-overlay,
    .property-footer i,
    .search-button,
    .search-button-icon,
    .category-filter-wrapper a,
    .pagination .page-numbers,
    .animate-spin {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .property-card {
        @apply border-2;
    }

    .property-card:hover {
        @apply border-4;
    }
}


/* =============================================================================
   Dark Mode (if implemented)
   ============================================================================= */

@media (prefers-color-scheme: dark) {
    /* Already optimized for dark mode */
    /* Add light mode overrides if needed */
}