/* ============================================
   OUR IDEALS PAGE - MOBILE OPTIMIZATION
   Card size, layout, and styling for mobile
   ============================================ */

.our-ideals-page .ideal-card.flipped .ideal-card-inner {
    transform: rotateY(180deg) !important;
}

@media (max-width: 768px) {
    /* Hero Section */
    .our-ideals-page .hero-slider {
        height: 280px !important;
        margin-bottom: 30px !important;
        background-attachment: scroll !important;
    }
    .our-ideals-page .hero-text h1 {
        font-size: 2rem !important;
    }
    .our-ideals-page .hero-text p {
        font-size: 1rem !important;
        padding: 12px 20px !important;
    }
    .our-ideals-page .hero-text .fa-om {
        font-size: 36px !important;
    }

    /* Intro Section - first section in main */
    .our-ideals-page .main-content .container > section:first-child {
        margin-bottom: 30px !important;
    }
    .our-ideals-page .main-content .container > section:first-child > div {
        padding: 30px 20px !important;
        margin-bottom: 30px !important;
    }
    .our-ideals-page .main-content .container > section:first-child div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .our-ideals-page .main-content .container > section:first-child h2 {
        font-size: 1.5rem !important;
    }
    .our-ideals-page .main-content .container > section:first-child p {
        font-size: 0.95rem !important;
    }
    .our-ideals-page .main-content .container > section:first-child p[style*="italic"] {
        font-size: 0.95rem !important;
    }

    /* Section Title (Ideals Grid header) */
    .our-ideals-page .container .text-center h2 {
        font-size: 1.6rem !important;
    }
    .our-ideals-page .container .text-center p {
        font-size: 0.95rem !important;
    }

    /* Ideals Grid */
    .our-ideals-page .ideals-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 24px !important;
        padding: 0 4px !important;
    }

    /* Ideal Card - Size & Style */
    .our-ideals-page .ideal-card {
        height: 380px !important;
        min-height: 380px !important;
        max-width: 100% !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    }
    .our-ideals-page .ideal-card:hover {
        transform: none !important;
    }

    /* Card Front - Image + Frame below (mobile) */
    .our-ideals-page .ideal-card-front > div {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    .our-ideals-page .ideal-card-front > div > img {
        flex: 1 !important;
        min-height: 0 !important;
        object-fit: cover !important;
    }
    .our-ideals-page .ideal-card-front > div > div {
        position: static !important;
        flex: none !important;
        background: linear-gradient(135deg, var(--primary-red), var(--accent-red)) !important;
        padding: 14px 16px !important;
        border-top: 3px solid rgba(255,255,255,0.3) !important;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1) !important;
    }
    .our-ideals-page .ideal-card-front h3 {
        color: white !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
    }
    .our-ideals-page .ideal-card-front > div > div::after {
        content: 'Read More ›' !important;
        display: block !important;
        color: rgba(255,255,255,0.95) !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
    }

    /* Card Back */
    .our-ideals-page .ideal-card-back {
        padding: 24px 20px !important;
    }
    .our-ideals-page .ideal-card-back > div:first-child i {
        font-size: 32px !important;
        margin-bottom: 12px !important;
    }
    .our-ideals-page .ideal-card-back h2 {
        font-size: 1.25rem !important;
        margin-bottom: 12px !important;
    }
    .our-ideals-page .ideal-card-back p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 480px) {
    /* Hero */
    .our-ideals-page .hero-slider {
        height: 240px !important;
        margin-bottom: 24px !important;
    }
    .our-ideals-page .hero-text h1 {
        font-size: 1.6rem !important;
    }
    .our-ideals-page .hero-text p {
        font-size: 0.9rem !important;
        padding: 10px 16px !important;
    }

    /* Intro */
    .our-ideals-page .main-content .container > section:first-child > div {
        padding: 24px 16px !important;
    }

    /* Container */
    .our-ideals-page .main-content .container {
        padding: 0 16px !important;
    }

    /* Ideals Grid */
    .our-ideals-page .ideals-grid {
        gap: 16px !important;
        margin-top: 20px !important;
    }

    /* Ideal Card - Compact for small phones */
    .our-ideals-page .ideal-card {
        height: 360px !important;
        min-height: 360px !important;
    }
    .our-ideals-page .ideal-card-back {
        padding: 20px 16px !important;
    }
    .our-ideals-page .ideal-card-back h2 {
        font-size: 1.15rem !important;
    }
    .our-ideals-page .ideal-card-back p {
        font-size: 0.85rem !important;
    }
}