/**
 * Wedding Site Landing Page - production design
 * Scoped with [data-design="4"] on the body (set in base.html).
 *
 * Design 4: Garden Swing (couple on floral swing)
 *
 * Candidate designs 1, 2, 3 and 5 were dropped on 2026-08-08;
 * the full pre-removal file is kept at
 * docs/archive/design-candidates/landing_designs.candidates.css
 */

/* ================================
   FONT IMPORTS
   ================================ */
/* Design 4: Garden Swing - fresh, romantic */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Dancing+Script:wght@500;600;700&display=swap');

/* ================================
   SHARED TRANSITION EFFECTS
   ================================ */
body[data-design] .landing-hero,
body[data-design] .landing-section,
body[data-design] .nav,
body[data-design] .footer {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================
   DESIGN 4: GARDEN SWING
   Fresh, romantic, nature-inspired
   Couple on floral swing
   ================================ */
body[data-design="4"] {
    --d4-coral: #ff8a80;
    --d4-coral-light: #ffcdd2;
    --d4-yellow: #ffd54f;
    --d4-yellow-light: #fff9c4;
    --d4-sky: #81d4fa;
    --d4-cream: #fffbf8;
    --d4-text: #5d4037;
    --d4-text-light: #8d6e63;

    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    background: var(--d4-cream);
}

body[data-design="4"] .nav {
    background: rgba(255, 251, 248, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--d4-coral-light);
}

body[data-design="4"] .nav-brand {
    font-family: 'Dancing Script', cursive;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--d4-coral);
}

body[data-design="4"] .lang-switcher a.active {
    background: var(--d4-coral);
}

body[data-design="4"] .landing-hero {
    position: relative;
    background: linear-gradient(180deg, var(--d4-cream) 0%, var(--d4-yellow-light) 50%, var(--d4-coral-light) 100%);
    border-radius: 0;
    margin-bottom: 0;
    padding: 4rem 2rem 6rem;
    overflow: hidden;
    min-height: 85vh;
    display: flex;
    align-items: center;
}

/* Swing couple illustration */
body[data-design="4"] .landing-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 5%;
    width: 320px;
    height: 400px;
    background-image: url('/static/images/swing_couple.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%);
    opacity: 0.95;
    filter: drop-shadow(0 8px 24px rgba(93, 64, 55, 0.15));
}

/* Butterfly accents */
body[data-design="4"] .landing-hero::after {
    content: '🦋';
    position: absolute;
    top: 25%;
    left: 12%;
    font-size: 1.5rem;
    animation: flutter 4s ease-in-out infinite;
}

@keyframes flutter {

    0%,
    100% {
        transform: translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

body[data-design="4"] .landing-hero-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
}

body[data-design="4"] .landing-headline {
    font-family: 'Dancing Script', cursive;
    font-size: clamp(2.8rem, 6vw, 4rem);
    font-weight: 600;
    color: var(--d4-text);
    line-height: 1.1;
}

body[data-design="4"] .landing-headline .text-accent {
    color: var(--d4-coral);
    display: block;
}

body[data-design="4"] .landing-subheadline {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--d4-text-light);
    line-height: 1.8;
}

body[data-design="4"] .btn-primary {
    background: linear-gradient(135deg, var(--d4-coral) 0%, #e57373 100%);
    border: none;
    color: #fff;
    padding: 1.1rem 2.5rem;
    border-radius: 50px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(255, 138, 128, 0.4);
    transition: all 0.3s ease;
}

body[data-design="4"] .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(255, 138, 128, 0.5);
}

body[data-design="4"] .btn-secondary {
    background: #fff;
    border: 2px solid var(--d4-coral-light);
    color: var(--d4-text);
    padding: 1.1rem 2.5rem;
    border-radius: 50px;
    font-weight: 500;
}

body[data-design="4"] .btn-secondary:hover {
    background: var(--d4-yellow-light);
}

body[data-design="4"] .landing-section {
    background: var(--d4-cream);
}

body[data-design="4"] .section-title {
    font-family: 'Dancing Script', cursive;
    font-weight: 600;
    color: var(--d4-text);
    font-size: 2.5rem;
}

body[data-design="4"] .step-card {
    background: #fff;
    border: 2px solid var(--d4-coral-light);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(255, 138, 128, 0.1);
}

body[data-design="4"] .step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(255, 138, 128, 0.15);
}

body[data-design="4"] .step-number {
    background: var(--d4-coral);
    font-family: 'Dancing Script', cursive;
    font-weight: 600;
    font-size: 1.4rem;
}

body[data-design="4"] .step-card h3 {
    font-family: 'Dancing Script', cursive;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--d4-text);
}

body[data-design="4"] .step-card p {
    color: var(--d4-text-light);
}

body[data-design="4"] .landing-pricing-section {
    background: linear-gradient(135deg, var(--d4-yellow-light) 0%, var(--d4-coral-light) 100%);
    border-radius: 0;
}

body[data-design="4"] .pricing-card {
    background: #fff;
    border: 3px solid var(--d4-coral);
    border-radius: 24px;
}

body[data-design="4"] .pricing-label {
    background: var(--d4-sky);
    color: #fff;
}

body[data-design="4"] .price-amount {
    font-family: 'Dancing Script', cursive;
    font-weight: 600;
    color: var(--d4-coral);
    font-size: 3.5rem;
}

body[data-design="4"] .pricing-features li {
    color: var(--d4-text);
    border-color: var(--d4-coral-light);
}

body[data-design="4"] .landing-cta-section {
    background: var(--d4-cream);
}

body[data-design="4"] .landing-cta-section h2 {
    font-family: 'Dancing Script', cursive;
    font-weight: 600;
    color: var(--d4-text);
}

body[data-design="4"] .landing-cta-section p {
    color: var(--d4-text-light);
}

body[data-design="4"] .footer {
    background: var(--d4-text);
}

/* ================================
   RESPONSIVE ADJUSTMENTS
   ================================ */
@media (max-width: 768px) {
    body[data-design="4"] .landing-hero::before {
        width: 220px;
        height: 280px;
        right: -30px;
        opacity: 0.5;
    }
}

@media (max-width: 480px) {
    body[data-design="4"] .landing-hero::before {
        opacity: 0.35;
    }
}


/* ================================
   HERO CTA PAIR
   ================================ */
/* The two hero buttons were bare siblings: on a phone they stacked flush
   against each other and each sized to its own label, so they read as one
   mis-aligned lump. Flex + gap fixes the spacing; on narrow screens they go
   full width so they match each other exactly. */
.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 16px);
    justify-content: center;
    align-items: stretch;
    margin-top: var(--space-5, 32px);
}

.landing-hero-actions .btn {
    flex: 0 1 auto;
    min-width: 220px;
    justify-content: center;
}

@media (max-width: 600px) {
    .landing-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .landing-hero-actions .btn {
        width: 100%;
        min-width: 0;
    }
}