/* Vender Page - Mediterranean Luxury Refined */

/* --- Hero Section --- */
.vender-hero {
    @apply relative h-[85vh] min-h-[700px] flex items-center justify-center text-center text-white overflow-hidden bg-med-navy;
}

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

.vender-hero-bg img {
    @apply w-full h-full object-cover transition-transform duration-[20s] ease-in-out;
}

.vender-hero-overlay {
    @apply absolute inset-0 bg-gradient-to-b from-med-navy/30 via-med-navy/10 to-med-navy/90 z-10;
}

.vender-hero-content {
    @apply max-w-5xl px-6 relative z-20 flex flex-col items-center;
}

.vender-hero-title {
    @apply font-serif text-4xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight drop-shadow-2xl animate-fade-up;
    text-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.vender-hero-subtitle {
    @apply text-xl md:text-2xl font-light text-white/90 max-w-3xl mx-auto mb-12 leading-relaxed drop-shadow-md animate-fade-up delay-1;
}

/* --- Intro Section (Story) --- */
.vender-intro {
    @apply py-32 bg-white overflow-hidden;
}

.vender-intro-grid {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-16 items-center;
}

.vender-intro-image {
    @apply relative rounded-[3rem] overflow-hidden shadow-2xl h-[600px] lg:order-1;
}

.vender-intro-image img {
    @apply w-full h-full object-cover transition-transform duration-700 hover:scale-105;
}

.vender-intro-content {
    @apply relative z-10 lg:-ml-24 bg-white/95 backdrop-blur-xl p-10 md:p-16 rounded-[2.5rem] shadow-premium border border-brand-100 lg:order-2;
}

.vender-highlight {
    @apply mt-8 p-6 border-l-4 border-gold-sand bg-brand-50 italic text-brand-700 font-serif text-lg rounded-r-xl;
}

/* --- Method Section (Cards) --- */
.vender-method {
    @apply py-32 bg-brand-50 relative;
}

.vender-method::before {
    content: '';
    @apply absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-brand-200 to-transparent;
}

.method-grid {
    @apply grid grid-cols-1 md:grid-cols-3 gap-8 mt-16;
}

.method-card {
    @apply bg-white p-10 rounded-[2.5rem] shadow-premium border border-brand-100 transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl flex flex-col items-center text-center h-full;
}

.method-icon {
    @apply w-20 h-20 bg-brand-50 rounded-2xl flex items-center justify-center text-3xl text-gold-sand mb-8 transition-all duration-500 shadow-inner;
}

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

.method-text {
    @apply text-brand-600 leading-relaxed text-sm;
}

/* --- International Section --- */
.vender-international {
    @apply py-32 bg-med-navy text-white text-center relative overflow-hidden;
}

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

.vender-international h2 {
    @apply font-serif text-4xl md:text-6xl mb-8 relative z-10 leading-tight;
}

.accent-text {
    @apply text-gold-sand italic;
}

/* --- Responsive Fixes --- */
@media (width < 1024px) {
    .vender-intro-content {
        @apply ml-0 -mt-10 mx-4;
    }
    
    .vender-intro-image {
        @apply h-[400px];
    }
}