/* Blog Page - Mediterranean Luxury */

.blog-hero {
    @apply relative h-[60vh] min-h-[400px] flex items-center justify-center text-center text-white overflow-hidden bg-med-navy;
}

.parallax-bg {
    @apply absolute inset-0 z-0;
}

.parallax-bg img {
    @apply w-full h-full object-cover;
}

.blog-hero-overlay {
    @apply absolute inset-0 bg-gradient-to-b from-med-navy/80 to-med-navy/40 z-10;
}

.blog-hero-content {
    @apply relative z-20;
}

.blog-hero h1 {
    @apply font-serif max-w-4xl px-6 leading-tight mb-6;
    font-size: clamp(2rem, 6vw, 3rem);
    text-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

@media (max-width: 767px) {
    .blog-hero h1 {
        @apply text-2xl;
    }
}

/* Blog List */
.blog-list-section {
    @apply py-24 bg-brand-50;
    background-image: 
        radial-gradient(var(--color-brand-200) 0.5px, transparent 0.5px),
        radial-gradient(var(--color-brand-200) 0.5px, var(--color-brand-50) 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.blog-grid {
    @apply grid gap-12;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.blog-card {
    @apply bg-white rounded-3xl overflow-hidden shadow-premium border border-brand-100 flex flex-col h-full transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl hover:border-gold-sand;
}

.blog-card-image {
    @apply relative aspect-[16/10] overflow-hidden;
}

.blog-card-image img {
    @apply w-full h-full object-cover transition-transform duration-1000;
}

.blog-card-badge {
    @apply absolute top-6 left-6 bg-gold-sand text-med-navy px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest shadow-lg z-10;
}

.blog-card-content {
    @apply p-8 flex-grow flex flex-col;
}

.blog-card-date {
    @apply flex items-center gap-3 text-brand-400 text-[10px] font-black uppercase tracking-widest mb-4;
}

.blog-card-date::before {
    content: '';
    @apply w-8 h-px bg-gold-sand;
}

.blog-card-title {
    @apply font-serif text-2xl text-med-navy font-bold leading-tight mb-4 transition-colors;
}

.blog-card:hover .blog-card-title {
    @apply text-gold-sand;
}

.blog-card-description {
    @apply text-brand-600 line-clamp-3 leading-relaxed mb-8;
}

.blog-card-link {
    @apply mt-auto flex items-center gap-3 text-med-navy font-black text-[10px] uppercase tracking-widest no-underline hover:text-gold-sand transition-colors;
}

/* Blog Post Content */
.blog-content {
    @apply max-w-[850px] mx-auto text-brand-800 leading-loose text-lg;
}

.blog-content h2 {
    @apply font-serif text-4xl text-med-navy mt-16 mb-8 relative pb-4;
}

.blog-content h2::after {
    content: '';
    @apply absolute bottom-0 left-0 w-16 h-1 bg-gold-sand;
}

.blog-content p { @apply mb-8; }

.blog-content img {
    @apply rounded-3xl shadow-2xl my-12;
}

.blog-content blockquote {

    @apply bg-brand-50 p-12 my-16 rounded-3xl font-serif italic text-2xl text-med-navy text-center border border-brand-100 relative;

}



/* Blog Post Page */

.blog-content-section {
    @apply py-24 bg-white relative z-10;
}

.blog-post-hero {

    @apply pt-40 pb-20 bg-med-navy text-white text-center relative overflow-hidden;

}



.blog-post-hero::before {

    content: '';

    @apply absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10;

}



.blog-post-header {

    @apply container-premium relative z-10;

}



.blog-post-meta {

    @apply flex items-center justify-center gap-6 mb-8 text-[10px] font-black uppercase tracking-[0.3em] text-gold-sand;

}



.blog-post-title {

    @apply font-serif text-4xl md:text-7xl leading-[1.1] max-w-5xl mx-auto;

}



.blog-post-featured-image {

    @apply container-premium -mt-20 mb-24 relative z-20;

}



.blog-post-featured-image .image-wrapper {

    @apply aspect-[21/9] rounded-[3rem] overflow-hidden shadow-2xl border-8 border-white bg-white;

}



.blog-post-featured-image img {

    @apply w-full h-full object-cover;

}



/* Suggested Properties */

.suggested-property-card {

    @apply bg-white rounded-3xl overflow-hidden shadow-premium border border-brand-100 transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl no-underline block;

}



.suggested-property-image {

    @apply relative aspect-[4/3] overflow-hidden;

}



.suggested-property-image img {

    @apply w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110;

}



.suggested-property-price {

    @apply absolute bottom-4 right-4 bg-med-navy/90 backdrop-blur-md text-white text-xs font-black px-4 py-2 rounded-lg;

}



.suggested-property-content {

    @apply p-6;

}



.suggested-property-title {

    @apply font-serif text-xl text-med-navy font-bold mb-2 truncate;

}



.suggested-property-location {

    @apply text-brand-400 text-[10px] font-black uppercase tracking-widest flex items-center gap-2;

}



/* Form status */

.form-status {

    @apply p-6 rounded-2xl text-sm font-bold text-center animate-fade-up;

}



.form-status.success {

    @apply bg-green-50 text-green-700 border border-green-100;

}



.form-status.error {

    @apply bg-red-50 text-red-700 border border-red-100;

}